Foros del Web » Creando para Internet » CSS »

Problema con divs

 Estas en el tema de Problema con divs en el foro de CSS en Foros del Web. Hola buenos días, tengo un problema con el cual me podrían ayudar. Estoy haciendo una web con porcentajes para que se vaya ajustando mientras mas ...
  #1 (permalink)  
Antiguo 06/06/2013, 16:06
 
Fecha de Ingreso: marzo-2010
Mensajes: 25
Antigüedad: 14 años, 1 mes
Puntos: 0
Problema con divs
Hola buenos días, tengo un problema con el cual me podrían ayudar. Estoy haciendo una web con porcentajes para que se vaya ajustando mientras mas chica es la pantalla. Mi problema es que el div del menu cuando se va achicando queda debajo del div con el contenido. Alguien sabe como arreglar eso? Necesitaria que el div del contenido quede DEBAJO automaticamente. les dejo el código.

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.  
  6.         <title>Club de Danza</title>
  7.         
  8.         <meta name="description" content="" />
  9.         <meta name="keywords" content="" />
  10.         
  11.         <link href='img/favicon.png' rel='shortcut icon' type='image/png'/>
  12.         
  13.         <link rel="stylesheet" href="css/reset.css" media="all" />
  14.         <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
  15.         
  16.     </head>
  17. <body>
  18.     <div class="mainWrap">
  19.         <div id="pinkbar">
  20.             <div class="leftCol">
  21.                 <h1 id="pageLogo">
  22.                     <a href="index.html">Club de Danza</a>
  23.                 </h1>
  24.             </div>
  25.             
  26.             <div id="rightCol">
  27.                 <div id="searchbar">
  28.                     <form action="/search" id="sidebar_search" method="get">
  29.                         <input autocomplete="off" class="search_input" name="query" placeholder=" Buscar artistas y estudios">
  30.                         <button class="search_button" type="submit" title="Buscar artistas y estudios">Buscar artistas y estudios</button>
  31.                     </form>
  32.                 </div>
  33.             </div>
  34.         </div>
  35.         
  36.         <div id="menuBar">
  37.             <ul>
  38.                 <li><a href="#" class="current">Inicio <span class="separador">|</span></a></li>
  39.                 <li><a href="#">Artistas <span class="separador">|</span></a></li>
  40.                 <li><a href="#">Audiciones y Convocatorias <span class="separador">|</span></a></li>
  41.                 <li><a href="#">Clasificados <span class="separador">|</span></a></li>
  42.                 <li><a href="#">Cursos y Talleres</a></li>
  43.             </ul>
  44.         </div>
  45.         
  46.         <div id="mainContent">
  47.             <div id="mainContentLeft">
  48.                 <div class="article">
  49.                     <div class="articleImg"><img src="images/articulos/203693_7593.jpg" width="218" height="145" alt="articleImg"/></div>
  50.                     <span class="articleEpigrafe">Ep&iacute;grafe</span>
  51.                     <span class="articleTitulo">T&iacute;tulo del Art&iacute;culo</span>
  52.                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  53.                     <a href="#">Leer m&aacute;s</a>
  54.                 </div>
  55.                 
  56.                 <div class="article">
  57.                     <div class="articleImg"><img src="images/articulos/732197_26596117.jpg" width="218" height="145" alt="articleImg"/></div>
  58.                     <span class="articleEpigrafe">Ep&iacute;grafe</span>
  59.                     <span class="articleTitulo">T&iacute;tulo del Art&iacute;culo</span>
  60.                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  61.                     <a href="#">Leer m&aacute;s</a>
  62.                 </div>
  63.                 
  64.                 <div class="article">
  65.                     <div class="articleImg"><img src="images/articulos/736302_32713694.jpg" width="218" height="145" alt="articleImg"/></div>
  66.                     <span class="articleEpigrafe">Ep&iacute;grafe</span>
  67.                     <span class="articleTitulo">T&iacute;tulo del Art&iacute;culo</span>
  68.                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  69.                     <a href="#">Leer m&aacute;s</a>
  70.                 </div>
  71.                 
  72.                 <div class="article">
  73.                     <div class="articleImg"><img src="images/articulos/750900_91551630.jpg" width="218" height="145" alt="articleImg"/></div>
  74.                     <span class="articleEpigrafe">Ep&iacute;grafe</span>
  75.                     <span class="articleTitulo">T&iacute;tulo del Art&iacute;culo</span>
  76.                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  77.                     <a href="#">Leer m&aacute;s</a>
  78.                 </div>
  79.                 
  80.                 <div class="article">
  81.                     <div class="articleImg"><img src="images/articulos/1069896_60158036.jpg" width="218" height="145" alt="articleImg"/></div>
  82.                     <span class="articleEpigrafe">Ep&iacute;grafe</span>
  83.                     <span class="articleTitulo">T&iacute;tulo del Art&iacute;culo</span>
  84.                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  85.                     <a href="#">Leer m&aacute;s</a>
  86.                 </div>
  87.                 
  88.                 <div class="article">
  89.                     <div class="articleImg"><img src="images/articulos/1386581_51264205.jpg" width="218" height="145" alt="articleImg"/></div>
  90.                     <span class="articleEpigrafe">Ep&iacute;grafe</span>
  91.                     <span class="articleTitulo">T&iacute;tulo del Art&iacute;culo</span>
  92.                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  93.                     <a href="#">Leer m&aacute;s</a>
  94.                 </div>
  95.             </div>
  96.             <!-- end mainContentLeft-->
  97.         
  98.         
  99.     </div>


