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

CSS Center 100% tramo vertical

  • redgtsviper
  • Novice
  • Novice
  • No Avatar
  • Registrado: Feb 25, 2006
  • Mensajes: 18
  • Status: Offline

Nota Febrero 3rd, 2008, 10:12 pm

Estoy tratando de crear una etiqueta de contenedores centrada que sctretched 100% vertical.

Aquí lo que tengo actualmente (no trabajando)
http://www.dieselinteractive.com/samplecss/sample1.php


Esto es lo que quiero que se vea como
http://www.dieselinteractive.com/samplecss/sample2.php

XHTML Código: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
   margin: 0px;
}
#content {
   height: 100%;
   width: 800px;
   margin-right: auto;
   margin-left: auto;
   background-color: #00CCFF;
}
-->
</style>
</head>
 
<body>
<div id="content">Content for  id "content" Goes Here</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8. body {
  9.    margin: 0px;
  10. }
  11. #content {
  12.    height: 100%;
  13.    width: 800px;
  14.    margin-right: auto;
  15.    margin-left: auto;
  16.    background-color: #00CCFF;
  17. }
  18. -->
  19. </style>
  20. </head>
  21.  
  22. <body>
  23. <div id="content">Content for  id "content" Goes Here</div>
  24. </body>
  25. </html>
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Febrero 3rd, 2008, 10:12 pm

  • Hob Bramble
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Ene 21, 2004
  • Mensajes: 351
  • Loc: Indiana, USA
  • Status: Offline

Nota Febrero 4th, 2008, 1:24 am

Cambio:
Código: [ Select ]
body {
margin: 0px;
}
  1. body {
  2. margin: 0px;
  3. }

a:
Código: [ Select ]
html, body {
margin: 0px;
height: 100%;
padding:0;
}
  1. html, body {
  2. margin: 0px;
  3. height: 100%;
  4. padding:0;
  5. }

y será bueno ir!

Además, es posible que desee cambiar:
Código: [ Select ]
margin-right: auto;
margin-left: auto;
  1. margin-right: auto;
  2. margin-left: auto;

a:
Código: [ Select ]
margin: 0px auto;

Sólo para salvarte a ti mismo de una línea. Pero eso no es necesario para que funcione.
-Patrick J. B. Simmons | @hobbramble
"If I could give you one piece of advice to remember for the rest of your life, it would be this: when Patrick tells you to do something, do the opposite." - Nolan Ladewski
  • kbergmann
  • Expert
  • Expert
  • Avatar de Usuario
  • Registrado: Dic 04, 2007
  • Mensajes: 659
  • Loc: USA
  • Status: Offline

Nota Febrero 4th, 2008, 7:16 am

Tuve que esto funcione en una de mis páginas a través de la investigación y en google, dijo que el 100% de altura no se puede obtener simplemente por fijar la altura de un contenedor a 100%, ya que no tiene nada que tomar el 100% de. Tuve que se especifica el conjunto de contenedores y todos los elementos es a la altura del 100% para que cada paso hacia abajo que puede tomar el 100% de la misma basada en el estilo de mi diseño. Se trata de un trabajo en progreso y no incluidas en este documento.

Sólo tenga en cuenta que un contenedor no puede tener el 100% de nada :)
  • redgtsviper
  • Novice
  • Novice
  • No Avatar
  • Registrado: Feb 25, 2006
  • Mensajes: 18
  • Status: Offline

Nota Febrero 4th, 2008, 12:30 pm

Todavía no puedo hacer que esto funcione. A continuación se muestra el código de

http://dieselinteractive.com/new/SAMPLE.htm



XHTML Código: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
 
html, body {
margin: 0px;
height: 100%;
padding:0;
}
 
#container {
   width: 775px;
   margin: 0px auto;
   background-color: #0099FF;
}
-->
</style>
</head>
 
<body>
<div id="container">Content for  id "container" Goes Here</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8.  
  9. html, body {
  10. margin: 0px;
  11. height: 100%;
  12. padding:0;
  13. }
  14.  
  15. #container {
  16.    width: 775px;
  17.    margin: 0px auto;
  18.    background-color: #0099FF;
  19. }
  20. -->
  21. </style>
  22. </head>
  23.  
  24. <body>
  25. <div id="container">Content for  id "container" Goes Here</div>
  26. </body>
  27. </html>
  • kbergmann
  • Expert
  • Expert
  • Avatar de Usuario
  • Registrado: Dic 04, 2007
  • Mensajes: 659
  • Loc: USA
  • Status: Offline

