Foros del Web » Creando para Internet » CSS »

Poner enlaces en una linea

Estas en el tema de Poner enlaces en una linea en el foro de CSS en Foros del Web. Hola, queria solucionar un problema, quiero poner varios enlaces en una linea, el codigo es Cita: <div id="enlaces"> <ul class="menu"> <li><a href="#" class="enlace">Inicio</a></li> <li><a href="#" ...
  #1 (permalink)  
Antiguo 20/06/2007, 09:30
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años
Puntos: 1
Poner enlaces en una linea

Hola, queria solucionar un problema, quiero poner varios enlaces en una linea, el codigo es

Cita:
<div id="enlaces">
<ul class="menu">
<li><a href="#" class="enlace">Inicio</a></li>
<li><a href="#" class="enlace">Secci&oacute;n</a></li>
<li><a href="#" class="enlace">Secci&oacute;n</a></li>
<li><a href="#" class="enlace">Secci&oacute;n</a></li>
</ul>
</div>
Cita:
#enlaces {
width: 700px;
height: 25px;
background-color: #FFFFFF;
text-align: center;
}

a.enlace{
color: #FFFFFF;
text-decoration: none;
background-color:#37618d;
display: block;
height: 25px;
width: 131px;
border-left: 1px solid #FFFFFF;
line-height: 22px;
text-align: left;
padding-left: 8px;
font-weight: bold;
}

a.enlace:hover{
color: #FFFFFF;
text-decoration: none;
background-color: #95BBE0;
display: block;
height: 25px;
width: 131px;
border-left: 1px solid #FFFFFF;
line-height: 22px;
text-align: left;
padding-left: 8px;
font-weight: bold;
}

.menu {
list-style: none;
display: inline;
}

.menu li {
list-style: none;
display: inline;
}
Un saludo
__________________
Antera Solutions Diseño y desarrollo web
  #2 (permalink)  
Antiguo 20/06/2007, 09:34
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.460
Antigüedad: 15 años, 4 meses
Puntos: 2097
Re: Poner enlaces en una linea

Tienes que ponerlos con la propiedad inline del atributo display, ya que por defecto las listas son bloques.
  #3 (permalink)  
Antiguo 20/06/2007, 09:44
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años
Puntos: 1
Re: Poner enlaces en una linea

esque si lo pongo como inline no muestra lso bloques con la altura k quiero solo pone la altura que ocupa la letra
__________________
Antera Solutions Diseño y desarrollo web
  #4 (permalink)  
Antiguo 20/06/2007, 13:56
Avatar de rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 12 años, 4 meses
Puntos: 638
Re: Poner enlaces en una linea

hola,
prueba esto :
Código:
.menu {
    list-style: none;
    display: inline;
    padding:  10px 0px 10px 8px;
}
.

los valores se reparten en ese orden, arriba, derecha, abajo, izquierda
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose
  #5 (permalink)  
Antiguo 20/06/2007, 15:12
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: Poner enlaces en una linea

Aunque también podrías echarles un float:left; a los <li>
  #6 (permalink)  
Antiguo 21/06/2007, 17:29
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
Re: Poner enlaces en una linea

hola

¿porque no pones los links seguidos y ya esta?

Código:
<div id="enlaces">
<a href="#" class="enlace">Inicio</a>
<a href="#" class="enlace">Sección</a>
<a href="#" class="enlace">Sección</a>
<a href="#" class="enlace">Sección</a>
</div>
  #7 (permalink)  
Antiguo 22/06/2007, 12:26
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 5 meses
Puntos: 8
Re: Poner enlaces en una linea

