Dark Ranger
Erfahrenes Mitglied
Hi ich habe folgenden Code:
Und folgende Css:
Das Problem besteht nur darin, dass von der mittleren Spalte das Div sich lang zieht, solang wie die rechte Box, so soll es aber nicht sein!
Ich probiere schon lange mal hier mal da rum und fange öfters wieder ganz von vorne an, aber so wirklich will es nicht gelingen.
Ich will einfach ein Design, mit Header, linker Box, rechter Box, Inhalt und Footer. Und das ganze versuche ich noch ein bisschen dynamisch hinzubekommen, da muss ich mich nochmal ein bisschen mit beschäftigen.
Kann mir vielleicht irgendjemand sagen woran es liegt? Vielleicht auch noch ein gutes Buch empfehlen?
P.S.: Ich merke gerade das im IE das Problem mit dem verzerrten nicht da ist, aber dafür ist die zweite Building Div Box verschoben -.-
Ach ja ich benutze Firefox, sowohl die 3er Version als auch die 2er Version
Edit: Bei Opera sieht es eigentlich so aus wie beim Firefox
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Seitentitel</title>
<link href="./content/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<h1 class="headline1">Große Überschrift</h1>
<h2 class="headline2">Kleinere Überschrift</h2>
</div>
<div id="leftbox">
<a href="#">Home</a>
<a href="#">Seite1</a>
</div>
<div id="rightbox" class="clearfix">
<ul>News
<li>Keine News</li>
<li>Keine News</li>
<li>Keine News</li>
<li>Keine News</li>
<li>Keine News</li>
<li>Keine News</li>
<li>Keine News</li>
<li>Keine News</li>
<li>Keine News</li>
<li>Keine News</li>
<li>Keine News</li>
<li>Keine News</li>
<li>Keine News</li>
<li>Keine News</li>
<li>Keine News</li>
<li>Keine News</li>
<li>Keine News</li>
<li>Keine News</li>
<li>Keine News</li>
</ul>
</div>
<div id="content" class="clearfix">
<div id="buildings">
<div class="building clearfix">
<div class="descimg">
BILD1
</div>
<div class="kosten">
1 GOLD
2 EISEN
</div>
<div class="centercell clearfix">
<div class="description">
BESCHREIBUNG1
</div>
<div class="level">
LEVEL1
</div>
<div class="next">
NÄCHSTE STUFE1
</div>
</div>
</div>
<div class="building">
<div class="descimg">
BILD2
</div>
<div class="kosten">
2 GOLD
1 EISEN
</div>
<div class="centercell clearfix">
<div class="description">
BESCHREIBUNG2
</div>
<div class="level">
LEVEL2
</div>
<div class="next">
NÄCHSTE STUFE2
</div>
</div>
</div>
</div>
</div>
</body>
</html>Und folgende Css:
HTML:
/* CSS Document */
body
{
height: 90%;
width: 90%;
margin: 0px auto;
}
#leftbox
{
float: left;
background-color:#0033CC;
margin: 0px;
padding: 0px;
}
#leftbox a
{
display: block;
width: 100px;
text-align: center;
margin-top: 0.25em;
margin-bottom: 0.25em;
background-color:#0033CC;
color:#FFFFFF;
text-decoration: none;
}
#rightbox
{
float: right;
margin: 0px;
padding: 0px;
border: 1px solid black;
}
#content
{
width: 75%;
margin: 0px auto;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: block;
}
.building
{
border: 1px groove #993300;
}
.descimg
{
float: left;
height: 100px;
width: 100px;
}
.kosten
{
float: right;
}Das Problem besteht nur darin, dass von der mittleren Spalte das Div sich lang zieht, solang wie die rechte Box, so soll es aber nicht sein!
Ich probiere schon lange mal hier mal da rum und fange öfters wieder ganz von vorne an, aber so wirklich will es nicht gelingen.
Ich will einfach ein Design, mit Header, linker Box, rechter Box, Inhalt und Footer. Und das ganze versuche ich noch ein bisschen dynamisch hinzubekommen, da muss ich mich nochmal ein bisschen mit beschäftigen.
Kann mir vielleicht irgendjemand sagen woran es liegt? Vielleicht auch noch ein gutes Buch empfehlen?
P.S.: Ich merke gerade das im IE das Problem mit dem verzerrten nicht da ist, aber dafür ist die zweite Building Div Box verschoben -.-
Ach ja ich benutze Firefox, sowohl die 3er Version als auch die 2er Version
Edit: Bei Opera sieht es eigentlich so aus wie beim Firefox
Zuletzt bearbeitet:
