News Feed / Layout

[rvicary]

Hi,

I was wondering if anyone has any alternative to a flash news reader i currently have on our site? (www.paulsallisracing.com/news).

I need it to be IOS friendly as we do receive a large amount of hits via mobile devices.

Not adverse to just having a plain html with some nice css styling to display the news articles, but i’m struggling to find anthing suitable?

Any suggestions are very welcome.

Thanks in advance.

Rich

[rvicary]

Anyone?

[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.

[Staggers]

The above version of code put into a JS Fiddle for your viewing pleasure.

http://jsfiddle.net/7cz7b/

[rvicary]

Thank you for posting this, will have a good look at this tonight…

Much appreciated.

[Staggers]

No problem, had it floating on my hard drive for a while now.

[rvicary]

Thanks again, started to have a play about and can definitely use this….

Just wondering, and looking at this page as an example, do you know if something like this can be done via CSS or will it need a PHP script ?

http://www.gobata.co.uk/news–comment.html

Need soemthing very similar to this ideally.

Thanks again.

[Staggers]

I don’t understand what you mean by “something like this”, are you talking about the blog format?

Something like that can be done quite simply using any blog software out there.

[rvicary]

I want to achieve something similar to this news page.

ie, a news article that you can then expand etc.

Would this be classed as a blog page? Can you recommend any software for this?

Thanks

[Author]

Posts