Re: News Feed / Layout

[Staggers]

Prepare yourself, this is a lot of code.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



















Website


Home





article1


blah blah blah


article2


blah blah blah


article3


blah blah blah


article4


blah blah blah


article5


blah blah blah

And for the css ->

body {

margin: 0;

font-family: Helvetica;

background: #FFFFFF;

color: #000000;

overflow: hidden;

-webkit-text-size-adjust: none;

}



body > h1 {

box-sizing: border-box;

margin: 0;

padding: 10px;

line-height: 20px;

font-size: 20px;

font-weight: bold;

text-align: center;

text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;

text-overflow: ellipsis;

color: #FFFFFF;

background: url(iPhoneToolbar.png) #6d84a2 repeat-x;

border-bottom: 1px solid #2d3642;

}



.button {

position: absolute;

top: 8px;

right: 6px;

-webkit-border-image: url(iPhoneButton.png) 0 5 0 5;

-webkit-border-radius: 0;

border-width: 0 5px 0 5px;

padding: 0;

height: 28px;

line-height: 28px;

font-size: 12px;

font-weight: bold;

color: #FFFFFF;

text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;

text-decoration: none;

background: none;

}



#homeButton {

display: none;

left: 6px;

right: auto;

-webkit-border-image: url(iPhoneBackButton.png) 0 8 0 14;

border-width: 0 8px 0 14px;

}



.goButton {

-webkit-border-image: url(iPhoneGoButton.png) 0 5 0 5;

border-width: 0 5px;

}



body > div,

body > form,

body > ul {

display: none;

position: absolute;

left: 0;

top: 41px;

width: 100%;

min-height: 418px;

margin: 0;

padding: 0;

}



body > *[selected="true"] {

display: block;

}



body > ul > li {

margin: 0;

border-bottom: 1px solid #E0E0E0;

padding: 0;

background: url(iPhoneArrow.png) no-repeat right center;

font-size: 20px;

font-weight: bold;

list-style: none;

}



body > ul > li > a {

display: block;

padding: 8px 32px 8px 8px;

text-decoration: none;

color: inherit;

}



.panel {

box-sizing: border-box;

padding: 10px;

background: #c8c8c8 url(pinstripes.png);

}



.subtxt {

font-size: small;

font-weight: normal;

}

The images are optional, it works without them.
Since I can’t upload zips here you’ll have to wait, make do, or find your own till I can upload them somewhere.