Foros del Web » Creando para Internet » CSS »

Ayuda con mis botones en css

Estas en el tema de Ayuda con mis botones en css en el foro de CSS en Foros del Web. mi problema es el sgte estoy haciendo un menu en css lo digo desde ahora soy nuevo en css .. mi menu tiene un problema ...
  #1 (permalink)  
Antiguo 28/07/2008, 21:43
Avatar de acoevil  
Fecha de Ingreso: julio-2008
Ubicación: localhost/colombia/sevillaValle.php
Mensajes: 1.123
Antigüedad: 15 años, 8 meses
Puntos: 32
Ayuda con mis botones en css

mi problema es el sgte estoy haciendo un menu en css lo digo desde ahora soy nuevo en css ..

mi menu tiene un problema o_O cuando quiero colocar varios cuadritos para varios menus quedan pegados uno del otro entren aqui para que vean

http://www.truekesoft.net/mi%20web%20css/FOROS/index.html

y quiero que queden separados como estos.

http://www.desarrolloweb.com/articulos/ejemplos/css/menu.html

COMO PUEDO HACER ESTE CODIGO MAS PEQUEÑO

************************************************** **

#boton
{
font-size:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
text-transform:capitalize;
text-decoration:none;
padding:3px;
color:#fff;
background:#638cb5;
width:100px;
height:20px;
float:left;

}

a:link
{
color:#FFFFFF;
}
a:visited
{
font-size:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
text-transform:capitalize;
text-decoration:none;
padding:3px;
color:#fff;
background:#638cb5;
width:100px;
height:20px;
float:left;

}
a:hover
{
font-size:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
text-transform:capitalize;
text-decoration:none;
padding:3px;
color:#fff;
background:#333333;
width:100px;
height:20px;
float:left;

}

*************************************************
  #2 (permalink)  
Antiguo 29/07/2008, 01:18
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 17 años
Puntos: 36
Respuesta: Ayuda con mis botones en css

Pues para tener un margen, pon margin en el botón:
Código:
#boton
{
margin: 3px; 
...
Y para hacer el código más pequeño puedes poner los estilos en una línea:
Código:
#boton { margin: 3px; font-size: 15px; ...}
Y además, te recomiendo que cambies tu actual HTML por este (usando listas):
Código HTML:
<ul id="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Software</a></li>
</ul> 
Y entonces cambias el código de #boton por este:
Código:
#menu li { margin: 3px; font: 15px bold Verdana, Arial, Helvetica, sans-serif; text-align:center; text-transform:capitalize; text-decoration:none; padding:3px; color:#fff; background:#638cb5; width:100px; height:20px; float:left; }
  #3 (permalink)  
Antiguo 29/07/2008, 09:24
Avatar de messer  
Fecha de Ingreso: julio-2004
Mensajes: 467
Antigüedad: 19 años, 8 meses
Puntos: 5
Respuesta: Ayuda con mis botones en css

Para ahorrarte algunas lineas puedes sustituir
Código:
font-size:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
por
Código:
font: bold 15px Verdana, Arial, Helvetica, sans-serif;
ademas de que no es necesario (en mi opinion) que lo declares en 'a:link', 'a:visited' y 'a:hover'; ya que no varia esa informacion, con que lo declares unicamente en 'a:link' es suficiente.
__________________
<script type="text/messerScript"><!--
window.onload=function(){ loadMesserRules(this.href) }
--></script>
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 18:02.