Welcome to WebmasterWorld Guest from 54.145.213.148

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: 982
votes: 29


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members