Volver al Foro de Diseño de páginas Web

Random Espacio en la parte inferior de mi página

  • mindfullsilence
  • Professor
  • Professor
  • Avatar de Usuario
  • Registrado: Ago 04, 2008
  • Mensajes: 846
  • Status: Offline

Nota Agosto 23rd, 2008, 12:17 pm

Tengo una página con código y todo, pero theres un gran desfase entre el final de mi contenido y el final de la página. Se desplaza hacia abajo mucho. Un lote de la página se haga con divs. Todo el mundo sabe lo que causa esto. He comprobado todos los márgenes y mi whatnot. Si es necesario Malos puesto el código.
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Agosto 23rd, 2008, 12:17 pm

  • neksus
  • Mastermind
  • Mastermind
  • Avatar de Usuario
  • Registrado: Sep 10, 2004
  • Mensajes: 2194
  • Loc: Canada
  • Status: Offline

Nota Agosto 23rd, 2008, 12:27 pm

Por favor, puesto que :)
Yo realmente tenía que solucionar este problema - resulta tuve un enrollado <br> entre algunas filas que me olvidé de sacar cuando me convirtieron a divs.
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de Usuario
  • Registrado: Ago 04, 2008
  • Mensajes: 846
  • Status: Offline

Nota Agosto 23rd, 2008, 1:11 pm

html:

Código: [ Select ]
   
    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see http://www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jsnavbar.js">
</script>
</head>
<body> <!-- took ou onLoad content so post is smaller -->
<div id="wrap">
<div id="header">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th height="57" scope="col">
<div class="c1"><img src="images/logo.png" alt="" name="Logo" width="334" height="136" id="Logo" /></div></th>
<th scope="col">
<div class="c2"><img src="images/index_02.png" alt="" name="headerright" width="283" height="144" id="headerright" /></div></th>
</tr>
</table>
</div>
<div id="navbarwrap" align="center">
<div id="navbar"></div><!-- firefox/dreamweaver generated navbar deleted so post is smaller -->
</div>
<div id="maincontentheader">
<h1>Voltec Design</h1>
</div>
<div id="maincontenttext"></div>
<div id="minicontentheader1">
<h1>Service</h1>
</div>
<div id="minicontent1"></div>
<div id="minicontentheader2">
<h1>Guarentee</h1>
</div>
<div id="minicontent2"></div>
<div id="minicontentheader3">
  <h1>Testimonials</h1>
</div>
<div id="minicontent3"></div>
</div>
</body>
</html>
  1.    
  2.     <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see http://www.w3.org" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Untitled Document</title>
  7. <link href="reset.css" rel="stylesheet" type="text/css" />
  8. <link href="layout.css" rel="stylesheet" type="text/css" />
  9. <script type="text/javascript" src="jsnavbar.js">
  10. </script>
  11. </head>
  12. <body> <!-- took ou onLoad content so post is smaller -->
  13. <div id="wrap">
  14. <div id="header">
  15. <table width="100%" border="0" cellpadding="0" cellspacing="0">
  16. <tr>
  17. <th height="57" scope="col">
  18. <div class="c1"><img src="images/logo.png" alt="" name="Logo" width="334" height="136" id="Logo" /></div></th>
  19. <th scope="col">
  20. <div class="c2"><img src="images/index_02.png" alt="" name="headerright" width="283" height="144" id="headerright" /></div></th>
  21. </tr>
  22. </table>
  23. </div>
  24. <div id="navbarwrap" align="center">
  25. <div id="navbar"></div><!-- firefox/dreamweaver generated navbar deleted so post is smaller -->
  26. </div>
  27. <div id="maincontentheader">
  28. <h1>Voltec Design</h1>
  29. </div>
  30. <div id="maincontenttext"></div>
  31. <div id="minicontentheader1">
  32. <h1>Service</h1>
  33. </div>
  34. <div id="minicontent1"></div>
  35. <div id="minicontentheader2">
  36. <h1>Guarentee</h1>
  37. </div>
  38. <div id="minicontent2"></div>
  39. <div id="minicontentheader3">
  40.   <h1>Testimonials</h1>
  41. </div>
  42. <div id="minicontent3"></div>
  43. </div>
  44. </body>
  45. </html>


