PDA

View Full Version : Is it OK to use class here ?


jeddi
09-11-2006, 08:40 AM
Hi,

My css menu "buttons" were working fine when I used a id="nav"
but as I was using it three times (not unique as id should be), I changed the "#" to a "." and called it a class - but it does't work :confused:

Here is my html


<!-- FIRST PAGE BUTTON -->

<div class="nav" class = "navf">
<a href='<?php echo "$navf_link"; ?>' >First Page</a>
</div>

<!-- PREVIOUS PAGE BUTTON -->

<div class="nav" class = "navp">
<a href='<?php echo "$navp_link"; ?>' >Prev Page</a>
</div>

<!-- NEXT PAGE BUTTON -->

<div class="nav" class = "navn">
<a href='<?php echo "$navn_link"; ?>' >Next Page</a>
</div>


And this is the css:


.nav a, .nav a:visited{
width:100px;
text-decoration:none;
border:2px solid #fff;
border-color:#def #678 #345 #cde;
background-color:#6666cc;
font-family:Tahoma, Tunga, sans-serif;
font-size:10px;
color:#fff;
font-weight:normal;
text-align:center;
display:block;
padding:0.25em;
margin:0.5em ;
}

.nav a:hover{
top:2px;
left:2px;
color:#fff;
border-color:#345 #cde #def #678;
background-color:#cc6699;
}



.navf{
position:absolute;
left:480px;
top:254px;
}

.navp{
position:absolute;
left:557px;
top:254px;
}

.navn{
position:absolute;
left:634px;
top:254px;
}


My out out is a completely undefined hyperlink.

Can someone please let me know what I've done wrong ?

Thanks :)

Kravvitz
09-11-2006, 08:54 AM
class="nav" class = "navf"
should be
class="nav navf"
Change the others in the same way.

jeddi
09-11-2006, 11:26 AM
Thanks - that fixed it ! :)

Bill Posters
09-11-2006, 11:35 AM
Your use of divs appears quite arbitrary, so how about using an unordered list?

e.g.
<ul class="nav">
<li class="navf">
<a href="<?php echo "$navf_link"; ?>" >First Page</a>
</li>
<li class="navp">
<a href="<?php echo "$navp_link"; ?>" >Prev Page</a>
</li>
<li class="navn">
<a href="<?php echo "$navn_link"; ?>" >Next Page</a>
</li>
</ul>

Note that the nav class has been moved to the common parent (i.e. the ul element). This way, you can avoid repeating classes on each list item.
The only class then needed on the list element is the one specific to that link list item.