Bueno, estoy dando mis primeros pasos con las capas y el css, y ya tengo muchos tropezones...
Para que sea más gráfico subi la web de prueba para que se vea mejor:
http://maxtor.l2inside.org/
La idea es que el bloque central su altura ocupe el 100% hasta que choque contra los dos bloques de abajo (amarillo y azul).
y que además el backgrond de las dos cajas de los costados se repita todo.
El mayor problema es que la caja no solo no ocupa 100% sinó que es lo más chiquita que puede osea no me da bola...
Les dejo el codigo CSS:
Código:
/*
Style for MaxtorGames 20/07/2009
Last modification: 07/08/2009
*/
html, body
{
height:95.5%;
font-family: Verdana, arial, sans-serif;
background:url(images/back.png) repeat-x;
vertical-align:top;
margin-left:0px;
margin-top:0px;
font-size: 1em;
outline: 0;
}
#contenedor
{
min-height:100%;
height: auto!important;
}
.link_sm
{
color:#000;
background-color: white;
}
#footer
{
text-align: center;
background-color: #366;
color: #fff;
height: 74px;
margin-top: -74px;
}
.ejemplo
{
position:relative;
top: 0.5em;
font-size: 1.2em;
}
.error_text
{
color:#F00;
background-color: #e8e8e8;
border: 1px solid;
font-weight:bold;
}
.comment_avatar
{
width:86px;
height:100%;
float:left;
border-right:dashed 3px #CCC;
}
.comment_content
{
border: solid 2px #000;
border-bottom: 0px;
border-left:0px;
border-right:0px;
overflow:hidden;
}
.comment_area
{
border:1px #000 solid;
background-color:#EAEAEA;
}
.comment_date
{
border-bottom:solid #999 1px;
width:100%;
}
.comment_text
{
width:650px;
height:120px;
text-align:inherit;
overflow:hidden;
}
.comment_text_table
{
border:0;
width:650px;
height:120px;
vertical-align:top;
}
.good_text
{
color:#090;
font-weight:bold;
}
.contenido
{
width:768px;
height:100%;
float:left;
background-color:#FFFFFF;
}
.sm
{
list-style:none;
width:700px;
height:150px;
display:block;
overflow:hidden;
}
.sm li
{
float:left;
display:inline;
overflow:hidden;
}
.login_box
{
position:fixed;
bottom:50%;
left:40%;
opacity:0.95;
filter:alpha(opacity=95);
}
.total
{
position:fixed;
background-color:#333;
opacity:0.4;
filter:alpha(opacity=40);
width:100%;
height:100%;
top:0;
}
.close_cross
{
color:#000;
}
.close_cross:hover
{
background-color:#000;
color:#FFF;
}
.iframe_foro
{
background-repeat:repeat;
border-collapse:collapse;
border:solid 1px;
}
.search_box
{
height:18px;
width:200px;
border:0px;
}
/*Table backgrounds*/
.contenido_left
{
background:url("./images/menu_02.png") repeat-y;
width:16px;
height:100%;
float:left;
}
.contenido_right
{
background:url("./images/menu_04.png") repeat-y;
width:14px;
display:block;
height:100%;
float:right;
}
.login_box_top
{
background:url("images/login_02.png") repeat-x;
}
.login_box_left
{
background:url("images/login_04.png") repeat-y;
}
.login_box_right
{
background:url("images/login_06.png") repeat-y;
}
.login_box_bottom
{
background:url("images/login_08.png") repeat-x;
}
/*Structures of divs*/
.menu_contenido
{
min-height:100%;
height:auto;
width:798px;
border:0px;
margin-right:auto;
margin-left:auto;
}
.menu_middle_content
{
width:798px;
height:100%;
}
.menu_titulo
{
width:798px;
height:40px;
}
.menu_bottom
{
width:798px;
height:29px;
}
.slide_game_container
{
border:0px;
height:150px;
text-decoration:none;
}
.slide_game_info_image
{
width:100%;
height:110px;
}
.slide_game_container_bloque
{
border:0px;
height:150px;
text-decoration:none;
}
.slide_image
{
width:86px;
height:110px;
}
/*.slide_image_bloque
{
width:86px;
float:left;
height:110px;
}*/
.slide_image_bloque
{
float: left;
border: 0px;
padding: 0px;
width: 80%;
}
.slide_image_bloque a
{
text-decoration:none;
color:#000;
}
.slide_image_bloque a:hover
{
text-decoration:underline;
color:#000;
}
.slide_image_bloque img
{
float: left;
margin: 0px 5px 0px 0px;
}
.slide_info
{
width:150px;
height:60px;
float:right;
}
.game_description
{
width:150px;
float:right;
height:110px;
}
.game_description a
{
text-decoration:none;
color:#000;
}
.game_description a:hover
{
text-decoration:underline;
color:#000;
}
/*.game_description_bloque
{
width:150px;
float:right;
margin: 5px;
height:110px;
}*/
.slide_game_name
{
display:block;
font-weight:bold;
min-width:100%;
width:100%;
text-decoration:none;
}
.slide_game_name a
{
text-decoration:none;
}
.header
{
height:130px;
text-align:center;
}
.definitive_02
{
width:100%;
height:9px;
text-align:center;
}
.search_tab
{
background-color:#FFF;
height:22px;
width:203px;
float:left;
}
.definitive_03
{
width:449px;
height:29px;
margin-top:0px;
margin:0px;
float:left;
}
.definitive_05
{
width:148px;
height:29px;
float:right;
}
.menu_bar_content
{
width:800px;
height:29px;
display:block;
margin-right:auto;
margin-left:auto;
}
.bajo_search_box
{
width:203px;
height:7px;
float:left;
}
.align_menu_bar_content
{
width:100%;
height:29px;
text-align:center;
}
.cat_box
{
height:122px;
text-align:center;
}
.juego_left
{
background:url("images/Game_02.png") repeat-y;
}
.juego_right
{
background:url("images/Game_07.png") repeat-y;
}
.bloques
{
width:800px;
margin-right:auto;
margin-left:auto;
}
.contenedor_bloques
{
width:100%;
height:192px;
}
.bloque_azul
{
width:50%;
margin-top:32px;
float:left;
}
.bloque_amarillo
{
width:50%;
margin-top:32px;
float:right
}
.bloque_medio
{
height:100px;
width:100%;
}
.bloque_medio_left
{
width:10px;
height:123px;
background:url("./images/bloque1_02.png");
float:left;
}
.bloque_medio_middle
{
background-color:#FFF;
height:123px;
width:383px;
}
.bloque_medio_right
{
width:8px;
height:123px;
float:right;
background:url("./images/bloque1_04.png");
}
.titulo_bloque_azul, .titulo_bloque_amarillo
{
width:402px;
height:40px;
}
.bloque_footer
{
width:402px;
height:29px;
}
.bold_text
{
font-weight:bold;
}
.categoria_juego{
width:124px;
float:left;
border: 1px solid;
border-right:0px;
border-left:0px;
margin:auto;
padding: 5px;
}
#new_row{height:150px;}
.categoria_juegos{
height:100%;
margin:5px;
}
Cualquier cosa que no sepan o me expresé mal, pregunten.
Desde ya! MUCHAS GRACIAS!