Foros del Web » Creando para Internet » CSS »

Menu CSS con un class="first"

Estas en el tema de Menu CSS con un class="first" en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/01/2011, 18:36
 
Fecha de Ingreso: diciembre-2010
Mensajes: 7
Antigüedad: 7 años
Puntos: 0
Menu CSS con un class="first"

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.
  #2 (permalink)  
Antiguo 12/01/2011, 18:37
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Menu CSS con un class="first"

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".

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:34.