CSS: Boxenlayout korrekt positionieren!

Dieses Thema im Forum "Webmaster Hilfe / Programmierer Forum" wurde erstellt von Psycot-X, 02.09.2010.

  1. #1 Psycot-X, 02.09.2010
    Psycot-X

    Psycot-X Erfahrener Benutzer

    Dabei seit:
    07.04.2007
    Beiträge:
    960
    Zustimmungen:
    0
    Hallo liebe MBler, ich brauche eure Hilfe.
    Ich erstelle zur Zeit aus Lust am "programmieren einer Website" einen CSS-Layout und finde einfach keine Lösung für meine Probleme.

    Ich möchte ein Layout, bei dem sich die Website zentretriert auf dem Bildschirm befindet und links und rechts Platz hat.
    -> Container mit 800px Breite + text-align:center;

    Darin befinden sich nun ein Header + eine Navigationsleiste untereinander und darunter soll Spaltenartig der inhaltsbereich hin, rechts daneben nochmal ein kleines Menu.

    Ich habe also alles erstmal mit bunten farbkästchen ohne großen schnickschnack vorbereitet und stelle bei einigen Sachen fest das ich nicht weiß wie man es korrekt macht.

    Folgendes: Header + Navibar werden korrekt dargestellt, aber der Inhaltsbereich und das rechte Menu schieben sich nach unten über dasContainerelement. Das liegt wohl an der height-Angabe 100%, aber ich möchte es sehr ungern in Pixeln angeben, dass ist nicht schön.
    Wie schaffe ich es, dass sie 5px vom Container Rand weg sind?
    ich habe eigentlich für alle Elemente im Container die richtigen margin-Werte verteilt..

    Hier der Code: CSS:
    Code:
    body {
    margin: 0;
    padding: 0;
    font: 100.01% arial, hevetica, sans-serif;
    text-align: center;
    color: #000;
    background-color: #fff;
    }
    
    #container {
    margin: 5px auto;
    padding: 0;
    height: 100%;
    width: 800px;
    background-color: #f00;
    border: 1px solid #000;
    }
    
    #header {
    margin: 5px 5px 0 5px;
    height: 50px;
    background-color: #f60;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    }
    
    #menu {
    margin: 0 5px 5px 5px;
    height: 25px;
    background-color: #fff;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    }
    
    #misc {
    float: right;
    margin: 0 5px 5px 0;
    width: 160px;
    height: 100%;
    background-color: #ff0;
    border: 1px solid #000;
    }
    
    #content {
    float:left;
    display: block;
    margin: 0 0 5px 5px;
    width: 627px;
    height: 100%;
    background-color:#0ff;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    }
    HTML-Code:
    HTML:
    <html>
    <head>
    <title>Homepage | Home</title>
    <link rel="stylesheet" type="text/css" href="style/style.css" />
    </head>
    <body>
     <div id="container">
      <div id="header"></div>
      <div id="menu"></div>
      <div id="content"></div>
      <div id="misc"></div>
     </div>
    </body>
    </html>
     
  2. AdMan

    schau mal hier: Windows-Wartungs-Tool. Viele Probleme lassen sich damit einfach beheben. Oftmals ist der PC dann auch schneller!
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  3. Lotus

    Lotus Erfahrener Benutzer

    Dabei seit:
    17.02.2007
    Beiträge:
    2.428
    Zustimmungen:
    0
    Du solltest, wenn ich mich recht entsinne, noch die position der einzelnen Elemente bestimmen.

    position: Positionsart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

    Mit relativer Positionierung kannst du den margin vom Header oder der Navi bestimmen und das funktioniert dann auch.

    Relative Positionierung müssen dann aber "alle" Container sein, die von einander abhängig sein sollen...
     
  4. #3 Psycot-X, 02.09.2010
    Psycot-X

    Psycot-X Erfahrener Benutzer

    Dabei seit:
    07.04.2007
    Beiträge:
    960
    Zustimmungen:
    0
    Es tut mir Leid, aber ich weiß gerade nicht so genau was du mir sagen willst, bzw. was ich machen muss. Danke aber schonmal für deine Hilfe.

    Vielleicht kam es nicht so gut rüber, also nochmal:
    Das Kästchenmodell in unterschiedlichen Farben wird korrekt angezeigt, allerdings schieben sich die 2 unteren Elemente (content, menu) über das container element.
    Und so wie ich das sehe genau um den Betrag, wie ihn die 2 oberen Elemente verbrauchen.

    Ich will also, dass die unteren Elemente sich nur weit ausbreiten, bis sie das untere Ende des container elements erreicht haben, dazu noch margin-bottom:5px;...

    (Kann man bei der heightangabe nach Angabe von 100% nocheinmal eine bestimmte Anzahl an Pixeln abziehen?^^)
     
  5. Lotus

    Lotus Erfahrener Benutzer

    Dabei seit:
    17.02.2007
    Beiträge:
    2.428
    Zustimmungen:
    0
    Vielleicht wäre es besser, wenn du uns die Seite mal zeigst, dann könnten wir uns das ganze ein bisschen besser vorstellen...

    .oO (ich zumindestens ^^)
     
  6. #5 Psycot-X, 03.09.2010
    Psycot-X

    Psycot-X Erfahrener Benutzer

    Dabei seit:
    07.04.2007
    Beiträge:
    960
    Zustimmungen:
    0
    Ich habe noch keine Seite, ich will nur wieder anfangen mit CSS zu arbeiten..

    Ich habe viel im Internet gelesen und weiß, dass es ratsam ist, dass ich am Anfang ein fertiges Grundgerüst habe, so dass ich später beim detaillierten Layout keine Probleme habe.

    Ich vermute sobald der Inhalt so groß ist, wird auch dieser dann die Box ÜBER mein Containerelement erstrecken...

    Ich kann heute nachmittag mal das Zeug auf irgendeinen funpic schmott hochladen..
     
  7. Lotus

    Lotus Erfahrener Benutzer

    Dabei seit:
    17.02.2007
    Beiträge:
    2.428
    Zustimmungen:
    0
    Muss doch nichts schlechtes sein? Jeder fängt irgendwann mal an
     
  8. #7 Psycot-X, 03.09.2010
    Psycot-X

    Psycot-X Erfahrener Benutzer

    Dabei seit:
    07.04.2007
    Beiträge:
    960
    Zustimmungen:
    0
    Dann also keine festen größen für ein Grundgerüst..
    Aber da es heutzutage so zahlreich viele Auflösungen gibt, wird die Website ja immer weiter auseinander gezogen.
    Ich fände es besser wenn die Grundsturktur auf allen Bildschirmen "gleich gut" aussieht.

    Und nunja, auf deinen Spruch mit den Gehversuchen muss ich wohl nicht eingehen, dass ist völlig irrelevant.
    Arbeiten hat nämlich nicht sofort etwas mit professioneller Ebene zu tun.
    Wer sich mit einem Fachgebiet auseinandersetzt, "arbeitet" daran.
     
  9. #8 Psycot-X, 03.09.2010
    Psycot-X

    Psycot-X Erfahrener Benutzer

    Dabei seit:
    07.04.2007
    Beiträge:
    960
    Zustimmungen:
    0
    Oh mist, dass habe ich einfach falsch gelesen. Tut mir leid.

    Der Punkt ist folgender:
    Die 2 Header Elemente Header und Navigation befinden sich im selben Element wie mein Content und Link/Info-Bereich rechts, d.h. wenn ich 100% Höhe für diese Elemente angebe wird zusätzlich durch die oberen Elemente der Rahmen gesprengt.

    Irgendwie sollte es doch möglich sein, dass er trotzdem dieses Element nur bis zum festgelegten Rand + margin ausstreckt!?
    Man müsste nur 100% [MINUS] (Elementhöhe + Elementmargin) definieren können^^
     
  10. AdMan

    Es ist generell erstmal empfehlenswert alle ggf. veralteten oder fehlerhaften Treiber zu scannen und auf neue zu aktualisieren. Hier kannst du einen Treiber-Scanner downloaden. Das erspart oftmals viel Ärger und hilft gegen diverse Probleme.
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  11. Lotus

    Lotus Erfahrener Benutzer

    Dabei seit:
    17.02.2007
    Beiträge:
    2.428
    Zustimmungen:
    0
    ich warte noch auf die site von funpic ... ^^
     
  12. #10 Psycot-X, 04.09.2010
    Zuletzt bearbeitet: 04.09.2010
    Psycot-X

    Psycot-X Erfahrener Benutzer

    Dabei seit:
    07.04.2007
    Beiträge:
    960
    Zustimmungen:
    0
    Oh, dass hab ich total vergessen... bin wohl zZ ziemlich durchn Wind! :p
    Homepage | Home
    Auf die weiße Fläche im Hintergrund kommt später eine gekachelte Grafik, die rote Box ist der Container, welcher sichtbar bleibt und eine neutrale Fläche als Hintergrund erhält.
    Auf dem Container liegen die anderen 4 Elemente:
    ORANGE - Header -> Logo, kurze Beschreibung z.B.
    WEISS - Navigation -> Links zu den einzelnen Bereichen der Homepage
    TÜRKIS - Inhaltsbox, dort werden beispielsweise Artikel oder das Impressum angezeigt.
    GELB - ein weiteres Menu mit einer Beschreibung zur Homepage/Infos über den Autor und Platz für Links zu interessanten Webseiten bzw. sowas wie Blogroll.
     
