Centrado y float

larariro · #1 (**permalink**) 07/09/2005, 10:45

Hola,

Resulta que quiero hacer un sencillo menú horizontal como he visto en un tutorial por ahí. En ese ejemplo, he visto que el menú lleva un float: left para ponerlo a la izquierda, pero yo lo quiero centrado, propiedad que no admite el float. Aquí podríamos decir "pues si no lo quieres a la izquierda, quítale el float". El problema está en que, al quitarle el float, me sale centrado, pero me separa las opciones del menú y eso no me gusta (es un antojo de diseño)

Para que veáis lo que digo, probad este código con la línea del float y sin ella.

Código PHP:

  <html> 
<head> 
<title>Menú</title> 
<style type="text/css"> 
a { 
    float: left;    
    width: 7em; 
    text-decoration: none; 
    font-weight: bold; 
    color: white; 
    background-color: purple; 
    padding: 0.2em 0.6em;  
    border-right: 1px solid white;  
} 
 
a:hover { 
    background-color: #A52218; 
} 
</style> 
 
</head> 
<body> 
 
<div align="center"> 
    <a href="">Inicio</a> 
    <a href="">Introduccion</a> 
    <a href="">Botones</a> 
    <a href="">Ejemplo</a> 
    <a href="">Acerca de...</a> 
</div> 
 
</body> 
</html>

La pregunta es evidente:

¿Cómo puedo dejar los recuadros pegados y centrados?

Un saludo y muchas gracias

#2 (**permalink**) 07/09/2005, 13:25

quizás deberías jugar con los márgenes (margin-left y margin-right) y/o con el posicionamiento absoluto (right, left y position:absolute)

Saludos.

K3NNY · #3 (**permalink**) 07/09/2005, 14:57

Proba cambiando en el CSS el "float: left;" por "display:inline;" y contanos.

KnowDemon · #4 (**permalink**) 07/09/2005, 23:08

No tengo muy claro lo que deseas conseguir visualmente, pero ahí va algo que te puede servir de base.

El menu (HTML):

Código:

<ul class="menu">
 <li><a href="">Vinculo 1</a></li>
 <li><a href="">Vinculo 2</a></li>
 <li><a href="">Vinculo 3</a></li>
 <li><a href="">Vinculo 4</a></li>
 <li><a href="">Vinculo 5</a></li>
</ul>

El CSS:

Código:

ul.menu{
width: 75%; /*Debes definir forozamente un ancho. Puede ser como sea.*/
margin: auto; /*Solo aplica si usas un DOCTYPE estricto. Si no, usa:
margin-left: auto;
margin-right: auto;*/
padding: 0;
list-style: none;
}

ul.menu li{
display: inline;
padding: 0;
margin: 0;
}

Podras ajustar otras opciones modificando/agregando cosas en el CSS.

larariro · #5 (**permalink**) 08/09/2005, 02:00

Muchas gracias por responder

Al principio no sabía muy bien qué era lo que hacía el float, pero ahora ya lo entindo: agrupa todos los elementos a la izquierda, independientemente del contenedor en el que estén (por eso no respeta la alineación al centro del div) y sin márgenes laterales (que es lo que yo quiero)

He probado con display: inline y no ha resultado.

También lo he intentado con margin-left y margin-right y nada. El posicionamiento absoluto no lo sé manejar, así que, si puedes ser un poco más específico, te lo agradecería.

Lo que sí se ha acercado bastante es utilizar una lista (ul y li) Ahora me hace una especie de centrado (no es un centrado real, pero se le aproxima) Eso sí, para que los links aparezcan pegados sigo necesitando float: left, por lo que el margin y el padding sobran, ya que el float no les hace caso.

Por ahora, esto es lo que más se parece a lo que quiero:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Menu</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 
ul.menu{ 
    width: 65%;  
    margin: auto;  
} 
 
ul.menu li{ 
    display: inline; 
    text-align: center; 
} 
 
a { 
/*    float: left;   */ 
    width: 7em; 
    text-decoration: none; 
    font-weight: bold; 
    color: white; 
    background-color: purple; 
    padding: 0.2em 0.6em; 
    border-right: 1px solid white; 
} 
 
a:hover { 
    background-color: #A52218; 
} 
</style>  
</head> 
 
<body> 
<div align="center"> 
Texto centrado 
</div> 
<br> 
<ul class="menu"> 
    <li><a href="">Inicio</a></li> 
    <li><a href="">Introduccion</a></li> 
    <li><a href="">Botones</a></li> 
    <li><a href="">Ejemplo</a></li> 
    <li><a href="">Acerca de...</a></li> 
</ul>  
</body> 
</html>

He añadido un texto centrado para que veáis lo que ocurre con el centrado del menú al redimensionar la pantalla.

Una cosa que no entiendo cómo funciona es lo de la anchura del elemento ul. Todo el posicionamiento del menú depende de ello, pero no sé por qué ni cómo.

Supongo que, de lo que se trata, es de conseguir algo que centre un menú con un float (que pasa de todo tipo de alineaciones), u otra manera de mostrar los elementos del menú pegados.

Tengo la sensación todo el tiempo de que esto debería ser una chorrada. No sé si me estoy liando innecesariamente....

