Anordnung von divs im CSS-Layout

  • Hallo,
    ich stehe vor einem Problem und zwar, dass das CSS-Layout nicht ganz so funktioniert wie ich es mir vorstelle.
    Ich habe mich mithilfe von Lektüre und Internetrecherche eingelesen und habe bereits Grundwissen, aber irgendwie verstehe ich das mit den divs noch nicht so wirklich.
    (Früher habe ich Layouts mit HTML-Tabellen gemacht - Asche auf mein Haupt - und diese Denkweise bekomme ich irgendwie nicht mehr weg.)


    Ich habe jetzt einfach mal eine Skizze, wie das Layout werden soll, gemacht und zeige auch mal meinen bisherigen Code (das, was funktioniert).
    Hier die Skizze:
    http://svenja-meyer.de/SkizzeLayout.jpg


    Hier der HTML-Code:

    HTML
    1. <div id='kasten'> <div id='kopf'></div> <div id='hnav'> <ul> <li><a href='#'>Menüpunkt 1</a></li> <li><a href='#'>Menüpunkt 2</a></li> <li><a href='#'>Menüpunkt 3</a></li> <li><a href='#'>Menüpunkt 4</a></li> <li><a href='#'>Menüpunkt 5</a></li> </ul> </div> </div> <div id='linie'></div>


    und hier der CSS-Code:

    HTML
    1. body { background-color: #002f5d; color: #000000; font-family: Verdana; font-size: 1em; }
    2. #kasten { background-color: #ffffff; height: 100%; width: 1000px; position: absolute; top: 0px; left: 50%; margin-left: -500px; box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.7); }
    3. #kopf { background: url(topbanner.jpg) no-repeat; height: 280px; width: 1000px; position: absolute; top: 0px; left: 50%; margin-left: -500px; } #linie { background-color: #ffffff; height: 2px; width: 100%; position: absolute; top: 280px; left: 0px; } #hnav { background-color: #5bc4f1; width: 1000px; position: absolute; top: 282px; left: 50%; margin-left: -500px; } #hnav ul { list-style-type: none; margin: 0px; padding: 0px; }
    4. #hnav li { float: left; width: 200px; /* später flexibel durch PHP machen, abhängig von Anzahl der Nav-Punkte (1000px für alle) */ margin: 0px; padding: 0px; text-align: center; padding: 0.6em 0em 0.5em 0em; /* top right bottom left */ height: 30px; }
    5. #hnav a { text-decoration: none; font-variant:small-caps; font-size: 1.3em; color: #ffffff; } #hnav li:active { background-color: #002f5d; }


    Die horizontale Navigation und den Kopf (wobei ich das Bild noch als Bild und nicht als Hintergrund reinmachen muss, damit es auch anklickbar ist (?)) habe ich soweit hinbekommen, allerdings will es mir einfach nicht gelingen, die Spalten, die danach kommen, zu platzieren.


    Ich möchte das Layout so flexibel wie möglich gestalten, damit es auch noch gut aussieht, wenn man das Fenster verkleinert oder es auf dem Handy ansieht.
    Allerdings haben die Grafiken ja feste Pixelwerte, daher weiß ich nicht genau, inwiefern ich das überhaupt noch flexibel machen kann.
    Ist es überhaupt sinnvoll alles in divs zu verpacken?
    Ich möchte sauberen Code schreiben und so "von Anfang an" alles richtig machen.


    Ich wäre sehr dankbar, wenn mir jemand die ein oder andere Frage beantworten kann oder mir sagt, warum ich die divs "vnav" und "inhalt" einfach nicht reinbekommen habe (habe es mit position:absolute und float:left versucht...).



    Vielen Dank im Voraus!

  • Hallo!


    Ich hab das jetzt nur überflogen. Achte darauf dass Du den HTML5-Standart benutzt.


    Ersetze <div id="kopf"> durch <header>.
    Das div mit der ID "linie" kannste weglassen. Dafür machst du ein border-bottom bei <header>.


    Ersetze <div id="hnav"> durch <nav id="hnav">.


    bei #kasten schreibst du anstatt

    Code
    1. position: absolute; top: 0px; left: 50%; margin-left: -500px;


    einfach: margin:auto;


    Die 2 Spalten baust du so ein:


    HTML
    1. <nav id="vnav">...</nav>
    2. <section>...</section>
    3. <div class="clear">&nbsp;</div>




    EDIT: Die Navigation musst du auch nicht absolut positionieren - das kannste alles rausschmeißen.

  • So, habs jetzt mal versucht umzusetzen, leider hat es nicht so toll geklappt.
    Ich hab eigentlich genau die von dir vorgeschlagenen Sachen geändert, allerdings ist jetzt die Navigation weg und die Spalteninhalte habe ich auch nicht.
    Das mit der Bottom-Linie hat leider auch nicht geklappt.


    Das einzige, was funktioniert, ist das mit dem Header. Dazu hab ich auch noch 'ne Frage: Kann ich die Sachen die bei img drin stehen, irgendwie mit in die CSS-Datei packen bzw. wenn ja wie?

    HTML
    1. <header><a href='#' alt='Startseite'><img src='topbanner.jpg' border='0px'></a></header>


    Weil irgendwie finde ich es inkonsequent, sowas auch teils in die HTML-Datei zu stecken.
    Mein CSS-Code zum Header:

    HTML
    1. header { height: 280px; width: 1000px; position: absolute; top: 0px; left: 50%; margin-left: -500px; border-bottom: 2px; border-bottom-color: #ffffff; }
  • Du siehst die Navigation nicht weil sie hinter <header> angeordnet wurde.
    Für ein einfaches Layout wie du es haben willst musst Du nichts absolut positionieren.


    Wenn du das entfernst:

    Code
    1. position: absolute; top: 0px; left: 50%; margin-left: -500px;


    müsste es gehen.


    Beim img-Element gibt man normalerweise neben src noch die Attribute width, height und alt an.
    Alles andere kannst du über css regeln (z.B. border)

  • Hallo!
    Mir wurde schon sehr geholfen, allerdings habe ich jetzt nochmal von vorne angefangen, damit ich auch verstehe, was ich da tu. ;)
    Ich habe jetzt folgendes gebastelt:
    http://svenja-meyer.de/gtmev/


    Eine Kleinigkeit stört mich:
    Der Bereich "verticalnav" (grün) soll so hoch wie "content" (rot) sein, also auf gleicher Höhe abschließen, auch wenn dort der Inhalt größer ist. Dasselbe soll auch umgekehrt funktionieren. Also egal, wo der Inhalt größer ist: "content" und "verticalnav" sollen auf gleicher Höhe abschließen.
    Kann mir da jemand helfen oder mach ich das komplett falsch (da ich noch ziemlich in Tabellen denke)? :)


    Hier der Code:
    HTML:

    HTML
    1. <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="desktop.css"> </head> <body> <div id="wrapper"><header><img src="topbanner.jpg"></header><nav id="hnav">horizontalnav</nav><section><nav id="vnav">verticalnav</nav><div id="content">content<br>mehrzeilig</div></section><footer>footer</footer></div>
    2. </body></html>



    CSS:

    HTML
    1. body{margin:0;}
    2. #wrapper{width:1000px;height:100%;margin:auto;}
    3. header{width:1000px;height:280px;}
    4. #hnav{width:1000px;background-color:#8A2BE2;}
    5. section{width:1000px;background-color:#EE7621;}
    6. #vnav{float:left;width:200px;background-color:#228B22;}
    7. #content{float:left;width:800px;background-color:#CD3333;}
    8. footer{clear:both;width:1000px;background-color:#00008B;}


    edit: Hoffe, es ist nicht so schlimm, dass es jetzt die Zeilenumbrüche aus dem Code gehauen hat...

  • wie lange liesst du denn das Thema, Hier der Quellcode



    COPY&PASTE und ausprobieren btw. Inhalte von dir einfügen:-)

  • Bei einer neuen Site? Is nicht dein Ernst oder?


    Ich habe jetzt einfach den Code der Seite übernommen und gepostet für den Threadersteller:



    Hier hasse:



    Zufrieden:rolleyes:

  • War nicht böse gemeint.
    Halte es nur für kontraproduktiv als Beispiel für jemanden, der sich eh nicht so sehr auskennt den alten Kram anzuführen.


    Schlimm genug das es Sites wie ohne-css-gehts-gar.net (deren Betreiber es eigentlich besser wissen sollten) es immer noch nicht geschafft haben mal ihr Zeug auf den aktuellen Stand zu bringen.


    Grüße, Kemos