| Newbie Question - Why doesnt this HTML code display right?
Trying to use float: left in <ul> but shows rows diagonally. |
brand404
msg:4156281 | 9:10 pm on Jun 21, 2010 (gmt 0) |
I am trying to display these 4 rows one on top of the other but when i use the "float: left" style (so i can make the accompanying text aligned to the top beside each row's picture) it makes subsequent rows line up in a diagonal pattern...I want it to show in a clean single column.
Here is the code:
<html>
<body>
<ul class="more_stories">
<li><a href="http://link1" title="Row 1"><span style="float:left; margin-right:10px"><img src="http://tinyurl.com/32cdvz5"></span><span style="line-height: normal;"><strong>Row 1</strong></span></a></li>
<li><a href="http://link2" title="Row 2"><span style="float:left; margin-right:10px"><img src=http://tinyurl.com/32cdvz5"></span><span style="line-height: normal;"><strong>Row 2</strong></span></a></li>
<li><a href="http://link3" title="Row 3"><span style="float:left; margin-right:10px"><img src="http://tinyurl.com/32cdvz5"></span><span style="line-height: normal;"><strong>Row 3</strong></span></a></li>
<li><a href="http://link4" title="Row 4"><span style="float:left; margin-right:10px"><img src="http://tinyurl.com/32cdvz5"></span><span style="line-height: normal;"><strong>Row 4</strong></span></a></li>
<li><a href="http://link5" title="Row 5"><span style="float:left; margin-right:10px"><img src="http://tinyurl.com/32cdvz5"></span><span style="line-height: normal;"><strong>Row 5</strong></span></a></li>
</ul>
</body>
</html>
|
birdbrain
msg:4156337 | 11:15 pm on Jun 21, 2010 (gmt 0) |
Hi there brand404,
here is your code, simplified somewhat...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>untitled document</title>
<style type="text/css">
#more_stories {
width:90px;
padding:0;
margin:0 auto;
list-style-type:none;
}
#more_stories li{
float:left;
width:80px;
margin-left:10px;
}
#more_stories a {
display:block;
line-height:32px;
padding-left:42px;
background-image:url(http://tinyurl.com/32cdvz5);
background-repeat:no-repeat;
font-family:arial,sans-serif;
font-size:12px;
font-weight:bold;
color:#000;
text-decoration:none;
}
</style>
</head>
<body>
<ul id="more_stories">
<li><a href="http://link1" title="Row 1">Row 1</a></li>
<li><a href="http://link2" title="Row 2">Row 2</a></li>
<li><a href="http://link3" title="Row 3">Row 3</a></li>
<li><a href="http://link4" title="Row 4">Row 4</a></li>
<li><a href="http://link5" title="Row 5">Row 5</a></li>
</ul>
</body>
</html>
|
|
birdbrain
|
SEO_Shruti
msg:4181706 | 10:06 am on Aug 4, 2010 (gmt 0) |
As birdbrain suggested you the code with Internal CSS. You can also call the css from an external file. It decreases page size and also reduce page load time.
|
|
|
