Menu CSS con un class="first"

luisdelgado2k8 · #1 (**permalink**) 11/01/2011, 18:36

Hola compañeros del foro!

Les pido su ayuda para que el siguiente menu tenga un class o id first para que al entrar al sitio ponga por default el first en la opción Home

Él código es el siguiente:

<html>
<head>
<title>Menu CSS</title>
<style type="text/css">
#menu {
background-image: url(background.png);
background-repeat: no-repeat;
padding: 4px;
height: 60px;
width: 600px;
}
#spc {
float:left;
height: 60px;
width: 20px;
}

#bot1 {
display: block;
float:left;
padding-top: 4px;
height: 26px;
width: 80px;
padding: 0;
}
#bot1 a {
background-position: center top;
height: 26px;
width: 80px;
color: #ffff00;
text-decoration: none;
padding-top: 5px;
background-repeat: no-repeat;
font-family: helvetica;
font-size:13px;
font-weight: bold;
text-align:center;
}
#bot1 a:hover {
height: 26px;
width: 80px;
color: #ff5555;
}
#bot1 a:active {
height: 26px;
width: 80px;
background-image: url(tabb.png);
color: #ffffff;
}

#bot2 {
display: block;
float:left;
padding-top: 4px;
height: 26px;
width: 150px;
padding: 0;
}
#bot2 a {
background-position: center top;
height: 26px;
width: 150px;
color: #ffff00;
text-decoration: none;
padding-top: 5px;
background-repeat: no-repeat;
font-family: helvetica;
font-size:13px;
font-weight: bold;
text-align:center;
}
#bot2 a:hover {
height: 26px;
width: 150px;
color: #ff5555;
}
#bot2 a:active {
height: 26px;
width: 150px;
background-image: url(tabb.png);
color: #ffffff;
}

#bot3 {
display: block;
float:left;
padding-top: 4px;
height: 26px;
width: 80px;
padding: 0;
}
#bot3 a {
background-position: center top;
height: 26px;
width: 80px;
color: #ffff00;
text-decoration: none;
padding-top: 5px;
background-repeat: no-repeat;
font-family: helvetica;
font-size:13px;
font-weight: bold;
text-align:center;
}
#bot3 a:hover {
height: 26px;
width: 80px;
color: #ff5555;
}
#bot3 a:active {
height: 26px;
width: 80px;
background-image: url(tabb.png);
color: #ffffff;
}

#first {
height: 26px;
width: 80px;
background-image: url(tabb.png);
color: #ffffff;
}
</style>
</head>
<body onload="pedir()">
<div id="menu">
<div id="bot1"><a href="#">H o m e</a></div>
<div id="first"><a href="#">H o m e</a></div>
<div id="spc"></div>
<div id="bot2"><a href="#">Search</a></div>
<div id="spc"></div>
<div id="bot3"><a href="#">Help</a></div>
</div>
</body>
</html>

Gracias por su cooperación.

sanxuan · #2 (**permalink**) 12/01/2011, 18:37

Supongo que lo que quieres hacer es que el botón aparezca seleccionado al entrar.
Yo utilizaría una clase .seleccionado si se va a utilizar para otros botones aparte del primero.
Prefiero utilizar una clase porque se puede añadir al mismo elemento <div id="bot1"> que ya tienes. Yo cambiaría la regla #first por la siguiente:

.first {
background-image: url(tabb.png);
color: #ffffff;
}

El HTML sería el siguiente:
<body onload="pedir()">
<div id="menu">
<div id="bot1" class="first"><a href="#">H o m e</a></div>
<div id="spc"></div>
<div id="bot2"><a href="#">Search</a></div>
<div id="spc"></div>
<div id="bot3"><a href="#">Help</a></div>
</div>
</body>

donde he eliminado la línea que tú habías puesto en negrita. Supongo que no quieras que aparezca dos veces la palabra "Home".