Foros del Web » Creando para Internet » CSS »

Problema con div se superponen

 Estas en el tema de Problema con div se superponen 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:07
 
Fecha de Ingreso: marzo-2010
Mensajes: 25
Antigüedad: 14 años, 9 meses
Puntos: 0
Problema con div se superponen
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, 16:32
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 10 meses
Puntos: 1146
Respuesta: Problema con div se superponen
utiliza z-index para indicar que elemento debe estar arriba y cual abajo.
  #3 (permalink)  
Antiguo 06/06/2013, 16:37
 
Fecha de Ingreso: marzo-2010
Mensajes: 25
Antigüedad: 14 años, 9 meses
Puntos: 0
Respuesta: Problema con div se superponen
Si igual ese no es el problema. El problema es que a medida que el menu se achica se va desplazando para abajo y el div donde esta la info queda en el mismo lugar. Lo que quiero es que a medida que el menu va para abajo el contenido vaya a su vez a la par.
  #4 (permalink)  
Antiguo 06/06/2013, 16:42
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 10 meses
Puntos: 1146
Respuesta: Problema con div se superponen
aaaa ok ok, entonces es momento de aprender que no es bueno usar position:absolute cuando no es necesario, tu problema es ese, deja de usarlo y todo ira bien.... si quieres un diseño adaptable o responsibe el usar absolute es muy mala idea y no se lleva bien en la mayoria de los casos.
  #5 (permalink)  
Antiguo 06/06/2013, 16:44
 
Fecha de Ingreso: marzo-2010
Mensajes: 25
Antigüedad: 14 años, 9 meses
Puntos: 0
Respuesta: Problema con div se superponen
Ah buenisimo, entonces voy a probar quitando eso a ver si lo puedo solucionar. En cuanto puedo digo si me funciono. Gracias por la ayuda

Etiquetas: color, contenido, 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 21:43.