CODEWITHSUNDEEP
htmlcss
sark9012
sark9012

Reputation: 5717

Conflicting problem with css

I was told last night that the following isn't allowed in CSS.

<a href="index.php"><div class="button">Home</div></a>

.submenu div.button{width:72px; height:20px; float:left; margin:0 20px; font-size:0.9em; font-family:Arial; padding:2px; color:black;}

How can i create the look I want for the button and then allow the user to click on it in any other way? What is the best way to do this?

It works as it is, but I am being told it's not complient.

Upvotes: 1

Views: 60

Answers (3)

Ross
Ross

Reputation: 17967

something like this may achieve what you want with minimal fuss.

<div class="submenu">
    <a class="button" href="index.php">Home</a>
</div>

.submenu a.button{
    width:72px; 
    height:20px; 
    float:left; 
    margin:0 20px; 
    font-size:0.9em; 
    font-family:Arial; 
    padding:2px; 
    color:black;

    display:block; /*added */
}

The anchor will be overqualified , just.submenu a {} would suffice, but this depends if you wish to have other, un-styled links in the .submenu div.

edit also - can't really tell from your provided markup, but you'll probably want to use an unordered list for "semantic" markup. mine is just an example

Upvotes: 1

Mika
Mika

Reputation: 1539

You can use a span instead of the div... Or you can use display:block for the a tag und style the a tag...

Upvotes: 0

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124768

The CSS is perfectly valid, what isn't allowed is nesting block level elements inside inline elements. So, in your case, it's illegal to insert a <div> inside an <a>. You can leave the <div> out altogether and style the <a> element instead and give it display: block for it to behave like a block level element.

<a href="index.php" class="button">Home</a>

.submenu a.button{
    display: block;
    width: 72px;
    height: 20px;
    float: left;
    margin: 0 20px;
    font-size: 0.9em;
    font-family: Arial;
    padding: 2px;
    color: black;
}

Upvotes: 6

Related Questions