¿Puede usarse un código más o menos de ese tipo -con "inline" y "display"- para insertar en la parte inferior de una página los iconos de navegación ("Página anterior", "Inicio" y "Siguiente" ?
  #8 (permalink)  
Antiguo 24/06/2007, 05:55
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años
Puntos: 1
Re: Poner enlaces en una linea

Ya he cambiado el codigo y me queda asi, lo unico que con el mozilla firefox no se me quedan en una linea como con IE haber si me ayudais a ponerlo igual:

Cita:
<div id="enlaces">
<ul class="menu">
<li class="lien"><a href="#" class="enlace-1">Inicio</a></li>
<li class="lien"><a href="#" class="enlace">Empresa</a></li>
<li class="lien"><a href="#" class="enlace">Servicios</a></li>
<li class="lien"><a href="#" class="enlace">Localizaci&oacute;n</a></li>
<li class="lien"><a href="#" class="enlace-2">Contacto</a></li>
</ul>
</div>
style.css:

Cita:
#enlaces {
width: 700px;
height: 25px;
background-color: #FFFFFF;
text-align: center;
padding-bottom: 1px;
}

a.enlace{
color: #FFFFFF;
text-decoration: none;
background-color:#37618d;
display: block;
height: 25px;
width: 131px;
line-height: 22px;
text-align: left;
padding-left: 8px;
font-weight: bold;
border-right: 1px solid #FFFFFF;
}

a.enlace:hover{
color: #FFFFFF;
text-decoration: none;
background-color: #95BBE0;
display: block;
height: 25px;
width: 131px;
line-height: 22px;
text-align: left;
padding-left: 8px;
font-weight: bold;
border-right: 1px solid #FFFFFF;
}

a.enlace-1{
color: #FFFFFF;
text-decoration: none;
background-color:#37618d;
display: block;
height: 25px;
width: 131px;
line-height: 22px;
text-align: left;
padding-left: 8px;
font-weight: bold;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
}

a.enlace-1:hover{
color: #FFFFFF;
text-decoration: none;
background-color: #95BBE0;
display: block;
height: 25px;
width: 131px;
line-height: 22px;
text-align: left;
padding-left: 8px;
font-weight: bold;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
}

a.enlace-2{
color: #FFFFFF;
text-decoration: none;
background-color:#37618d;
display: block;
height: 25px;
width: 130px;
line-height: 22px;
text-align: left;
padding-left: 8px;
font-weight: bold;
border-right: 1px solid #FFFFFF;
}

a.enlace-2:hover{
color: #FFFFFF;
text-decoration: none;
background-color: #95BBE0;
display: block;
height: 25px;
width: 130px;
line-height: 22px;
text-align: left;
padding-left: 8px;
font-weight: bold;
border-right: 1px solid #FFFFFF;
}

.menu {
list-style: none;
display: inline;
padding: 10px 0px 10px 8px;
}

.menu li {
list-style: none;
display: inline;
}

.lien {
float: left;
display: inline;
}
Haber si me podeis ayudar, gracias
__________________
Antera Solutions Diseño y desarrollo web
  #9 (permalink)  
Antiguo 24/06/2007, 06:19
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: Poner enlaces en una linea

Hola Borjimante

A mí en Firefox sí me sale en una línea:



Saludos,
  #10 (permalink)  
Antiguo 24/06/2007, 09:31
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años
Puntos: 1
Re: Poner enlaces en una linea

pues esque yo lo veo en linea con el MF y no lo veo en una linea y el codigo parece estar bien, haber si alguien puede dar mas opiniones

http://www.antera-solutions.com/Plantilla/
__________________
Antera Solutions Diseño y desarrollo web
  #11 (permalink)  
Antiguo 24/06/2007, 12:22
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
Re: Poner enlaces en una linea

hola ...

vuelvo a insistir... a un enlace se le puede dar el estilo que se quiera, y me parece mucho codigo, solo para "reponerlos" en la misma linea, cuando eso mismo lo hacen solos por defecto.

salud os
  #12 (permalink)  
Antiguo 25/06/2007, 07:05
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años
Puntos: 1
Re: Poner enlaces en una linea

si pero esque si les pongo el display block no se poenen en una linea haber si alguien puede ayudarnos.
__________________
Antera Solutions Diseño y desarrollo web
  #13 (permalink)  
Antiguo 25/06/2007, 11:41
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: Poner enlaces en una linea

display:block;
ancho:xxxpx;
float:left;

