Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Error en orden de DIVs

 Estas en el tema de Error en orden de DIVs en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/10/2015, 16:34
 
Fecha de Ingreso: febrero-2008
Mensajes: 65
Antigüedad: 16 años, 9 meses
Puntos: 0
Error en orden de DIVs
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
  1. <html>
  2.  
  3. <head>
  4.     <title>Cocineros Argentinos</title>
  5.     <META NAME="keywords" CONTENT="Cocina, Cocineros, Argentinos, Recetas">
  6.     <META NAME="description" CONTENT="Remodelacion de la Web del Programa Cocineros Argentinos">
  7.     <link rel="stylesheet" type="text/css" href="estilo/estilo.css" />
  8. </head>
  9.  
  10. <body background="imagenes/fondo.gif">
  11.  
  12. <!-- INICIO DIV CONTENDOR WEB -->
  13. <div id="contenedor_web">
  14. <!-- INICIO CABECERA -->
  15.     <div id="contenedor_cabecera">
  16.         <div class="buscador"><br /><font color="#b8b8b8">Realizar una busqueda...</font></div>
  17.     </div>
  18. <!-- FIN CABECERA -->
  19.  
  20. <!-- INICIO MENU IZQUIERDA -->
  21.     <div id="contenedor_menu_izquierda">
  22. <!-- INICIO MENU PRINCIPAL -->
  23.         <div class="menu_principal">
  24.             <br /><br /><br /> <!-- Hago espacios para que no tape la cabecera del menu que es un fondo de otro div -->
  25.             <div class="menu_opciones"><a href="#">Inicio</a></div>
  26.             <div class="menu_opciones"><a href="#">Recetas</a></div>
  27.             <div class="menu_opciones"><a href="#">Tortas</a></div>
  28.         </div>
  29.  
  30. <!-- INICIO MENU ESCRIBINOS -->
  31.         <div class="escribinos">
  32.             <div class="formulario">
  33.                 <form>
  34.                     Nombre y Apellido<input type=text name="nombre" size=22><p>
  35.                     Correo Electronico<input type=text name="nombre" size=22><p>
  36.                     Mensaje<textarea name="mensaje" rows=5 cols=16> </textarea>
  37.                     <input type="submit" name="Enviar">
  38.                 </form>
  39.             </div>
  40.         </div>
  41.     </div>
  42. <!-- FIN MENU IZQUIERDA -->
  43.  
  44. <!-- INICIO CUERPO DE LA WEB -->
  45.     <div class="contenedor_cuerpo">
  46.     PROBANDO
  47.         <div id="noticias">
  48.                 <div class="titulo_noticia">&iquest;No est&aacutes participando por el kit de cocina Guadix?</div>
  49.                 <div class="imagen_noticia"><img src="imagenes/noticia001.jpg" /></div>
  50.                 <div class="texto_noticia">Guillermo Sarosky y Patricia Rubio son los flamantes ganadores de #CocinaDeCampeones &iexcl;Felicitaciones! Ganaron un kit de cocina Guadix Argentina y un libro de Cocineros autografiado cada uno. </div>
  51.             <div class="link_noticia"><a href="#">Leer Mas...</a></div>
  52.             </div>
  53.             <br />
  54.             
  55.             <div id="noticias">
  56.                 <div class="titulo_noticia">James McCurry, &iquest;leyenda gastron$oacute;mica?</div>
  57.                 <div class="imagen_noticia"><img src="imagenes/noticia002.jpg" /></div>
  58.                 <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>
  59.             <div class="link_noticia"><a href="#">Leer Mas...</a></div>
  60.             </div>
  61.             <br />
  62.             
  63.             <div id="noticias">
  64.                 <div class="titulo_noticia">Ir al mercado sin comer es perjudicialc</div>
  65.                 <div class="imagen_noticia"><img src="imagenes/noticia003.jpg" /></div>
  66.                 <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>
  67.             <div class="link_noticia"><a href="#">Leer Mas...</a></div>
  68.             </div>
  69.             <br />
  70.     </div>
  71. <!-- FIN CUERPO DE LA WEB -->
  72.  
  73. <!-- INICIO MENU DERECHA -->
  74.     <div class="contenedor_menu_derecha">
  75.         <div class="menu_secundario">
  76.             <div class="imagen"><img src="imagenes/receta_del_dia_001.jpg" /></div>
  77.             <div class="imagen"><img src="imagenes/receta_del_dia_001.jpg" /></div>
  78.             <div class="imagen"><img src="imagenes/receta_del_dia_001.jpg" /></div>
  79.         </div>
  80.         
  81.         <div class="publicidad">
  82.             <br /><br /></br><img src="imagenes/publicidad.jpg" />
  83.         </div>
  84.     </div>
  85. <!-- FIN MENU DERECHA -->
  86.     
  87. <!-- INICIO FOOTER -->
  88.     <div id="contenedor_footer">
  89.         © Copyright 2015 Cocinerosargentinos.com | All rights reserved.
  90.     </div>
  91. <!-- FIN FOOTER -->
  92.     
  93. </div>
  94. <!-- FIN DIV CONTENDOR WEB -->
  95.  
  96. </body>
  97. </html>

