homepage Welcome to WebmasterWorld Guest from 54.235.36.164
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved