Foros del Web » Creando para Internet » CSS »

Menu

Estas en el tema de Menu en el foro de CSS en Foros del Web. Hola quiero saber como poner los dos botones consecutivamente y no que al poner uno nuevo salte a una linea, os dejo el codigo para ...
  #1 (permalink)  
Antiguo 30/10/2006, 17:05
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años, 1 mes
Puntos: 1
Menu

Hola quiero saber como poner los dos botones consecutivamente y no que al poner uno nuevo salte a una linea, os dejo el codigo para que veais lo que pasa:

Cita:
<div id="secciones-genreales">
<div style=" text-align:center; border-right: 1px solid #333333; padding-top: 5px; height:20px; width:150px; background:url(imagenes/boton.jpg);" ><a href="#" class="link-secciones">Inicio</a></div><div style=" text-align:center; border-right: 1px solid #333333; padding-top: 5px; height:20px; width:150px; background:url(imagenes/boton.jpg);" ><a href="#" class="link-secciones">Inicio</a></div>
</div>
CSS

Cita:
#secciones-genreales{
background-color: #FFFFFF;
width: 700px;
padding-bottom: 5px;
padding-top:5px;
margin: auto;
display: block;
}
a.link-secciones{
text-decoration:none;
color: #003399;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
}
a.link-secciones:link{
text-decoration:none;
color: #003399;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
}
a.link-secciones:visited{
text-decoration:none;
color: #003399;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
}
a.link-secciones:hover{
text-decoration:underline;
color: #003399;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
}
a.link-secciones:active{
text-decoration:none;
color: #003399;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
}
Un saludo
__________________
Antera Solutions Diseño y desarrollo web
  #2 (permalink)  
Antiguo 30/10/2006, 22:20
Avatar de mbavio  
Fecha de Ingreso: agosto-2005
Mensajes: 288
Antigüedad: 12 años, 3 meses
Puntos: 4
Si lo que estas queriendo hacer es un menu, quita ya ese codigo y empieza a hacerte amigo del codigo semantico.
Para hacer menues tienes que utilizar listas desordenadas, y para darles estilos a las mismas hay numerosisimas formas, todas bien esparcidas a traves de la web. Gracias a Dios, una pagina reune la mayoria de las tecnicas:

http://css.maxdesign.com.au/listamatic

Saludos.

EDITADO: He visto tu web y vi que de hecho utilizas listas para menues, entonces realmente no puedo entender tu problema.
  #3 (permalink)  
Antiguo 31/10/2006, 08:41
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años, 1 mes
Puntos: 1
No me refiero a lo que me pasa en el menu de esta web que estoy aciendo que no se ponen en una linea las imagenes:


Como lo soluciono?

Un saludo
__________________
Antera Solutions Diseño y desarrollo web

Última edición por tunait; 04/11/2006 a las 05:52 Razón: No es necesario dejar SIEMPRE el link
  #4 (permalink)  
Antiguo 31/10/2006, 15:13
Avatar de mbavio  
Fecha de Ingreso: agosto-2005
Mensajes: 288
Antigüedad: 12 años, 3 meses
Puntos: 4
No se ponen en linea porque encierras cada vinculo en un div, el cual es un elemento de bloque. Puedes tratar dos cosas: jugar con la propiedad display: inline de los divs, o hacer el menu como lista. A tu eleccion. Saludos.

P.D: Ten cuidado con la "divitis", hay demasiados divs en tu sitio, no son necesarios tantos.
  #5 (permalink)  
Antiguo 01/11/2006, 06:28
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años, 1 mes
Puntos: 1
he puesto lo display incline y aora no me reprude toda la imagen de fondo como hago para que lo aga como hacia antes pero que este en una linea?
__________________
Antera Solutions Diseño y desarrollo web
  #6 (permalink)  
Antiguo 01/11/2006, 08:29
 