Nota Febrero 4th, 2008, 12:36 pm

Prueba a añadir en #contenedor: altura: 100%;

de esa manera que usted dice tener el 100% de altura del cuerpo entonces se debe trabajar, creo.
  • Mr Steadfast
  • Novice
  • Novice
  • Avatar de Usuario
  • Registrado: Ene 27, 2008
  • Mensajes: 34
  • Status: Offline

Nota Febrero 4th, 2008, 1:46 pm

Intentar

Código: [ Select ]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html, body {
margin: 0px;
height: 100%;
padding:0;
text-align: center;
}

#container {
width: 775px;
margin: 0px auto;
background-color: #0099FF;
text-align: left;
}

-->

</style>
</head>
<body>
<div id="container">Content for id "container" Goes Here</div>
</body>
</html>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>Untitled Document</title>
  7. <style type="text/css">
  8. <!--
  9. html, body {
  10. margin: 0px;
  11. height: 100%;
  12. padding:0;
  13. text-align: center;
  14. }
  16. #container {
  17. width: 775px;
  18. margin: 0px auto;
  19. background-color: #0099FF;
  20. text-align: left;
  21. }
  23. -->
  25. </style>
  26. </head>
  27. <body>
  28. <div id="container">Content for id "container" Goes Here</div>
  29. </body>
  30. </html>



Usted necesita para llenar el recipiente con el contenido a fin de que para llenar la página.
  • kbergmann
  • Expert
  • Expert
  • Avatar de Usuario
  • Registrado: Dic 04, 2007
  • Mensajes: 659
  • Loc: USA
  • Status: Offline

Nota Febrero 4th, 2008, 1:50 pm

Háganos saber que todo funciona si :)

Más que dispuesto a ayudar después de la prueba...
  • Hob Bramble
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Ene 21, 2004
  • Mensajes: 351
  • Loc: Indiana, USA
  • Status: Offline

Nota Febrero 4th, 2008, 2:39 pm

Como kbergmann dijo, es necesario añadir el atributo altura de 100% a su div contenedor - cuando le dije que usted agregue al organismo html, no quise sacarlo de su envase.

Su código debe decir:
Código: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Untitled Document</title>
 <style type="text/css">
  <!--
  html, body {
   margin: 0px;
   height: 100%;
   padding:0;
  }
  #container {
   height: 100%;
   width: 775px;
   margin: 0px auto;
   background-color: #0099FF;
  }
  -->
 </style>
</head>
<body>
 <div id="container">Content for id "container" Goes Here</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.  <title>Untitled Document</title>
  6.  <style type="text/css">
  7.   <!--
  8.   html, body {
  9.    margin: 0px;
  10.    height: 100%;
  11.    padding:0;
  12.   }
  13.   #container {
  14.    height: 100%;
  15.    width: 775px;
  16.    margin: 0px auto;
  17.    background-color: #0099FF;
  18.   }
  19.   -->
  20.  </style>
  21. </head>
  22. <body>
  23.  <div id="container">Content for id "container" Goes Here</div>
  24. </body>
  25. </html>
-Patrick J. B. Simmons | @hobbramble
"If I could give you one piece of advice to remember for the rest of your life, it would be this: when Patrick tells you to do something, do the opposite." - Nolan Ladewski
  • kbergmann
  • Expert
  • Expert
  • Avatar de Usuario
  • Registrado: Dic 04, 2007
  • Mensajes: 659
  • Loc: USA
  • Status: Offline

Nota Febrero 6th, 2008, 5:55 am

Hey redgtsviper,

Si puede, háganos saber cuando usted intenta y que si funcionó.

Gracias.
  • cerf
  • Born
  • Born
  • No Avatar
  • Registrado: Ago 30, 2009
  • Mensajes: 1
  • Status: Offline

Nota Agosto 30th, 2009, 8:41 am

Hola chicos!

Su realmente decepcionante ver cómo algunas personas ni siquiera las gracias después de ser ayudado.

Pero estoy aquí sólo para decir gracias por ayudarme a resolver un problema de años. Yo realmente no prestamos suficiente atención como pude modo de capricho y clasificar a cabo, pero ahora que yo podría estar de nuevo en diseño web que quiero hacer thngs bien!

Rock on, dudes!

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 10 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 86 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