homepage Welcome to WebmasterWorld Guest from 50.17.79.35
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
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: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.

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