Anzeige

Benötige Hilfe beim Layout

Benötige Hilfe beim Layout | PSD-Tutorials.de

Erstellt von blizzart88, 08.02.2011.

  1. blizzart88

    blizzart88 Guest

    Benötige Hilfe beim Layout
    Hallo Leute,

    ich brauche mal eure Hilfe. Ich möchte das Layout einer Website komplett in CSS schreiben. Soweit sogut. Ich habe einen Bereich (alos div) für den Header, ein div für die Navigationsleiste unter dem Header und einen Container für den Inhalt und eine vertikale Navigation darunter.

    Den Inhalt möchte ich mit float nebeneinander setzen. Leider scheint das nicht zu funktionieren, denn die divs für die vertikale Navi und den Inhalt werden nicht angezeigt. Außerdem kann ich, wenn ich einfach in den divbereich reinschreibe (z.B. den div für die Navi) einfach über den Rand hinaus weiterschreiben.

    Ich habe hier mal den CSS-Code und den Seitenquelltext eingefügt:

    Code (Text):
    1.  
    2. body{background-color:#004f2f}
    3.  
    4. /* Seitenlogo */
    5.  
    6. #top{position:relative;
    7.      width:960px; height:200px;
    8.      margin: 0px auto;
    9.      bottom-margin: 0px;
    10.      border: none;
    11.      background-color:#545454;
    12.      background-image:url(grafik/borderbackgr.jpg);
    13.      background-repeat:no-repeat;
    14.      background-position: top left;
    15.      background-attachment:fixed;
    16. }
    17.  
    18. /* Navigation unterhalb des Logos */
    19.  
    20. #topnavi{position:relative;
    21.          width:960px; height:50px;
    22.      margin: 0px auto;
    23.      border: none;
    24.          background-color:black;
    25.          background-image:url(grafik/back001.jpg);
    26.      background-position: top left;
    27.          background-repeat:repeat-x;
    28.          background-attachment:fixed;
    29.          overflow:hidden;
    30. }
    31.  
    32. /* Container für Seiteninhalt */
    33.  
    34. #inhalt-container{position:relative;
    35.                width:960px; height:900px;
    36.               margin: 0px auto;
    37.                border: none;
    38.                background-color:#545454;
    39.                background-image:url('grafik/borderbackgr.jpg');
    40.                background-repeat:no-repeat;
    41.                background-position: top left;
    42.                background-attachment:fixed;
    43. }
    44.  
    45.  
    46.  
    47. #vertnavicontainer {float: left;
    48.             width: 200px;
    49.             heigth: 900px;
    50.             margin: 0px auto;
    51.             border: none;
    52.                  background-color:red;
    53. }
    54.  
    55.  
    56.  
    57. #content {float: right;
    58.           width: 760px;
    59.           heigth: 900px;
    60.           margin: 0px auto;
    61.           border: none;
    62.            background-color:black;
    63. }
    64.  
    65.  
    66. #clearboth {clear: both}
    67.  
    Code (Text):
    1.  
    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.  
    7. <title>XXXXXX</title>
    8.  
    9. <link href="css/css.css" rel="stylesheet" type="text/css" media="screen" />
    10. <link href="css/navi.css" rel="stylesheet" type="text/css" media="screen" />
    11.  
    12. </head>
    13.  
    14.  
    15. <body>
    16.  
    17. <div id="top"></div>
    18.  
    19. <div id="topnavi"></div>
    20.  
    21. <div id="inhalt-container">
    22.  
    23.     <div id="vertnavicontainer"></div>
    24.  
    25.     <div id="content"></div>
    26.  
    27.     <div id="clearboth"></div>
    28.  
    29. </div>
    30.  
    31.  
    32. </body>
    33.  
    34. </html>
    35.  
    Ich hoffe ich habe mich einigermaßen verständlich ausgedrückt und danke euch schonmal im Voraus.
     
    #1      
  2. aliasltb

    aliasltb LTB

    Dabei seit:
    23.03.2009
    Beiträge:
    189
    Geschlecht:
    männlich
    Software:
    Eclipse, Photoshop, Indesign, Illustrator, Flash, Flash Builder
    Kameratyp:
    HTC Desire HD
    Benötige Hilfe beim Layout
    AW: Benötige Hilfe beim Layout

    Ich habe es jetzt noch nicht ausprobiert, aber intuitiv fällt mir auf, dass ich den float vom Content nicht auf float:right, sondern auch auf float:left setzen würde.

    Wenn die beiden Container auch nicht angezeigt werden, dann schreib mal etwas zwischen die beiden Div-Tags etwas rein. Dann siehst du ja beim anzeigen wo sich die Divs auf der Seite befinden. So prüfe ich es zumindest immer, wenn ein Div nicht (so) dargestellt wird, wie ich möchte.

    Außerdem verstehe ich nicht wieso du jedem Bereich margin: 0 auto gibst.
    Umschließe doch top, topnavi, vertnavi und content mit einem Wrapper und gib dem dann die Werte position relative und margin: 0 auto. Dann wird alles zentriert dargestellt, es ist weniger Code und ist sauberer bzw. führt nicht zu Fehlern.
     
    #2      
  3. Evilmachine

    Evilmachine Webprogrammierer

    Dabei seit:
    07.02.2011
    Beiträge:
    14
    Geschlecht:
    männlich
    Ort:
    Hameln
    Software:
    Fireworks, Dreamweaver,InDesign, Illustrator, Photoshop, Notepad++, Eclipse
    Benötige Hilfe beim Layout
    AW: Benötige Hilfe beim Layout

    Ein &nbsp; im div wirkt oft wunder.

    Hatte das auch schon das eine division erst mit Inhalt angezeigt wurde.

    Oder halt alternativ Blindtext. Da sieht man dann auch gleich wie es hinterher wirkt.
     
    #3      
  4. DieWaldfeee

    DieWaldfeee Noch nicht viel geschrieben

    Dabei seit:
    08.02.2010
    Beiträge:
    31
    Benötige Hilfe beim Layout
    AW: Benötige Hilfe beim Layout

    Hi!
    #content, #vertnavicontainer {margin:0 px,)
    #clearboth ? eher .clearfix ! und nicht mal dass ist hier von nöten.
    nebenbei sollstest du deine "namensgebungen" überdenken um nicht paar klassen später in einem labyrinth zu enden.
     
    #4      
  5. 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
    Benötige Hilfe beim Layout
    AW: Benötige Hilfe beim Layout

    ich finde auch, dass du dir das Leben leichter machen würdest, wenn du in den content auch etwas hineinschreibst (und wenns nur das wort "content" ist. ich mache es persönlich so, dass ich auch die navigationslisten schon mit in das Grundgerüst schreibe.
    Entgegen meiner Vorrednerin ist das Einschieben des "clear-Elements" bei deinem Konztept zwingend wichtig, was du ja auch berücksichtigt hast.
     
    #5      
  6. blizzart88

    blizzart88 Guest

    Benötige Hilfe beim Layout
    AW: Benötige Hilfe beim Layout

    Danke erstmal für eure Hilfe!

    Was ich nicht ganz verstehe, obwohl ich hier
    Code (Text):
    1. #inhalt-container{position:relative;
    2.                width:960px; height:900px;
    3.               margin: 0px auto;
    4.                border: none;
    5.                background-color:#545454;
    6.                background-image:url('grafik/borderbackgr.jpg');
    7.                background-repeat:no-repeat;
    8.                background-position: top left;
    9.                background-attachment:fixed;
    10. }
    11.  
    12.  
    13.  
    14. #vertnavicontainer {float: left;
    15.             width: 200px;
    16.             heigth: 900px;
    17.             margin: 0px auto;
    18.             border: none;
    19.                  background-color:red;
    20. }
    21.  
    22.  
    23.  
    24. #content {float: right;
    25.           width: 760px;
    26.           heigth: 900px;
    27.           margin: 0px auto;
    28.           border: none;
    29.            background-color:black;
    30.  
    den divs eine Höhe vorgebe, werden sie im Browser (zumindest nicht im FF) nicht angezeigt. Woran liegt das? Mit dem Header funktioniert das ja auch.
     
    #6      
  7. blizzart88

    blizzart88 Guest

    Benötige Hilfe beim Layout
    AW: Benötige Hilfe beim Layout

    Hat sich erledigt, hab´s mit min-height gelöst.
     
    #7      
Seobility SEO Tool
x
×
×