Anordnung von divs im CSS-Layout

showtime

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

<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

body {    background-color: #002f5d;    color: #000000;    font-family: Verdana;    font-size: 1em;    }
#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);    }
#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;    }
#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;    }
#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!

Kemos

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

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

einfach: margin:auto;

Die 2 Spalten baust du so ein:

HTML

<nav id="vnav">...</nav>


<section>...</section>


<div class="clear">&nbsp;</div>

Code

#vnav, section{
  float:left;
}


#vnav{
  width:20%;
}


section{
  width:80%;
}


.clear{
  clear:left;
  height:0;
}

Alles anzeigen

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

showtime

Vielen Dank schon mal!
Ich werde das mal versuchen umzusetzen und melde mich dann wieder.

showtime

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

<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

header {	height: 280px;	width: 1000px;	position: absolute;	top: 0px;	left: 50%;	margin-left: -500px;	border-bottom: 2px;	border-bottom-color: #ffffff;	}

Kemos

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

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)

showtime

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

<!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>
</body></html>

CSS:

HTML

body{margin:0;}
#wrapper{width:1000px;height:100%;margin:auto;}
header{width:1000px;height:280px;}
#hnav{width:1000px;background-color:#8A2BE2;}
section{width:1000px;background-color:#EE7621;}
#vnav{float:left;width:200px;background-color:#228B22;}
#content{float:left;width:800px;background-color:#CD3333;}
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...

DerUser

ich denke du meinst so etwas: http://ohne-css.gehts-gar.net/demo/0031.html

wenn nicht sag mal ausführlicher was du meinst. ich verstehe es nicht

DerUser

wie lange liesst du denn das Thema, Hier der Quellcode

PHP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
<title>Faux Columns bei fl&uuml;ssigem Layout</title>
 <meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<style type="text/css">
body
{
background-color: #fff;
font-family: Verdana, Arial, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin: 0;
padding: 0
}




#header
{
background-image: url(../img/0031/mitte.jpg);
background-repeat: repeat-x;
background-color: #618cd2;
position:relative;
height: 150px;
}


#header_links
{
background-image: url(../img/0031/links.jpg);
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 549px;
height: 150px;
}


#header_rechts
{
background-image: url(../img/0031/rechts.jpg);
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
width: 271px;
height: 150px;
}


#titel
{
position: absolute;
top: 0;
left: 0;
z-index: 5;
width: 100%;
}


h1
{
margin: 0;
line-height: 150px;
font-size: 1.5em;
font-weight: bold;
color: #fff;
text-align: center;
}


#wrapper1
{
background-image: url(../img/0031/links.gif);
background-position: 0 0;
repeat: repeat-y;
}


#wrapper2
{
background-image: url(../img/0031/mitte.gif);
background-position: 25% 0;
repeat: repeat-y;
}


#wrapper3
{
background-image: url(../img/0031/rechts.gif);
background-position: 75% 0;
repeat: repeat-y;
}






#linksbox
{
float: left;
width: 23%;
padding: 1%;
}




#content
{
float: left;
width: 48%;
padding: 1%;
}




#rechtsbox
{
float: left;
width: 23%;
padding: 1%;
}


.center {text-align: center;}




</style>
<!--Parameter Suchfunktion-->
  <script src="../searchhi.js" type="text/javascript"></script>
<!--Ende Parameter Suchfunktion-->
</head>
<body>
<div id="titel"><h1>Faux Columns bei fl&uuml;ssigem Layout</h1></div>
<div id="header">


<div id="header_links"></div><!--Ende header_links-->
<div id="header_rechts"></div><!--Ende header_rechts-->




</div><!--Ende header-->








<div id="wrapper1">
<div id="wrapper2">
<div id="wrapper3">


<div id="linksbox"><h3>Linksbox</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>


<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>


</div><!--Ende #linksbox-->






<div id="content"><h3>Content</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>








<p class="center">
<a href="../0031.php">zur&uuml;ck zur Anleitung</a><br>
<a href="../index.php">zur Startseite</a>
</p>


</div><!--Ende #content-->


<div id="rechtsbox"><h3>Rechtsbox</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>


</div><!--Ende #rechtsbox-->


<div style="clear: left;"></div>


</div><!--Ende #wrapper3-->
</div><!--Ende #wrapper2-->
</div><!--Ende #wrapper1-->


</body>
</html>

Alles anzeigen

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

showtime

Ja!!!
Vielen Dank!
Genau das ist es!
Bin sogar schon über das Stichwort "faux columns" gestolpert, aber ich brauch wohl immer einen Wink mit dem Zaunpfahl...

Kemos

Zitat von DerUser

HTML 4.01 Transitional

charset=ISO-8859-1

Bei einer neuen Site? Is nicht dein Ernst oder?

DerUser

Zitat von Kemos

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:

PHP

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <link href="design.css" type="text/css" rel="stylesheet" />
    <link href="bilder/favicon.ico" type="image/x-icon" rel="shortcut icon" />
    <style type="text/css">
        body
        {
        background-color: #fff;
        font-family: Verdana, Arial, sans-serif;
        font-size: 100.01%;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0
        }




        #header
        {
        background-image: url(../img/0031/mitte.jpg);
        background-repeat: repeat-x;
        background-color: #618cd2;
        position:relative;
        height: 150px;
        }


        #header_links
        {
        background-image: url(../img/0031/links.jpg);
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 549px;
        height: 150px;
        }


        #header_rechts
        {
        background-image: url(../img/0031/rechts.jpg);
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        right: 0;
        width: 271px;
        height: 150px;
        }


        #titel
        {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        width: 100%;
        }


        h1
        {
        margin: 0;
        line-height: 150px;
        font-size: 1.5em;
        font-weight: bold;
        color: #fff;
        text-align: center;
        }


        #wrapper1
        {
        background-image: url(../img/0031/links.gif);
        background-position: 0 0;
        repeat: repeat-y;
        }


        #wrapper2
        {
        background-image: url(../img/0031/mitte.gif);
        background-position: 25% 0;
        repeat: repeat-y;
        }


        #wrapper3
        {
        background-image: url(../img/0031/rechts.gif);
        background-position: 75% 0;
        repeat: repeat-y;
        }






        #linksbox
        {
        float: left;
        width: 23%;
        padding: 1%;
        }




        #content
        {
        float: left;
        width: 48%;
        padding: 1%;
        }




        #rechtsbox
        {
        float: left;
        width: 23%;
        padding: 1%;
        }


        .center {text-align: center;}




</style>
</head>
<body>
    <div id="titel"><h1>Faux Columns bei fl&uuml;ssigem Layout</h1></div>
    <div id="header">


    <div id="header_links"></div><!--Ende header_links-->
    <div id="header_rechts"></div><!--Ende header_rechts-->




    </div><!--Ende header-->








    <div id="wrapper1">
    <div id="wrapper2">
    <div id="wrapper3">


    <div id="linksbox"><h3>Linksbox</h3>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p>


    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p>


    </div><!--Ende #linksbox-->






    <div id="content"><h3>Content</h3>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p>








    <p class="center">
    <a href="../0031.php">zur&uuml;ck zur Anleitung</a><br>
    <a href="../index.php">zur Startseite</a>
    </p>


    </div><!--Ende #content-->


    <div id="rechtsbox"><h3>Rechtsbox</h3>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </p>


    </div><!--Ende #rechtsbox-->


    <div style="clear: left;"></div>


    </div><!--Ende #wrapper3-->
    </div><!--Ende #wrapper2-->
    </div><!--Ende #wrapper1-->
</body>
</html>

Alles anzeigen

Zufrieden

Kemos

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

Tags