Hallo an alle,
ich habe ein Problem das mich nun schon seit einigen Tagen beschäftigt.
Meine neue Website wird per CSS in einen Navigationsbereich ("kategorien_frame") mit fester Breite und in einen Content-Bereich ("content_frame") mit variabler Breite geteilt. Der Content-Bereich passt sich immer an die jeweilige Fenstergröße an.
Hier zu sehen:
http://www.bplus-gruppe.de/test/index.html
Nun will ich in den Content-Bereich eine Art Galerie stellen ("content_box"), in der beliebig viele Bilder mit einer festen Breite untergebracht werden ("kategorien_thumbs"). Diese sollen sich solange aneinderreihen bis die Fensterbreite erreicht ist und dann automatisch einen Zeilenumbruch hervorrufen. Dies funktioniert soweit auch im Firefox schon perfekt; aber der IE macht natürlich mal wieder Probleme. Sobald man dort das Fenster verkleinert, springt auch das Elternelement "content_box" um eine Zeile nach unten und rahmt die oberen "kategorien_thumbs" nicht mehr ein.
Weiß jemand Rat?
Hier der CSS-Code:
html,body {
height:100%;
padding:0;
margin:0;
}
body {
font-family : Arial;
font-weight:normal;
color:#000000;
font-size: 12px;
}
a:link {
color:#183092;
text-decoration:none;
}
a:active {
color:#002FF4;
text-decoration:none;
}
a:visited {
color:#183092;
text-decoration:none;
}
a:hover {
color:#183092;
text-decoration:underline;
}
a.linkklein:link {
color:#183092;
font-size:10px;
text-decoration:none;
}
a.linkklein:active {
color:#002FF4;
font-size:10px;
text-decoration:none;
}
a.linkklein:visited {
color:#183092;
font-size:10px;
text-decoration:none;
}
a.linkklein:hover {
color:#183092;
font-size:10px;
text-decoration:underline;
}
#bottom {
width: 100%;
height: 70px;
background-color: #EBEDFF;
bottom:0px;
background-image:URL(imgs/bgimg_bottom.gif);
}
#content_frame {
widht:auto;
margin-left:210px;
margin-top:5px;
margin-bottom:5px;
margin-right:25px;
background-color: #ddd;
}
#kategorien_frame {
display:inline;
float:left;
width:180px;
margin-left:25px;
margin-top:5px;
margin-bottom:5px;
background-color: #ccc;
}
#top {
width: 100%;
height:173px;
margin:0 auto;
}
.content_box {
background-color: #EBEDFF;
border: solid 1px #7E8FD4;
}
.content_header,.kategorien_header {
background-color: #EBEDFF;
border: solid 1px #7E8FD4;
background-image:URL(imgs/bgimg_header.gif);
}
.kategorien_header {
width: 180px;
}
.kategorien_box {
width: 156px;
padding-left:24px;
padding-top:5px;
padding-bottom:5px;
background-color: #EBEDFF;
border: solid 1px #7E8FD4;
}
.kategorien_thumb {
float:left;
width: 60px;
border: 1px solid #999;
margin-top: 0px;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 0px;
padding-left: 5px;
}
.textklein {
color:#000000;
font-family : Arial;
font-size : 10px;
}
input , select , textarea {
color:#000000;
font-family: Arial;
background-color : #ffffff;
border:1px solid #7E8FD4;
}
textarea {
font-family : Arial;
color: #000000;
font-size : 12px;
}
Hier der HTML-Code:
<!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" lang="de" xml:lang="de">
<head>
<title>leer</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div id="top"></div>
<div id="kategorien_frame"><div class="kategorien_header"><img src="imgs/header_kategorien.gif" alt="" /></div><div class="kategorien_box" style="margin-top:1px;"></div></div>
<div id="content_frame"><div class="content_header"></div><div class="content_box" style="margin-top:1px;"><div class="kategorien_thumb">123</div><div class="kategorien_thumb">123</div><div class="kategorien_thumb">123</div><div class="kategorien_thumb">123</div><div class="kategorien_thumb">123</div><div class="kategorien_thumb">123</div><div style="clear:left;"></div></div></div>
<div id="bottom"></div>
</body>
</html>
Für einen konstruktiven Tipp wäre ich sehr dankbar.
Grüße,
Endo
