Páginas: [1] 2 
|
 |
|
 Autor
|
Tema: Problema centrando div (Leído 442 veces)
|
NewLog
 Desconectado
Mensajes: 315
|
Hola amigos! Me parece que es la primera vez que me paso por este subforo (sin contar el de php). Mi duda es la siguiente: Tengo un menú en mi web y tengo dos pequeños problemas. El primero es que las pestañas no se me centran en el medio de la pantalla (y he usado el margin-left: auto; margin-right: auto;) y mi otro problema, es que en el firefox, las pestañas y el borde del div (clear) se ven juntas (como ha de ser), pero en el iexplorer no es así!. Si me podéis echar una mano os estaré muy agradecido! Aquí os dejo el código del menú y su hoja de estilos: <div class="Contenedor"> <div id="tabs"> <ul> <li><a href="#" title="Papers"><span>Papers</span></a></li> <li><a href="#" title="Herramientas"><span>Herramientas</span></a></li> <li><a href="#" title="Exploits"><span>Exploits</span></a></li> <li><a href="#" title="Foro"><span>Foro</span></a></li> </ul> </div> <div class="Clear"><p>Holaaa</p></div> </div> body {
padding:0;
font: bold 14px Verdana;
text-align: center;
}
/*- Menu Tabs--------------------------- */
#tabs {
width: 99%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabs ul {
padding: 10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
}
#tabs a {
background:url("tableft.gif") no-repeat left top;
text-decoration:none;
}
#tabs a span {
float: left;
background:url("tabright.gif") no-repeat right top;
color:#666;
padding:5px 25px 4px 25px;
margin: 0 auto;
}
#tabs a:hover span{
color: #CF0000;
}
#tabs a:hover {
background-position: 0% -100px;
background-color: #000;
}
#tabs a:hover span {
background-position: 100% -100px;
}
.Clear {
clear: both;
width: 90%;
border: 2px solid #FFF;
height: 20em;
}
.Contenedor {
margin-left: auto;
margin-right:auto;
}
Como véis, el menú y el cuerpo de la página esta dentro de un div llamado contenedor que es al que le aplico lo de los márgenes! Muchas gracias! |
|
|
|
« Última modificación: 29 Junio 2008, 19:28 por NewLog »
|
En línea
|
|
|
|
NewLog
Desconectado
Mensajes: 315
|
Después de mucho tiempo (ya que llevo peleándome desde antes de postear), he podido solucionar el segundo error!!
Ahora en el ie el menú y el div ya están juntos! Ha sido gracias a poner margin: 0; en el #tabs ul {}
Ahora sólo me falta centrar las pestañas U_U
P.D.: Gracias por editar el post! No era mi intención spammear ^^'
|
|
|
|
|
En línea
|
|
|
|
Nakp
 Conectado
