Poner enlaces en una linea

#1 (**permalink**) 20/06/2007, 08:30

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ón</a></li>
<li><a href="#" class="enlace">Sección</a></li>
<li><a href="#" class="enlace">Secció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

pzin · #2 (**permalink**) 20/06/2007, 08:34

Tienes que ponerlos con la propiedad inline del atributo display, ya que por defecto las listas son bloques.

#3 (**permalink**) 20/06/2007, 08:44

esque si lo pongo como inline no muestra lso bloques con la altura k quiero solo pone la altura que ocupa la letra

rogertm · #4 (**permalink**) 20/06/2007, 12:56

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

AlZuwaga · #5 (**permalink**) 20/06/2007, 14:12

Aunque también podrías echarles un float:left; a los <li>

programeitor · #6 (**permalink**) 21/06/2007, 16:29

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>

Ekbrilo · #7 (**permalink**) 22/06/2007, 11:26

¿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**) 24/06/2007, 04:55

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ó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

JavierB · #9 (**permalink**) 24/06/2007, 05:19

Hola Borjimante

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

Saludos,

#10 (**permalink**) 24/06/2007, 08:31

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/

programeitor · #11 (**permalink**) 24/06/2007, 11:22

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**) 25/06/2007, 06:05

si pero esque si les pongo el display block no se poenen en una linea haber si alguien puede ayudarnos.

AlZuwaga · #13 (**permalink**) 25/06/2007, 10:41

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.

programeitor · #14 (**permalink**) 25/06/2007, 10:42

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

AlZuwaga · #15 (**permalink**) 25/06/2007, 11:39

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

programeitor · #16 (**permalink**) 25/06/2007, 12:14

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**) 25/06/2007, 15:23

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ón</a></li>
<li class="lien"><a href="#" class="enlace-2">Contacto</a></li>
</ul>
</div>

Que pasa que no va ¡¡¡¡

necesito ayuda gracias

AlZuwaga · #18 (**permalink**) 25/06/2007, 15:41

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)

programeitor · #19 (**permalink**) 25/06/2007, 15:56

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**) 26/06/2007, 04:39

hay va la captura de como lo veo yo:

AlZuwaga · #21 (**permalink**) 26/06/2007, 10:36

Pues... aparentemente no tenés el espacio suficiente para que los enlaces queden en una misma línea...

#22 (**permalink**) 27/06/2007, 01:37

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?¿

#23 (**permalink**) 29/06/2007, 02:48

nadie sabe como arreglarlo?¿ y un codigo alternativo?¿