Thema: CSS: Boxenlayout korrekt positionieren!
Besucher kamen mit folgenden Suchen
  1. css boxen layout

    ,
  2. css box layout für rahmen

    ,
  3. css3 box layout border

    ,
  4. bild am unteren containerrand platzieren html,
  5. zu viele boxen layout css,
  6. html 4 boxenlayout,
  7. windows 7 boxen layout
Die Seite wird geladen...

CSS: Boxenlayout korrekt positionieren! - Ähnliche Themen

  1. Sound wird nicht korrekt wiedergegeben.

    Sound wird nicht korrekt wiedergegeben.: Hallo und Guten Abend Seit einigen Wochen spinnt der Sound meines Laptops (Dell Inspiron 17R 5720...
  2. CSS Auflösung inakzeptabel!

    CSS Auflösung inakzeptabel!: Hey liebe Community, ich habe vor kurzem mein BS neu aufgespielt, vorher war dort Win 8 Pro 64 Bit installiert, leider musste ich aber aufgrund...
  3. Spezielle Navigation (Html / Css)

    Spezielle Navigation (Html / Css): Wunderschönen Guten Abend. Ist es möglich das Menü von dieser Seite Musicbase.fm - Clubsection ohne JavaScript, also nur mit HTML & CSS, zu...
  4. CSS externe methode

    CSS externe methode: Hey leute ich lerne gerade CSS und bei der ecternen methode wird die style.css nicht ausgelesen was mach ich falsch? Code: <!DOCTYPE HTML PUBLIC...
  5. PC startet nicht korrekt

    PC startet nicht korrekt: Liebe Community Seit meinem Wohnungsumzug startet mein Dell PC nicht mehr korrekt. Ich habe aus diesem Anlass ein kurzes Video gemacht wo man...