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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Louisville, KY
    Posts
    279
    Thanks
    0
    Thanked 0 Times in 0 Posts

    div tags inside a tags

    I only have 1 error in the code of my web site. I'm usually not a huge stickler about gettting everything perfectly validated (especially if I feel like I have a good reason to go against the rules), but if I'm so close I may as well see if there is a fix. I have a <div> tag inside of an <a> tag because I want the whole <div> to link back to the home page. The validator doesn't like this because the <div> is a block element, and <a> is an inline element. Should I just change the <div> to a <span> or is there a better fix?

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Depends... what's in the div?

    You could always make the link a block element (display: block), then give it width and height if it's a purely visual thing. Post your code, or better yet, a link to the site, and we can take a look at it.

  • #3
    New to the CF scene
    Join Date
    May 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    please post the code and we will try to figure out the problem.

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    e.g. (css)

    Code:
    a {
    display: block;
    height: 100%;
    }
    There's no need for a width attribute as, by default, a block element will expand to fill the available width of its parent/containing element.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why?

    I'd love to hear the reason why you want an entire div inside a link... What's it supposed to contain?
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could use span with display block for it instead of div's.
    CATdude about IE6: "All your box-model are belong to us"

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Louisville, KY
    Posts
    279
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's on the index page of designsbychris.com. Actually, every page of the site.

    Code:
     <a class="header" href="index.html?style=style">
     <div id="header">
      <span class="heading">
       <span class="designsby">Designs by</span>
       <span class="chris">Chris</span>
      </span>
    
     </div>
     </a>
    I made a style-switcher, and I'd like to replace the text "designsbyCHRIS" with an image in some of the styles, and this image should link back to the index page. It all works fine, but validators don't like than a <div> is inside of an <a>.

    I'll probably just change it to a <span>. That seems to be the easiest thing to do. Thanks for the input.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Then why not do what the others have been telling you, make an image and use a link on the image and have the link display block, that whole div will be clickable and you will be able to change the text rather easily using an image.

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Louisville, KY
    Posts
    279
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem isn't with making it look and work right. It looks and works great. The problem is with validation. <div> tags do not go within <a> tags. The best solution it seems would be to use <span> tags instead, as mrruben5 said. Thanks for your help.


  •  

    Posting Permissions

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