CSS: Boxenlayout korrekt positionieren!

Diskutiere CSS: Boxenlayout korrekt positionieren! im Webmaster Hilfe / Programmierer Forum Forum im Bereich Computerprobleme; Hallo liebe MBler, ich brauche eure Hilfe. Ich erstelle zur Zeit aus Lust am "programmieren einer Website" einen CSS-Layout und finde einfach...

  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. Anzeige

    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. Lotus

    Lotus Erfahrener Benutzer

    Dabei seit:
    17.02.2007
    Beiträge:
    2.428
    Zustimmungen:
    0
    ich warte noch auf die site von funpic ... ^^
     
  11. #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.
     
  12. Lotus

    Lotus Erfahrener Benutzer

    Dabei seit:
    17.02.2007
    Beiträge:
    2.428
    Zustimmungen:
    0
    So und jetzt erklaer nochmal pls anhand der Farbe wo genau der Fehler ist.. perfekt wäre es auch noch, wenn du den in die unterschiedlichen Boxen noch ne kurze Zahl wie:
    #1
    #2
    etc schreiben könntest, damit man leichter zuordnen kann :)
     
  13. #12 Psycot-X, 04.09.2010
    Zuletzt bearbeitet: 05.09.2010
    Psycot-X

    Psycot-X Erfahrener Benutzer

    Dabei seit:
    07.04.2007
    Beiträge:
    960
    Zustimmungen:
    0
    http://atomicfish.at.funpic.de/

    So, ich hab jetzt schonmal ein bisschen das Layout hinzugefügt.
    Ich hoffe, es ist jetzt deutlich genug, was was darstellt.
    Mit dem Hintergrund bin ich noch nicht zufrieden, mal schaun was das noch wird.

    Wenn du dir die seite anschaust, wirst du feststellen, dass sie durch die Höhenangabe von 100% unten über den Container angezeigt wird.
    Und zwar genau um die Gesamthöhe des Headerbereichs.
    Wenn ich jetzt diese Höhenangabe einfach weglasse und später mehr Inhalt als eine Seite drauf hab, würde das selbe passieren.
    Ich will aber, dass sich dann der Container mit ausdehnt und nicht starr bleibt.
    [​IMG]
     
  14. #13 MalcolmYoung, 11.09.2010
    MalcolmYoung

    MalcolmYoung Benutzer

    Dabei seit:
    17.07.2010
    Beiträge:
    42
    Zustimmungen:
    0
    bei was mitwachsen??
     
  15. #14 MalcolmYoung, 12.09.2010
    MalcolmYoung

    MalcolmYoung Benutzer

    Dabei seit:
    17.07.2010
    Beiträge:
    42
    Zustimmungen:
    0
    versuchs mal mit overflow: visible(dann steht des innere Element über), wenn DER effekt gewünscht ist
     
  16. #15 Psycot-X, 12.09.2010
    Zuletzt bearbeitet: 12.09.2010
    Psycot-X

    Psycot-X Erfahrener Benutzer

    Dabei seit:
    07.04.2007
    Beiträge:
    960
    Zustimmungen:
    0
    Auf diesem Bild siehst du folgendes:
    2 Container, einer mit "zerstückeltem" grauen Rand und einer mit nahezu schwarzer Umrandung.
    Der letztere, innere Container sollte nur bis zum dem mit dem grauen Rand gehen und zu diesem noch 5 Pixel Rand lassen.

    *edit:
    So, ich habe deine Vorschlag ausprobiert.
    overflow: visible; ist der Standardwert, müsste also nicht definiert werden... also hat sich mit diesem Wert auch nichts geändert. Ich habe seie Variationen ausprobiert und mit keinem Wert kann ich mein gewünschtes Ergebnis erzielen. :(
     
  17. Anzeige

    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.
  18. Lotus

    Lotus Erfahrener Benutzer

    Dabei seit:
    17.02.2007
    Beiträge:
    2.428
    Zustimmungen:
    0
    Welchen browser benutzt du? bei mir sieht das naemlich ganz und gar nicht so extrem aus wie bei deinem bild...

    was ist denn, wenn du die height auf auto setzt? und den abstand dann über padding oder margin (was auch immer jetzt nochmal genommen wird) machst? die beiden container müssen natürlich voneinander abhängen sich denke ich..
     
  19. #17 Psycot-X, 18.09.2010
    Psycot-X

    Psycot-X Erfahrener Benutzer

    Dabei seit:
    07.04.2007
    Beiträge:
    960
    Zustimmungen:
    0
    Das es nicht mehr so extrem ist, liegt daran das ich schon ein paar Änderungen am Design vorgenommen habe, es ist jetzt nicht mehr so extrem, aber trotzdem störend. Ich benutze Firefox

    Die korrekten margin und padding Abstände habe ich von vornherein für jedes Element auf 0 gesetzt und dann wenn von Nöten anders gesetzt.
    Eigentlich habe ich sie bei allen Elementen korrekt gesetzt.
    ich probiere height:auto; einfach mal aus...

    Die Container sind in der HTML-Datei korrekt ineinander verschachtelt.

    ich probiers gleich mal aus.
     
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...