Frage stellen
Versuche gerade verzweifelt ein vorhandenes Table-Layout auf auf CSS umzustellen. Soweit siehts ganz gut aus, an einer Stelle komm ich einfach nicht weiter.
Das Hintergrundbild für den Rahmen (links und rechts) wird nicht angezeigt. Ja, ich verwende float, hab aber auch schon versucht es mit
<div style="clear: both;"></div>
hinzubekommen - leider vergeblich.
Was mach ich denn noch falsch?
--------------------------------------------------------------------------
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="he">
<head>
<title></title>
</head>
<body>
<style type="text/css">
html, body, div { margin: 0; padding: 0; border: 0 none; }
/* ==== Layout Border - Top ====*/
#frame_topmiddle {
height: 92px;
background-image: url(http://www1.gfk-wi.com/pics/esolutions/lib/gfx/templates/esolutions2010/header_middle.jpg);
}
#frame_topright {
width: 30px;
height: 92px;
float: right;
background-image: url(http://www1.gfk-wi.com/pics/esolutions/lib/gfx/templates/esolutions2010/header_right.jpg);
background-repeat: no-repeat;
}
#frame_topleft {
width: 40px;
height: 92px;
float: left;
background-image: url(http://www1.gfk-wi.com/pics/esolutions/lib/gfx/templates/esolutions2010/header_left.jpg);
background-repeat: no-repeat;
}
/* ==== Layout Border - Middle ====*/
#frame_mainmiddle {
min-height:100px;
background-color: #FFFFFF;
}
#frame_mainright {
width: 30px;
float: right;
background-image: url(http://www1.gfk-wi.com/pics/esolutions/lib/gfx/templates/esolutions2010/body_right.jpg);
background-repeat: repeat-y;
}
#frame_mainleft {
width: 40px;
float: left;
background-image: url(http://www1.gfk-wi.com/pics/esolutions/lib/gfx/templates/esolutions2010/body_left.jpg);
background-repeat: repeat-y;
}
/* ==== Layout Border - Bottom ====*/
#frame_botmiddle {
height: 32px;
background-image: url(http://www1.gfk-wi.com/pics/esolutions/lib/gfx/templates/esolutions2010/footer_middle.jpg);
}
#frame_botright {
width: 30px;
height: 32px;
float: right;
background-image: url(http://www1.gfk-wi.com/pics/esolutions/lib/gfx/templates/esolutions2010/footer_right.jpg);
background-repeat: no-repeat;
}
#frame_botleft {
width: 40px;
height:32px;
float: left;
background-image: url(http://www1.gfk-wi.com/pics/esolutions/lib/gfx/templates/esolutions2010/footer_left.jpg);
background-repeat: no-repeat;
}
#wrapper {
margin: 0 auto;
}
</style>
<div id="wrapper">
<div id="frame_topleft">
</div>
<div id="frame_topright">
</div>
<div id="frame_topmiddle">
</div>
<div id="frame_mainleft">
</div>
<div id="frame_mainright">
</div>
<div id="frame_mainmiddle">
<div align="center">
content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
</div>
</div>
<div id="frame_botleft">
</div>
<div id="frame_botright">
</div>
<div id="frame_botmiddle">
</div>
</div>
</body>
</html>
Wenn ich für die beiden Styles #frame_mainleft und #frame_mainright eine Höhe angebe, dann funktioniert's - bis zu der agegebenen Höhe.
Möchte aber eigentlich, dass diese sich an der Höhe von #frame_mainmiddle ausrichten... Geht das? Wie denn?
Vielen Dank im Voraus für eure Hilfe!
Viele Grüße,
Stefan