por cierto, por cuestiones de accesibilidad/usabilidad los enlaces deben estar separados por un caracter diferente del espacio en su código html (no importa la presentación que se le de mediante CSS). por lo tanto, el código propuesto por programeitor no sería lo ideal.
  #14 (permalink)  
Antiguo 25/06/2007, 11:42
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
Re: Poner enlaces en una linea

entonces cabria preguntar ,¿cual es la razon para darle a los enlaces display:block?
display:block es para todo lo contrario ,pues hace que se presenten como objetos individuales separados por saltos de linea. ,no se ,prueba a quitarles el display:block.

postdata:aL zuwaga. si esto no es lo ideal:

Código:
 
<div id="enlaces">
<a href="#" class="enlace">Inicio</a>
<a href="#" class="enlace">Sección</a>
<a href="#" class="enlace">Sección</a>
<a href="#" class="enlace">Sección</a>
</div>
¿hacia donde camina la programacion?

se me hace dificil creer, que eso no lo pueda leer un interprete, no se mucho de interpretes especiales, pero de ningun modo deberian infliur en la programacion. , el trabajo es del interprete no del programador, y menos, cuando otros interpretes y mas antiguos no tenian ,ni tienen, ningun problema en su labor de interface. Incluso disponen de un modo para hacer visible ,lo "mal" programado, o quirkmode.

Que yo sepa, los interfaces se crean para hacer de puente entre sistemas distintos, decodificando, interpretando o traduciendo las comunicaciones entre ellos. ,y no como un MURO de separacion ,que aboca a programar para interfaces "visto no visto",y que estas, no hagan el trabajo que venian realizando.


salud os

Última edición por programeitor; 25/06/2007 a las 12:07
  #15 (permalink)  
Antiguo 25/06/2007, 12:39
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: Poner enlaces en una linea

Es que al colocarles el display:block podés "jugar" con su ancho y alto (es lo primero que se me viene a la cabeza, pero estoy seguro que conlleva otros beneficios). Pero como el amigo no pretende mostrarlos uno debajo del otro, entonces los flota y listo (claro, si se les especifica un ancho... porque de lo contrario ocuparían todo el ancho disponible y no podría colocarlos uno al lado del otro)

Sobre lo otro:

Cita:
Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) representen de forma diferenciada los enlaces adyacentes, incluya caracteres imprimibles no enlazados (rodeados de espacios) entre los enlaces adyacentes. (Prioridad 3)
Y la manera de solucionarlo bien bien fácil: colocar los enlaces dentro de una lista
  #16 (permalink)  
Antiguo 25/06/2007, 13:14
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
Re: Poner enlaces en una linea

bueno ,si es por aplicarles un ancho, puede hacerse con padding, sin necesidad de modificar el display.

al zuwaga. sobre la cita, supongo que sera una de tantas recomendaciones del consorcio, con sus prioridades ,pero ya podrian explicarse mejor ,porque no entiendi ni un apice.

Cita:
Iniciado por ?
Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) representen de forma diferenciada los enlaces adyacentes, incluya caracteres imprimibles no enlazados (rodeados de espacios) entre los enlaces adyacentes. (Prioridad 3)
Bueno ,supongo que todos tenemos recomendaciones que hacer.

salud os
  #17 (permalink)  
Antiguo 25/06/2007, 16:23
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años
Puntos: 1
Re: Poner enlaces en una linea

pero esque tengo todo con float left:

Cita:
#enlaces {
width: 700px;
height: 25px;
background-color: #FFFFFF;
text-align: center;
padding-bottom: 1px;
}

a.enlace{
color: #FFFFFF;
text-decoration: none;
background-color:#37618d;
display: block;
height: 25px;
width: 131px;
line-height: 22px;
text-align: left;
padding-left: 8px;
font-weight: bold;
border-right: 1px solid #FFFFFF;
float: left;
}

a.enlace:hover{
color: #FFFFFF;
text-decoration: none;
background-color: #95BBE0;
display: block;
height: 25px;
width: 131px;
line-height: 22px;
text-align: left;
padding-left: 8px;
font-weight: bold;
border-right: 1px solid #FFFFFF;
float: left;
}