Código CSS: 
Ver original
  1. body {
  2.     color: #333;
  3.     direction: ltr;
  4.     font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
  5.     font-size: 11px;
  6.     line-height: 1.28;
  7.     text-align: left;
  8. }
  9. #mainWrap {
  10.     width:100%;
  11.     height:100%;
  12.     overflow:hidden;
  13.     position:relative;
  14. }   
  15. #pinkbar {
  16.     background-color:#e0104c;
  17.     /*
  18.     background-image:url(../images/colorbanner.jpg); */
  19.     background-repeat:repeat-x;
  20.     height:45px;
  21.     position:fixed;
  22.     width:100%;
  23. }
  24. #pageLogo {
  25.     float:left;
  26.     padding-top:10px;
  27.     padding-left:10px;
  28. }
  29. #pageLogo a {
  30.     background-image:url(../images/club.png);
  31.     background-repeat:no-repeat;
  32.     background-size: auto;
  33.     display:block;
  34.     height:26px;
  35.     outline:none;
  36.     overflow:hidden;
  37.     text-indent:-999px;
  38.     white-space:nowrap;
  39.     width:180px;
  40. }
  41. #searchbar {
  42.     float:right;
  43.     padding-top:12px;
  44.     padding-right:10px;
  45.     height:21px;
  46. }
  47. #searchbar input{
  48.     border:none;
  49.     height:19px;
  50.     margin-right:-4px;
  51.     min-width:300px;
  52. }
  53. .search_button {
  54.     background-image:url(../images/lupa.jpg);
  55.     background-repeat:no-repeat;
  56.     border:none;
  57.     cursor:pointer;
  58.     height:21px;
  59.     text-indent:-999px;
  60.     width:24px;
  61.     z-index:50;
  62. }
  63. /* menuBar 02 */
  64. #menuBar {
  65.     background-color:#f5f5f5;
  66.     display:block;
  67.     font-size:19px;
  68.     font-weight:normal;
  69.     font-family:'Helvetica',tahoma,verdana,arial,sans-serif;
  70.     width: 100%;
  71.     min-height:52px;
  72.     position:absolute;
  73.     margin:45px auto;
  74.     clear:both;
  75.     }
  76. #menuBar ul {
  77.     margin:0 0 0 43px;
  78.     padding:0;
  79.     list-style-type:none;
  80.     }
  81. #menuBar ul li {
  82.     display:block;
  83.     float:left;
  84.     margin:10px 0 0 0;
  85.     }
  86. #menuBar ul li a {
  87.     display:block;
  88.     float:left;
  89.     color:#e2104d;
  90.     text-decoration:none;
  91.     padding:0px 13px 0 0px;
  92.     }
  93. #menuBar ul li a:hover {
  94.     color:#e2104d;
  95.     }
  96. #menuBar ul li a.current {
  97.     color:#000;
  98.     }
  99. .separador {
  100.     color:#c8c8c8;
  101. }
  102. #menuBar img{
  103.     padding-top:6px;
  104.     padding-left:73px;
  105. }
  106. #searchContent {
  107.     float:left;
  108.     padding-left:819px;
  109.     padding-top:15px;
  110. }
  111. .enter_button {
  112.     background-image:url(../images/entrar.jpg);
  113.     background-repeat:no-repeat;
  114.     border:none;
  115.     cursor:pointer;
  116.     height:41px;
  117.     text-indent:-999px;
  118.     width:101px;
  119. }
  120. /* End menuBar styles */
  121.  
  122. /* mainContent 03 */
  123. #mainContent {
  124.     /* background:url("../images/patronescs4-01.png")no-repeat; */
  125.     width:100%;
  126.     margin:0px auto;
  127. }
  128. #mainContentLeft {
  129.     background-color:#efedee;
  130.     font-family:'Arial',tahoma,verdana,arial,sans-serif;
  131.     size:9px;
  132.     width:75%;
  133.     height:auto;
  134.     top:97px;
  135.     float:left;
  136.     position:absolute;
  137. }
  138. .article {
  139.     background-color:#efedee;
  140.     width:218px;
  141.     height:234px;
  142.     margin:9px 0 0 9px;
  143.     float:left;
  144.     margin-top:9px;
  145. }
  146. .articleImg {
  147.     width:218px;
  148.     height:145px;
  149.     padding-top:5px;
  150.     position:relative;
  151. }
  152. .articleEpigrafe {
  153.     font-family:'Arial',tahoma,verdana,arial,sans-serif;
  154.     font-size:9px;
  155.     background-color:#e0104c;
  156.     width:213px;
  157.     position:absolute;
  158.     margin-top:-14px;
  159.     padding-left:5px;
  160. }
  161. .articleTitulo {
  162.     font-family:'Arial',tahoma,verdana,arial,sans-serif;
  163.     font-size:12px;
  164.     font-weight:bold;
  165.     padding-left:5px;
  166.     position:absolute;
  167.     padding-top:5px;
  168. }
  169. .article p {
  170.     font-family:'Arial',tahoma,verdana,arial,sans-serif;
  171.     font-size:10px;
  172.     padding-left:5px;
  173.     position:relative;
  174.     padding-top:15px;
  175. }
  176. .article a{
  177.     font-family:'Arial',tahoma,verdana,arial,sans-serif;
  178.     font-size:10px;
  179.     font-style:italic;
  180.     color:#00bbd2;
  181.     padding-left:160px;
  182.     text-decoration:none;
  183. }
  184. .article a:hover{
  185.     font-family:'Arial',tahoma,verdana,arial,sans-serif;
  186.     font-size:10px;
  187.     font-style:italic;
  188.     color:#00bbd2;
  189.     padding-left:160px;
  190.     text-decoration:underline;
  191. }
  192. /* End mainContent */