Mensajes: 2.687
The sound of music ñ_ñ
|
centrar la div con respecto a la pantalla... o con respecto a otra div? por ahi he puesto (exhaustivamente) un código para centrar divs que funciona donde sea  salu2 |
|
|
|
|
En línea
|
|
|
|
Hans el Topo
Desconectado
Mensajes: 1.688
"Estoy cansado de no hacer nada"
|
la forma sencilla para centrar todo es: <center><div></div></center> también puedes hacerlo así <div id="contenedor"><div id="contenido"></div></div> .css
/* limpiar márgenes por defecto en algunos navegadores */
* {
margin: 0;
padding: 0;
}
/* centrar con capas*/
body{
width:100%;
}
#contenedor{
width:100%;
text-align:center;
}
#contenido{
text-align:left;
}
|
|
|
|
|
En línea
|
|
|
|
NewLog
Desconectado
Mensajes: 315
|
Siento no haber podido contestar antes. He estado fuera durante una semana! El caso es que he probado todo lo que habéis dicho, pero nada funciona. Si aplico el <center></center> (en el div id=tabs) se me centra todo el marco pero no las pestañas. El text-align tampoco me ha funcionado! En cuanto a la solución a la que creo que te refieres ( Nakp) no me sirve de mucho, aunque gracias. (Supongo que te refieres a lo explicado en: Enlace) Gracias a los dos. Ojala se os ocurra algo más, porqué yo ya no se qué hacer. Me parece que lo voy a acabar dejando descentrado que no queda muy mal ^^U. P.D.: La web que estoy haciendo es parecida a la que tienes en tu firma Hans el Topo. El problema es que no acabo de colocar donde quiero las pestañas superiores. Por cierto... vaya pasada de web... me cago en todo... Me estoy haciendo un repaso de tus css... es una locura... |
|
|
|
« Última modificación: 06 Julio 2008, 04:46 por NewLog »
|
En línea
|
|
|
|
Hans el Topo
Desconectado
Mensajes: 1.688
"Estoy cansado de no hacer nada"
|
yo creo que te falta en el css agregar el tamaño de la capa contenedor y del body lo que se suele hacer es poner en el body width: 100%; height: 100%; y luego especificar en el contenedor el tamaño gracias por tu comentario acerca de mi página, hasta hace poco no solía estructurar muy decentemente los css así que aunque guardan un "orden" tal vez no sea muy claro  ¿a cual de todas te refieres? jaja intenta subir la web a algún lugar para ver que problemas puede tener |
|
|
|
|
En línea
|
|
|
|
NewLog
Desconectado
Mensajes: 315
|
Entiendo lo que quieres decir. Lo que pasa es que lo que yo quiero centrar no es el contenedor, sinó el menú. He conseguido centrar el marco (donde va la información), pero por mucho que intente centrar las pestañas no puedo. Además, el div que hacía la función de contenedor lo borré hace un tiempo porqué no me servía de mucho... Quizá ahí resida el problema. P.D.: Tooooodas tus hojas de estilos son una locura xD Muy curradas |
|
|
|
|
En línea
|
|
|
|
Hans el Topo
Desconectado
Mensajes: 1.688
"Estoy cansado de no hacer nada"
|
bueno, el problema radica en el float:left; de la capa tabs, quitándolo ya te hará caso al center si utilizas firefox te recomiendo un plugin muy últil llamado firebug con el que podrás ver que estilos te esta tomando la capa, la anchura etc creo que te falta un contenedor principal la forma sencilla de hacerlo sería así <body> <center> <div id="contenedor"> <div id="cabecera"></div> <div id="menu"></div> <div id="contenido"></div> </center> </body> P.D. la página tiene clase |
|
|
|
|
En línea
|
|
|
|
Nakp
Conectado
Mensajes: 2.687
The sound of music ñ_ñ
|
en realidad me refería a que hagas esto.tabs{
position: relative; /*posición relativa a un div*/
width: 800px; /*ancho del div de las pestañas*/
height: 100px; /*alto del mismo*/
margin-left:50%; /*la ponemos al centro de la pantalla*/
left:-400px; /*le quito la mitad del width para regresar la mitad ;) */
}<div class="Contenedor">
<div id="tabs">
<ul>
<li><a href="#" title="Papers"><span>Papers</span></a></li>
<li><a href="#" title="Herramientas"><span>Herramientas</span></a></li>
<li><a href="#" title="Exploits"><span>Exploits</span></a></li>
<li><a href="#" title="Foro"><span>Foro</span></a></li>
</ul>
</div> |
|
|
|
|
En línea
|
|
|
|
NewLog
Desconectado
Mensajes: 315
|
Gracias a los dos de nuevo! Iré por pasos. En cuanto a lo que dices del float Hans, tienes razón, sirve, básicamente, para nada. Lo he quitado y no ha pasado nada... con tantos intentos se me está volviendo un caos el css. Aun así, he añadido el div contenedor y después le he hecho un text-align: center; al div tabs y no me ha servido de nada! Se me centra lo que es el cuadrado (marco) y no las pestañas. Después le he añadido el text-align: center; al div contenido y me ha pasado lo mismo. Cabe comentar que los text-align también los he combinado con un position: relative; o position: absolute; sin ningún éxito. En cuanto a tu solución, Nakp, he escrito lo que me has dicho y no me ha funcionado, te dejo una captura de como queda con el firefox y otra con el internet explorer, además, no me gustaría nada tener que tirar de midas fijas (800px, 100px, etc) en vez de porcentajes: Firefox:  IE:  Como ves, no lo consigo. Los bordes de colores son algunos de los divs. Hans, cuando hago lo que propones me queda una cosa parecida a la screen del ie. Las pestañas a la izquierda, y el marco centrado. Sin embargo, los bordes de los divs (los "dashed" y de colores, se solapan, como es normal, quiero decir que no se centran). A ver si entre todos po-de-mos! (lol... no he podido evitar la broma...). En fin, muchas gracias! P.D.: Hans, me alegra que lo comentes, estoy intentando hacer una página simple y clara! Ya veremos como queda ^^ |
|
|
|
« Última modificación: 06 Julio 2008, 19:10 por NewLog »
|
En línea
|
|
|
|
Nakp
Conectado
Mensajes: 2.687
The sound of music ñ_ñ
|
 pues el tamaño fijo es solo para la div de las pestañas que no va a variar nunca, a diferencia del contenedor, que podes manejar con porcentajes. Te lo explico brevemente.. margin-left:50%; esto sitúa un elemento al 50% desde la izq a la der... entonces la div de tabs empezaria desde la mitad verdad? left:-400px; con esto lo que hago es simplemente regresar la mitad del contenedor (en caso de que el ancho fuese 800px) para centrarlo perfectamente y lo mísmo podría hacer con margin-top, top y height para centrarlo verticalmente y si subis la web e intentamos arreglarlo? sería mas fácil ver todo así jeje... salu2 |
