Nicht mehr ganz neu hier
Ich möchte meine flash galerie durch einen Galerie mit listenpunkten ersetzen.
Diese Galerie habe ich unter Aquarell.html abgespeichert und möchte sie in meine Home includen. Rufe ich die Aquarell.html im explorer auf startet sie mit den Bildern wenn ich sie include zeigt sie keine Bilder an.
Verstehe es auch nicht ganz mit dem
und dann
der erste Anker verweist auf #b1 doch ich habe ja nirgendwo id=b1 Werte zugewiesen. Den Zusammenhang verstehe ich nicht ganz. Habe schon gegoogelt aber nur die Erklärungen für eine html gefunden nicht für #b. Wäre dankbar für eine Erklärung.
HTML:
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
border:none;
outline:none;
text-decoration:none;
}
/* Fricca-Methode zum vertikalen zentrieren */
#abstand {
height:50%;
width:1px;
float:left;
margin-bottom:-275px;
}
#container {
width: 650px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;/* height:550px;background:#aaa;overflow:hidden;*/
}
#titel {
margin-bottom:30px;
}
#links {
position:relative;
width:200px;
height:448px; /* entspricht der Bildh?he der vergr??erten Bilder*/
float:left; /* rechts von mir kommen die "sch?nen" Bilder hin */
overflow:auto; /* Wenn es mal mehr wird bitte Scrollbalken einschalten */
}
#titel h1 {
text-align:center;
color:#f33;
text-shadow:3px 1px 3px #000;
}
#titel ul#kategorie li {
margin:5px;
float:left;
}
#titel ul#kategorie li a {
padding:4px;
color:#09c;
}
#titel ul#kategorie li a:hover , #titel ul#kategorie li a:focus {
color:#d33;
}
#links ul#auswahl li {
float:left;
}
#links ul#auswahl li a {
margin:3px 10px 6px 10px;
color:#fff;
display:block;
width:92px;
text-align:center;
}
#links ul#auswahl li a img {
padding:5px;
background:#fff;
display:block;
margin:0 auto;
-moz-box-shadow:0px 0px 5px #000;
-o-box-shadow:0px 0px 5px #000;
-webkit-box-shadow:0px 0px 5px #000;
box-shadow:0px 0px 5px #000;
}
#links ul#auswahl li a:hover img , #links ul#auswahl a:focus img {
background:#eee;
}
#ausgabe {
margin-left:255px;
width:580px; /* Bildbreite */
height:445px; /* Bildh?he */
overflow:hidden; /* Bitte nur ein Bild zeigen. */
border:1px solid #000;
-moz-box-shadow:0px 0px 5px #000;
-webkit-box-shadow:0px 0px 5px #000;
box-shadow:0px 0px 5px #000;
}
#ausgabe li a {
display:block;
height:448px;
}
#ausgabe li img {
display:block;
margin:0 auto; /* Hochformat zentrieren */
padding:10px;
}
strong {
color:#f33;
}
</style>
</head>
<body>
<div id="abstand"></div>
<div id="container">
<div id="titel"><h1>-Galerie01- Einfache Bilder-Galerie</h1>
</div>
<div id="links">
<ul id="auswahl">
<li><a href="#b1"><img src="s01.jpg" alt="bild1" width="90" height="90" /> </a></li>
<li><a href="#b2"><img src="s02.jpg" alt="bild1" width="90" height="90" /> </a></li>
<li><a href="#b3"><img src="s03.jpg" alt="bild1" width="90" height="90" /> </a></li>
<li><a href="#b4"><img src="s04.jpg" alt="bild1" width="90" height="90" /> </a></li>
<li><a href="#b5"><img src="s05.jpg" alt="bild1" width="90" height="90" /> </a></li>
<li><a href="#b6"><img src="s06.jpg" alt="bild1" width="90" height="90" /> </a></li>
</ul>
</div>
<ul id="ausgabe">
<li id="b1"><a href="#b"><img src="l01.jpg" alt="bild1" width="400" height="428" /></a></li>
<li id="b2"><a href="#b"><img src="l02.jpg" alt="bild2" width="400" height="428" /></a></li>
<li id="b3"><a href="#b"><img src="l03.jpg" alt="bild3" width="400" height="428" /></a></li>
<li id="b4"><a href="#b"><img src="l04.jpg" alt="bild4" width="400" height="428" /></a></li>
<li id="b5"><a href="#b"><img src="l05.jpg" alt="bild5" width="400" height="428" /></a></li>
<li id="b6"><a href="#b"><img src="l06.jpg" alt="bild6" width="400" height="428" /></a></li>
</ul>
</div>
Verstehe es auch nicht ganz mit dem
HTML:
<a href="#b1">
HTML:
<li id="b1"><a href="#b">