a.enlace-1{
color: #FFFFFF;
text-decoration: none;
background-color:#37618d;
display: block;
height: 25px;
width: 131px;
line-height: 22px;
text-align: left;
padding-left: 8px;
font-weight: bold;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
float: left;
}

a.enlace-1:hover{
color: #FFFFFF;
text-decoration: none;
background-color: #95BBE0;
display: block;
height: 25px;
width: 131px;
line-height: 22px;
text-align: left;
padding-left: 8px;
font-weight: bold;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
float: left;
}

a.enlace-2{
color: #FFFFFF;
text-decoration: none;
background-color:#37618d;
display: block;
height: 25px;
width: 130px;
line-height: 22px;
text-align: left;
padding-left: 8px;
font-weight: bold;
border-right: 1px solid #FFFFFF;
float: left;
}

a.enlace-2:hover{
color: #FFFFFF;
text-decoration: none;
background-color: #95BBE0;
display: block;
height: 25px;
width: 130px;
line-height: 22px;
text-align: left;
padding-left: 8px;
font-weight: bold;
border-right: 1px solid #FFFFFF;
float: left;
}

.menu {
list-style: none;
display: inline;
padding: 10px 0px 10px 8px;
}

.menu li {
list-style: none;
display: inline;
float: left;
}

.lien {
float: left;
display: inline;
}
y siguen sin moverse con firefox

Cita:
<div id="enlaces">
<ul class="menu">
<li class="lien"><a href="#" class="enlace-1">Inicio</a></li>
<li class="lien"><a href="#" class="enlace">Empresa</a></li>
<li class="lien"><a href="#" class="enlace">Servicios</a></li>
<li class="lien"><a href="#" class="enlace">Localizaci&oacute;n</a></li>
<li class="lien"><a href="#" class="enlace-2">Contacto</a></li>
</ul>
</div>
Que pasa que no va ¡¡¡¡ necesito ayuda gracias
__________________
Antera Solutions Diseño y desarrollo web
  #18 (permalink)  
Antiguo 25/06/2007, 16:41
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: Poner enlaces en una linea

podrías poner una captura de pantalla de cómo lo ves en firefox? (mejor un ejemplo on-line)

porque... usando tu código, veo los enlaces en una misma línea (tal cual la captura de pantalla que hizo el Moderata JavierB unos posts más arriba)
  #19 (permalink)  
Antiguo 25/06/2007, 16:56
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
Re: Poner enlaces en una linea

no puede ser tan dificil poner unos enlaces en linea, tienen esa particularidad, son objetos en linea.

oye una duda que tengo, ¿a.enlace no indica una clase enlace dentro de un link? ahora mismo no me aclaro... pero de todas formas podrias poner solo .enlace, si no crea conflicto.

salud os
  #20 (permalink)  
Antiguo 26/06/2007, 05:39
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años
Puntos: 1
Re: Poner enlaces en una linea

hay va la captura de como lo veo yo:

__________________
Antera Solutions Diseño y desarrollo web
  #21 (permalink)  
Antiguo 26/06/2007, 11:36
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: Poner enlaces en una linea

Pues... aparentemente no tenés el espacio suficiente para que los enlaces queden en una misma línea...
  #22 (permalink)  
Antiguo 27/06/2007, 02:37
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años
Puntos: 1
Re: Poner enlaces en una linea

pero con el IE entran a la perfección los bloques y con MF no entonces no quedan como quiero, dudo que sea x eso, puede haber mas soluciones?¿
__________________
Antera Solutions Diseño y desarrollo web
  #23 (permalink)  
Antiguo 29/06/2007, 03:48
 
Fecha de Ingreso: noviembre-2005
Mensajes: 669
Antigüedad: 12 años
Puntos: 1
Re: Poner enlaces en una linea

nadie sabe como arreglarlo?¿ y un codigo alternativo?¿
__________________
Antera Solutions Diseño y desarrollo web
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 09:52.