PDA

View Full Version : CSS & Unordered Lists



rob_10304
Feb 18th, 2010, 11:29 PM
Hey everybody, i'm new so first of i would like to say hello. I've also done a bit of a search, but i've yielded no results. So don't bite my head off if i'm going over old ground, just point me in the right direction please :-)

I'm trying to style my HTML un-ordered list elements using CSS to achieve a result similar to the boxes at the bottom of the page of this site (the 'Visit the shop', 'read the story' & 'read the news' sections -

http://www.viasnella.com/

I've checked the page source code and the layout for the bottom page area is done as follows -

<div id="layout-left" >

<ul id="frontgallery" class="clearfix">
<li id="visittheshop">
<h2><a href="/collections/Everything">Visit the shop</a></h2>
<a href="/collections/Everything"><img class="focusimage" src="http://cdn.shopify.com/s/files/1/0032/0302/assets/visittheshop.jpg?1266433863" alt="Visit shop" /></a>
<p>From their first-quality fabrics to their detail-wise patterns, all Via Snella garments breathe this "feel-good" wearable fashion that combines traditional tailoring with innovative details, shapes and cuts.</p>
<a href="/collections/Everything">Vist the Shop &raquo;</a>
</li>

<li id="readthestory">
<h2><a href="/pages/about-us">Read the story</a></h2>
<a href="/pages/about-us"><img class="focusimage" src="http://cdn.shopify.com/s/files/1/0032/0302/assets/readthestory.jpg?1266433863" alt="Read the Story" /></a>
<p>It is all about straying from the cut path. And it is about conveying manliness. Not trendy manliness. Just plain manliness unburdened from narrow mindedness and shallow aesthetic constraints.</p>
<a href="/pages/about-us">Read the Story &raquo;</a>
</li>

<li id="readthenews">
<h2><a href="/blogs/news">Read the News</a></h2>
<a href="/blogs/news"><img class="focusimage" src="http://cdn.shopify.com/s/files/1/0032/0302/assets/readthenews.jpg?1266433863" alt="Read the News" /></a>
<p>We continue our effort to build the contemporary male uniform with casual elegance and charming authenticity. Follow our endeavor to create menswear that is made to last forever.</p>
<a href="/blogs/news">Read the News &raquo;</a>
</li>
</ul>



I'm stuck with the CSS styling element of it. Obviously i can layout lists in a basic fashion, but without seeing the stylesheet that relates to this code, i dont know how to stack the 'h2', 'img' and 'p' elements so they appear as a block as they have. Any ideas or suggestions??

Thankyou in advance

Excavator
Feb 19th, 2010, 12:40 AM
Hello rob_10304,
How are you viewing this viasnella.com's code?

but without seeing the stylesheet that relates to this code, i dont know how to stack the 'h2', 'img' and 'p' elements so they appear as a block as they have. Any ideas or suggestions??
There is no reason you can't view the CSS. Use Developer Tools (http://msdn.microsoft.com/en-us/library/dd565628(VS.85).aspx) for IE (built in to IE8) or, even better, FireBug (http://getfirebug.com/) for Firefox.

Even without those, you could just put the path to the CSS in your browser and it would open in your default editor. View Source in your browser will show you the path.

rob_10304
Feb 19th, 2010, 12:49 AM
Ah i seeee!

Lol, sorry. Like i said, i'm new.

But thank you for your suggestions and help.