Retour à Forum de site web

CSS Center 100% stretch présentation verticale

  • redgtsviper
  • Novice
  • Novice
  • No Avatar
  • Inscription: Fév 25, 2006
  • Messages: 18
  • Status: Offline

Message Février 3rd, 2008, 10:12 pm

Je suis en train de créer une balise centré conteneur qui sctretched 100% vertical.

Voici ce que j'ai actuellement (pas workin)
http://www.dieselinteractive.com/samplecss/sample1.php


Voici ce que je veux qu'il ressemble à celui
http://www.dieselinteractive.com/samplecss/sample2.php

XHTML Code: [ 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
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Février 3rd, 2008, 10:12 pm

  • Hob Bramble
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Jan 21, 2004
  • Messages: 351
  • Loc: Indiana, USA
  • Status: Offline

Message Février 4th, 2008, 1:24 am

Variation:
Code: [ Select ]
body {
margin: 0px;
}
  1. body {
  2. margin: 0px;
  3. }

à:
Code: [ Select ]
html, body {
margin: 0px;
height: 100%;
padding:0;
}
  1. html, body {
  2. margin: 0px;
  3. height: 100%;
  4. padding:0;
  5. }

et vous serez prêt à partir!

En outre, vous mai souhaitez modifier:
Code: [ Select ]
margin-right: auto;
margin-left: auto;
  1. margin-right: auto;
  2. margin-left: auto;

à:
Code: [ Select ]
margin: 0px auto;

Juste pour vous épargner une ligne. Mais ce n'est pas nécessaire de le mettre au travail.
-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 l’utilisateur
  • Inscription: Déc 04, 2007
  • Messages: 659
  • Loc: USA
  • Status: Offline

Message Février 4th, 2008, 7:16 am

J'ai pu faire ce travail à une de mes pages et des recherches sur google, il a dit que 100% de la hauteur ne peut pas être obtenue par simple réglage de la hauteur d'un conteneur à 100%, il n'a rien à prendre 100% de. J'ai eu à mettre le conteneur spécifié et tous les éléments, il a été à hauteur de 100% à chaque étape de sorte qu'il pourrait prendre 100% de celui-ci repose sur le style de mon dessin. Il s'agit d'un travail en cours et n'est pas disponible ici.

Il suffit de garder à l'esprit que le conteneur ne peut pas prendre 100% de rien :)
  • redgtsviper
  • Novice
  • Novice
  • No Avatar
  • Inscription: Fév 25, 2006
  • Messages: 18
  • Status: Offline

Message Février 4th, 2008, 12:30 pm

Je n'arrive toujours pas à obtenir ce travail. Ci-dessous est mon code

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



XHTML Code: [ 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 l’utilisateur
  • Inscription: Déc 04, 2007
  • Messages: 659
  • Loc: USA
  • Status: Offline

Message Février 4th, 2008, 12:36 pm

Essayez d'ajouter dans #contenant: height: 100%;

Ainsi, vous disent de prendre 100% de la hauteur du corps, alors il doit travailler, je pense.
  • Mr Steadfast
  • Novice
  • Novice
  • Avatar de l’utilisateur
  • Inscription: Jan 27, 2008
  • Messages: 34
  • Status: Offline

Message Février 4th, 2008, 1:46 pm

Essayer

Code: [ 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>



Vous devez remplir le récipient avec du contenu pour qu'elle pour remplir la page.
  • kbergmann
  • Expert
  • Expert
  • Avatar de l’utilisateur
  • Inscription: Déc 04, 2007
  • Messages: 659
  • Loc: USA
  • Status: Offline

Message Février 4th, 2008, 1:50 pm

Dites-nous ce qui ne fonctionne que si tout :)

Plus de prêts à vous aider après l'essai...
  • Hob Bramble
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Jan 21, 2004
  • Messages: 351
  • Loc: Indiana, USA
  • Status: Offline

Message Février 4th, 2008, 2:39 pm

Comme kbergmann dit, vous devez ajouter l'attribut hauteur de 100% à votre div conteneur - quand je vous ai dit pour l'ajouter à corps HTML, je ne voulais pas le retirer de votre conteneur.

Votre code doit se lire:
Code: [ 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 l’utilisateur
  • Inscription: Déc 04, 2007
  • Messages: 659
  • Loc: USA
  • Status: Offline

Message Février 6th, 2008, 5:55 am

Hey redgtsviper,

Si vous pouvez, laissez-nous savoir quand vous essayez et que si elle travaillait.

Merci.
  • cerf
  • Born
  • Born
  • No Avatar
  • Inscription: Aoû 30, 2009
  • Messages: 1
  • Status: Offline

Message Août 30th, 2009, 8:41 am

Bonjour there guys!

Son dissapointing vraiment voir comment certaines personnes ne this même pas merci après avoir été secourus.

Mais je suis juste ici pour vous dire merci pour m'avoir aidé à résoudre un problème d'années. J'ai vraiment ne paient pas suffisamment d'attention que je pouvais aller en mode Quirk et sort it out, mais maintenant que je pourrais être de retour en web desing je veux faire thngs droite!

Rock on, dudes!

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 10 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 81 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC