Menu

[Borjimante]

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:

<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

#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

[mbavio]

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.

[Borjimante]

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

[mbavio]

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.

[Borjimante]

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?

[SICK-BOY]

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

[Borjimante]

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:

#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

[Borjimante]

por favor ayuda, es muy importante que lo solucione.

Un saludo

[Rafael]

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.

[sjam7]

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