homepage Welcome to WebmasterWorld Guest from 54.167.177.180
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Newbie Question - Why doesnt this HTML code display right?
Trying to use float: left in <ul> but shows rows diagonally.
brand404



 
Msg#: 4156279 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4156279 posted 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#: 4156279 posted 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved