...

View Full Version : giving border to <a> element



chaits
01-27-2007, 01:15 PM
Hey folks , i am having a trouble of giving border to the <a> element when its
of 2 lines...

here is the html-
<div id="tour-body">
<div id="tour-body-heading">
<div><a href="#">Description & Photo Gallery</a></div>
<div><a href="#">Itinerary & Logistics</a></div>
<div><a href="#">Pricing & Travel Dates</a></div>
<div><a href="#">Meals & Accomodations</a></div>
<div><a href="#">Tour Provider FAQs</a></div>
<div><a href="#">Traveler Reviews(114)</a></div>
</div>
<div id="tour-photos">
</div>
<div id="tour-highlights">
</div>
<div id="tour-body-description">
</div>
</div>
</div>

and here is the css-
#tour-body {
clear: both;
float: left;
padding: 0px 0 0 0;
width: 700px
border: 1px solid #cccccc;
}

#tour-body-heading {
width: 700px;
height: 50px;
background: #cccccc;
}

#tour-body-heading a {
border-top: 1px solid #000000;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
}

#tour-body-heading div{
width: 100px;
float: left;
background: #cccccc;
text-align: center;
padding: 2px;
margin: 0 2px 0 2px;
}

i have attached an image also as to how exactly do i want...
please help me out...

Thanks in advance.....

Nightfire
01-27-2007, 01:26 PM
Wow. You like using your div's huh.

You could just do the code like



<div id="tour-body">
<ul id="tour-body-heading">
<li><a href="#">Description & Photo Gallery</a></li>
<li><a href="#">Itinerary & Logistics</a></li>
<li><a href="#">Pricing & Travel Dates</a></li>
<li><a href="#">Meals & Accomodations</a></li>
<li><a href="#">Tour Provider FAQs</a></li>
<li><a href="#">Traveler Reviews(114)</a></li>
</ul>
<div id="tour-photos">
</div>
<div id="tour-highlights">
</div>
<div id="tour-body-description">
</div>
</div>


#tour-body-heading li{
display:inline;
padding:7px;
border-top:1px solid #000000;
border-left:1px solid #e6e6e6;
border-right:1px solid #e6e6e6;
}

Afterall, the links are a list.

But as to answer your original question, I don't understand what you're wanting

chaits
01-27-2007, 02:05 PM
Hey thanks for the reply..
But my question was how do i get border around the <a> and not around <li>????
coz wen u do a:hover the background color should be like the one in the image...

I Hope i am a bit clear now..if not then do let me know..

Thanks again...:)

Arbitrator
01-27-2007, 09:37 PM
Iím guessing that you want a border around the anchor as if it were a box instead of having the border around the line boxes. Try setting display: block on the anchor elements.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum