Anzeige

Menü und Content bis Footer verlängern

Menü und Content bis Footer verlängern | PSD-Tutorials.de

Erstellt von DDpix, 20.07.2008.

  1. DDpix

    DDpix Fotograf

    Dabei seit:
    16.12.2007
    Beiträge:
    840
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    Photoshop CC
    Kameratyp:
    Canon EOS 5D Mark III und Olympus OM-D EM-1
    Menü und Content bis Footer verlängern
    Hallo Leute,

    ich habe mich vor einigen Tagen endlich dazu bewegen können, meine Homepage komplett in CSS zu bauen da das jetzige Tabellenlayout ja sehr unbeliebt ist. :D

    Ich muss zugeben das ich mich nie richtig mit css befasst habe und erst in den letzten Tagen verstärkt lerne und auch übe. Von daher habt bisschen nachsicht wenn der Code den ich hier zeige vielleicht nicht immer ganz sinnvoll oder logisch erscheint. Hoffe aber bis jetzt wenigstens etwas richtig gemacht zu haben. :D

    Meine Seite besteht aus einem Header, einer horizontalen Leiste unter dem Header, einem Contentbereich und einem Footer. Im Contentbereich befindet sich links auf der gesamten Höhe eine Spalte wo das Menü rein kommt.

    Soooo und nun mein Problem. Dem Contentbereich habe ich den Wert "height: auto;" verpasst damit er sich immer an den Inhalt anpasst. Leider funktioniert das mit dem Menü nicht so.

    Mein Ziel ist es, das sich der Footer immer ganz unten im Browser befindet. Der Header und die leiste immer ganz oben. Dazwischen sollen dann der Content und das Menü sein. Wobei die höhe der Seite vom Inhalt des Contens bestimmt wird. Hab ich viel Text so soll sich die Seite soweit erhöhen bis der Text reinpasst. Dies klappt auch sehr gut. Nun kann ich dem Menü keinen so einen Wert geben. Es klappt nur eine feste Höhe im Menü.

    Könnt Ihr mir helfen? Es soll quasi so aussehen wie meine Homepage zur Zeit. das ist aber alles noch Tabellenlayout...
    So sieht das css Design zur Zeit aus. Content ust auto; und das Menü hat zur Zeit eine feste Höhe von 600px; da es wenn ich es auf Auto mach ja auch nur auf die Höhe des Inhaltes im Menü anpasst.

    http://www.ddpix.de/sonstiges/ddpixp.jpg

    Hier mal meine css.

    Code (Text):
    1.  
    2. .Datum {color: #555555; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;}
    3. .Headertext {color: #555555; font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif;}
    4. .footertext {color: #555555; font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; letter-spacing: 4px;}
    5. .uberschrift
    6.         {
    7.         color: #7fA6D1;
    8.         font-family: Georgia, "Times New Roman", Times, serif;
    9.         text-align: center;
    10.         vertical-align: middle;
    11.         font-size: 150%;
    12.         letter-spacing: 5px;
    13.         font-variant: small-caps;
    14.         }
    15.  
    16. html     {
    17.         height          : 100%;
    18.         }
    19.  
    20. body
    21.         {
    22.         height: 100%;
    23.          min-height:100%;
    24.         margin: 0;
    25.         padding: 0;
    26.         text-align: center;
    27.         color: #505367;
    28.         background-image: url(./img/bg.jpg);
    29.         background-repeat:repeat-y;
    30.         background-position: center;
    31.         color: #93a5a9;
    32.         font: 12px arial, hevetica, sans-serif;
    33.     }
    34.    
    35.    
    36.     #header_index
    37.     {
    38.         width: 780px;
    39.         height: 310px;
    40.         text-align: left;
    41.         background-image: url(./img/backh.jpg);
    42.         border-style: solid;
    43.         border-color: #343434;
    44.         border-left-width: 1px;
    45.         border-right-width: 1px;
    46.         border-top-width: 1px;
    47.         border-bottom-width: 1px;
    48.     }
    49.    
    50.     #sp
    51.     {    
    52.         width: 780px;
    53.         height: 30px;
    54.         background-image: url(./img/backo.jpg);
    55.         border-style: solid;
    56.         border-color: #343434;
    57.         border-left-width: 1px;
    58.         border-right-width: 1px;
    59.         border-top-width: 0px;
    60.         border-bottom-width: 0px;
    61.     }
    62.    
    63.     #mainnav
    64.     {
    65.         bottom: 0px;
    66.         width: 180px;
    67.         height: 25px;
    68.         background-color: green;
    69.     }
    70.    
    71.     #menu
    72.     {
    73.         padding: 0;
    74.           margin: 0 auto;
    75.         margin-right: 10px;
    76.         float: left;
    77.         width: 179px;
    78.         height: 600px;    
    79.         background-color: #151515;
    80.         border-style: solid;
    81.         border-color: #343434;
    82.         border-left-width: 0px;
    83.         border-right-width: 1px;
    84.         border-top-width: 0px;
    85.         border-bottom-width: 0px;
    86.     }
    87.    
    88.     #content    
    89.     {
    90.     min-height: 100%;
    91.     height: auto;
    92.     height: 100%;
    93.     position: relative;
    94.    
    95.         margin-right: 0px;
    96.         margin-left: 0px;
    97.         width: 770px;
    98.         background-color: #202020;
    99.         border-style: solid;
    100.         border-color: #343434;
    101.         border-left-width: 1px;
    102.         border-right-width: 1px;
    103.         border-top-width: 1px;
    104.         border-bottom-width: 1px;
    105.         padding-right: 10px;
    106.         text-align: justify;
    107.     }
    108.    
    109.     #skyline
    110.     {
    111.     text-align: center;
    112.     float: left;
    113.     width: 580px;
    114.     height: auto;
    115.     background-color: #000000;
    116.     }
    117.    
    118.     #inhalt
    119.     {
    120.     margin-left: 190px;
    121.     margin-top: 130px;
    122.     width: 580px;
    123.     height: auto;
    124.     min-height:500px;
    125.     padding-bottom: 30px;
    126.     }
    127.    
    128.     #pic_of_the_moment
    129.     {
    130.     float: right;
    131.     clera: right;
    132.     margin-left: 10px;
    133.     margin-top: 4px;
    134.     width: 100px;
    135.     height: 100px;
    136.     text-align: center;
    137.     }
    138.    
    139.     #pic_of_the_moment2
    140.     {
    141.     float: left;
    142.     clera: clear;
    143.     margin-right: 10px;
    144.     margin-top: 4px;
    145.     width: 100px;
    146.     height: 100px;
    147.     text-align: center;
    148.     }
    149.    
    150.     #footer    
    151.     {
    152.     position: absolute;
    153.     width: 780px;
    154.     height: 50px;
    155.     background-image: url(./img/backu.jpg);
    156.     border-style: solid;
    157.     border-color: #343434;
    158.     border-left-width: 1px;
    159.     border-right-width: 1px;
    160.     border-top-width: 0px;
    161.     border-bottom-width: 1px;
    162.     text-align: center;
    163.     }
    164.    
    165.     a.in
    166.     { font-family: arial, helvetica, tahoma ,verdana,  sans-serif; font-size:   12px;line-height: 125%;text-decoration:none;color:#56686D;}
    167.     a:hover.in  
    168.     {color : #7fa6d1; text-decoration : underline;}
    169.  
    170.  
    Und hier der Quellcode der Seite:

    Code (Text):
    1.  
    2. <!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><title>DDpix - Fotos aus Dresden und Umgebung</title>
    3. <style type="text/css"></style>
    4. <link href="style.css" rel="stylesheet" type="text/css" />
    5. </style>
    6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    7. </head>
    8. <body style="text-align:center;">
    9. <div style="width:780px;margin:0px auto;text-align:left;">
    10. <div class="Headertext" id="header_index">Dresdner Semperoper</div>
    11. <div class="uberschrift" id="sp">  Fotos aus Dresden und Umgebnung</div>
    12. <div id="content">
    13. <div id="menu"></div>
    14. &nbsp;
    15. <div id="skyline">
    16. <img src="img/mskyline.jpg" alt="Skyline" width="580" height="59"/>
    17. Dresden, die Barockperle am Elbstrom.
    18. <img src="img/mskyline.gif" alt="Skyline" width="580" height="37"/></div>
    19. <div id="inhalt">
    20. <div id="pic_of_the_moment">
    21. <?php
    22. $bilder = glob( "galerie/bilder/klein/[!b]*.jpg" );
    23. shuffle( $bilder );
    24. $bildinfo = getimagesize( $bilder[0] );
    25. $img_id = substr($bilder[0], 21, -4);
    26. echo '<a href="http://www.ddpix.de/galerie/show_img.php?imgid='.$img_id.'"><img src="galerie/bilder/klein/' .$img_id. '.jpg" ' .$bildinfo[3]. ' alt="Pic of the Moment"  border="0px"></a>';
    27. ?>
    28. </div>
    29. Herzlich Willkommen auf DDpix.de, der Fotoseite aus Dresden.  Diese Seite stellt die s&auml;chsische Landeshauptstadt Dresden und deren Sehensw&uuml;rdigkeiten in anschaulichen Fotos und spannenden Texten vor. Bei unseren Streifz&uuml;gen  durch Dresden und Umgebung halten wir die Sch&ouml;nheit dieser Stadt in unseren Bildern fest  und versuchen sie in unseren <a href="http://www.ddpix.de/galerie/index.php" title="Galerie" target="_self" class="in">Fotos</a> wiederzugeben. Dresden sowie die Umliegenden Gemeinden bieten eine  Vielzahl an unterschiedlichen Motiven und Inspirationen wie zum Beispiel die Architektur, die Menschen und Landschaften.
    30. <p>Ob es die weltber&uuml;hmte Semperoper, die wieder aufgebaute Frauenkirche  oder die unverwechselbare Sillhouete von Dresden ist. All diese Bilder  spiegeln die Sch&ouml;nheit dieser Stadt wieder. Von der barocken Architekur bis hin zu den Geb&auml;uden der heutigen Zeit ist alles in Dresden vertreten. Auch die Umgebung der Stadt ist unverwechselbar. Die s&auml;chsische Schweiz, die umliegenden Schl&ouml;sser und Burgen,  viele Seen und klare Fl&uuml;sse sowie die Menschen  machen Dresden und seine Umgebung zu dem Ort welcher er heute ist, der Faszination Dresden! Begib Dich auf Endeckungstour und lerne diese Stadt kennen.<br />
    31. </p>
    32. <div id="pic_of_the_moment2">
    33. <?php
    34. $bilder = glob( "galerie/bilder/klein/[!b]*.jpg" );
    35. shuffle( $bilder );
    36. $bildinfo = getimagesize( $bilder[0] );
    37. $img_id = substr($bilder[0], 21, -4);
    38. echo '<a href="http://www.ddpix.de/galerie/show_img.php?imgid='.$img_id.'"><img src="galerie/bilder/klein/' .$img_id. '.jpg" ' .$bildinfo[3]. ' alt="Pic of the Moment"  border="0px"></a>';
    39. ?>
    40. </div>
    41. <p>Ein gro&szlig;es Interesse besteht uns darin, die Landeshauptstadt von  Sachsen den Besuchern unserer Seite etwas vorzustellen und vielleicht  Ideen f&uuml;r einige sch&ouml;ne Ausflugspunkte zu geben. Unter den meisten  Bildern findest Du einige Informationen zu dem auf dem Bild zu sehenden  Motiven. Weiterhin besch&auml;ftigen wir uns seit einiger Zeit mit dem Thema  HDR. Mit High Dynamic Range lassen sich faszinierende Effekte erzielen.  Unsere HDR Bilderkannst Du unter der Rubrik HDR in der Galerie  anschauen.</p>
    42. <p>Nun w&uuml;nschen wir Dir viel Spa&szlig; auf unserer  Homepage. Gef&auml;llt Dir unserer Seite? Dann w&uuml;rden wir uns &uuml;ber einen anschlie&szlig;enden <a href="http://www.ddpix.de/gaestebuch/index.php" title="G&auml;stebuch" target="_self" class="in">G&auml;stebucheintrag</a> sehr freuen. Lob sowie konstruktive Kritik sind nat&uuml;rlich immer  erw&uuml;nscht. Hast Du Fragen zu unseren Bildern so kannst du uns gern  kontaktieren. Unter der Rubrik &quot;<a href="http://www.ddpix.de/kontakt.php" title="Kontakt" target="_self" class="in">Kontakt</a>&quot; im Men&uuml; gelangst Du zum Formular.<br />
    43. <br />
    44. </p>
    45. <p align="right"><img src="img/unterschrift.jpg" alt="Unterschrift" width="200" height="37" /><br />
    46. </p>
    47. </div>
    48. </div>
    49. <div class="Datum" id="footer"><span class="Headertext">Sitemap | Hilfe | Impressum | Kontakt</span><br />
    50. <br />
    51. <span class="footertext">&copy; 2006-2008 by Marcel und Patrick Quietzsch </span><br />
    52. Zuletzt aktualisiert am
    53. <!-- #BeginDate format:fcSw1 -->Sonntag, 20 Juli, 2008<!-- #EndDate -->
    54. </div>
    55. </div>
    56. </body>
    57. </html>
    58.  
    Der Quelcode ist noch lang nicht fertig. Metatags fehlen etc. Bitte habt nachsicht wenn nicht alles so perfekt is. Bin noch am lernen. :)
     
    Zuletzt bearbeitet: 20.07.2008
    #1      
  2. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Menü und Content bis Footer verlängern
    AW: Menü und Content bis Footer verlängern

    eine Lösung die einfach umzusetzen ist, besteht darin, dem gesamten Bereich (in deinem Fall #content) ein Hintergrundbild zu geben,was die Bereiche optisch teilt.
     
    #2      
  3. DDpix

    DDpix Fotograf

    Dabei seit:
    16.12.2007
    Beiträge:
    840
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    Photoshop CC
    Kameratyp:
    Canon EOS 5D Mark III und Olympus OM-D EM-1
    Menü und Content bis Footer verlängern
    AW: Menü und Content bis Footer verlängern

    Aber damit verlängert es doch nicht das Menü bis zum Footer oder?
    Habe oben im Beitrag nochmal nen Link zu einem Bild rein getan. So siehts zur Zeit aus. :)
     
    #3      
  4. Zeiflex

    Zeiflex Noch nicht viel geschrieben

    Dabei seit:
    24.09.2005
    Beiträge:
    27
    Menü und Content bis Footer verlängern
    AW: Menü und Content bis Footer verlängern

    Also ich stimme sokie zu. Einfach dem Content ein Backgroundbild verpassen, was halt links dunkelgrau ist und rechts hellgrau. Und dann mit repeat-y hinter den gesamten Bereich legen. Der Navigationsbox ist dann zwar nich twirklihc so lang aber sieht optisch so aus, als wenn sie bis zum Fuß geht.

    MfG

    Zeiflex
     
    #4      
  5. augentier

    augentier ...neu

    Dabei seit:
    29.07.2006
    Beiträge:
    396
    Geschlecht:
    männlich
    Menü und Content bis Footer verlängern
    #5      
  6. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Menü und Content bis Footer verlängern
    AW: Menü und Content bis Footer verlängern

    Ein Bild hilft da auch nur wenig weiter. Interessant wäre zu wissen, wie der Bereich unterhalb der Unterschrift zustande kommt.
    Die Lösung mit dem geteilten Hintergrundbild ist ja nur eine von mehreren.
    denkbar wäre auch dem content-bereich die Farbe zu geben, die unter der Navigation liegen soll, und dem Inhalt seine Hintergrundfarbe.
    Die Lösung mit dem Hintergrundbild hat den Vorteil, dass sie unabhängig davon funktioniert, ob der Inhalt oder die Navigation die grössere Höhe hat
     
    Zuletzt bearbeitet: 20.07.2008
    #6      
  7. DDpix

    DDpix Fotograf

    Dabei seit:
    16.12.2007
    Beiträge:
    840
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    Photoshop CC
    Kameratyp:
    Canon EOS 5D Mark III und Olympus OM-D EM-1
    Menü und Content bis Footer verlängern
    AW: Menü und Content bis Footer verlängern

    Ah stimmt, jetzt versteh ich wie Ihr das mit dem Hintergrund meint. Mhhh das wäre eine Möglichkeit die ich gleich mal probieren werde. :)
    Der Bereich unter der Unterschrift wird mit padding-bottom: 30px; im inhalt erzeugt.
     
    #7      
  8. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Menü und Content bis Footer verlängern
    AW: Menü und Content bis Footer verlängern

    ach so, dann beinhaltet das Bild die Lösung mit dem Hintergrundbild noch nicht.
     
    #8      
  9. DDpix

    DDpix Fotograf

    Dabei seit:
    16.12.2007
    Beiträge:
    840
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    Photoshop CC
    Kameratyp:
    Canon EOS 5D Mark III und Olympus OM-D EM-1
    Menü und Content bis Footer verlängern
    AW: Menü und Content bis Footer verlängern

    Jungs Ihr seit genial. :D Hab jetzt alle Varianten durchprobiert. Und am Ende bin ich bei der Hintergrundgrafik geblieben. Es klappt spitze!!! Genau so wie ich es haben wollte. Danke jetzt kann ich weiter basteln :)
     
    #9      
x
×
×
teststefan