Soy MUY nuveo en CSS y quiero poder empezar por poder alinear los divs de un site muy basico.. Como indica el titulo, en el sitio que estoy tratando de hacer se me alinean los divs en la notebook pero NO en una netbook mas pequeña.
Quiero entender algp. Estuve viendo con FIREBUG y con F12 en Chrome los estilos CSS de otro website (No el que estoy haciendo ) como ejemplo. El "computed Style" del Chrome ( o el calculado en Firebug ) me indica que el #body de este sitio tiene width: 1263px sin embargo al revisar el archivo css de este website observo que el #body no tiene asignado width, ni tampoco tiene width otro div llamado #encabezado1 pero el Firebug y Chrome me indican que tiene un width de 960px.
Pregunta: como obviamente el Firebug o el Chrome me dejan ver el width de estos dos divs ( pero NO el archivo css deel sitio ), de donde es que se le puede haber indicado al website que tenga ese width ???
Entiendo que el firebug ( calculado ) y el F12 de Chrome te indican lo que el browser reconocen en el momento de renderizar esa pagina mientras la navegas pero estos datos del width NO se encuentran en el archivo estilos.css al cual tengo acceso y al cual hacen referencia esos divs.
Pregunto esto porque necesito hacer un website que se acomode perfectamente al tamaño de una netbook o de una laptop. Al margen, cualquier recomendacion respecto a como organizar un website en relacion a los width de cada div y la relacion de estos con el body será agradecida.
Muchas Gracias, espero haber sido claro.
Este es estilos.css
/* CSS Document */
* html img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "imagenes/v.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='scale')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}
body{
margin:0px;
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
line-height:15px;
color:#000;
}
form{
margin:0px;
}
label{
cursor:pointer;
vertical-align:middle;
}
a img{
border:0px;
}
input, textarea, select{
resize:none;
outline:none;
}
p{
margin:0px;
padding:0px;
}
h1{
margin:0px;
padding:0px;
text-transform:uppercase;
font-size:22px;
}
.etiqueta1{
padding-left:2px;
padding-bottom:4px;
}
.panel_ba{
padding:0px 2px;
}
#capa1{
width:960px;
margin:0px auto;
padding-bottom:10px;
}
.capac{
overflow:hidden;
height:100%;
}
.capai{
float:left;
}
.capar{
float:right;
}
.capa_tabla{
width:310px; margin-right:9px; float:left; padding-bottom:16px;
}
.v_body{
background:#A1BFBF;
}
.v_cuerpo{
width:700px; margin:0px auto;
}
.v_texto{
width:500px; margin:0px auto; padding:15px; text-align:justify;
}
.v_cuerpo #contenido1{
border:none; padding:0px;
}
#publicidadg1{
width:728px;
margin:0px auto;
padding-bottom:14px;
}
#botones1{
height:24px;
line-height:24px;
border-bottom:1px solid #999;
padding:0px 4px;
overflow:hidden;
}
#botones1 ul{
margin:0px;
padding:0px;
list-style-type:none;
overflow:hidden;
}
#botones1 li{
float:left;
margin-left:6px;
padding-left:6px;
border-left:1px solid #999;
}
#botones1 li a{
color:#c8293f;
text-decoration:none;
}
#botones1 li a:hover{
text-decoration:underline;
}
#botones1 li span{
color:#c8293f;
}
#encabezado1{
height:85px;
overflow:hidden;
}
#encabezado1 ul{
margin:0px;
padding:0px;
list-style-type:none;
overflow:hidden;
padding-top:10px;
}
#encabezado1 li{
float:left;
padding-left:8px;
}
#encabezado2{
position:relative;
width:100%;
height:0px;
}
#encabezado2 #cuerpo{
position:absolute;
right:0px;
top:-24px;
}
#encabezado2 #cuerpo ul{
margin:0px;
padding:0px;
list-style-type:none;
overflow:hidden;
}
#encabezado2 #cuerpo li{
float:left;
line-height:24px;
border-left:1px solid #999;
padding-left:6px;
margin-left:6px;
}
#encabezado2 #cuerpo li a{
color:#000;
text-decoration:none;
}
#encabezado2 #cuerpo li a:hover{
text-decoration:underline;
}
#encabezado2 #cuerpo li span{
color:#000;
}
#contenido1{
border-top:4px solid #426190;
background-color:#a1bfbf;
height:auto!important;
height:430px;
min-height:430px;
padding-bottom:70px;
}
#contenido1 #cuerpo{
width:660px;
margin:0px auto;
}
#contenido1 #cuerpo #botonera1{
margin:0px;
padding:8px 0px;
list-style-type:none;
overflow:hidden;
}
#contenido1 #cuerpo #botonera1 li{
float:left;
border-right:1px solid #000;
margin-right:8px;
padding-right:8px;
font-family:Tahoma;
font-size:12px;
line-height:13px;
}
#contenido1 #cuerpo #botonera1 li a{
font-weight:normal;
color:#000;
text-decoration:none;
}
#contenido1 #cuerpo #botonera1 li a:hover{
text-decoration:underline;
}
#contenido1 #cuerpo #botonera1 li .marcado{
color:#d2002d;
font-weight:bold;
}
#contenido2{
padding:0px 12px;
border-top:1px solid #999;
border-bottom:1px solid #999;
background-color:#eee;
height:30px;
font-size:11px;
color:#888;
}
#contenido2 #botonera1{
margin:0px;
padding:9px 0px;
list-style-type:none;
overflow:hidden;
}
#contenido2 #botonera1 li{
float:left;
border-right:1px solid #888;
margin-right:8px;
padding-right:8px;
line-height:12px;
}
#contenido2 #botonera1 li a{
color:#888;
text-decoration:none;
}
#contenido2 #botonera1 li a:hover{
text-decoration:underline;
}
#contenido2 #botonera1 li span{
color:#888;
}
#contenido3{
line-height:30px;
font-size:11px;
color:#888;
}
#contenido4{
padding:18px;
border-top:1px solid #999;
border-bottom:1px solid #999;
background-color:#eee;
}
#contenido4 ul{
margin:0px;
padding:0px;
list-style-type:none;
overflow:hidden;
height:100%;
}
#contenido4 li{
float:left;
margin-right:11px;
height:60px;
}
/*#contenido4 #banners{ padding:0px; margin:0px; border:none; width:924px; height:60px; overflow:hidden; float:none; }
#contenido4 #banners li{border:none;width:153px; height:60px;}
#contenido4 #banners .jcarousel-container-horizontal {width: 924px; padding: 0px;}
#contenido4 #banners .jcarousel-clip-horizontal {width: 153px; height: 60px;}
#contenido4 #banners .jcarousel-item {width: 153px; height: 60px;}
#contenido4 #banners .jcarousel-item-horizontal {margin: 1px;}*/
#contenido5{
background:#d0dfe0; margin-top:20px; width:620px; min-height:420px; padding:20px;
}
#contenido6{
background:#d0dfe0; padding:10px 20px; margin-top:20px; text-align:right;
}
#staff{
background:#d0dfe0; width:520px; padding:20px; margin:15px auto; text-align:justify;
}
#contenido5 #numero{
font-size:16px;
line-height:16px;
padding-bottom:3px;
margin:0px;
color:#000;
font-weight:bold;
}
#contenido5 #fecha{
font-size:12px;
line-height:12px;
padding-bottom:3px;
margin:0px;
color:#D2002D;
font-weight:bold;
}
#contenido5 h1{
font-size:34px;
line-height:34px;
padding-bottom:3px;
margin:0px;
margin-left:-2px;
color:#D2002D;
}
#contenido5 h2{
font-size:18px;
line-height:18px;
padding-bottom:3px;
margin:0px;
color:#999;
}
#contenido5 ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#contenido5 li{
padding:14px 0px;
padding-bottom:4px;
border-bottom:1px solid #D2002D;
}
#contenido5 li .titulo{
font-weight:bold;
}
#contenido5 li .autor{
display:block;
color:#D2002D;
}
#contenido5 li .titulo_c{
font-size:12px;
font-weight:bold;
color:#D2002D;
}
#contenido5 li a{
color:#000; padding-bottom:10px; display:block; text-decoration:none;
}
#contenido5 li a:hover{
color:#406CC3;
}
#contenido5 #titulo_n{
font-weight:bold;
font-size:20px;
line-height:20px;
padding-bottom:8px;
}
#contenido5 #autor_n{
font-weight:bold;
font-size:16px;
line-height:16px;
padding-bottom:8px;
color:#D2002D;
}
#revista_c a:hover{
text-decoration:none !important;
}
#staff #titulo, #contenido5 #titulo_secc{
font-weight:bold;
font-size:20px;
line-height:20px;
padding-bottom:18px;
margin-left:-2px;
color:#D2002D;
}
#staff .contenedor{
padding-bottom:28px;
}
#staff .contenedor .nombre{
color:#426190; font-weight:bold; font-size:14px; line-height:14px; padding-bottom:4px;
}
#staff .contenedor .texto{
padding-bottom:14px;
}
#staff .contenedor .email{
color:#426190; font-weight:bold; font-size:12px; line-height:14px;
}
#staff a, #contenido5 a{
color:#D2002D; font-weight:bold; text-decoration:underline;
}
#staff a:hover, #contenido5 a:hover{
text-decoration:underline;
}
#contenido5 #imagen{
width:300px; height:225px; padding:0px 0px 10px 10px;
}
#contenido6 a{
color:#000;
text-decoration:none;
}
#contenido6 a:hover{
color:#999;
}
#lista_horario1{
margin:0px;
padding:0px;
list-style-type:none;
line-height:17px;
}
#lista_horario1 li{
overflow:hidden;
height:100%;
}
#lista_horario1 li .p1{
width:22px;
float:left;
padding-top:3px;
*padding-top:1px;
}
#lista_horario1 li .p1 input{
vertical-align:middle;
}
#lista_horario1 li .p2{
float:left;
padding-top:4px;
width:169px;
}
#lista_gustos1{
margin:0px;
padding:0px;
list-style-type:none;
overflow:hidden;
height:100%;
}
#lista_gustos1 li{
float:left;
padding-bottom:5px;
}
#lista_gustos1 li a{
display:block;
border:1px solid #6a8386;
background-color:#b5ccce;
color:#000;
padding:5px;
margin-right:5px;
text-decoration:none;
}
#lista_gustos1 li a:hover{
background-color:#95a9ab;
}
#lista_gustos1 li .v{
background-color:#95a9ab;
}
#lista_gustos2{
float:left;
width:174px;
margin:0px;
padding:0px;
list-style-type:none;
}
#lista_gustos2 li{
overflow:hidden;
height:100%;
padding-bottom:4px;
}
#lista_gustos2 li .p1{
float:left;
width:20px;
padding-right:4px;
}
#lista_gustos2 li .p2{
float:left;
width:126px;
line-height:19px;
}
#lista_promociones1{
margin:0px;
padding:0px;
list-style-type:none;
line-height:17px;
float:left;
width:421px;
}
#lista_promociones1 li{
overflow:hidden;
height:100%;
margin-top:10px;
padding-top:10px;
border-top:1px solid #6a8386;
}
#lista_promociones1 li .p1{
float:left;
width:20px;
}
#lista_promociones1 li .p1 input{
vertical-align:middle;
}
#lista_promociones1 li .p2{
float:left;
padding-top:1px;
padding-left:10px;
width:391px;
}
#lista_imagenes1{
margin:0px;
padding:0px;
list-style-type:none;
line-height:17px;
}
#lista_imagenes1 li{
overflow:hidden;
height:100%;
}
#lista_imagenes1 li .p1{
width:22px;
float:left;
padding-top:3px;
*padding-top:1px;
}
#lista_imagenes1 li .p1 input{
vertical-align:middle;
}
#lista_imagenes1 li .p2{
float:left;
padding-top:4px;
width:169px;
}
#lista_imagenes1 li .p2 a{
font-size:11px;
color:#000;
text-decoration:none;
}
#etiquetas{
margin:0px; padding:0px;
}
#etiquetas ul{
margin:0px;
padding:0px 0px 4px 0px;
list-style-type:none;
overflow:hidden;
height:100%;
}
#etiquetas li{
float:left;
background-color:#b5ccce;
border:1px solid #678284;
}
#etiquetas li a{
color:#000;
}
#etiquetas li a:hover{
background-color:#95a9ab;
}
#etiquetas .capa1{
margin:0px;
padding:30px 10px;
border:1px solid #c7d9db;
}
#etiquetas #etiqueta1 .ancho, #etiquetas #etiqueta4 .ancho, #etiquetas #etiqueta5 .ancho{
width:560px; margin:0px auto;
}
#etiquetas #etiqueta1 ul{
margin:0px; padding:14px 0px; border-top:1px solid #d2002d; border-bottom:1px solid #d2002d;
}
#etiquetas #etiqueta1 li, #etiquetas #etiqueta4 li, #etiquetas #etiqueta5 li, #etiquetas #etiqueta6 li{
float:none;
border:none;
background:none;
}
#etiquetas #etiqueta1 #multimedia{ padding:0px; margin:0px; border:none; width:400px; height:300px; overflow:hidden; float:none; }
#etiquetas #etiqueta1 #multimedia li{border:none;width:400px; height:300px;}
#etiquetas #etiqueta1 #multimedia .jcarousel-container-horizontal {width: 400px; padding: 0px;}
#etiquetas #etiqueta1 #multimedia .jcarousel-clip-horizontal {width: 400px; height: 300px;}
#etiquetas #etiqueta1 #multimedia .jcarousel-item {width: 400px; height: 300px;}
#etiquetas #etiqueta1 #multimedia .jcarousel-item-horizontal {margin: 1px;}
#etiquetas #etiqueta1 #multimedia_b{padding:5px 0px; margin:0px; border:none; overflow:hidden;}
#etiquetas #etiqueta1 #multimedia_b li{float:left; border-left:1px solid #000; padding:2px 10px;}
#etiquetas #etiqueta4 li, #etiquetas #etiqueta5 li{
padding-bottom:10px;
}
#etiquetas #etiqueta4 .separacion1{
padding-bottom:10px;
margin-bottom:10px;
border-bottom:1px solid #D2002D;
}
#etiquetas #etiqueta4 .color_zebra, #etiquetas #etiqueta5 .color_zebra{
color:#D2002D;
}
#etiquetas #etiqueta1 li a{
text-decoration:none; color:#d2002d;
}
#etiquetas #etiqueta1 li a:hover{
text-decoration:underline; background:none;
}
#etiquetas #etiqueta3{
padding:9px 10px 30px 10px !important;
}
#etiquetas #etiqueta2 td{
padding:10px 0px;
border-bottom:1px solid #c7d9db;
}
#etiquetas #etiqueta2 td img{
vertical-align:middle;
margin-right:10px;
}
#etiquetas #etiqueta2 .precio{
color:#d2002d;
}
#etiquetas #etiqueta6 #comentarios li{
overflow:hidden; height:100%; padding-top:4px;
}
#etiquetas #etiqueta6 #comentarios .nuevo_c{
background-color:#decb03
}
#etiquetas #etiqueta6 #comentarios #puntaje{
float:left; padding:5px 6px 5px 10px; border:1px solid #eeeef0; width:148px; margin-right:4px; overflow:hidden; height:100%;
}
#etiquetas #etiqueta6 #comentarios #puntaje .icono{
float:left; padding-right:4px;
}
#etiquetas #etiqueta6 #comentarios #nombre{
padding:10px; border:1px solid #eeeef0; width:446px; color:#fff; font-weight:bold;
}
#etiquetas #etiqueta6 #comentarios #nombre .nombre{
float:left;
}
#etiquetas #etiqueta6 #comentarios #nombre .vinculo{
float:right;
}
#etiquetas #etiqueta6 #comentarios a{
color:#D2002D;
font-weight:bold;
text-decoration:none;
}
#etiquetas #etiqueta6 #comentarios a:hover{
color:#000;
text-decoration:none;
background:none;
}
#etiquetas #etiqueta6 #comentarios #comentario{
float:left; padding:10px; background:#eeeef0; margin-top:4px; width:618px;
}
#tarjetas{
float:right;
overflow:hidden;
height:100%;
margin:0px;
padding:0px;
list-style-type:none;
}
#tarjetas li{
padding-top:10px;
float:left;
margin-left:5px;
border:none;
background:none;
}
#resultados{
font-weight:normal;
background-color:#fff;
}
#resultados a{
text-decoration:none;
color:#000;
}
#resultados td{
padding:10px;
cursor:pointer;
}
#resultados .titulos td{
cursor:default;
font-weight:bold;
background-color:#a1bfbf;
font-size:11px;
}
#resultados .horario{
font-size:11px;
}
#resultados .contr{
width:0px; height:0px; position:relative;
}
#resultados .conta{
position:absolute; left:-38px; top:-10px; width:21px; height:29px;
}
#paginado1{
margin-top:30px; background-color:#FFF; color:#000;
}
#paginado1 .contenido{
padding:4px 10px; font-size:11px; font-weight:normal;
}
#paginado1 .capai{
width:30%;
}
#paginado1 .capad{
width:70%;
text-align:right;
}
#paginado1 .marcado{
font-weight:bold;
}
#paginado1 a{
color:#1164b1;
text-decoration:none;
}
#paginado1 a:hover{
text-decoration:underline;
}
#paginado1 .paginas{
font-weight:bold;
color:#000;
text-decoration:none;
}
#paginado1 .paginas:hover{
color:#999;
text-decoration:none;
}
.sabores{
margin:0px;
padding:0px;
list-style-type:none;
border-bottom:1px solid #C7D9DB;
padding-top:21px !important;
padding-bottom:14px !important;
}
.sabores li{
border:none !important; background:none !important; width:294px; padding-right:25px; line-height:17px; padding-bottom:8px;
}
.sabores .titulo{
font-size:14px;
color:#d2002d;
font-weight:bold;
width:638px;
display:block;
padding:0px;
padding-bottom:8px;
}
.a_celi{
background:url(../imagenes/icon1.gif) no-repeat right top;
padding:2px 8px;
}
.a_diab{
background:url(../imagenes/icon2.gif) no-repeat right top;
padding:2px 8px;
}
.a_kosh{
background:url(../imagenes/icon3.gif) no-repeat right top;
padding:2px 8px;
}
.a_light{
background:url(../imagenes/icon4.gif) no-repeat right top;
padding:2px 8px;
}
.sabores .titulod{
font-weight:bold;
}
.sabores .descripcion{
display:block;
font-weight:normal;
font-size:11px;
line-height:14px;
}
#form1 td{
padding:10px 5px 0px 5px;
}
#form1 .espacio1{
width:130px;
text-align:right;
line-height:26px;
}
#form1 .espacio2{
width:2px;
}
#form1 .comentario{
font-size:10px; line-height:12px; color:#000;
}
#form1 .ui-stars-star,#form1 .ui-stars-cancel {float: left;width: 25px;height: 25px;text-indent: -999em;cursor: pointer;display: block;overflow: hidden;}#form1 .ui-stars-star a,#form1 .ui-stars-cancel a {display: block;width: 25px;height: 25px;background: url(../imagenes/iconss.png) no-repeat 0 0px;}#form1 .ui-stars-star a {background-position: -0px 0px;}#form1 .ui-stars-star-on a {background-position: -25px 0px;}#form1 .ui-stars-star-hover a {background-position: -50px 0px;}#form1 .ui-stars-cancel-hover a {background-position: -16px 0px;}#form1 .ui-stars-star-disabled,.ui-stars-star-disabled a,#form1 .ui-stars-cancel-disabled a {cursor: default !important;}
.color_zebra{
background-color:#d0dfe0;
}
.color_encima{
background-color:#eee;
}
.titulo1{
font-family:Arial, Helvetica, sans-serif;
font-size:22px;
font-weight:bold;
color:#000;
line-height:22px;
}
.titulo2{
font-family:Tahoma;
font-size:14px;
font-weight:bold;
color:#d2002d;
background-color:#d0dfe0;
line-height:30px;
padding:0px 8px;
margin-bottom:14px;
}
.heladeria_cont{
padding:0px 8px;
margin-bottom:20px;
}
.estilo1{
font-family:Tahoma;
font-size:12px;
font-weight:bold;
line-height:15px;
color:#fff;
}
.estilo2{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:15px;
color:#d2002d;
}
.estilo3{
padding:0px 10px;
line-height:24px;
float:left;
}
.estilo4{
color:#000;
}
.input1{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#406cc3;
border:1px solid #fff;
}
.input2{
font-family:Tahoma;
font-size:12px;
color:#000;
border:1px solid #bbb;
padding:4px;
}
.input3{
width:80px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
background-color:#b82626;
text-align:center;
color:#fff;
padding:1px 0px;
border:none;
margin:0px;
}
.input3_d{
background-color:#ccc;
}
.input4{
font-family:Tahoma;
font-size:12px;
color:#000;
border:1px solid #6a8386;
padding:4px;
}
.d_input5{
padding:3px;
*padding:1px 3px;
border:1px solid #6a8386;
background-color:#fff;
float:left;
}
.input5{
font-family:Tahoma;
font-size:12px;
color:#000;
padding:0px;
border:none;
}
.input6{
width:80px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
background-color:#fff;
text-align:center;
color:#b82626;
padding:1px 0px;
border:none;
margin:0px;
}
.input7{
width:14px; height:14px; margin:0px; padding:0px;
}
.vinculo1{
background:url(../imagenes/icon1.png) no-repeat left 3px;
padding:4px 0px;
padding-left:22px;
color:#000;
font-size:11px;
text-decoration:none;
}
.vinculo1:hover{
text-decoration:underline;
}
.vinculo2{
text-decoration:none;
}
.vinculo2:hover{
text-decoration:underline;
}
