Question

I am trying to build a web page, using html and css code. I am trying to write 5 links on my header area from up to down. I am using “dt” and “dl” and then “a” tag for linking. But the problem is the 5 links take more place then the background 5 fixed graphics. I have used fixed height to solve this, but it doesn’t work when i using “a” tag, otherwise i can place them it required position. My codes are given below.

    <div id="header">
    <div id="link">
        <dl><dt> <a href="#">Home</a> </dt></dl>
        <dl><dt> <a href="#">Support</a> </dt></dl>
        <dl><dt> <a href="#">Services</a> </dt></dl>
        <dl><dt> <a href="#">About Us</a> </dt></dl>
        <dl><dt> <a href="#">Contacts</a> </dt></dl>
        <dl><dt> <a href="#">FAQ</a> </dt></dl>
    </div>
</div>    

css code

#header {
margin:0 auto;
width:780px;
height:275px;
background:url(images/header.jpg) no-repeat;
}

#link {
padding:75px 0 0 0px;
width:780px;
height:275px;
}

#link dl dt a {
margin:0px 0 0 575px;
font:arial;
font-size:13px;
font-weight:normal;
color:#000000;
font-style:italic;
}

Answer 1

You’re declaring the same height on your #link id as your #header id plus a top padding of 75px so 275+75 = 350px, adjust your height on that id or remove it all together and you should be all set.