Foros del Web » Creando para Internet » CSS »

Centrar - Me estoy volviendo loco

Estas en el tema de Centrar - Me estoy volviendo loco en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/05/2008, 17:46
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Centrar - Me estoy volviendo loco

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 .
  #2 (permalink)  
Antiguo 02/05/2008, 18:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Centrar - Me estoy volviendo loco

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.
  #3 (permalink)  
Antiguo 03/05/2008, 09:51
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Re: Centrar - Me estoy volviendo loco

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> 
  #4 (permalink)  
Antiguo 03/05/2008, 10:37
 
Fecha de Ingreso: marzo-2008
Mensajes: 303
Antigüedad: 9 años, 8 meses
Puntos: 4
Re: Centrar - Me estoy volviendo loco

Ya que lo que tiene son textos de una linea puedes probar a añadirle "line-height: 35px" a la clase ".clase".
  #5 (permalink)  
Antiguo 03/05/2008, 11:03
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Re: Centrar - Me estoy volviendo loco

Hola de nuevo...

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

¿Alguna otra opcion?
  #6 (permalink)  
Antiguo 03/05/2008, 11:55
 
Fecha de Ingreso: marzo-2008
Mensajes: 166
Antigüedad: 9 años, 8 meses
Puntos: 5
Re: Centrar - Me estoy volviendo loco

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.
  #7 (permalink)  
Antiguo 03/05/2008, 12:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Centrar - Me estoy volviendo loco

Cita:
Iniciado por salbatore Ver Mensaje
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.
  #8 (permalink)  
Antiguo 03/05/2008, 12:44
 
Fecha de Ingreso: abril-2008
Ubicación: Oaxaca
Mensajes: 256
Antigüedad: 9 años, 7 meses
Puntos: 2
Re: Centrar - Me estoy volviendo loco

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.
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 15:02.