Forumsregeln

Please read our Guide to Making Ozzu Tutorials if you would like to submit your own tutorials.
Zurück Zum HTML Tutorials

TUTORIAL: Erste zwei divs schwebte die gleiche Höhe mit CSS

Beitrag September 11th, 2008, 6:38 am

Einführung


Es gibt einige Situationen, in denen Sie eine Website Gebäude sind mit einer linken Seite im Menü und das Menü und die Körperteile sind beide schwammen links nach oben zeigen, nebeneinander. Jedoch den Inhalt des Menüs und die Inhalte sind sowohl dynamische und daher kann man nicht manuell angeben, die Höhe für eine dieser beiden. Sie müssen also sicherstellen, dass sie beide die gleiche Höhe, zeigen, was ich Dir jetzt nicht wirklich beide Spalten den gleichen Höhe, aber es erweckt den Eindruck, dass sie die gleiche Höhe.

Floating den beiden Spalten


Dies sollte nicht ein Problem für Sie, wie Sie kommen zu diesem Tutorial mit zwei divs, die bereits nebeneinander schwammen, sondern können nur noch ein kurzer Blick, was dieser Code aussehen wird, und was der Ausgang wird.
Der Code:
Code: [ Download ] [ 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>

Ihre Ausgabe sollte jetzt in etwa so aussehen:
Attachments:
first_part.gif

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



So dass sie die gleiche Höhe


Um jetzt die beiden Spalten in gleicher Höhe gibt es drei Dinge, die wir tun müssen, nämlich:
  • Geben Sie dem "body_container" div ein Hintergrundbild
  • Geben Sie dem "body_container" div ein background-color
  • Fügen Sie ein div mit clear: both im "body_container" div
    Code: [ Download ] [ 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. }

    Die Anwendung der background-color:
    werden wir in den Hintergrund-Farbe machen die gleiche Farbe wie der "Körper" div, dies wird sich dann lassen es so aussehen, als ob die "Stelle" div ist nur so hoch wie die "menu_left" div, auch wenn es nicht ist.
    Code: [ Download ] [ 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. }

    Hinzufügen des "clear: both"-Teil
    Nun fügen Sie ein div unter den beiden schwebte divs mit der Eigenschaft "clear: both" zum "body_container machen" div erweitern den ganzen Weg auf den Boden der beiden schwebte divs, und hier ist der Code für diese ein:
    Code: [ Download ] [ Select ]
    div.clear{
    width:100%;
    height:0px;
    clear:both;
    }
    1. div.clear{
    2. width:100%;
    3. height:0px;
    4. clear:both;
    5. }

    jetzt bitte beachten Sie, dass die "height: 0px;" Teil nicht in IE6 arbeiten, wird es 5px hoch, nicht IE6 nicht zulassen, dass ein div, dass weniger als 5px groß für unerfindlichen Gründen.
    Wie auch immer, jetzt wirst du dieses div unter den beiden schwebte divs hinzufügen und dann werden Sie alles festgelegt.

    Die abschließende Ausgabe


    Einmal hat all dies youve Ihr Code sollte folgendermaßen aussehen:
    Code: [ Download ] [ 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>

    und es sollte so aussehen:
    Attachments:
    final_result.gif

    This would be the final result.



    Fazit


    Bei dieser Arbeit ist sehr einfach, alles, was Sie sich merken müssen, dass wir ein body_container hat rund um die beiden divs schwamm, und gab, dass "body_container" div ein Hintergrund-Bild (1px Menüs x Breite) und ein Hintergrund-Farbe (die gleiche Farbe als "Körper" divs Hintergrund)...Wir haben dann ein div mit "clear: both", um sicherzustellen, dass die "body_container" div erstreckt sich den ganzen Weg bis zum Ende des schwebte divs.
    Hoffe, das hilft ein wenig
RewriteEngine On

RewriteRule ^(awesome|excellent|extraordinary)$ RT
  • Anonymous
  • Bot
  • No Avatar
  • Registriert: 25 Feb 2008
  • Beiträge: ?
  • Loc: Ozzuland
  • Status: Online

Beitrag September 11th, 2008, 6:38 am

  • Bogey
  • PHP Ninja
  • Genius
  • Benutzeravatar
  • Registriert: Jul 14, 2005
  • Beiträge: 7335
  • Loc: Imagination
  • Status: Offline

Beitrag September 12th, 2008, 3:02 pm

Digitale Medien ging über diese Technik in seinem Tutorial, aber dank für die Erinnerung :D
Learn PHP

Apocalyptica - I Don't Care (Listen to this most awesome song ever!)

Seite 1 von 1

Buchung Informationen

  • Beiträge in diesem Thema: 2 Beiträge
  • Moderator: Tutorial Writers
  • Mitglieder in diesem Forum: 0 Mitglieder und 4 Gäste
  • Du darfst keine neuen Themen in diesem Forum erstellen.
  • Du darfst keine Antworten zu Themen in diesem Forum erstellen.
  • Du darfst deine Beiträge in diesem Forum nicht ändern.
  • Du darfst deine Beiträge in diesem Forum nicht löschen.
  • Du darfst keine Dateianhänge in diesem Forum erstellen.
 
 

© 2010 Unmelted, LLC. Angetrieben durch phpBB © 2010 phpBB Group.