Comunidad de diseño web y desarrollo en internet online

Problemas con css - Encuentre el error + mas ayuda! (principiante)

Citar            
MensajeEscrito el 21 Ene 2012 11:41 pm
Buenas!
Espero que puedan darme un mano!
Estoy probando una estructura en html.
Un container,un sidebar un content con un slider y un footer.
El problema esta en que el div content queda abajo del div sidebar aunque aplique los float.
Cual es el error? Alguna sugerencia y ayuda?
Muchas gracias!

Código HTML :

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>html</title>
    <style type="text/css">
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
   body {background-color: #f1f1f2;}
   #container {width:960px;margin: 0px auto;background-color:#b2b4b6;}
   #sidebar {width:220px;height:250px;background-color:#f13d3a;}
   #logo {background: url(images/logo.png) no-repeat;width:164px;height:93px;}
   #content {width:740px;height:250px;background-color:#FFFFFF;float:right;}
   #txtslider {width:240px;height:250px;background-color:#FFCCFF;float:left;}
   #slider {width:500px;height:250px;background-color:#FFFFFF;float:right;}
   #footer {clear:both;width:960px;background-color:#bd3c34;}
     </style>
  </head>

  <body>
<div id="container">
   <div id="sidebar">
      <div id="logo"></div>
   </div>
   <div id="content">
      <div id="txtslider">TXT</div>
      <div id="slider">Slider</div>
   </div>
   <div id="footer">Footer</div>
</div>
</body>
</html>

Por flash_padawan

3 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 21 Ene 2012 11:53 pm
Agrego una foto para que sea mas descriptiva la pregunta!
http://l4c.me/fotos/flashpadawan/screen-html

Por flash_padawan

3 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 22 Ene 2012 01:12 am
El problema es que el #sidebar no tiene float:left, y como recomendacion, por favor, aprende a indentar y usar espacios en tu codigo CSS.

http://jsfiddle.net/D79bg/

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

chrome
Citar            
MensajeEscrito el 22 Ene 2012 02:01 am
Muchas gracias NEO_JP!! :)
No puedo creer que se me escapo eso.
A esto te refieres con indentar y usar espacios en el css:

Incorrecto

Código :

#container {width:960px;margin: 0px auto;background-color:#b2b4b6;}


Correcto

Código :

#container {
    background-color: #b2b4b6;
    margin: 0 auto;
    width: 960px;
}

Por flash_padawan

3 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 22 Ene 2012 02:20 am
Exacto, a eso me refiero, es de buenas practicas tener 1 sola propiedad por linea y personalmente prefiero ordenar las propiedades alfabeticamente, eso hace mucho mas facil buscar si ya se creo una propiedad o no.

Por ejemplo, si voy a buscar background, empiezo por las primeras lineas y no por las ultimas, es exactamente esto lo que hubiera hecho mas facil revisar si tenias float o no en el #sidebar.

Saludos.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

chrome
Citar            
MensajeEscrito el 22 Ene 2012 02:29 am
Muchas gracias Joan!
Seguramente mañana te estare molestando con el slider jquery y los atributos overflow, position y como hacer el sidebar que ocupe todo el alto y quede fijo.
Gracias por tu paciencia y ayuda!

Por flash_padawan

3 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 22 Ene 2012 02:54 am
Ah, otra recomendacion, nunca uses tamaños exactos al hacer float, a veces los navegadores tienen a romper los floats.

Por ejemplo, si tienes 960px de ancho en el contenedor, pon al sidebar 300px y al contenido 650px en vez de 660px. Siempre es bueno dar algo de espacio. Si necesitas colores de fondo en ambos lados, siempre puedes usar imagenes de fondo.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

chrome

 

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