Hola! Les comento, tengo que hacer un TP sobre programacion en HTML y CSS (basico por que es la primera parte de la cursada) y nos pidieron que agarremos una web que ya existe y la rediseñemos.
El problema que estoy teniendo es a la hora de ordenar los DIV.
Tengo un DIV Contenedor de toda la web, y luego para el menu de la derecha un DIV contenedor de todos los divs que van ahi. Lo mismo para el menu de la izquierda y para lo que viene a ser el cuerpo de la web.
Lo que se me esta resultando muy dificil de hacer, es que queden ordenados, y no logro darme cuenta en donde estoy metiendo la pata!.
Código HTML:
Ver original
<META NAME="keywords" CONTENT="Cocina, Cocineros, Argentinos, Recetas"> <META NAME="description" CONTENT="Remodelacion de la Web del Programa Cocineros Argentinos"> <link rel="stylesheet" type="text/css" href="estilo/estilo.css" />
<body background="imagenes/fondo.gif">
<!-- INICIO DIV CONTENDOR WEB -->
<div id="contenedor_web"> <!-- INICIO CABECERA -->
<div id="contenedor_cabecera"> <div class="buscador"><br /><font color="#b8b8b8">Realizar una busqueda...
</font></div> <!-- FIN CABECERA -->
<!-- INICIO MENU IZQUIERDA -->
<div id="contenedor_menu_izquierda"> <!-- INICIO MENU PRINCIPAL -->
<div class="menu_principal"> <br /><br /><br /> <!-- Hago espacios para que no tape la cabecera del menu que es un fondo de otro div --> <div class="menu_opciones"><a href="#">Inicio
</a></div> <div class="menu_opciones"><a href="#">Recetas
</a></div> <div class="menu_opciones"><a href="#">Tortas
</a></div>
<!-- INICIO MENU ESCRIBINOS -->
Nombre y Apellido
<input type=text name="nombre" size=22><p> Correo Electronico
<input type=text name="nombre" size=22><p> <input type="submit" name="Enviar"> <!-- FIN MENU IZQUIERDA -->
<!-- INICIO CUERPO DE LA WEB -->
<div class="contenedor_cuerpo"> PROBANDO
<div class="titulo_noticia">¿No est
ás participando por el kit de cocina Guadix?</div> <div class="imagen_noticia"><img src="imagenes/noticia001.jpg" /></div>
<div class="texto_noticia">Guillermo Sarosky y Patricia Rubio son los flamantes ganadores de #CocinaDeCampeones ¡Felicitaciones! Ganaron un kit de cocina Guadix Argentina y un libro de Cocineros autografiado cada uno.
</div> <div class="link_noticia"><a href="#">Leer Mas...
</a></div>
<div class="titulo_noticia">James McCurry,
¿leyenda gastron$oacute;mica?
</div> <div class="imagen_noticia"><img src="imagenes/noticia002.jpg" /></div> <div class="texto_noticia">Cuenta la leyenda que allá por los años 1800 desembarcó en el país un comerciante irlandés de nombre James McCurry. El motivo del viaje de James era concreto, importar la carne argentina a su país.
</div> <div class="link_noticia"><a href="#">Leer Mas...
</a></div>
<div class="titulo_noticia">Ir al mercado sin comer es perjudicialc
</div> <div class="imagen_noticia"><img src="imagenes/noticia003.jpg" /></div> <div class="texto_noticia">Según estudios realizados recientemente por el Food and Brand Labs no es aconsejable ir a comprar productos alimenticios sin antes haber comido algo, ya que la ansiedad por ingerir algo es bombardeada por estímulos que de manera inconsciente nos obligan a comprar los alimentos que consideramos más ricos, más caros y menos saludables.
</div> <div class="link_noticia"><a href="#">Leer Mas...
</a></div> <!-- FIN CUERPO DE LA WEB -->
<!-- INICIO MENU DERECHA -->
<div class="contenedor_menu_derecha"> <div class="menu_secundario"> <div class="imagen"><img src="imagenes/receta_del_dia_001.jpg" /></div> <div class="imagen"><img src="imagenes/receta_del_dia_001.jpg" /></div> <div class="imagen"><img src="imagenes/receta_del_dia_001.jpg" /></div>
<br /><br /></br><img src="imagenes/publicidad.jpg" /> <!-- FIN MENU DERECHA -->
<!-- INICIO FOOTER -->
<div id="contenedor_footer"> © Copyright 2015 Cocinerosargentinos.com | All rights reserved.
<!-- FIN FOOTER -->
<!-- FIN DIV CONTENDOR WEB -->
Código CSS:
Ver original#contenedor_web
{
width:950px;
height:auto;
text-align: center;
margin:0 auto;
}
#contenedor_cabecera
{
width:950px;
height:180px;
background-image: url("../imagenes/logo.jpg");
}
.buscador
{
margin-left: 670px;
}
#contenedor_menu_izquierda
{
width: 181px;
height: 520px;
float: left;
}
.menu_principal
{
width:181px;
height:170px;
float:left;
background-color: #8b654d;
background-image: url("../imagenes/header_menu_principal.png");
background-repeat: no-repeat;
}
.menu_opciones
{
width:150px;
height:30px;
background-image: url(../imagenes/fondo_boton.png);
margin: 0 auto;
font-family: "script";
font-size: x-large;
}
.escribinos
{
width:181px;
height: 320px;
float: right;
margin-top: 20px;
background-color: #8b654d;
background-image: url("../imagenes/header_escribinos.png");
background-repeat: no-repeat;
}
.formulario
{
width:181px;
height:300px;
margin-top: 50px;
}
#contenedor_cuerpo
{
background-color: orange;
width:500px;
height:auto;
margin-bottom: 50px;
background-color: white;
background-image: url("../imagenes/fondo_cuerpo.png");
background-repeat: repeat-y;
}
#noticias
{
background-color: #eedabe;
width: 573px;
background-image: url(../imagenes/fondo_noticia.png);
height: 250px;
margin-left: 190px;
}
.titulo_noticia
{
background-color: #e56e5b;
margin-top: 0px;
}
.imagen_noticia
{
width: 200px;
height: 200px;
border: 3px solid #FFFFFF;
border-color: white;
background-color: purple;
margin-left: 10px;
margin-top: 10px;
float: left;
}
.texto_noticia
{
width:300px;
height: 200px;
float: left;
margin-left: 10px;
margin-right: 10px;
margin-top: 20px;
}
.link_noticia
{
background-color: orange;
margin: 0 auto;
text-align: center;
width: auto;
height: 20px;
margin-top: 220px;
}
#contenedor_menu_derecha
{
width:178px;
height:565px;
float:right;
}
.menu_secundario
{
width:178px;
height:565px;
float:left;
margin-left: 591px;
background-color: #8b654d;
background-image: url("../imagenes/header_receta_del_dia.png");
background-repeat: no-repeat;
}
.imagen
{
border: 3px solid #FFFFFF;
border-color: white;
background-color: #8b654d;
margin-top: 50px;
margin-left: 20px;
width: 130px;
height: 130px;
}
.publicidad
{
margin: 0 auto;
width: 178px;
height: 450px;
margin-top: 20px;
float: right;
background-color: #8b654d;
background-image: url("../imagenes/header_publicidad.png");
background-repeat: no-repeat;
}
#contenedor_footer
{
width:950px;
height:20px;
background-color: #8b654d;
text-align:center;
float: left;
clear: both;
}
Les dejo tanto el HTML como el CSS a ver si me pueden ayudar por que estoy medio perdido!