Retroceder   Foros del Web > Diseño de Sitios web > CSS

Respuesta
 
Herramientas Desplegado
Antiguo 05-mar-2006, 14:03   #1 (permalink)
bulldog está en el buen camino
 
Fecha de Ingreso: enero-2003
Mensajes: 326
Pregunta 3 columnas

Hola, definitivamente creo que soy un patoso!! Estoy tratando de crear una estructura de web con 3 columnas, he leido en varios sitios cómo hacerlo y no consigo que me quede bien ya que la columna de la derecha la tira hacia abajo la columna centro. Miren, esto es lo que tengo:

Código:
#contenedor{
width:760px;
margin: 0 auto;
background-color:#CCCCCC;
}

#izquierda{
width:150px;
float:left;
}

#derecha{
width:150px;
float:right;
}

#centro{
width:370px;
margin-left:160px;
}
Código:
<div id="contenedor">
  	<div id="contenido">
  		<div id="izquierda">
		       izquierda
		</div>
		<div id="centro">
		      centro
		</div>
		<div id="derecha">
		      derecha
		</div>
  	</div>
</div>

Cual es el problema???

Saludos y muchas gracias!!
bulldog está desconectado   Responder Citando
Antiguo 05-mar-2006, 14:27   #2 (permalink)
xevisoyyo está en el buen camino
 
Avatar de xevisoyyo
 
Fecha de Ingreso: mayo-2005
Mensajes: 164
Enviar un mensaje por MSN a xevisoyyo
codigo css

Código:
body{
text-align:center;}

#contenedor{
margin:auto;
width:760px;
background-color:#CCCCCC;
overflow:auto;}

#izquierda{float:left; margin:0; width:150px;}
#centro{float:left; margin:0; padding:0; width:460px;}
#derecha{float:left; margin:0; width:150px;}
codigo html
Código HTML:
<html><body>
<div id="contenedor">
  		<div id="izquierda">
		       izquierda
		</div>
		<div id="centro">
		      centro
		</div>
		<div id="derecha">
		      derecha
  	</div>
</div></body></html>

1 - He quitado la capa contenido pero puedes cambiar contenedor por contenido y hacer que el contenedor ocupe el 100% de ancho de pagina mientras que el contenido sea de 760px

2 - Decirte que para que no tengas problemas mires que la suma de los anchos de todas las columnas sean igual al ancho que las contiene (imagino que las columnas no las tocaras ni variaras para nada, pero puedes variar la anchura a tu gusto, eso si, si lo haces has de tener en cuenta que no has de añadir ni padding ni margin ni border, en caso de hacerlo tenlo en cuenta para que te salgan las cuentas a la hora de sumar el ancho total de las 3 columnas)

3 - veras que puse overflow:auto; bien aunq en explorer no notes diferencia alguna, en opera o cualquier otro sila notaras, por ejemplo el color d efondo no lo veras sin overflow ya que medira 0px de altura, mientras que con overflox engloba todas las capas que pusiste (izquierda centro derecha), tambien te evita que si al final creas otra capa, las anteriores te queden por encima

4 - pusiste margin:0 auto; solo has d eponer una de las dos, en este caso margin:auto;

5 - el margin-left no lo necesitas, imagino que lo pusiste para que se viera centrada la pagina, pero has de pensar que no todos tienen tu resolucion con lo cual no se vera igual en todos los ordenadores, pero si pones el codigo que te di se vera centrado en todos

6 - si copias lo que te puse tal cual te quedara lo que tu quieres (imagino) igualmente guarda lo que ya tengas o pruebalo en otro lado

Última edición por xevisoyyo; 06-mar-2006 a las 04:50.
xevisoyyo está desconectado   Responder Citando
Antiguo 05-mar-2006, 14:40   #3 (permalink)
man0l0 ha deshabilitado el karma
 
Fecha de Ingreso: febrero-2006
Mensajes: 114
Cita:
Iniciado por xevisoyyo
4 - pusiste margin:0 auto; solo has d eponer una de las dos, en este caso margin:auto;
Estás seguro de eso?, (claro que está mal si se quiere centrar), pero eso es lo mismo que poner:

margin-top: 0;
margin-right: auto;

por tanto me imagino que el código sería válido ¿o me equivoco?.



Saludos!
man0l0 está desconectado   Responder Citando
Antiguo 05-mar-2006, 14:41   #4 (permalink)
xevisoyyo está en el buen camino
 
Avatar de xevisoyyo
 
Fecha de Ingreso: mayo-2005
Mensajes: 164
Enviar un mensaje por MSN a xevisoyyo
imaginé que solo queria centrarlo, en el caso de que quiera la web sin margenes basta con añadir al codigo css que le di un margin:0; en el body, ahi ya entra lo que a el le interese hacer (personalmente no me gusta como queda sin hacer esto)

que pruebe el codigo q le irá bien q es lo que interesa ;)


mira cualquiera de las dos webs q tengo en la firma y veras que bien centradito esta todo

y no uso ni una tabla

pasa de las paginas index que no son las originales, mira dentro de la webs

Última edición por xevisoyyo; 05-mar-2006 a las 14:51.
xevisoyyo está desconectado   Responder Citando
Antiguo 05-mar-2006, 15:14   #5 (permalink)
bulldog está en el buen camino
 
Fecha de Ingreso: enero-2003
Mensajes: 326
Muchas gracias xevisoyyo, ahora ya va todo perfecto, pero una preguntilla, no es más normal ponerle a #derecha{float:right;} en lugar de float:left;??

Muchas gracias por todo y seguiré practicando y por supuesto molestandoos
bulldog está desconectado   Responder Citando
Antiguo 05-mar-2006, 15:21   #6 (permalink)
xevisoyyo está en el buen camino
 
Avatar de xevisoyyo
 
Fecha de Ingreso: mayo-2005
Mensajes: 164
Enviar un mensaje por MSN a xevisoyyo
la verdad es que en este caso poco importa si esta a la derecha o a la izquierda ya que estan encajados, te aconsejo que si usas css para hacer "tablas" siempre encajes todo (explorer interpreta de diferente manera y si haces todo a medida no hay interpretacion que valga), de esta manera no habran desplazamientos, para ello ten en cuenta siempre lo que te dije

ancho de una columna = whith + padding + border + margin, pero no creo que pongas nada de eso en esas columnas ya que seguro tendras los contenidos dentro de ellas sin estas verse afectadas, siemrpe y cuando no pongas nada dentro que supere su ancho

en cuanto a lo del right si alguien cree q ha de poner right que lo diga, pero te aseguro que asi te ira bien
xevisoyyo está desconectado   Responder Citando
Respuesta

No hay votos aún.


Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes

BB code is Activado
Caritas están Activado
[IMG] está Activado
Código HTML está Desactivado


La Zona horaria es GMT -6. Ahora son las 03:00.


Message Board Statistics

LinkBacks Enabled by vBSEO 3.1.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93