Fecha de Ingreso: octubre-2005
Mensajes: 419
Antigüedad: 12 años, 1 mes
Puntos: 0
veo tu codigo demaciado complicado para lo que quieres, por ke no intentas hacerlo con listas? y alas etiketas <ul> y <li>?
con eso y display:inline es muy facil hacerl como te lo menciono anteriormente el otro usuario ke participa en este hilo
__________________
GraficasWeb.com / Diseño y Desarrollo Web en Mexico
info @ graficasweb.com E-mail / MSN
  #7 (permalink)  
Antiguo 01/11/2006, 09:23
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años, 1 mes
Puntos: 1
me lo podriais decir pro que he creado este codigo y no me funciona:

html:

[QUOTE]<div id="secciones-generales">
<ul class="secciones-generales">
<li><a href="#" title="Ir a Dominio" class="secciones-generales">Dominios</a></li>
<li><a href="#" title="Ir a Hosting" class="secciones-generales">Hosting</a></li>
<li><a href="#" title="Ir a Tienda Virtual" class="secciones-generales">Tienda Virtual</a></li>
<li><a href="#" title="Ir a Plantillas"class="secciones-generales">Plantillas</a></li>
<li><a href="#" title="Ir a Aplicaciones" class="secciones-generales">Aplicaciones</a></li>
<li><a href="#" title="Ir a Contacto" class="secciones-generales">Contacto</a></li>
</ul>
</div>QUOTE]

css:

Cita:
#secciones-generales{
background-color: #FFFFFF;
width: 700px;
margin: auto;
display: inline;
}
.secciones-generales ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
display: inline;
}
.secciones-generales li
{
margin: 0;
padding: 0px;
display: inline;
}
a.secciones-generales {
display: inline;
font-weight: bold;
color: #003399;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
font-size: 9pt;
text-align:center;
border-right: 1px solid #333333;
padding-top: 5px;
height:20px;
width:150px;
background-image: url(imagenes/boton.jpg);
}
a.secciones-generales:hover
{
background-image: url(imagenes/boton.jpg);
font-weight: bold;
color: #003399;
text-decoration: underline;
font-size: 9pt;
text-align: center;
border-right: 1px solid #333333;
padding-top: 5px;
height:20px;
width:150px;
}
Que falla como lo soluciono ayuda plis

Un saludo
__________________
Antera Solutions Diseño y desarrollo web
  #8 (permalink)  
Antiguo 01/11/2006, 14:32
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años, 1 mes
Puntos: 1
por favor ayuda, es muy importante que lo solucione.

Un saludo
__________________
Antera Solutions Diseño y desarrollo web
  #9 (permalink)  
Antiguo 01/11/2006, 19:15
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Hum, yo me regresaría a tu propuesta inicial.
Pero no encerrando los a en div cada uno, sino todos.
<div>
<a><a><a>
</div>
Y las propiedades que necesitas asignarlas directamente al a, no al div que tenías.
  #10 (permalink)  
Antiguo 01/11/2006, 22:51
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
Yo lo hago asi:

CSS
Código HTML:
#navcontainer { width: 170px; }
 
#navcontainer ul {
padding:0;
margin:0;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
}
 
#navcontainer a, {
display: block;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 11px;
width: 160px;
border-bottom: 1px solid #5CA4DE;
background-image:url(images/bullet.gif);
background-repeat:no-repeat;
background-position:0 6px;
}
 
#navcontainer a:link, #navlist a:visited, {
color:#000;
text-decoration: none;
text-align:left;
}
 
#navcontainer a:hover {
 background-color:#CCC;
}
HTML con las listas:
Código HTML:
<div align="center" id="navcontainer">
 <ul id="navlist">
  <li><a href="menu.asp?id=1">Menu 1</a></li>
  <li><a href="menu.asp?id=2">Menu 2</a></li>
  <li><a href="menu.asp?id=3">Menu 3</a></li>
 </ul> 
</div> 
Espero te sirva, solo cambia los anchos y colores
__________________
CreandoWebs.com
www.creandowebs.com
PLANTILLAS TEMPLATEMONSTER CON 10% DE DESCUENTO
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 15:02.