Retour à Tutoriels HTML

TUTORIAL: Mise à flot deux divs la même hauteur avec CSS

  • righteous_trespasser
  • Scuffle
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Mar 12, 2007
  • Messages: 6228
  • Loc: South-Africa
  • Status: Offline

Message Septembre 11th, 2008, 6:38 am

Introduction


Il ya certaines situations où vous construisez un site avec un menu de gauche et le menu et les parties du corps sont à la fois flottait à gauche pour montrer à côté de l'autre. Toutefois, le contenu du menu et le contenu sont à la fois dynamiques et donc, vous ne pouvez pas spécifier manuellement la hauteur pour l'une d'elles. Vous devez donc vous assurer qu'ils sont tous les deux la même hauteur, ce que je te montre là ne rend pas effectivement les deux colonnes à la même hauteur, mais il donne l'impression qu'elles sont la même hauteur.

Flottants, les deux colonnes


Cela ne devrait pas être un problème pour vous, car vous arrivez à ce tutoriel avec deux divs qui sont déjà flottait à côté de l'autre, mais permet simplement d'avoir un rapide coup d'oeil à ce que ce code va ressembler, et ce que la sortie sera.
Le code:
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>R_T Tutorial</title>
<style type='text/css'>
body{
background-color:#dddddd;
}
div#container{
width:980px;
margin:0px auto 0px auto;
}
div#header{
width:980px;
height:225px;
background-image:url('images/header.gif');
}
div#body_container{
width:980px;
}
div#menu_left{
width:230px;
background-color:#004163;
float:left;
}
div#body{
background-color:#ffffff;
width:750px;
float:left;
}
</style>
</head>
<body>
<div id='container'>
<div id='header'></div>
<div id='body_container'>
<div id='menu_left'>
<a href='#'>menu link</a>
</div>
<div id='body'>
<h1>Body Heading</h1>
<p>Some body text here. this is just some sample text to take up a bit of space and show you what is going on.</p>
</div>
</div>
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>R_T Tutorial</title>
  5. <style type='text/css'>
  6. body{
  7. background-color:#dddddd;
  8. }
  9. div#container{
  10. width:980px;
  11. margin:0px auto 0px auto;
  12. }
  13. div#header{
  14. width:980px;
  15. height:225px;
  16. background-image:url('images/header.gif');
  17. }
  18. div#body_container{
  19. width:980px;
  20. }
  21. div#menu_left{
  22. width:230px;
  23. background-color:#004163;
  24. float:left;
  25. }
  26. div#body{
  27. background-color:#ffffff;
  28. width:750px;
  29. float:left;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div id='container'>
  35. <div id='header'></div>
  36. <div id='body_container'>
  37. <div id='menu_left'>
  38. <a href='#'>menu link</a>
  39. </div>
  40. <div id='body'>
  41. <h1>Body Heading</h1>
  42. <p>Some body text here. this is just some sample text to take up a bit of space and show you what is going on.</p>
  43. </div>
  44. </div>
  45. </div>
  46. </body>
  47. </html>

votre sortie devrait maintenant ressembler à ceci:
Attachments:
first_part.gif

The first time you view it, it should look like this.



Faisant d'eux les mêmes hauteur