larariro · #6 (**permalink**) 08/09/2005, 05:36

Ya no puedo más. No entiendo el CSS. Lo he hecho con una tabla de las de toda la vida.

Después de buscar por ahí toda la mañana, no he conseguido ni centrar un div en la pantalla sin darle un tamaño fijo. Seguramente sea culpa mía, pero no debería ser tan difícil.

En fin, esto es lo que he hecho (y es justo lo que quería)

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Menu</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 
a { 
    font-family: "tahoma", "arial", "sans-serif"; 
    font-size: 10pt; 
    text-decoration: none; 
    font-weight: bold; 
    color: white; 
    background-color: purple; 
    padding: 0.3em 0.6em; 
    border-right: 1px solid white;  
} 
 
a:hover { 
    background-color: #A52218; 
} 
 
</style>  
</head> 
 
<body> 
<div align="center"> 
    <table cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
        <td> 
            <a href="">Introduccion</a> 
        </td>  
        <td> 
            <a href="">Botones</a> 
        </td> 
        <td> 
            <a href="">Ejemplo</a> 
        </td> 
        <td> 
            <a href="">Acerca de...</a> 
        </td> 
    </tr> 
    </table> 
</div> 
</body> 
</html>

Eso sí, me encantaría saber cómo se hace esto en CSS, porque parece de lo más sencillo...

Muchas gracias y un saludo.

yeffer2 · #7 (**permalink**) 12/03/2012, 22:33

bueno creo que lo he conseguido .... he copiado la respuesta de KnowDemon.... claro pero modoificado ... la verdad que yo tambien tube problemas ....pero bueno ami me resulto aqui te mando el code :

Código PHP:

Ver original<style>
 
ul.menu{
text-align:center;
/* width: 75%; Debes definir forozamente un ancho. Puede ser como sea.*/
margin: auto; /*Solo aplica si usas un DOCTYPE estricto. Si no, usa:
margin-left: auto;
margin-right: auto;*/
padding: 0;
list-style: none;
}
 
ul.menu li{
display:inline;
margin: 10px 10px 10px 10px;
}
</style>
 
<ul class="menu">
 <li><a href="">Vinculo 1</a></li>
 <li><a href="">Vinculo 2</a></li>
 <li><a href="">Vinculo 3</a></li>
 <li><a href="">Vinculo 4</a></li>
 <li><a href="">Vinculo 5</a></li>
</ul>

funciona bueno .... puedes encontrar el mismo codigo en la page que termine [URL="www.julsabuss.com.pe"]www.julsabuss.com.pe[/URL]

ruben1984 · #8 (**permalink**) 14/03/2012, 16:18

Hola buenas eh leido vuestros post y estoy interesado en algo aunek eh preguntado por otro lado,debido a ke acabo de leer vuestros post os pregunto haber si me explicais:

me gustaria hacer oh una web en php estilo phpnuke en la que los blokes se alineasen a la izkierda,centrados o derecha segun corresponda o le diga habia pensado en hacerlo con divs con este codigo:

Código PHP:

 
<div style="align: left;"><?php require('bloque_izkierda.php');?> </div>  
<div style="align: center;"><?php require('bloque centro.php');?> </div>  
<div style="align: right;"><?php require('blokederecha.php');?> </div>

peor no iba y me sugirieron este otro

Código PHP:

 
<div style="float: left;"><?php require('bloque_izkierda.php');?> </div> 
<div style="float: left;"><?php require('bloque centro.php');?> </div> 
<div style="float: left;"><?php require('blokederecha.php');?> </div> 
<div style="clear:both"></div>

y tampoco logre el resultado k keria xd ya que con ambos lo k hace el php es ponermelos uno debajo del otro y yo lo k kiero es k me los ponga a la izkierda,derecha o donde le diga algo asi como una web de phpnuke

muchas gracias

kseso? · #9 (**permalink**) 14/03/2012, 16:24

Hola:
¿Es aquí la kedada de los arqueólogos?
Qué bueno es encontrarnos en temas que llevan 6 años y medio sepultados.

ruben1984 · #10 (**permalink**) 15/03/2012, 06:37

Cita:

Iniciado por kseso?

Hola:
¿Es aquí la kedada de los arqueólogos?
Qué bueno es encontrarnos en temas que llevan 6 años y medio sepultados.

bueno eso es buena señal de k el foro funciona bien xd y si el tema es interesante por k no reavivarlo¿

kseso? · #11 (**permalink**) 15/03/2012, 09:23

Cita:

Iniciado por ruben1984

bueno eso es buena señal de k el foro funciona bien xd y si el tema es interesante por k no reavivarlo¿

¿En serio?
Piense algo antes opinar. Le ayudo:

¿Usted cree que el autor del tema a estas alturas aun sigue esperando una posible solución? Bueno, podría ser...
Segundo y más importante:
¿Cree usted que el mejor sitio para plantear una duda o consulta nueva es hacerlo en un post resucitado 6 años y medio después?

No. De lo que es buena señal es que los usuarios noveles no se molestan en leer las normas antes de publicar.
No es casualidad que el nigromante lo haya hecho con su primer mensaje y que quien le ha seguido en la procesión se haya registrado este mismo mes.