Foros del Web » Creando para Internet » CSS »

Centrado y float

Estas en el tema de Centrado y float en el foro de CSS en Foros del Web. 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ú ...
  #1 (permalink)  
Antiguo 07/09/2005, 11:45
 
Fecha de Ingreso: agosto-2004
Mensajes: 51
Antigüedad: 13 años, 3 meses
Puntos: 0
Centrado y float

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">
{
    
floatleft;   
    
width7em;
    
text-decorationnone;
    
font-weightbold;
    
colorwhite;
    
background-colorpurple;
    
padding0.2em 0.6em
    
border-right1px 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)  
Antiguo 07/09/2005, 14:25
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
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.
  #3 (permalink)  
Antiguo 07/09/2005, 15:57
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
Proba cambiando en el CSS el "float: left;" por "display:inline;" y contanos.
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #4 (permalink)  
Antiguo 08/09/2005, 00:08
Avatar de KnowDemon  
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 13 años, 5 meses
Puntos: 2
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.
__________________
Mi pequeño espacio en la web: VisiónE
"El cosmos es todo lo que es, todo lo que fue, y todo lo que será alguna vez."
  #5 (permalink)  
Antiguo 08/09/2005, 03:00
 
Fecha de Ingreso: agosto-2004
Mensajes: 51
Antigüedad: 13 años, 3 meses
Puntos: 0
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{
    
width65%; 
    
marginauto
}

ul.menu li{
    
displayinline;
    
text-aligncenter;
}

{
/*    float: left;   */
    
width7em;
    
text-decorationnone;
    
font-weightbold;
    
colorwhite;
    
background-colorpurple;
    
padding0.2em 0.6em;
    
border-right1px 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....
  #6 (permalink)  
Antiguo 08/09/2005, 06:36
 
Fecha de Ingreso: agosto-2004
Mensajes: 51
Antigüedad: 13 años, 3 meses
Puntos: 0
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">
{
    
font-family"tahoma""arial""sans-serif";
    
font-size10pt;
    
text-decorationnone;
    
font-weightbold;
    
colorwhite;
    
background-colorpurple;
    
padding0.3em 0.6em;
    
border-right1px 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.
  #7 (permalink)  
Antiguo 12/03/2012, 23:33
 
Fecha de Ingreso: marzo-2012
Mensajes: 1
Antigüedad: 5 años, 8 meses
Puntos: 0
Respuesta: Centrado y float

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
  1. <style>
  2.  
  3. ul.menu{
  4. text-align:center;
  5. /* width: 75%; Debes definir forozamente un ancho. Puede ser como sea.*/
  6. margin: auto; /*Solo aplica si usas un DOCTYPE estricto. Si no, usa:
  7. margin-left: auto;
  8. margin-right: auto;*/
  9. padding: 0;
  10. list-style: none;
  11. }
  12.  
  13. ul.menu li{
  14. display:inline;
  15. margin: 10px 10px 10px 10px;
  16. }
  17. </style>
  18.  
  19. <ul class="menu">
  20.  <li><a href="">Vinculo 1</a></li>
  21.  <li><a href="">Vinculo 2</a></li>
  22.  <li><a href="">Vinculo 3</a></li>
  23.  <li><a href="">Vinculo 4</a></li>
  24.  <li><a href="">Vinculo 5</a></li>
  25. </ul>

funciona bueno .... puedes encontrar el mismo codigo en la page que termine [URL="www.julsabuss.com.pe"]www.julsabuss.com.pe[/URL]
  #8 (permalink)  
Antiguo 14/03/2012, 17:18
 
Fecha de Ingreso: marzo-2012
Mensajes: 18
Antigüedad: 5 años, 8 meses
Puntos: 0
Respuesta: Centrado y float

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
  #9 (permalink)  
Antiguo 14/03/2012, 17:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrado y float

Hola:
¿Es aquí la kedada de los arqueólogos?
Qué bueno es encontrarnos en temas que llevan 6 años y medio sepultados.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 15/03/2012, 07:37
 
Fecha de Ingreso: marzo-2012
Mensajes: 18
Antigüedad: 5 años, 8 meses
Puntos: 0
Respuesta: Centrado y float

Cita:
Iniciado por kseso? Ver Mensaje
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¿
  #11 (permalink)  
Antiguo 15/03/2012, 10:23
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrado y float

Cita:
Iniciado por ruben1984 Ver Mensaje
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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 22:39.