Código CSS: 
Ver original
  1. #contenedor_web
  2.         {
  3.             width:950px;
  4.             height:auto;
  5.             text-align: center;
  6.             margin:0 auto;
  7.         }
  8.  
  9. #contenedor_cabecera
  10.         {
  11.             width:950px;
  12.             height:180px;
  13.             background-image: url("../imagenes/logo.jpg");          
  14.         }   
  15.  
  16.     .buscador
  17.         {
  18.             margin-left: 670px;
  19.         }
  20.         
  21. #contenedor_menu_izquierda
  22.         {
  23.             width: 181px;
  24.             height: 520px;
  25.             float: left;
  26.             
  27.         }
  28.         
  29.     .menu_principal
  30.         {
  31.             width:181px;
  32.             height:170px;
  33.             float:left;
  34.             background-color: #8b654d;
  35.             background-image: url("../imagenes/header_menu_principal.png");
  36.             background-repeat: no-repeat;
  37.         }
  38.         
  39.         .menu_opciones
  40.         {
  41.             width:150px;
  42.             height:30px;
  43.             background-image: url(../imagenes/fondo_boton.png);
  44.             margin: 0 auto;
  45.             font-family: "script";
  46.             font-size: x-large;
  47.         }
  48.         
  49.     .escribinos
  50.         {
  51.             width:181px;
  52.             height: 320px;
  53.             float: right;
  54.             margin-top: 20px;
  55.             background-color: #8b654d;
  56.             background-image: url("../imagenes/header_escribinos.png");
  57.             background-repeat: no-repeat;   
  58.         }
  59.         
  60.     .formulario
  61.         {
  62.             width:181px;
  63.             height:300px;
  64.             margin-top: 50px;
  65.         }
  66.  
  67.         
  68. #contenedor_cuerpo
  69.         {
  70.             background-color: orange;
  71.             width:500px;
  72.             height:auto;
  73.             margin-bottom: 50px;
  74.             background-color: white;
  75.             background-image: url("../imagenes/fondo_cuerpo.png");
  76.             background-repeat: repeat-y;
  77.             
  78.         }
  79.         
  80. #noticias
  81.         {
  82.             background-color: #eedabe;
  83.             width: 573px;
  84.             background-image: url(../imagenes/fondo_noticia.png);
  85.             height: 250px;
  86.             margin-left: 190px;
  87.         }
  88.         
  89.     .titulo_noticia
  90.         {
  91.             background-color: #e56e5b;
  92.             margin-top: 0px;
  93.         }
  94.     
  95.     .imagen_noticia
  96.         {
  97.             width: 200px;
  98.             height: 200px;
  99.             border: 3px solid #FFFFFF;
  100.             border-color: white;
  101.             background-color: purple;
  102.             margin-left: 10px;
  103.             margin-top: 10px;
  104.             float: left;
  105.         }
  106.         
  107.     .texto_noticia
  108.         {
  109.             width:300px;
  110.             height: 200px;
  111.             float: left;
  112.             margin-left: 10px;
  113.             margin-right: 10px;
  114.             margin-top: 20px;
  115.         }
  116.         
  117.     .link_noticia
  118.         {
  119.             background-color: orange;
  120.             margin: 0 auto;
  121.             text-align: center;
  122.             width: auto;
  123.             height: 20px;
  124.             margin-top: 220px;
  125.         }
  126.         
  127.         
  128. #contenedor_menu_derecha
  129.         {
  130.             width:178px;
  131.             height:565px;
  132.             float:right;
  133.             
  134.         }
  135.         
  136.     .menu_secundario
  137.         {
  138.             width:178px;
  139.             height:565px;
  140.             float:left;
  141.             margin-left: 591px;
  142.             background-color: #8b654d;
  143.             background-image: url("../imagenes/header_receta_del_dia.png");
  144.             background-repeat: no-repeat;
  145.         }
  146.     
  147.     .imagen
  148.         {
  149.             border: 3px solid #FFFFFF;
  150.             border-color: white;
  151.             background-color: #8b654d;
  152.             margin-top: 50px;
  153.             margin-left: 20px;
  154.             width: 130px;
  155.             height: 130px;
  156.         }
  157.         
  158.     .publicidad
  159.         {
  160.             margin: 0 auto;
  161.             width: 178px;
  162.             height: 450px;
  163.             margin-top: 20px;
  164.             float: right;
  165.             background-color: #8b654d;
  166.             background-image: url("../imagenes/header_publicidad.png");
  167.             background-repeat: no-repeat;
  168.         }
  169. #contenedor_footer
  170.         {
  171.             width:950px;
  172.             height:20px;
  173.             background-color: #8b654d;
  174.             text-align:center;
  175.             float: left;
  176.             clear: both;
  177.             
  178.         }

Les dejo tanto el HTML como el CSS a ver si me pueden ayudar por que estoy medio perdido!

Etiquetas: background, color, divs, float, html, orden, todo, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 09:10.