Foros del Web » Creando para Internet » CSS »

Botones con CS4

Estas en el tema de Botones con CS4 en el foro de CSS en Foros del Web. Hola, Os escribo porque tengo una duda de principiante Estoy haciendo unos botones con Dreamweaver CS4. Previamente, he hecho una tabla con cinco celdas, una ...
  #1 (permalink)  
Antiguo 25/01/2010, 05:22
 
Fecha de Ingreso: enero-2010
Mensajes: 29
Antigüedad: 14 años, 3 meses
Puntos: 0
Botones con CS4

Hola,

Os escribo porque tengo una duda de principiante

Estoy haciendo unos botones con Dreamweaver CS4. Previamente, he hecho una tabla con cinco celdas, una para cada botón, y las he editado con css. Ahora quiero que cada celda, con su texto correspondiente, funcione como un botón y cambie de color, etc.

El problema es que si pongo el código <a href> después de <td> sólo se convierte en botón el texto y, si lo pongo antes, no funciona bien. ¿Alguien puede ayudarme?

Adjunto los códigos:



HTML:

<body id="tapiz">



<div id="despliegue">

<div id="encabz">
</div>

<div id="contenido">
<table style="border-collapse:collapse" width="100%" border="5" id="tbunno">
<tr>
<td id="izqda">
<table width="100%" border="0" align="center" cellspacing="5px" id="botones">
<tr>
<td><a href="#" target="_self">Inicio</a></td>
</tr>
<tr>
<a href="#"><td>Quienes somos</td></a>
</tr>
<tr>
<td>Noticias</td>
</tr>
<tr>
<td>Descargas</td>
</tr>
<tr>
<td>Contacto</td>
</tr>
</table>

</td>
<td id="dcha"> <table style="border-collapse:collapse" width="100%" border="5" id="tbdos">
<tr>
<td id="oeste">
<p> ejemplo 1 </p>
<p> ejemplo 2 </p>
<p> ejemplo 3 </p>
<p> ejemplo 4 </p>
<p> ejemplo 5 </p>
<p> ejemplo 6 </p>
<p> ejemplo 7 </p>
</td>
<td id="este">&nbsp; aquí van los logos
</td>
</tr>
</table>
</td>
</tr>
</table>

</div>

</div>


</body>
</html>





CSS:

@charset "utf-8";

}

body {
background-color: #97BEC6;
}
#tapiz {
background-color: #97BEC6;
background-image: url(images/azul.jpg);
}



#despliegue {
background-color: #003C65;
width: 1000px;
margin: 0px auto;
height: auto;
margin-top: 0px;
}

#encabz {
background-color: #03F;
height: 150px;
width: 980px;
margin: 0px auto;
margin-top: 10px;
padding-top: 0px;
background-image: url(images/titulo.jpg);
}

#contenido {
background-color: #FFF;
width: 980px;
margin: 0px auto;
margin-top: 30px;
}
#tapiz #despliegue #contenido #tbunno {
background-color: #FFF;
color: #000;
border: 5px solid #FFF;
}
#tapiz #despliegue #contenido #tbunno tr td #tbdos {
background-color: #FFF;
vertical-align: top;
border: 5px solid #FFF;
}
#tapiz #despliegue #contenido #tbunno tr #izqda {
background-color: #FFF;
width: 15%;
vertical-align: top;
}
#tapiz #despliegue #contenido #tbunno tr #dcha {
background-color: #FFF;
}
#tapiz #despliegue #contenido #tbunno tr #dcha #tbdos tr #oeste {
background-color: #FFF;
width: 75%;
vertical-align: top;
}
#tapiz #despliegue #contenido #tbunno tr #dcha #tbdos tr #este {
background-color: #FFF;
vertical-align: top;
}
#tapiz #despliegue #contenido #tbunno tr #izqda #botones {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
color: #FFF;
background-color: #FFF;
text-align: center;
font-weight: bold;
}
#tapiz #despliegue #contenido #tbunno tr #izqda #botones tr td {
background-color: #003C65;
height: 25px;
}
  #2 (permalink)  
Antiguo 25/01/2010, 07:11
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 15 años, 8 meses
Puntos: 20
Respuesta: Botones con CS4

Te recomedaria que dejases las tablas e hicieras el menu con listas. Este tutorial de mikmoro es muy interesante.

Para hacer lo que quieres, añadela display: block al enlace y dale un padding hasta que se ajuste a la celda.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #3 (permalink)  
Antiguo 25/01/2010, 08:07
 
Fecha de Ingreso: enero-2010
Mensajes: 29
Antigüedad: 14 años, 3 meses
Puntos: 0
Respuesta: Botones con CS4

Gracias impostor!

Quiero chaparme este tutorial bien, pero tengo que entregar esta página ya y ahora es imposible.

Si añado <a href="#" display:block> al enlace me sigue pasando lo mismo que antes:

1. El cursor no se convierte en mano al pasar por encima del botón, solamente al hacer click.

2. Cuando paso el cursor por el texto del botón no lo reconoce como enlace.

Necesito que reconozca como enlace la celda y el texto y que el cursor se convierta en mano al pasar por encima, ¿cómo lo hago?
  #4 (permalink)  
Antiguo 25/01/2010, 08:49
 
Fecha de Ingreso: enero-2010
Mensajes: 29
Antigüedad: 14 años, 3 meses
Puntos: 0
Respuesta: Botones con CS4

En líneas generales,

cómo se convierte un elemento en botón, de manera que incluya también el texto?

la única manera es introducir una imagen jpg? una para cada estado (over, etc)?
  #5 (permalink)  
Antiguo 26/01/2010, 09:09
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 3 meses
Puntos: 306
Respuesta: Botones con CS4

Hola
La respuesta ya te la dio Impostor:
Cita:
Para hacer lo que quieres, añadela display: block al enlace y dale un padding hasta que se ajuste a la celda.
display:block va en la hoja de estilos no en el html

Saludos y no utilices tablas para maquetar.

PD: fijate también en www.araudi.net que tienes varios menus hechos como corresponde, con listas y css.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #6 (permalink)  
Antiguo 26/01/2010, 09:53
 
Fecha de Ingreso: enero-2010
Mensajes: 29
Antigüedad: 14 años, 3 meses
Puntos: 0
Respuesta: Botones con CS4

Muchisimas gracias a los 2

voy a hacerlo con listas y css, creo que tardaré menos.

Un saludo

Etiquetas: botones
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 02:09.