Wie Layout machen??


  • g4rg4m3l
  • 1299 Aufrufe 7 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Wie Layout machen??

    hi,

    ich möchte mir ein Layout erstellen das im groben so aussehen soll:



    möchte das in CSS machen. Das blaue soll von oben bis unten gehen. Hab schon versucht eine Box (das blaue) mit der id=container zu erstellen. Nur dann wird einfach nur der Text farbig hinterlegt.

    mein HMTL:

    HTML-Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    2. "http://www.w3.org/TR/html4/loose.dtd">
    3. <html>
    4. <head>
    6. <link rel="stylesheet" type="text/css" href="style.css">
    8. <title>Titel</title>
    10. </head>
    11. <body>
    12. <div id=container>Das ist ein Test. Das sollte die erste Box des Desings sein.</div>
    13. </body>
    14. </html>
    Alles anzeigen


    und mein style.css:

    Quellcode

    1. p { font-family: Verdana; font-size: 14px; }
    2. h1 { font-family: Verdana; font-size: 22px; }
    3. h2 { font-family: Verdana; font-size: 20px; }
    4. h3 { font-family: Verdana; font-size: 18px; }
    7. a:link { color: #6699CC; }
    8. a:visited { color: #660099; }
    9. a:active { color: #FFFF00; }
    10. a:hover { color: orange; text-transform: uppercase;}
    12. #container { margin-left: 20%; margin-right: 20%; background-color: blue; border-width: 2px; border-color: black; }
    Alles anzeigen


    Wie kann ich das bewerkstelligen??? hab nirgendwo etwas brauchbares gefunden. Mit Tabellen weis ich wie ich es machen muss, das will ich aber vermeiden...

  • hmm Naja im prinzip hast du 2 möglichkeiten:

    Frames, oder Div bereiche.

    Du hast ja oben schon angefangen das mit div bereichen zu machen. allerdings solltst du dafür auch dann für jeden berreich eine div box anlegen und diese in der css datei positionieren etc.

    Also so zum beispiel:

    Quellcode

    1. div#navigation{
    2. position: absolute;
    3. top: 0px;
    4. left: 800px;
    5. width: 150px;
    6. height:100%;
    7. background-color: #009F00;
    8. font-family: Arial, Sans-Serif;
    9. }


    Quellcode

    1. div#banner{
    2. position: absolute;
    3. top: 40px;
    4. left: 320px;
    5. width: 400px;
    6. height:50;
    7. border:2;
    8. bordercolor: #00FF00;
    9. background-color: #000000;
    10. font-family: Arial, Sans-Serif;
    11. }
    Alles anzeigen


    Quellcode

    1. div#inhalt{
    2. position: absolute;
    3. top: 20px;
    4. left: 300px;
    5. width: 600px;
    6. height:100%;
    7. backgroundcolor:#0000FF;
    8. font-family: Arial, Sans-Serif;
    9. padding: 5px;
    Dann könntest du das so wie du möchtest umsetzten auch wenn es ein bisschen umständlich ist da du in jeder datei diese div elemtee jedesmal implementieren.

    Gebe auch kein gewähr das die oben geschriebenen werte/befehle stimmen habe das grad so schnell geschrieben... aber von prinzip hier müsstes du es so machen..

    gruß benni

  • ja banner und navi gehen, nur der Inhalt wird nicht angezeigt...

    Und beim Banner macht er auch keine border drumherum....

    und wie kann ich eine Box mit fester breite und 100%höhe im Browser zentrieren??

  • Uff ja wiegesagt habe das auch nur so fix mal geschrieben. Kann sein das das net geht

    Stell mal deine gesammten quellcodes von dem style teil undd der index rein dann schau ich mir das mal an, weil so ohne probieren kann ich das nun auch nicht machen ^^

    Html ist nicht so mein fall -.-

    wiegesagt mach mal beide codes so wie du sie nun hast rein dann änder ich dir das mal

  • Versuchs mal so:
    HTML Datei ohen Head

    Quellcode

    1. <div id="container">
    2. <div id="banner"></div>
    3. <div id="navigation"></div>
    4. <div id="content"></div>
    5. <div id="footer"></div>
    6. </div>


    CSS Datei

    Quellcode

    1. #container{
    2. width: //Breite in Pixel// px;
    3. margin-left: auto;
    4. margin-right: auto; //so wird die PAge zentriert//
    5. }
    6. #banner{
    7. width: //Breite in Pixel// px;
    8. height: //höhe in Pixel// px;
    9. }
    10. #navigation{
    11. float: right; // macht dass sie rechts klebt//
    12. width: //breite in Pixel// px; //ist zwingend nötig
    13. }
    14. #content{
    15. width: //Breite in Pixel// px;
    16. margin-right: //Breite in Pixel// px; //Breite der Navigation + 5 Pixel//
    17. }
    18. #footer{
    19. clear: both; // macht dass sich der Footer unter den Content setzt
    20. height: //Höhe in Pixel// px;
    21. }
    Alles anzeigen


    Der Blaue Hintergund machst du am einfachsten mit einer Gif-Datei und dem befehl:

    Quellcode

    1. background-image: url(url/zu/deiner/gif-datei.gif); background-repeat: x;


    Wenn du nach Fragen hast, stell Sie einfach.
    Lerne leben, leben lernt!

  • Lösungsvorschlag

    Hallo,
    also das vorige Beispiel sieht ja schonmal ganz gut aus, nur mag ich absolute Werte nicht so sehr, deshalb würde ich mit relativen Werten arbeiten!
    Außerdem würde ich weiterhin die Formatierung von Content abändern:

    HTML-Quellcode

    1. #content{
    2. width: //Breite in Pixel// px;
    3. margin-right: //Breite in Pixel// px; //Breite der Navigation + 5 Pixel//
    4. }


    zu

    HTML-Quellcode

    1. #content{
    2. width: //100%-(Navigation+5%)//; //lässt 5% der gesamtweite des div containers
    3. zwischen navi und content, kann natürlich variiert werden//
    4. float: left; //richtet es automatisch links neben der navi aus ohne zu
    5. positionieren//
    6. }


    Relative Werte haben den Vorteil, dass die Seite unter allen Auflösungen gleich dargestellt wird. Absolute Werte können unter Umständen dazu führen, dass die Seite nur unter einer Auflösung korrekt dargestellt wird.

    Hoffe ich konnte helfen!

  • vKevin schrieb:


    Außerdem würde ich weiterhin die Formatierung von Content abändern:


    Nur als anmerkung. Die HTML-Datei müsste dan auch noch abgeändert werden. Mann muss dan das DIV Navigation hinter (unter) das DIV Content stellen. Sonst klapt das leider nicht.

    Relative Werte haben den Vorteil, dass die Seite unter allen Auflösungen gleich dargestellt wird. Absolute Werte können unter Umständen dazu führen, dass die Seite nur unter einer Auflösung korrekt dargestellt wird.


    Das spielt ja eigentlich keine Rolle wenn der container Absolut ist. Ausser er wird auch in Prozent gesetzt. Jeodch hat man der Nachteil, dass das Verhältniss zwischen längen und breiten nicht mehr optimal stimmt.
    Lerne leben, leben lernt!