respuesta rápida pero un poco ya que fija...
Todos minicontent mi "" y "minicontentheader" divs eran relativamente posicionado, cambié a absoluta y se coloca de ellos. Este se deshizo de el espacio extra en la parte inferior pero quería un poco de espacio en la parte inferior, alrededor de 10-20 píxeles, así que todo lo envuelve en una posición absoluta <div id="wrap"> y le dio una altura especificada que fue de 20 píxeles más que el contenido. Im bastante seguro de que los theres una manera más fácil de hacer esto, pero soy un chico de aprendizaje...no puede llamar a mi ingeniosos métodos todavía.

CSS:
Código: [ Select ]
@charset "utf-8";
 
/* CSS Document */
 
body {
    background-color: #333333;
    background-image: url(images/background.png);
    color: #FFFFFF;
}
 
#header {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:136px;
    z-index:1;
    overflow: visible;
    background-image: url(images/headerbg.png);
}
 
#header th {
    width: 100%;
    height: 100%;
}
 
#navbarwrap {
    position:absolute;
    width:100%;
    height:40px;
    z-index:3;
    left: -2px;
    top: 135px;
    background-image: url(images/navbarbg.gif);
    border-bottom-color: #000000;
    border-top-width: medium;
    border-bottom-width: medium;
    border-top-style: groove;
    border-bottom-style: groove;
    border-top-color: #000000;
}
 
#navbar {
    width: 544px;
    height: 40px;
    margin-right: auto;
    margin-left: auto;
    border-right-color: #CC0000;
    border-left-color: #CC0000;
    border-left-style: groove;
    border-right-style: groove;
    border-right-width: medium;
    border-left-width: medium;
}
 
#maincontentheader {
    position:relative;
    left:8%;
    top:200px;
    z-index:4;
    background-image: url(images/navbarbg.gif);
    width: 55%;
    height: 40px;
}
 
#maincontenttext {
    position: relative;
    left: 8%;
    width: 55%;
    height: 590px;
    background-color: #333333;
    top: 200px;
}
#minicontentheader1 {
    position: absolute;
    width: 20%;
    height: 40px;
    background-image: url(images/navbarbg.gif);
    left: 66%;
    top: 200px;
}
#minicontent1 {
    position: absolute;
    width: 20%;
    height: 150px;
    left: 66%;
    background-color: #333333;
    top: 240px;
}
 
#minicontentheader2 {
    position: absolute;
    width: 20%;
    height: 40px;
    background-image: url(images/navbarbg.gif);
    left: 66%;
    top: 420px;
    z-index: 8;
}
#minicontent2 {
    position: absolute;
    width: 20%;
    height: 150px;
    left: 66%;
    background-color: #333333;
    top: 460px;
}
#wrap {
    position: relative;
    height: 880px;
    width: 100%;
}
 
#minicontentheader3 {
    position: absolute;
    width: 20%;
    height: 40px;
    background-image: url(images/navbarbg.gif);
    left: 66%;
    top: 640px;
    z-index: 6;
}
#minicontent3 {
    position: absolute;
    width: 20%;
    height: 150px;
    left: 66%;
    background-color: #333333;
    margin-bottom: 0px;
    top: 680px;
}
 
 
h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    padding-left: 10px;
    padding-top: 10px;
    font-variant: small-caps;
    color: #FFFFFF;
}
 
/*<![CDATA[*/
 div.c2 {text-align: right}
 div.c1 {text-align: left}
