...

View Full Version : UL vs DL,whats best here



sixrfan
11-28-2009, 10:42 PM
what's the best way to go about building the middle section of this page (see attached)?

for each product i need a heading link that's hyperlink, an image hyperlink right below it, then a list of a few bullet points about the product.

aaaa
11-28-2009, 11:26 PM
Floating divs.

Eg:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>

<div style="background-color:#000;color:#fff;width:1024px;">

<div style="width:500px;float:left;">
<p>Product 1</p>
<img src="" style="width:250px;height:250px;" alt="Piccy" /><br />
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>

<div style="width:500px;float:left;">
<p>Product 2</p>
<img src="" style="width:250px;height:250px;" alt="Piccy" /><br />
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>

<div style="width:500px;float:left;">
<p>Product 3</p>
<img src="" style="width:250px;height:250px;" alt="Piccy" /><br />
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>

<div style="width:500px;float:left;">
<p>Product 4</p>
<img src="" style="width:250px;height:250px;" alt="Piccy" /><br />
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
<br style="clear: both;" />
</div>
</body>
</html>



Note: I did this very quickly, you'll need to tweak it quite a bit

Apostropartheid
11-28-2009, 11:55 PM
There is a semantical argument for using an OL to structure that, and you'd only be helping yourself.

@aaa The headings, well, they should be...headings. Not paragraphs. People often forget this. There's no need for the line break, either.

OT: Why are you using Windows-1250 as a charset?

aaaa
11-29-2009, 12:34 AM
Because it's the default in PSPad editor.

Apostropartheid
11-29-2009, 09:48 PM
It's really not appropriate for today's world. I highly suggest you adopt UTF-8 or ISO 8859-1, at least, which is in the same family of character sets.

sixrfan
11-30-2009, 04:25 AM
thanks aaaa. i've implemented your suggested setup and i'm making a lot of progress. here's the current page (http://www.shirtsaboutnothing.com/new_index.html):

however, i'm not sure why the product sections are NOT lining up like so:
Product 1 Product 2
Product 3 Product 4

the content div that they reside in has a width of 700px, and each of these products sections (highlighted in yellow) have widths of 340px.

here's the relevant code:


<h1 align="center">Index Page Heading Will Go Here</h1>
<div class="thumb">
<p>Product 1 </p>
<img src="pics/sample.jpg" width="225" height="176" /><br />
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>

<div class="thumb">
<p>Product 2 </p>
<img src="pics/sample.jpg" /><br />
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>

<div class="thumb">
<p>Product 3 </p>
<img src="pics/sample.jpg" /><br />
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>

<div class="thumb">
<p>Product 4 </p>
<img src="pics/sample.jpg" /><br />
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>




.thumb {
width: 340px;
float: left;
text-align: center;
background-color: #FFFF00;
border: 1px solid #00FF00;
}
.thumb img {
width: 225px;
height: 176px;
}


please advise. thanks!!!

Apostropartheid
11-30-2009, 05:40 PM
It has something to do with #left_nav. If I delete that element, it lines up properly.

Excavator
11-30-2009, 09:29 PM
however, i'm not sure why the product sections are NOT lining up like so:
Product 1 Product 2
Product 3 Product 4

the content div that they reside in has a width of 700px, and each of these products sections (highlighted in yellow) have widths of 340px.

You need to margin that containing div over the width of you floated div.
Try making the CSS for #content look ike this -

#content {
margin: 0 0 0 200px;
padding: 0px;
width: 700px;
}

sixrfan
11-30-2009, 10:15 PM
thanks. you nailed it!

Excavator
12-01-2009, 01:14 AM
thanks. you nailed it!

Right on, glad to help. Have you looked at it in IE6? That browser is famous for messing up very simple floated layouts. If you've somehow invoked a bug and you want your site to work in that early of a browser, this page may help - http://www.positioniseverything.net/explorer.html

If you're not so worried about that browser, I've started putting this in the webpages I write that are not hacked to work in IE6:

<!--[if lt IE 7]>
<div id="ie6Warning">
<h2>Time to upgrade your browser</h2>
<p>
If you're reading this, you're surfing using Internet Explorer 6, an eight-year-old browser that
cannot cope with the demands of the modern internet. For the best web experience, it is strongly recommended
you upgrade to <a href="http://www.getfirefox.com/">Firefox</a>, <a href="http://www.opera.com/">Opera</a>,
<a href="http://www.apple.com/safari/">Safari</a>, <a href="http://www.google.com/chrome">Google Chrome</a>,
or a more recent version of <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet
Explorer</a>. The layout of this site is designed to work with those browsers.
</p>
</div>
<![endif]-->
and the CSS -

#ie6Warning {
width: 800px;
margin: 0 auto;
padding: 10px 100px;
background: #fff;
color: #000;
}

LE1
12-01-2009, 11:56 AM
Excavator,

what a good fix for IE6 users. If more websites used this people would have to upgrade.
And save us all a headache.....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum