Text only | Text with Images

Dead Men Walking

dMw Chit Chat => The Beer Bar => Technology Section => Topic started by: Gorion on March 26, 2011, 05:44:42 PM

Title: XHTML troubles
Post by: Gorion on March 26, 2011, 05:44:42 PM
Righty, I have a bit of a problem with xhtml and the w3c validator.

Context:  Menu bar with an image linking to a page.  Image has normal/hover/active variants and uses z-index in order to switch between the images/buttons.  All the stuff is located in an external .css file.

So, this is the actual coding:

Quote


             

  •                

                


      



This is the error:

Quote"document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag"


Putting the anchor/link inside the div solves the error, but removes the "linking" from the button - making it useless.

Like so:

Quote


          

  •                

                
    •    

      




Does anyone have an idea how to solve the "error" while still leaving the button working properly?
Title: XHTML troubles
Post by: ArithonUK on March 26, 2011, 06:00:13 PM
I can't remember the exact rule, but basically you can't have a DIV inside an anchor.

I had this problem and used instead of
.

Quote







So the CSS might read...

Quotediv.menu { ... }
div.menu span.home-button {...}
div.menu span.forum-button {...}

etc.

Hope that makes sense and works for what you want.
Title: XHTML troubles
Post by: Gorion on March 26, 2011, 06:19:27 PM
Gave it a go, but the moment I change div to span; the button vanishes (never used span before).

Here's the menu and button css just in case they do a difference.


Quote#menu
{
   background-color:#330A06;
   margin:auto;
   clear:both;
   height:30px;
   width:935px;
   padding-top:5px;
}

#Home_button
{
   background-image:url("buttons/home_yellow.png");
   background-repeat:no-repeat;
   width:105px;
   height:45px;
   z-index:1;
}

#Home_button:hover
{
   background-image:url("buttons/home_white.png");
   background-repeat:no-repeat;
   width:105px;
   height:45px;
   z-index:1;   
}

#Home_button:active
{
   background-image:url("buttons/home_black.png");
   background-repeat:no-repeat;
   width:105px;
   height:45px;
   z-index:1;
}
Title: XHTML troubles
Post by: Dewey on March 26, 2011, 07:44:07 PM
Try using a .class instead of a div.
Title: XHTML troubles
Post by: A Twig on March 30, 2011, 05:11:03 PM
Best explanation I found is here, I have unashamedly copied it below:
http://stackoverflow.com/questions/3722528/xhtml-placing-divs-in-a-tags
Code Select
Is it alright to place div tags inside anchor tags?

Yes, if:

You are using HTML5/XHTML5; and
The anchor tag is not in an inline context. i.e. a descendant of an element that only allows phrasing content.
Otherwise no.

In HTML5/XHTML5 the <a> element in not simply an inline element as it is in HTML4/XHTML1. Instead it has a transparent content model, which means that the validation rules are the same as if it wasn't there.

So for example

<div>
   <div>Hello World</div>
</div>
is valid, so

<div>
   <a href=#&quot;>
      <div>Hello World</div>
   </a>
</div>
is too.

But

<p>
   <div>Hello World</div>
</p>
is not valid, so

<p>
   <a href=&quot;#&quot;>
      <div>Hello World</div>
   </a>
</p>
isn't either.


For the site I built I used this:
Code Select








You may need to add display:block to the css though, can't remember if I did. The site I built using this layout can be seen [URL="http://www.bathstudent.com/summerball2011/home/]here[/URL] if that helps
Title: XHTML troubles
Post by: Gorion on March 30, 2011, 06:12:40 PM
Unfortunately I'm bound to xhtml1.0 (has to pass the verification).  I uploaded the button, html and .css in question.  If anyone can solve this problem I'll be grateful.  New to directly coding css and xhtml myself; this bloody button is driving me insane.

Title: Solution
Post by: ArithonUK on March 31, 2011, 12:24:00 PM
Gorion, the solution is actually simpler. No need for DIV at all for what you were doing.

Page code
Quote

  •    

    • CSS Script
    Quote#homeBtn
    {
        background:url("buttons/home_yellow.png") no-repeat;
        display: block;
       width:105px;
       height:45px;
    }
    #homeBtn:hover { background:url("buttons/home_white.png") no-repeat; }
    #homeBtn:active { background:url("buttons/home_black.png") no-repeat; }

    In fact, I'd combine the 3 (65KB) PNG files into a single (7KB) GIF per button, and use background offset on the hover and active properties to "scroll" the image, so all the images are loaded with the page.

    Quote(http://www.kl2.com/images/home.gif)

    CSS would then be
    Quote#homeBtn
    {
        background: url("buttons/home.gif") no-repeat 0 0;
        display: block;
        width: 105px;
        height: 45px;
    }
    #homeBtn:hover { background-position: 0 -44px; }
    #homeBtn:active { background-position: 0 -88px; }
    Title: XHTML troubles
    Post by: Gorion on March 31, 2011, 09:29:34 PM
    Thanks a million, it finally works and is XHTML1.0 verified.

    Finished the whole bloody website in less time than that menu bar.

    If we ever meet, you'll be getting free beer or whatever you like to drink.
    Title: XHTML troubles
    Post by: A Twig on April 01, 2011, 01:50:21 PM
    Quote from: ArithonUK;322530Gorion, the solution is actually simpler. No need for DIV at all for what you were doing.


    Oh look, it's exactly what I said! ;)
    Title: XHTML troubles
    Post by: Gorion on April 01, 2011, 02:35:25 PM
    Doh, didn't realise that.

    Sorry bout that, new to this and some things are pretty much chinese.
    Text only | Text with Images