nicht angemeldet
Mahlzeit,
ich habe bei einem Projekt zwei Probleme.
1. Die Seite soll oben und links einen von einem rosa Balken eingerahmt werden. Gelöst habe ich den linken Balken über einen permanent mitscrollenden Bereich, der im Hintergrund stehen sollte. Leider zeigt der Internet Explorer den eigentlichen Inhalt nicht an.
2. Für eine Bildergalerie habe ich einen Bereich, in dem bis zu fünf Thumbnails untereinander stehen und einen Bereich daneben für das vergrößerte Bild. Leider ragen die Thumbnails aus dem Container heraus, obwohl ich mit clear:both das eigentlich zu verhindern suche.
Untenstehend das HTML und das CSS. Beides ist inkl. Beispielbildern auch unter http://sopos.org/olli/abba/index.html zu finden.
Hier ist die HTML-Datei:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>foobar</title>
<link rel="stylesheet" type="text/css" href="foo/screen00.css" media="screen">
<meta http-equiv="Content-Type" content="text/html;charset=windows-1252">
</head>
<body>
<div id="rand"> </div>
<div id="container">
<table class="content">
<tr>
<td>
<hr>
<h1>Blablubb</h1>
</td>
</tr>
</table>
<table class="content">
<tr>
<td>
<div class="imgcontent">
<div class="bigimage""><img src="foo/T0000000.jpg" title="" alt="" id="big29"></div>
<div class="thumbscont">
<div class="thumb1"><img src="foo/T0000001.jpg" title="" alt=""></div>
<div class="thumb2"><img src="foo/T0000002.jpg" title="" alt=""></div>
<div class="thumb3"><img src="foo/T0000003.jpg" title="" alt=""></div>
<div class="thumb4"><img src="foo/T0000004.jpg" title="" alt=""></div>
<div class="thumb5"><img src="foo/T0000005.jpg" title="" alt=""></div>
</div>
<div style="clear:both;"> </div>
</div>
</td>
</tr>
</table>
<table class="content">
<tr>
<td>
<hr>
<h1>Blubber</h1>
</td>
</tr>
</table>
<table class="content">
<tr>
<td>
<div class="imgcontent">
<div class="bigimage""><img src="foo/LR_Rose_.jpg" title="" alt="" id="big31"></div>
<div class="thumbscont">
<div class="thumb1"><img src="foo/LR_Rose0.jpg" title="" alt=""></div>
<div class="thumb2"><img src="foo/LR_Taube.jpg" title="" alt=""></div>
<div class="thumb3"><img src="foo/LR_Meer_.jpg" title="" alt=""></div>
<div class="thumb4"><img src="foo/LR_Eule_.jpg" title="" alt=""></div>
<div class="thumb5"><img src="foo/LR_seero.jpg" title="" alt=""></div>
</div>
<div style="clear:both;"> </div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Hier das zugehörige CSS:
/* Allgemein */
body { background-color:#ffffff;
font-size:10pt;
font-family:arial, helvetica, sans-serif, sans;
font-weight:normal;
font-style:normal;
border-top: solid 15px #ff86f5;
border-left: solid 15px #ff86f5;
padding-left:60px;
min-height:100%;
max-height:10000%;
max-width: 100%;
padding-top:30px;
margin:0pt;
}
div#rand {
margin:0px 0px 0px -75px;
border-left: solid 15px #ff86f5;
height:100%;
width: 15px;
position:fixed;
z-index:-1;
}
div#container {
position:relative;
z-index:1;
}
/* Bilder */
img { border:0px; }
div.bigimage {
float:right;
position:relative;
left:136px;
width:868px;
text-align:left;
vertical-align:top;
}
div.thumbscont {
position:absolute;
}
div.thumb1,
div.thumb2,
div.thumb3,
div.thumb4,
div.thumb5 {
width:128px;
height:100%;
border: 1px solid black;
margin-bottom:8px;
}
div.imgcontent {
margin-bottom:32px;
}
/* Tabellen */
table.content { margin: 20px;
max-width: 1280px;
border: 0px;
}
.content {
max-width: 1280px;
font-size:10pt;
}
Servus,
Abba