De faire maintenant les deux colonnes à la même hauteur, il ya trois choses que nous devons faire, à savoir:
  • Donnez la body_container "" div une image de fond
  • Donnez la body_container "" Div A background-color
  • Ajouter une div avec clear: both à l'intérieur du body_container "" div
    Code: [ Select ]
    div#body_container{
    background-image:url('images/body_background_cheat.gif');
    background-position:top left;
    background-repeat:repeat-y;
    }
    1. div#body_container{
    2. background-image:url('images/body_background_cheat.gif');
    3. background-position:top left;
    4. background-repeat:repeat-y;
    5. }

    Appliquer le background-color:
    nous allons rendre le background-color la même couleur que le "corps" div, ce sera alors faire croire que si le "corps" div est tout aussi élevé que le menu_left "" div même si elle n'est pas.
    Code: [ Select ]
    div#body_container{
    background-image:url('images/body_background_cheat.gif');
    background-position:top left;
    background-repeat:repeat-y;
    background-color:#ffffff;
    }
    1. div#body_container{
    2. background-image:url('images/body_background_cheat.gif');
    3. background-position:top left;
    4. background-repeat:repeat-y;
    5. background-color:#ffffff;
    6. }

    Ajout du "clear: both part"
    Et d'ajouter un div sous les deux divs flottaient avec la propriété "clear: both" faire de l'body_container "" div prolonger tout le chemin vers le bas des deux divs flottait, et voici le code pour que celui-ci:
    Code: [ Select ]
    div.clear{
    width:100%;
    height:0px;
    clear:both;
    }
    1. div.clear{
    2. width:100%;
    3. height:0px;
    4. clear:both;
    5. }

    maintenant s'il vous plaît la note, la hauteur ": 0px;" partie ne fonctionnera pas avec IE6, il sera 5px de hauteur, IE6 ne permet pas une div qui est de moins de 5px de hauteur pour le quelque raison obscure.
    En tout cas, maintenant vous allez ajouter ce div sous les deux divs flottait et vous serez alors fin prêt.

    Le résultat final


    Une fois que le youve a ajouté tout ce code votre devrait ressembler à ceci:
    Code: [ Select ]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>R_T Tutorial</title>
    <style type='text/css'>
    body{
    background-color:#dddddd;
    }
    div#container{
    width:980px;
    margin:0px auto 0px auto;
    }
    div#header{
    width:980px;
    height:225px;
    background-image:url('images/header.gif');
    }
    div#body_container{
    width:980px;
    }
    div#menu_left{
    width:230px;
    background-color:#004163;
    float:left;
    }
    div#body{
    background-color:#ffffff;
    width:750px;
    float:left;
    }
    div#body_container{
    background-image:url('images/body_background_cheat.gif');
    background-position:top left;
    background-repeat:repeat-y;
    background-color:#ffffff;
    }
    div.clear{
    width:100%;
    height:0px;
    clear:both;
    }
    </style>
    </head>
    <body>
    <div id='container'>
    <div id='header'></div>
    <div id='body_container'>
    <div id='menu_left'>
    <a href='#'>menu link</a>
    </div>
    <div id='body'>
    <h1>Body Heading</h1>
    <p>Some body text here. this is just some sample text to take up a bit of space and show you what is going on.</p>
    </div>
    <div class='clear'></div>
    </div>
    </div>
    </body>
    </html>
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    3. <head>
    4. <title>R_T Tutorial</title>
    5. <style type='text/css'>
    6. body{
    7. background-color:#dddddd;
    8. }
    9. div#container{
    10. width:980px;
    11. margin:0px auto 0px auto;
    12. }
    13. div#header{
    14. width:980px;
    15. height:225px;
    16. background-image:url('images/header.gif');
    17. }
    18. div#body_container{
    19. width:980px;
    20. }
    21. div#menu_left{
    22. width:230px;
    23. background-color:#004163;
    24. float:left;
    25. }
    26. div#body{
    27. background-color:#ffffff;
    28. width:750px;
    29. float:left;
    30. }
    31. div#body_container{
    32. background-image:url('images/body_background_cheat.gif');
    33. background-position:top left;
    34. background-repeat:repeat-y;
    35. background-color:#ffffff;
    36. }
    37. div.clear{
    38. width:100%;
    39. height:0px;
    40. clear:both;
    41. }
    42. </style>
    43. </head>
    44. <body>
    45. <div id='container'>
    46. <div id='header'></div>
    47. <div id='body_container'>
    48. <div id='menu_left'>
    49. <a href='#'>menu link</a>
    50. </div>
    51. <div id='body'>
    52. <h1>Body Heading</h1>
    53. <p>Some body text here. this is just some sample text to take up a bit of space and show you what is going on.</p>
    54. </div>
    55. <div class='clear'></div>
    56. </div>
    57. </div>
    58. </body>
    59. </html>

    et il devrait ressembler à ceci:
    Attachments:
    final_result.gif

    This would be the final result.



    Conclusion


    Faire ce travail est très simple, il suffit de se rappeler que nous avons ajouté un body_container autour des deux divs flottait, et a donné cette div "body_container" un background-image (1px x menus de largeur) et un fond de couleur (de la même couleur comme le "corps" divs arrière-plan)...Puis nous avons ajouté un div avec "clear: both" pour s'assurer que le body_container "" div s'étend tout le chemin jusqu'à la fin de la divs flotté.
    Espérons que cela aide un peu
Let's leave all our *plum* where it is and go live in the jungle ...
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Septembre 11th, 2008, 6:38 am

  • Bogey
  • Bogey
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Juil 14, 2005
  • Messages: 8212
  • Loc: USA
  • Status: Offline

Message Septembre 12th, 2008, 3:02 pm

Digital media a plus de cette technique dans son tutoriel, mais merci pour le rappel :D
"Bring forth therefore fruits meet for repentance:" Matthew 3:8

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 2 messages
  • Modérateur: Tutorial Writers
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 2 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