Saludos y gracias por la ayuda.
  #2 (permalink)  
Antiguo 06/06/2013, 17:01
Avatar de Aeon1  
Fecha de Ingreso: enero-2012
Mensajes: 57
Antigüedad: 12 años, 3 meses
Puntos: 3
Respuesta: Problema con divs
no entiendo muy bien tu pregunta, pero si quieres que un div quede debajo de otro aplicale la proiedad z-index a tus div
  #3 (permalink)  
Antiguo 08/06/2013, 19:48
 
Fecha de Ingreso: abril-2010
Mensajes: 122
Antigüedad: 14 años
Puntos: 18
Respuesta: Problema con divs
por lo q veo, mi consejo es q no uses la propiedad position:absolute, mas si es para un responsive design.. por su defecto usa float:left para q vaya acomodandose segun la resolucion.. y utiliza media queries.. eso ayuda
  #4 (permalink)  
Antiguo 10/06/2013, 03:00
 
Fecha de Ingreso: diciembre-2011
Mensajes: 134
Antigüedad: 12 años, 4 meses
Puntos: 5
Respuesta: Problema con divs
Si lo has hecho al 100% con porcentajes no deberia pasarte eso, tu problema es que has metido pixeles en algun lugar que no deberias.

Ademas, para hacer lo que tu prentedes no debes usar solo porcentajes, para eso existen los media queries .


Si quieres una pagina que se vea igual en todas las resoluciones, solo porcentajes, nada de pixeles.

Si quieres una pagina adaptada a cada resolucion, media queries.

La diferencia es que en la primera cuando las resoluciones sean muy pequeñas sera incomodo manejar esa web ya que se vera en tamaño mini.
  #5 (permalink)  
Antiguo 10/06/2013, 04:05
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Problema con divs
El problema real que tienes es lo que comenta comablck; que usas posicionamiento absoluto para colocar los elementos en vez de flotarlos. ¿Vicios del Dreamweaver?
  #6 (permalink)  
Antiguo 10/06/2013, 11:08
 
Fecha de Ingreso: mayo-2011
Ubicación: Palma de Mallorca
Mensajes: 108
Antigüedad: 12 años, 11 meses
Puntos: 4
Respuesta: Problema con divs
Estoy con comablck: usa los media screen para crear diferentes css según la resolución.

Es un trabajo más tedioso, pero es muy efectivo.

Etiquetas: color, contenido, divs, hover, html
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 23:36.