derwunner
Mitglied
Hallo Leute,
ich wollte eine Seite machen, die oben eine kleine Quick-Link Leiste hat (1000 px breite). Darunter das Seitenlogo in einem eigenen div (1000 px breite). Unterhalb ein linker und rechter Streifen mit jeweils 150 px breite. Zwischen den beiden soll dann der eigentliche Seiteninhalt.
Die Seite soll nach unten eine Gesamtgröße von 800 px haben. Das klappt alles so weit ganz gut, nur ein Problem: Der rechte Streifen, Seiteninhalt und linker Streifen wollen nicht nebeneinander.
Float brauche ich ja indem Fall nicht, weil ich sie ja direkt nebeneinander haben will. Mit clear: both gings leider nicht. Das macht von der Box Aufteilung einen Zeilenumbruch, das ist mir schon klar. Aber was passt dann nicht?
MFG derwunner
ich wollte eine Seite machen, die oben eine kleine Quick-Link Leiste hat (1000 px breite). Darunter das Seitenlogo in einem eigenen div (1000 px breite). Unterhalb ein linker und rechter Streifen mit jeweils 150 px breite. Zwischen den beiden soll dann der eigentliche Seiteninhalt.
Die Seite soll nach unten eine Gesamtgröße von 800 px haben. Das klappt alles so weit ganz gut, nur ein Problem: Der rechte Streifen, Seiteninhalt und linker Streifen wollen nicht nebeneinander.
Float brauche ich ja indem Fall nicht, weil ich sie ja direkt nebeneinander haben will. Mit clear: both gings leider nicht. Das macht von der Box Aufteilung einen Zeilenumbruch, das ist mir schon klar. Aber was passt dann nicht?
Code:
body
{
margin: 0;
padding: 0;
font-family: helvetica, sans-serif;
background-color: #393636;
}
#header-top
{
margin: 0;
padding: 0px;
border: none;
background-color: #F21919;
font-size: 20px;
height: 35px;
width: 1000px;
clear: both;
}
#header-middle
{
margin: 0;
padding: 0;
border: none;
background-color: #000000;
width: 1000px;
height: 120px;
clear: both;
}
#content-links
{
margin: 0;
padding: 0;
border: none;
background-color: #000000;
height: 750px;
width: 150px;
}
.content-links-box
{
margin: 0;
padding: 0;
border: none;
width: 600px;
background-color: #393636;
}
#content-links h2
{
margin: 0;
padding: 0;
border: none;
color: #F21919; /* GENAUES ROT NOCH! */
font-size: 16px;
font-style: normal;
}
#content-inhalt
{
margin: 0;
padding: 0;
border: none;
width: 180px;
height: 750px;
background-color: #393636; /* HIER NOCH BILD! */
}
#content-rechts
{
margin: 0;
padding: 0;
border: none;
background-color: #000000;
height: 750px;
width: 150px;
clear: both;
}
.content-rechts-box
{
margin: 0;
padding: 0;
border: none;
width: 180px;
background-color: #393636; /* HIER NOCH BILD! */
}
#content-rechts h2
{
margin: 0;
padding: 0;
border: none;
color: #F21919; /* GENAUES ROT NOCH! */
font-size: 16px;
font-style: normal;
}
#footer
{
margin: 0;
padding 0;
border: none;
background-color: #F21919;
height: 35px;
width: 1000px;
clear: both;
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
UDCL - United Day of Defeat Clan League // Home
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header-top">
Quick-Links
</div>
<div id="header-middle">
UDCL
</div>
<div id="content-links">
<h2>Navigation Menu</h2>
<class id="content-links-box">
</class>
</div>
<div id="content-inhalt">
Seiteninahlt<br>
Hier steht ganz viel Text.
</div>
<div id="content-rechts">
<h2>Coming Soon</h2>
<class id="content-links-box">
Forum
</class>
</div>
<div id="footer">
Sitemap
</div>
</body>
</html>MFG derwunner
Zuletzt bearbeitet:
