Anzeige

Hilfe für CSS Lay-out

Hilfe für CSS Lay-out | PSD-Tutorials.de

Erstellt von Luca, 15.05.2005.

  1. Luca

    Luca Guest

    Hilfe für CSS Lay-out
    Hallo ich suche jemanden der mir helfen kann, probiere momentan das Grundgerüst der Seite in CSS aufzubauen, arbeite dabei mit Background Bilder.
    Das Gerüst steht auch bereits, das Problem ist lediglich sobald ich Padding benutze um den Innenabstand festzulegen stimmt überhaupt nichts mehr, dann verdoppelt es die Background Bilder etc.
    Hat jemand eine Ahnung woran das liegen könnte?
     
    #1      
  2. Luca

    Luca Guest

    Hilfe für CSS Lay-out
    Hier die CSS Datei
    Code (Text):
    1. body{
    2. background:#330000;
    3. margin-top:15px;}
    4.  
    5. #head{
    6. color:#FFFFFF;
    7. background-image: url(oben);
    8. width:800px;
    9. height:154px;
    10. margin-left:auto;
    11. margin-right:auto;}
    12.  
    13. #navi{
    14. color:#FFFFFF;
    15. background-image: url(navigation);
    16. width:800px;
    17. height:25px;
    18. margin-left:auto;
    19. margin-right:auto;}
    20.  
    21. #sub{
    22. width:800px;
    23. height:382px;
    24. margin-left:auto;
    25. margin-right:auto;}
    26.  
    27. #menulinks{
    28. color:#FFFFFF;
    29. float:left;
    30. background-image: url(links);
    31. width:157px;
    32. height:382px;}
    33.  
    34. #content{
    35. color:#FFFFFF;
    36. float:left;
    37. background-image: url(mitte);
    38. width:486px;
    39. height:382px;}
    40.  
    41. #menurechts{
    42. color:#FFFFFF;
    43. float:left;
    44. background-image: url(rechts);
    45. width:157px;
    46. height:382px;}
    Und noch die html Datei. Wenn ich nicht mit Padding arbeite, kann ich Text etc. problemlos einfügen ohne das es was verschiebt , für die Fortsetzung wäre es allerdings ziemlich viel einfacher wenn ich den Innenabstand festlegen könnte.

    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2.      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. <html lang="de">
    4. <head>
    5. <title>Pagetitel</title>
    6. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    7. <meta http-equiv="Content-Style-Type" content="text/css" />
    8. <link rel="stylesheet" type="text/css" href="main.css" />
    9. </head>
    10. <body>
    11. <div id="head">
    12. </div>
    13.  
    14. <div id="navi">
    15. </div>
    16.  
    17. <div id="sub">
    18.  
    19. <div id="menulinks">
    20. </div>
    21.  
    22. <div id="content">
    23. </div>
    24.  
    25. <div id="menurechts">
    26. </div>
    27.  
    28. </div>
    29. </body>
    30. </html>
     
    #2      
  3. bine

    bine Aktives Mitglied

    Dabei seit:
    19.04.2005
    Beiträge:
    327
    Geschlecht:
    weiblich
    Ort:
    Schleswig-Holstein
    Software:
    PS + Illu + InDesign
    Kameratyp:
    Nikon D90 Digi Spiegelreflex
    Hilfe für CSS Lay-out
    Wenn du in deinem Haupt-div padding für den Inhalt setzt, so muß oftmals die Grösse vom padding wieder von der Grössenangabe des divs abgezogen werden, denn der eine Browser zählt das padding mit und vergrössert dein div um die padding-Angabe, das haut dir dein ganzel Layout auseinander.

    Du hast z.B. die Möglichkeit den Bereich komplett mit Hintergrundbild etc. über ein Haupt-div zu definieren, hier kein padding setzen.
    Und für den Inhalt machst du einfach noch ein inneres div und setzt hier padding. Dann klappt das problemlos.
     
    #3      
  4. Luca

    Luca Guest

    Hilfe für CSS Lay-out
    Nur das ich das richtig verstehe.
    Ich habe also die aktuellen Div-Container nun füge ich z.b. innerhalb des Navigation div noch einen weiteren hinzu der nun die Padding Angaben enthält?
    Danke auf jedenfall für die Hilfe werde dies morgen testen.
     
    #4      
  5. bine

    bine Aktives Mitglied

    Dabei seit:
    19.04.2005
    Beiträge:
    327
    Geschlecht:
    weiblich
    Ort:
    Schleswig-Holstein
    Software:
    PS + Illu + InDesign
    Kameratyp:
    Nikon D90 Digi Spiegelreflex
    Hilfe für CSS Lay-out
    ja so ist das gemeint.
    schau dir mal das Beispiel an, welches ich kurzzeitig hochgeladen habe. Ich habe dein Layout verwendet, allerdings mit Hintergrundfarben anstatt images.

    dein layout

    Code (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    3.      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    4. <html lang="de">
    5. <head>
    6. <title>Pagetitel</title>
    7. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    8. <s tyle type="text/css">
    9. body    {
    10.     background:#C0C0C0;
    11.     margin-top:15px;
    12.          font:normal normal 12px Verdana, Arial, SansSerif;
    13. }
    14.  
    15. #head   {
    16.     color:#FFFFFF;
    17.     background:#5F5F5F;
    18.     width:800px;
    19.     height:154px;
    20.     margin-left:auto;
    21.     margin-right:auto;
    22. }
    23.  
    24. #headcontent    {
    25. padding:30px;
    26. }
    27.  
    28. #navi   {
    29.     color:#FFFFFF;
    30.     background:#000;
    31.     width:800px;
    32.     height:25px;
    33.     margin-left:auto;
    34.     margin-right:auto;
    35. }
    36.  
    37. #sub    {
    38.     width:800px;
    39.     height:382px;
    40.     margin-left:auto;
    41.     margin-right:auto;
    42. }
    43.  
    44. #menulinks  {
    45.     color:#FFFFFF;
    46.     float:left;
    47.     background:#9F0000;
    48.     width:157px;
    49.     height:382px;
    50. }
    51.  
    52. #content    {
    53.     color:#000;
    54.     float:left;
    55.     background:#f3f3f3;
    56.     width:486px;
    57.     height:382px;
    58. }
    59.  
    60. #text   {
    61. padding:20px 10px 20px 10px;
    62. }
    63.  
    64. #menurechts {
    65.     color:#FFFFFF;
    66.     float:left;
    67.     background:#9F0000;
    68.     width:157px;
    69.     height:382px;
    70. }
    71. </s tyle>
    72. </head>
    73. <body>
    74. <div id="head">
    75.     <div id="headcontent"><h1>Deine Website</h1></div>
    76. </div>
    77.  
    78. <div id="navi">
    79. </div>
    80.  
    81.     <div id="sub">
    82.  
    83.              <div id="menulinks">
    84.              </div>
    85.  
    86.              <div id="content">
    87.                     <div id="text">
    88.                                  Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und
    89.  
    90. Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des
    91.  
    92. Semantik, eines großen Sprachozeans.
    93. </div>
    94.              </div>
    95.  
    96.              <div id="menurechts">
    97.              </div>
    98.  
    99.     </div>
    100.  
    101. </body>
    102. </html>
    103.  
    Hier siehst du innerhalb von head noch das div headcontent.
    Würde man in head direkt padding schreiben wäre der head plötzlich um die padding Angabe breiter. In diesem Falle auf jeder würden auf jeder Seite 30px überstehen.

    Man hat zwar die Möglichkeit die width vom head 60px schmaler zu setzen, aber das ist wiederum nicht browserkompatibel.

    Ich verwende zur Sicherheit immer ein innen div.

    Auch im Content habe ich ein innen div names text verwendet.

    Zur Navigation:

    Jeder der CSS-Navigationen machen möchte, sollte diese Tutorials ausführlich durcharbeiten um die Arbeitsweise zu verstehen.

    Link

    Hier findest du auch vorgefertigte Navigationen verschiedenster Art.
    Es dauert zwar ein paar Websites lang, bis sich die Arbeitsweise verinnerlicht hat und man weiß welchen Wert man wo setzen muß aber die Site als Arbeitsbegleitung immer zur Hand zu haben ist sehr nützlich.
     
    #5      
  6. Luca

    Luca Guest

    Hilfe für CSS Lay-out
    Danke vielmals :)
    Denke so sollte ichs schaffen ;)
     
    #6      
x
×
×