WORKSHOP | Picturelayer selber machen (HTML & CSS)

Hi @ All,

Heute hab ich mal kein Problem sondern ein Lösung :smile:

Nachdem in lestzter Zeit viele Fragen gestellt wurden wo man gute Bildergallerien her bekommt, oder wie man sowas selber machen kann, hab ich mal etwas rumprobiert und mal selber eine in HTML und CSS gemacht.

Die CSS für ein solchen Picturelayer sieht so aus:

#pl-titel {
display: block;
margin: 0px;
padding: center;
font-family: arial;
font-size: 14pt;
font-weight: bold;
color: green;
}

.picturelayer {
display: block;
width: 100%;
margin: 0px;
padding: 0px;
}

#item,
#item a:link,
#item a:visited {
display: block;
width: 100px;
height: 100px;
border: 1px solid black;
margin: 5px;
padding: 0px;
float: left;
font-family: arial;
font-size: 10pt;
font-weight: bold;
text-decoration: none;
color: green;
}

#item a:hover,
#item a:active {
display: block;
width: 100px;
height: 100px;
border: 1px solid #00FF00;
margin: 5px;
padding: 0px;
float: left;
font-family: arial;
font-size: 10pt;
font-weight: bold;
text-decoration: none;
color: #00FF00;
}

#item img {
background: #000000 url(loader.gif);
background-repeat: no-repeat;
background-position: 33px 23px;
min-width: 32px;
min-height: 32px;
border: none;
width: 100px;
height: 80px;
}

Ich hab auch eine Loader.gif dazu gemacht, einfach nur damit der Seitenbesucher sieht das an der Stelle noch was geladen wird… Soll ja Leute geben die noch kein DSL haben… Naja, und die dazu gehörende HTML ist so aufgebaut:

 PICTURE LAYER FOTO LAYER 

Foto 1

Foto 2

Foto 3

Ich hoffen ich hab Euch geholfen, zumindest allen die eine Bildergallerie gesucht haben, oder in nächster Zeit eine suchen wollten…

Gebt mir ein kleines Feedback ob Euch dieses Posting weiter geholfen hat, oder ob Ihr es voll Sch** findet !!!

Lg. Meganova

PS: Eure Meinung bitte !!!

CSS gegen PHP ?
Schon ganz schön, wieviel CSS man machen kann.
Bist du im Krieg gegen JavaScript und PHP ?
Damit könnte man z.B. auch die Fenstergröße berechnen.
Bei deiner Lösung gebs aber auch noch eine Verbesserung:
target=„abc“; dann werden nicht soviele Fenster geöffnet.

Hi,

Ja gut, es gibt noch ca. eine Millionen Möglichkeiten mit Javascript z.B. popups zu generieren, oder ne Milliarde Möglichkeiten in PHP sowas zu machen, aber ich wollte denen die überhaupt keine Idee haben einen kleinen kreativen einblick in die mänge der Möglichkeiten bieten.

Achso, und Nein… ich bin nicht auf Kriegsfuß mit Javascript und PHP :smile:, aber es wurde heufig nach HTML und CSS anternativen gefragt, daher dachte ich das etwas das ohne JS oder PHP auskommt das beste wäre.

lg. Meganova