nicht angemeldet
Hallo zusammen,
der nachfolgende Code tut erstmal, was er tun soll:
Auf einer Seite sollen im Contentbereich 1 bis x Bildergalerien angezeigt werden.
Jede Galerie kann 0 bis n Bilder enthalten.
Der Hintergrund jeder Galerie soll eine bestimmte Farbe haben, links soll zu jeder Galerie eine Toolbar sein.
Jedes Bildchen hat einen Titel und zu jedem Bildchen gibt es Bearbeitungsicons (die das Bild von oberhalb überlappen dürfen).
Wie gesagt, es funktioniert, aber jetzt frage ich mich, ob das nicht einfacher geht, oder ob ich das CSS noch optimieren kann?!
Danke für jeden Denkanstoß!
Fraenk
PS: Die vielen Farben sind dazu da, die einzelnen Bereiche auseinander zu halten.
<!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>Test</title>
<link rel="StyleSheet" href="test9.css"/>
</head>
<body>
<div class="content">
<div class="gallery">
<!-- ========================================================= -->
<div class="gallerytoolbar">
<a href="testa.html"><img class="galimgtoolimg" src="toolimga.png"/></a>
<a href="testb.html"><img class="galimgtoolimg" src="toolimgb.png"/></a>
</div>
<!-- ========================================================= -->
<div class="innergallery">
<div class="galimgframe">
<p class="galimgheadline">Titel 1 1</p>
<div class="galimgcontent">
<a href="test11.html"><img class="galimg" src="img11.png"/></a>
<div class="galimgtoolbar">
<a href="test2.html"><img class="galimgtoolimg" src="toolimg.png"/></a>
<a href="test3.html"><img class="galimgtoolimg" src="toolimg2.png"/></a>
</div>
</div>
</div>
<div class="galimgframe">
<p class="galimgheadline">Titel 1 2</p>
<div class="galimgcontent">
<a href="test12.html"><img class="galimg" src="img12.png"/></a>
<div class="galimgtoolbar">
<a href="test2.html"><img class="galimgtoolimg" src="toolimg.png"/></a>
<a href="test3.html"><img class="galimgtoolimg" src="toolimg2.png"/></a>
</div>
</div>
</div>
<div class="galimgframe">
<p class="galimgheadline">Titel 1 3</p>
<div class="galimgcontent">
<a href="test13.html"><img class="galimg" src="img13.png"/></a>
<div class="galimgtoolbar">
<a href="test2.html"><img class="galimgtoolimg" src="toolimg.png"/></a>
<a href="test3.html"><img class="galimgtoolimg" src="toolimg2.png"/></a>
</div>
</div>
</div>
<div class="galimgframe">
<p class="galimgheadline">Titel 1 4</p>
<div class="galimgcontent">
<a href="test14.html"><img class="galimg" src="img14.png"/></a>
<div class="galimgtoolbar">
<a href="test2.html"><img class="galimgtoolimg" src="toolimg.png"/></a>
<a href="test3.html"><img class="galimgtoolimg" src="toolimg2.png"/></a>
</div>
</div>
</div>
</div>
<!-- ========================================================= -->
</div>
</div>
</body>
</html>
HTML {
position:absolute;
top:0px;
left:0px;
margin:0px;
padding:0px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 100%;
}
BODY {
position:absolute;
top:0px;
left:0px;
width: 100%;
margin:0px;
padding:0px;
background-color: #FFFFFF;
}
IMG {
border-width: 0px;
border-style: none;
margin:0px;
padding:0px;
}
.content {
position: absolute;
top: 10px;
left: 50px;
width: 290px;
background-color: #EFEFAA;
display: block;
overflow: hidden;
}
.gallery {
position: relative;
width: 100%;
overflow: hidden;
background-color: #0000DD;
overflow: hidden;
margin-bottom: 10px;
}
.gallerytoolbar {
position: absolute;
top: 0px;
left: 0px;
width: 30px;
overflow: hidden;
display: block;
}
.innergallery {
position: relative;
top: 0px;
left: 0px;
margin-left: 35px;
background-color: #FF0000;
overflow: hidden;
width: 100%;
}
.galimgframe {
float: left;
background-color: #FF00FF;
width: 80px;
height: 90px;
margin-right: 10px;
padding: 0px;
}
.galimgheadline {
position: relative;
top: 0px;
left: 0px;
height: 12px;
line-height: 12px;
font-size: 10px;
padding-left:5px;
margin:0px;
background-color: #EFEFEF;
}
.galimgcontent {
position: relative;
top: 0px;
left: 0px;
height: 78px;
line-height: 78px;
margin:0px;
padding:0px;
text-align: center;
background-color: #EF00EF;
}
.galimg {
width: 70px;
height: 70px;
}
.galimgtoolbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 15px;
}
.galimgtoolimg {
float: left;
width: 20px;
height: 20px;
}
Matthias Apsel