Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question giving border to <a> element

    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.....
    Attached Thumbnails Attached Thumbnails giving border to &lt;a&gt; element-titles.gif  

  • #2
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    Wow. You like using your div's huh.

    You could just do the code like

    Code:
    <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

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hey thanks but

    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...

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •