HTML Help

webby09 · Joined: 02 Jul 2009 Posts: 8

Hello there, it maybe a simple problem but I am having trouble with the line height among the linking words in the left frame of my homepage. Like, the line height among the linking words is too wide, I just want to make them way narrower line 1 or 2 lines down and so on. Could anyone help me on this please?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" title="style1" />
<BODY background="img/BG_2.gif">
<div id="left"><img src="img/Left_top_7.gif" alt="left" /></div>
<p><a href="home.html" target="right">Home</a></p>
<p><a href="about.html" target="right">About us</a></p>
<p><a href="sold.html" target="right">Market Updates</a></p>
<p><a href="sold.html" target="right">Featured Properties</a></p>
<p><a href="sold.html" target="right">Sold</a></p>
<p><a href="sold.html" target="right">New Project</a></p>
<p><a href="sold.html" target="right">Community Links</a></p>
<p><a href="sold.html" target="right">Contact us</a></p>

</body>
</html>

Here is the CSS codes

Code:
div#left{
margin-top: -165px;
margin-left: 70px;
width: 80px;
height:50px;
}

p{
margin-top:140px;
margin-left: 90px;
line-height:2pt;
}

a {
text-decoration: none;
font-size:16px;
color:#FFFFFF;
font-weight:bold;
}

sticks464 · Joined: 31 Dec 2006 Posts: 2311

You probably have not removed the default padding and margins from the browsers so you are getting extra space. Remove the links from the p tags so default paragraph padding and margins are not applied, put them inside a div then style the links by themselves. Set a width (of the longest link text) on the div if need be to prevent word wrapping, or set a width on the a link.

Code:
<div id="menu">
<a href="home.html" target="right">Home</a>
<a href="about.html" target="right">About us</a>
<a href="sold.html" target="right">Market Updates</a>
<a href="sold.html" target="right">Featured Properties</a>
<a href="sold.html" target="right">Sold</a>
<a href="sold.html" target="right">New Project</a>
<a href="sold.html" target="right">Community Links</a>
<a href="sold.html" target="right">Contact us</a>
</div>

css
Code: #menu {
margin-top:140px;
margin-left: 90px;
}

#menu a {
text-decoration: none;
font-size:16px;
color:#FFFFFF;
font-weight:bold;
margin-bottom:16px;/*adjust for space between links*/
}

#menu a:hover {
color:#000000;/*set color for hover*/
}

webby09 · Joined: 02 Jul 2009 Posts: 8

Hey, its you who helped me b4 with tables right? Thanks again for the help I think I get it now by your clear explanation(i guess maybe this question was better asked than the previous one, LOL). I just gotta try fixing the codes, lol :D

sticks464 · Joined: 31 Dec 2006 Posts: 2311

Your welcome. However I don't think you are better off using frames. If you don't have a pretty good grasp on css then frames will be frustrating also since the content still relies on styling. But will be glad to help regardless of how you choose to design.

Johny112 · Joined: 19 Jul 2009 Posts: 2

Hi guys, this is the best thread I have ever known.

devis comparatif assurance voiture - Comparatif assurance voiture. Devis immédiat. Bas prix et adaptée. Devis assurance voiture.