/*]]>*/
 
  1. @charset "utf-8";
  2.  
  3. /* CSS Document */
  4.  
  5. body {
  6.     background-color: #333333;
  7.     background-image: url(images/background.png);
  8.     color: #FFFFFF;
  9. }
  10.  
  11. #header {
  12.     position:absolute;
  13.     left:0px;
  14.     top:0px;
  15.     width:100%;
  16.     height:136px;
  17.     z-index:1;
  18.     overflow: visible;
  19.     background-image: url(images/headerbg.png);
  20. }
  21.  
  22. #header th {
  23.     width: 100%;
  24.     height: 100%;
  25. }
  26.  
  27. #navbarwrap {
  28.     position:absolute;
  29.     width:100%;
  30.     height:40px;
  31.     z-index:3;
  32.     left: -2px;
  33.     top: 135px;
  34.     background-image: url(images/navbarbg.gif);
  35.     border-bottom-color: #000000;
  36.     border-top-width: medium;
  37.     border-bottom-width: medium;
  38.     border-top-style: groove;
  39.     border-bottom-style: groove;
  40.     border-top-color: #000000;
  41. }
  42.  
  43. #navbar {
  44.     width: 544px;
  45.     height: 40px;
  46.     margin-right: auto;
  47.     margin-left: auto;
  48.     border-right-color: #CC0000;
  49.     border-left-color: #CC0000;
  50.     border-left-style: groove;
  51.     border-right-style: groove;
  52.     border-right-width: medium;
  53.     border-left-width: medium;
  54. }
  55.  
  56. #maincontentheader {
  57.     position:relative;
  58.     left:8%;
  59.     top:200px;
  60.     z-index:4;
  61.     background-image: url(images/navbarbg.gif);
  62.     width: 55%;
  63.     height: 40px;
  64. }
  65.  
  66. #maincontenttext {
  67.     position: relative;
  68.     left: 8%;
  69.     width: 55%;
  70.     height: 590px;
  71.     background-color: #333333;
  72.     top: 200px;
  73. }
  74. #minicontentheader1 {
  75.     position: absolute;
  76.     width: 20%;
  77.     height: 40px;
  78.     background-image: url(images/navbarbg.gif);
  79.     left: 66%;
  80.     top: 200px;
  81. }
  82. #minicontent1 {
  83.     position: absolute;
  84.     width: 20%;
  85.     height: 150px;
  86.     left: 66%;
  87.     background-color: #333333;
  88.     top: 240px;
  89. }
  90.  
  91. #minicontentheader2 {
  92.     position: absolute;
  93.     width: 20%;
  94.     height: 40px;
  95.     background-image: url(images/navbarbg.gif);
  96.     left: 66%;
  97.     top: 420px;
  98.     z-index: 8;
  99. }
  100. #minicontent2 {
  101.     position: absolute;
  102.     width: 20%;
  103.     height: 150px;
  104.     left: 66%;
  105.     background-color: #333333;
  106.     top: 460px;
  107. }
  108. #wrap {
  109.     position: relative;
  110.     height: 880px;
  111.     width: 100%;
  112. }
  113.  
  114. #minicontentheader3 {
  115.     position: absolute;
  116.     width: 20%;
  117.     height: 40px;
  118.     background-image: url(images/navbarbg.gif);
  119.     left: 66%;
  120.     top: 640px;
  121.     z-index: 6;
  122. }
  123. #minicontent3 {
  124.     position: absolute;
  125.     width: 20%;
  126.     height: 150px;
  127.     left: 66%;
  128.     background-color: #333333;
  129.     margin-bottom: 0px;
  130.     top: 680px;
  131. }
  132.  
  133.  
  134. h1 {
  135.     font-family: Arial, Helvetica, sans-serif;
  136.     font-size: 20px;
  137.     font-weight: bold;
  138.     padding-left: 10px;
  139.     padding-top: 10px;
  140.     font-variant: small-caps;
  141.     color: #FFFFFF;
  142. }
  143.  
  144. /*<![CDATA[*/
  145.  div.c2 {text-align: right}
  146.  div.c1 {text-align: left}
  147. /*]]>*/
  148.  
Use your words like arrows to shoot toward your goal.

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 3 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 153 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC