Welcome to WebmasterWorld Guest from 54.224.137.45

Forum Moderators: incrediBILL

Message Too Old, No Replies

Newbie Question - Why doesnt this HTML code display right?

Trying to use float: left in <ul> but shows rows diagonally.

     
9:10 pm on Jun 21, 2010 (gmt 0)

New User

5+ Year Member

joined:Feb 11, 2010
posts:14
votes: 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:


11:15 pm on June 21, 2010 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 986
votes: 30


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
10:06 am on Aug 4, 2010 (gmt 0)

New User

5+ Year Member

joined:May 27, 2010
posts:13
votes: 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.