Guten Tag,
es geht nicht um die Galleriefunktion des WP, sondern um das Layouten an sich. Meine Idee ist nun, dass ich in dem div in dem die Bilder sind, dieses "Lochstreifenmuster" oben und unten anordne und dazwischen dann die Bilder habe. Jene sollten dann einen rechten und schwarzen Rahmen bekommen, damit man diese "Einteilungen" hat.
Wie mein Versuch aussieht, kann man dem Bild im Anhang entnehmen. Der html-Teil sieht so aus:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Muckels Internetseite</title>
<link rel="shortcut icon" href="Grafiken/favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="oben">
<ul>
<li><a href="#oben">Startseite</a></li>
<li>der Autor</li>
<li>Jugendbewegtes</li>
<li>Rheuma</li>
<li>Lyrik</li>
<li>Gästebuch</li>
<li>Impressum</li>
</ul></div>
<div id="kopf">
<div id="dia-oben">
<div id="dia-unten">
<img src="Bilder/buendisches/Kothe/F2B24.jpg" alt="Kothe" />
<img src="Bilder/Personen/platzhalter2.jpg" alt="person" /></div></div></div>
<br style="clear:both;" />
<div id="links">Linke Spalte
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
<div id="rechts">Rechte Spalte
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
<div id="mitte">Mitte</div>
<div id="fuss">Fuss</div>
</body>
</html>
Alles anzeigen
und der CSS-Bereich so:
body {
padding:0;/*oben, rechts, unten, links */
margin:0;/*oben, rechts, unten, links */
overflow:auto;
/*background-color:#2B2B2B;
color:#999;*/
font-family: Calibri, "Sans Serif", "Century Gothic";}
#oben {
display:block;
padding:0;/*oben, rechts, unten, links */
margin:0;/*oben, rechts, unten, links */
background-color:#000;
height:2.0em;
width:100%;
}
#links {
float:left;
display:block;
padding:0;/*oben, rechts, unten, links */
margin:0 0 0 0;/*oben, rechts, unten, links */
width:15%;
border:1px solid darkred;
}
#rechts {
float:right;
display:block;
padding:0;/*oben, rechts, unten, links */
margin:0 0 0 0;/*oben, rechts, unten, links */
width:15%;
border:1px solid darkred;
}
#kopf {
display:block;
margin:0;/*oben, rechts, unten, links */
padding:0;/*oben, rechts, unten, links */
text-align:center;
}
#dia-oben {background: url(Bilder/allgemeines/Dia-06-oben.jpg) center top no-repeat;border:none;padding:0;margin:0;}
#dia-unten {background: url(Bilder/allgemeines/Dia-06-unten.jpg) center bottom no-repeat;border:none;padding:0;margin:0;}
#mitte {
}
#fuss {
clear:both;
display:block;
text-align:center;
}
/*ListenMenues*/
#oben ul {
list-style-type:none;
margin:0 0.5em 0 0.5em;/*oben, rechts, unten, links */
padding:0;/*oben, rechts, unten, links */
color:#ccc;
font-size:1.2em;
}
#oben li {
float:left;
display:block;
margin:0.25em;}
#oben li a {color:#ccc;}
#oben li a:hover {font-weight:bold;}
/*Bilder*/
#kopf img {float:left;display:block;height:10em;margin:0.25em;padding:0;border:1px solid darkred;}
Alles anzeigen
Problem aktuell ist, dass diese "Lochstreifen"-Grafiken nicht richtig positioniert sind und nicht über die Gesamte Breite gehen. Aber ich versuche es weiter.
LG
Muckel