|
|
|
|
En línea
|
|
|
|
NewLog
Desconectado
Mensajes: 315
|
Más o menos he entendido tu código, pero como ves no da resultados Te mando el link por privado! |
|
|
|
|
En línea
|
|
|
|
NewLog
Desconectado
Mensajes: 315
|
Vaya desliz! Como has dicho no tenía bien los divs... Con las prisas la he cagado! Una vez arreglado eso, tu solución me ha funcionado, pero: Sabes si hay alguna manera de hacerlo sin fijar las medidas de manera absoluta? Ya que si lo hago con las pestañas también tengo que fijar las dimensiones del marco de manera absoluta para centrarlo de igual manera, y a mi lo que me gustaría es que el tamaño o posición de la web variara dependiendo del tamaño del monitor! (Por eso el "trick" de margin-right: auto; margin-left: auto; que no me funciona). Gracias por tu solución, la tendré presente a partir de ahora ^^ Edito: Vale, ahora me doy cuenta de que hacerlo como comentas no me ocasiona ningún problema con las midas fijas, ya que en realidad yo también lo estaba haciendo con midas fijas al aplicarle padding de x píxeles. El hecho de darle un width de 800px me ha confundido. Lo que importa es que lo centras con el margin-left: 50%, y eso no es una medida fija! Bueno, perdona mi ida de olla, supongo que no me habrás entendido, pero da igual. Yo sí . Gracias a los dos!! |
|
|
|
« Última modificación: 06 Julio 2008, 21:16 por NewLog »
|
En línea
|
|
|
|
Hans el Topo
Desconectado
Mensajes: 1.688
"Estoy cansado de no hacer nada"
|
es bastante raro que no te funcione la etiqueta center ni el text-align y menos aun que no funcione el <center>
creo que el problema se debe a que no centras la capa que contiene todo sino que lo estabas haciendo por partes y entonces se descontrola
|
|
|
|
|
En línea
|
|
|
|
Nakp
Conectado
Mensajes: 2.687
The sound of music ñ_ñ
|
pues... nunca he probado centrarlo con porcentajes pero creo que funcionaría... si el div de tabs tiene un ancho de 50% de la pag lo pondria al centro con un margin-left de 50% y lo regresaría con otro 50% del ancho de la div (en relidad sería un 25% del ancho de la pag o algo así... entonces ya lo arreglaste todo? salu2 |
|
|
|
|
En línea
|
|
|
|
|
Páginas: [1] 2 
|
|
|
 |
