Comunidad de diseño web y desarrollo en internet online

alineacion con css

Citar            
MensajeEscrito el 21 Ene 2011 11:36 pm
Hola a todos,

Llevo horas intentando centrar un menú, y he probado de todo y no hay forma... os pongo una imagen de la estructura que lleva y ahora os explico:

[img] Uploaded with ImageShack.us[/img]

Bien... tengo la img1 que quiero q esté alineada al margen izqda del navegador (esto si lo he conseguido).
Luego la img2 (que esté alineado a la derecha)

Luego hay un bloque en medio de listas, con 4 <li> que quiero que se mueva como un bloque y se quede centrado en medio del navegador a iguales distancias de img1 y 2. Y que los 4 se queden así juntitos (pq he probado a modificar con padding, margin etc... y no, quiero que todos los de el bloque central queden juntitos).

Pues bien, he probado con position absolute, pero claro si redimensionas el navegador ya no están bien colocados, tienen que "fluir" y estar siempre uno a la derecha otro en centro y otro a la izqda... entonces al probar con relative, se me descoloca todo, el 2 se me va debajo del 1... o tb probé otras cositas (q ya ni recuerdo de tantos cambios) y el float:left del bloque central me dejaba de funcionar y se ponían todos en vertical...

En fin... que no doy con el "punto"... y mira que a simple vista parece fácil... pues aquí llevo horas y no los consigo situar...

A alguien se le ocurre como tiene q ir el html y el css para que funcionen???

Mil gracias!!

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 22 Ene 2011 12:12 am
con algo así debería solucionarse:

Código HTML :

<div id="left">LEFT</div>
<div id="right">RIGHT</div>
<ul id="center">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>


Código HTML :

#left{float:left}
#center{margin:0 auto; overflow:hidden}
#right{float:right}
#center li{width:50px; border: 1px solid black; margin:5px; float:left; list-style:none}
#left, #right, #center{width:250px; border: 1px solid black; padding: 5px}


suerte

Por tribak

Claber

2448 de clabLevel

6 tutoriales

Genero:Masculino   Héroes

Fotógrafo o algo

firefox
Citar            
MensajeEscrito el 22 Ene 2011 09:37 am
Gracias tribak! Aunque me sigue dando algunos problemas con el code que me das, y no sé como resolverlo, si fueras tan amable de explicarme y poder solucionarlo...

Te explico el problema que sigue ocurriendo... En principio las listas, cada una es una imagen, pero no son todas del mismo tamaño, en realidad son así:

[img] Uploaded with ImageShack.us[/img]

Pero usando el code q me das... consigo posicionarlo correctamente si... pero se me ven así :

[img][/img]

Por si con la imagen no se ve claro, te explico con palabras:
IMG1- se estira un poco (no se nota mucho, pero se estira)
IMG2 - se estira demasidado la imagen y se distorsiona por este estiramiento
IMG4 e IMG5- al ser más pequeños que la 3 y la 6, se colocan encima de la 3...

Esta es la modificación que he hecho a tu code para ajustarlo a mi diseño:

Código HTML :

#izquierda{float:left} 
#centro{margin:0 auto; } 
#derecha{float:right} 
#centro li{width:50px;  margin:5px; float:left; list-style:none} 
#izquierda, #derecha, #centro{width:250px;  padding: 5px} 


En la última línea modificando el width consigo "varios estiramientos" de los elementos, pero yo no quiero q se estiren ninguno, sólo que se posicionen su sitio. (La pág está diseñada para 1024x768 pero se tiene q ver bien en mayores resoluciones y en su sitio). He ido modificando los width q me das, por si encontraba el equilibrio, pero no doy con ello...

¿Puedes ayudarme?

Gracias...

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 22 Ene 2011 06:02 pm
el problema son las medidas, pero intenta esto

Código HTML :

<div id="content">
<div id="left">1</div>
<div id="right">2</div>
<ul>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>

Código HTML :

#content { float:left; width:100%; overflow:hidden; position:relative; clear:none}
#content ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:absolute; left:50%; top:0}
#content ul li {display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%}
#content ul li img { display:block; margin:0 0 0 1px; padding:3px 10px}
#left{float:left}
#right{float:right}

Por tribak

Claber

2448 de clabLevel

6 tutoriales

Genero:Masculino   Héroes

Fotógrafo o algo

firefox
Citar            
MensajeEscrito el 22 Ene 2011 10:45 pm
Perfecto!! Mil gracias!! :D

Por Hapki

Claber

268 de clabLevel



 

firefox
Citar            
MensajeEscrito el 22 Ene 2011 11:06 pm
pues no tan perfecto, pero funciona xD

Por tribak

Claber

2448 de clabLevel

6 tutoriales

Genero:Masculino   Héroes

Fotógrafo o algo

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.