Centrar - Me estoy volviendo loco

salbatore · #1 (**permalink**) 02/05/2008, 16:46

Hola, familia:

Me estoy volviendo loco en centrar las cosas con css, es una pasada lo caotico que es, algo espectacular, jeje. Mirar llevo todo el dia intentadolo, pero nada, he leido todos los ilos y tutoriales que he encontrado por google, pero nada me funciona, jeje.

Quiero hacer un div de 700px de anchura por 35px de altura que este centrado horizontalmente en medio de la web, llamado "menu". Dentro de "menu" cuatro divs que esten uno de tras de otro horizontalmente, es decir, como si tuviese una tabla de cuatro columnas. Estos cuatro divs tambien quiero que esten centrados horizontalmente dentro del div llamado "menu". Por ultimo quiero centrar el contenido de los cuatro divs que estan dentro del "menu", centrarlo horizoltamente y verticalmente. ¿Alguien me ayuda?

Mirar tengo los divs de este modo:

Código HTML:

<div id="menu">
<div id="cosa"><a href="index.php">INDEX</a></div>
<div id="cosa"><a href="view.php">VIEW</a></div>
<div id="cosa"><a href="insert.php">INSERT</a></div>
<div id="cosa"><a href="register.php">REGISTER</a></div>
</div>

Y los css:

Código HTML:

/* CSS Document */

	* {padding:0; margin:0;}
	body {text-align:center; margin:0 auto;}

	#menu { width:700px; height:35px;  margin: 0 auto; text-align:center;}
		#cosa{ padding-left:29px; padding-right:29px; height:35px; float:left;}

De verdad, llevo todo el dia intentado hacerlo, me estoy volviendo completamente loco. Y por si fuera poco el caos mental que me han metido algunos blogeros con sus tutoriales de centrar me han terminado por desesperar.

Espero encontrar solucion a esto, pues hace un rato me ha dado un bajon tremendo, y he vuelto hacer todo con tablas, pero al cabo de un rato he pensado que lo bueno debe costar, jeje, asi que aqui estoy de nuevo con los css...

¿Una ayudita?, aunque en mi caso es un ayudon

.

Mikmoro · #2 (**permalink**) 02/05/2008, 17:51

Uyyyyyyyyy!!!

Has estado a punto de irte al lado oscuro de la fuerza de las tablas

Mira un par de cosas:

En primer lugar, el id de una etiqueta se debe usar una única vez como identificador de esa etiqueta, así que si quieres repetir una clase debes usar class en lugar de id en la etiqueta (tus etiquetas <div id="cosa"> por <div class="cosa">), y entonces cambiar #cosa por .cosa en la css.

En segundo logar, para hacer una lista de enlaces para un menú es preferible usar una lista de elementos. Prueba este código y no desesperes; busca tutoriales que al final lo conseguirás. Lee mucho y después pregunta lo que no entiendas:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859" />
<title>salbatore</title>
<style type="text/css">
* { margin: 0pt;
padding: 0pt;
}
body { margin: 0pt auto;
text-align: center;
}
#menu { border: medium solid ;
margin: 0pt auto;
width: 700px;
height: 35px;
text-align: center;
}
ul { list-style-type: none;
}
li { padding-left: 29px;
padding-right: 29px;
height: 35px;
display: inline;
text-align: center;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="index.php">INDEX</a></li>
<li><a href="view.php">VIEW</a></li>
<li><a href="insert.php">INSERT</a></li>
<li><a href="register.php">REGISTER</a></li>
</ul>
</div>
</body>
</html>

Ya contarás.

Mikel.

salbatore · #3 (**permalink**) 03/05/2008, 08:51

Hola de nuevo...

Estoy intentado que el <li> tenga una altura de 35px, pero no hay forma. En el internet explorer funciona, pero en firefox nada. ¿Que hago?

Código HTML:

* {padding:0; margin:0;}
	body {margin: 0 auto; text-align: center;}
	
	#divon {margin-left: auto; margin-right: auto; text-align:center; width:100%;}
		.clase {display: inline; text-align: center; padding-left:29px; padding-right:29px; margin-left:2px; margin-right:2px; background:#FF0000; height:35px;}

Código HTML:

<div id="divon">
	<ul>
		<li class="clase"><a href="index.php">INDEX</a></li>
		<li class="clase"><a href="view.php">VIEW</a></li>
		<li class="clase"><a href="insert.php">INSERT</a></li>
		<li class="clase"><a href="register.php">REGISTER</a></li>
	</ul>
</div>

a2a2 · #4 (**permalink**) 03/05/2008, 09:37

Ya que lo que tiene son textos de una linea puedes probar a añadirle "line-height: 35px" a la clase ".clase".

salbatore · #5 (**permalink**) 03/05/2008, 10:03

Hola de nuevo...

Ya lo he probado, funciona pero solo en el internet explorer...

¿Alguna otra opcion?

GastoNike · #6 (**permalink**) 03/05/2008, 10:55

li.clase { display: block; height: 35px; float: left; }

Asi quedaría de alto de 35px pero sería mejor que digas que quieres hacer en concreto para que te digamos como.

Saludos.

Mikmoro · #7 (**permalink**) 03/05/2008, 11:34

Cita:

Iniciado por salbatore

Hola de nuevo...

Ya lo he probado, funciona pero solo en el internet explorer...

¿Alguna otra opcion?

¿Y si le das el line-height: 35px al elemento "a", que es lo lógico?

a {line-height: 35px;
...otras propiedades...
}

Mikel.

ASYNTETYCO · #8 (**permalink**) 03/05/2008, 11:44

Mira simplemente inserta un div con posicion absoluta, ya que le diste posicion absoluta dale el ancho y el alto que quieres (700 x 30 mas o menos no?). Ahora para que se centre horizontalmente puedes hacer 2 cosas. O darle margin-left: auto y margin-right:auto y esto lo centra. O puedes usar el atributo left: 0 o left: auto (no estoy seguro si left es 0 o auto checa en internet que se le puede dar)

Bueno ahora si ya lo centraste horizontalmente. Hay una opcion que es vertical-align o algo asi. Yo tengo Dreamweaver y ahi me sale en mi paleta css, pero puedes buscarlo en internet. Bueno pues le das en eso y tiene una opcion escoges middle. y ya quedo centrado con el margin y el vertical align.
Ahora no te compliques y dentro de ese div pon una tabla y centrala. Lsto se vera como quieres.

Esto del css es una comlicacion para hacer cosas muy sencillas, desafortunadament. Espero te sirva.