nicht angemeldet
HTML/CSS sinnvolles Konstrukt?
0 
suit
0 0 0 0 
Matthias Apsel
HTML/CSS sinnvolles Konstrukt?
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;
}
-
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?!
Wohl eher das HTML:
<ul class="gallery"> <li> <a href="foo.html"> <figure> <img src="/foo.png" /> <figcaption>Bild mit einem foo</figcaption> </figure> </a> <ul class="toolbar"> <li><a href="#">Tool 1</a></li> <li><a href="#">Tool 2</a></li> </ul> </li> </ul>Am CSS kannst du dann acuh noch viel drehen - z.B. inline-block statt float verwenden
Und wenn du weniger mit position: relative herumschleuderst, tust du dir auch einen gefallen - das einzige was du wirklich positionieren musst, ist der toolbar - der rest ist ohnehin da wo er ist.
Dann kannst du natürlich noch an allen Ecken und Enden das "px" streichen - sprich 0 anstatt 0px
-
»» ul class="gallery"> > <li> > <a href="foo.html"> > <figure> > <img src="/foo.png" /> > <figcaption>Bild mit einem foo</figcaption> > </figure> > </a> > <ul class="toolbar"> > <li><a href="#">Tool 1</a></li> > <li><a href="#">Tool 2</a></li> > </ul> > </li> > </ul> ~~~»» Danke erstmal! Aber das mit der Liste habe ich nicht verstanden... Die Bildchen sollen ja fortlaufen in ihrer Galerie und nicht alle neben- oder untereinander stehen. VG-
Moin,
Danke erstmal! Aber das mit der Liste habe ich nicht verstanden... Die Bildchen sollen ja fortlaufen in ihrer Galerie und nicht alle neben- oder untereinander stehen.
Das geht mit CSS. Definiere einfach die Listen-Items als inline-Blöcke.
li { display: inline-block; }Grüße Marco
-
Jau! Jetzt hab ich's! Danke!
VG
-
Om nah hoo pez nyeetz, misterunknown!
Danke erstmal! Aber das mit der Liste habe ich nicht verstanden... Die Bildchen sollen ja fortlaufen in ihrer Galerie und nicht alle neben- oder untereinander stehen.
Das HTML beschreibt, was es _ist_ (und nur das):
* mehrere gleichwertige Galerien, also eine ungeordnete (weil es auf die Reihenfolge nicht ankommt) Liste.
* in diesen Galerien (vielleicht nicht in allen) eine Liste von Bildern.Das CSS beschreibt das Aussehen. Deshalb:
Das geht mit CSS. Definiere einfach die Listen-Items als inline-Blöcke.
li { display: inline-block; }Grüße Marco
Matthias
--
1/z ist kein Blatt Papier.
-
-
-