Tema: Problema con scroll horizontal
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 22/06/2010, 22:12
damianjb
 
Fecha de Ingreso: mayo-2010
Mensajes: 20
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Problema con scroll horizontal
Html
Código HTML: 
Ver original
  1. <body>
  2. <div id="encabezado">
  3.     <div class="logo"><img src="images/dipinto_logo.png"/></div>
  4. </div>
  5. <div id="menu">
  6.             <div id="bot_izq"></div>
  7.                          <ul class="nav_izq">
  8.                                  <li id="inicio"><a href="#"></a></li>
  9.                  <li id="quienes"><a href="#"></a></li>
  10.                      <li id="contact"><a href="#"></a></li>
  11.             </ul>
  12.  
  13.                         <div id="bot_der"></div>
  14.                     </div>
  15. <div id="contenido">
  16.   
  17.     <div id="estilo_k">
  18.       <ul class="kwicks" >
  19.         <li id="kwick1"></li>
  20.         <li id="kwick2"></li>
  21.         <li id="kwick3"></li>
  22.       </ul>
  23.       <div class="bor_der"><img src="images/bordes derechos.png"/></div>
  24.      </div>
  25.      
  26.    
  27.   </div>
  28. <div id="pie_de_pagina">
  29.     
  30. </div>
  31. </body>
  32. </html>

CSS
Código CSS: 
Ver original
  1. @import url("reset.css");
  2. body {
  3.     font-family: Arial, Helvetica, Geneva, sans-serif;
  4.     color: #000;
  5.     background-color: #E4D2DF;
  6. }
  7. #encabezado {
  8.     height:     198px;
  9.     background: url(images/dipinto_bg_header.png) left top repeat-x;
  10.     position: relative;
  11.     margin-bottom: -18px;
  12.     }
  13.  
  14. #menu {
  15.     z-index: 1;
  16.     position: relative;
  17.     width: 806px;
  18.     margin-left: 550px;
  19. }
  20. #menu ul.nav_izq {
  21.     width: 581px;
  22.     float: left;
  23. }
  24. #menu ul li {
  25.     height: 53px;
  26.     float: left;
  27. }
  28. #menu #bot_izq {
  29.     background-image: url(images/dipinto_bot_izq.png);
  30.     background-repeat: no-repeat;
  31.     width: 71px;
  32.     height: 53px;
  33.     float: left;
  34. }
  35. #menu #bot_der {
  36.     width: 153px;
  37.     background-image: url(images/dipinto_bot_der.png);
  38.     background-repeat: no-repeat;
  39.     height: 53px;
  40.     float: left;
  41.  
  42.     #menu .nav_izq #contact {
  43.     width: 223px;
  44.     background-image: url(images/dipinto_bot_contac.png);
  45.     background-repeat: no-repeat;
  46.     background-position: top left;
  47. }
  48. #menu .nav_izq #inicio {
  49.     background-image: url(images/dipinto_bot_inicio.png);
  50.     width: 144px;
  51.     background-repeat: no-repeat;
  52. }
  53. #menu .nav_izq #quienes {
  54.     width: 214px;
  55.     background-image: url(images/dipinto_bot_quien.png);
  56.     background-repeat: no-repeat;
  57.     
  58.     
  59.     
  60.     
  61.     #contenido {
  62.     width: 800px;
  63.     height: 800px;
  64.     margin: 80px auto 30px auto;
  65.     position: relative;
  66.     background-color: #E4D2DF;
  67. }
  68. #contenido #estilo_k {
  69.     position: relative;
  70.     float: left;
  71.     height: 502px;
  72.     width: 534px;
  73. }
  74.  
  75.  
  76.  
  77. }
  78. #contenido #estilo_k .bor_der {
  79.     position: relative;
  80.     width: 46px;
  81.     height: 502px;
  82.     float: left;
  83.     z-index: 1;
  84. }
  85.  
  86.  
  87. }
  88. #menu ul li a, #menu ul li a:link, #menu ul li a:active, #menu ul li a:visited {
  89.     display: block;
  90.     float: left;
  91.     height: 40px;
  92.     padding: 0 18px;
  93.     text-decoration: none;
  94.     color: #FFF;
  95.     font: .96em/28px "Lucida Grande", Lucida, Verdana, sans-serif;
  96. }
  97. #pie_de_pagina {
  98.     height: 198px;
  99.     background: url(images/dipinto_bg_footer.png) left top repeat-x;
  100. }
  101. .logo {
  102.     width: 572px;
  103.     position: relative;
  104.     margin-left: 50px;
  105. }
  106. .kwicks {
  107.     list-style: none;
  108.     position: relative;
  109.     margin: 0;
  110.     padding: 0;
  111.     float: left;
  112.     margin-right: -46px;
  113. }  
  114. .kwicks li{  
  115.      display: block;  
  116.      overflow: hidden;  
  117.      padding: 0;  
  118.      cursor: pointer;  
  119. }  
  120. .kwicks li{
  121.     float: left;
  122.     width: 178px;
  123.     height: 502px;
  124.     margin-right: 0px;
  125.     position: relative;
  126. }  
  127.  #kwick1 {
  128.     background-image: url(images/uno.png);
  129. }  
  130.  #kwick2 {
  131.     background-image: url(images/dos.png);
  132. }  
  133. #kwick3 {
  134.     background-image: url(images/tres.png);
  135. }