|
Vorheriges Thema: Nächstes Thema: |
Autor |
Nachricht |
sunny55
Anmeldungsdatum: 05.08.2008 Beiträge: 1
|
Verfasst am: 07.08.2008 12:32:49 Titel: Probleme mit Fotogalerien |
|
|
Hallo, ich bin gerade dabei eine Fotogalerie zu erstellen. Ziel ist es eine Seite zu haben, in der Fotos gezeigtw erden und eine andere Seite in der andere Arbeiten gezeigt werden können. Die Seite mit der Fotogalerie funktioniert auch ohne Probleme, zumindest im Firefox. Wenn ich jedoch den css code etwas umschreibe, siehe Beispiel um auf der anderen Seite die gleiche Galerie mit anderen Fotos darzustellen klappt das gar nicht mehr.
Warum zweimal den gleichen Code in css? Ich dachte, so als blutiger Anfänger dass ich danach eine bessere Verwaltung der zwei Kategorien habe. Wie ihr seht ist ja slide jeweils von a beginnen fortlaufend, entsprechend der Bildanzahl. Wenn ich die beiden Kategoriene trenne, dann kann ich neue, zusätzliche Fotos einfacher verwalten.
Aber wie egsagt es funktioniert kein bißchen
Danke für die Hilfe
Seite Fotogalerie (funktioniert)
html:
Code: |
<div id="content">
<h1 style="text-decoration:underline">Fotografie</h1>
<div id="fotogalerie">
<ul>
<li>
<a class="gallery slidea" href="#nogo">
<span>
<img src="css/Galerie/_DSC0043.jpg" alt="Architektur01" title="Architektur01"/>
<br />
Architektur01
<br />
<p>Fotografie © by Adrian Fischer </p>
</span>
</a>
</li>
<li>
<a class="gallery slideb" href="#nogo">
<span>
<img src="css/Galerie/_DSC0050.jpg" alt="Architektur02" title="Architektur02" />
<br />
Architektur02
<br />
Fotografie © by Adrian Fischer
</span>
</a>
</li>
<li>
<a class="gallery slidec" href="#nogo">
<span>
<img src="css/Galerie/2002_1.jpg" alt="Briegel01" title="Briegel01" />
<br />
Briegel01
<br />
Fotografie © by Adrian Fischer
</span>
</a>
</li>
<li>
<a class="gallery slided" href="#nogo">
<span>
<img src="css/Galerie/2002_2.jpg" lalt="Briegel02" title="Briegel02" />
<br />
Briegel02
<br />
Fotografie © by Adrian Fischer
</span>
</a>
</li>
<li>
<a class="gallery slidee" href="#nogo">
<span>
<img src="css/Galerie/Baumfertig.jpg" alt="Baumfertig" title="Baumfertig" />
<br />
Baumfertig
<br />
Fotografie © by Adrian Fischer
</span>
</a>
</li>
<li>
<a class="gallery slidef" href="#nogo">
<span>
<img src="css/Galerie/Kinderwagen.jpg" alt="Kinderwagen" title="Kinderwagen" />
<br />
Kinderwagen
<br />
Fotografie © by Adrian Fischer
</span>
</a>
</li>
<li>
<a class="gallery slideg" href="#nogo">
<span>
<img src="css/Galerie/Werkstatt.jpg" alt="Werkstatt" title="Werkstatt" />
<br />
Werkstatt
<br />
Fotografie © by Adrian Fischer
</span>
</a>
</li>
<li>
<a class="gallery slideh" href="#nogo">
<span>
<img src="css/Galerie/Marc01.jpg" alt="Marc01" title="Marc01" />
<br />
Kind
<br />
Fotografie © by Adrian Fischer
</span>
</a>
</li>
<li>
<a class="gallery slidei" href="#nogo">
<span>
<img src="css/Galerie/Marc02.jpg" alt="Marc02" title="Marc02" />
<br />
Kind2
<br />
Fotografie © by Adrian Fischer
</span>
</a>
</li>
</ul>
</div>
</div>
|
dazu css:
Code: |
/*Fotogalerie*/
/*Gesamter Kasten*/
#fotogalerie {
position: relative;
width: 630px;
height: 410px;
margin: 20px auto 0 auto;
border: 1px solid #aaa;
background: url() 75px 10px no-repeat;
}
#fotogalerie ul{
width: 198px;
height: 430px;
margin: 5px;
float: right;
list-style-type:none;
}
#fotogalerie li {
float: left;
}
/* Border für thumbnails hover*/
#fotogalerie a.gallery:hover {
border: 1px solid #fff;
}
/* Platz für hover Foto*/
#fotogalerie a.gallery:hover span {
position: left;
width: 398px;
height: 398px;
top: 5px;
right: 20px;
color: #000;
}
#fotogalerie a.gallery:hover img {
border: 1px solid #000;
float: left;
margin-right: 5px;
}
#fotogalerie a.gallery span{
position:absolute;
width: 1px;
height: 1px;
top: 5px;
left: 5px;
overflow: hidden;
}
#fotogalerie a.gallery, #fotogalerie a.gallery:visited {
display:block;
color:#000;
text-decoration:none;
border:1px solid #000;
margin:1px 2px 1px 2px;
text-align:left;
cursor:default;
}
#fotogalerie a.slidea {
background:url(../css/thumbs/_DSC0043_t.jpg);
height:60px;
width:93px;
}
#fotogalerie a.slideb {
background:url(../css/thumbs/_DSC0050_t.jpg);
height:60px;
width:93px;
}
#fotogalerie a.slidec {
background:url(../css/thumbs/2002_1_t.jpg);
height:60px;
width:93px;
}
#fotogalerie a.slided {
background:url(../css/thumbs/2002_2_t.jpg);
height:60px;
width:93px;
}
#fotogalerie a.slidee {
background:url(../css/thumbs/Baumfertig_t.jpg);
height:60px;
width:93px;
}
#fotogalerie a.slidef {
background:url(../css/thumbs//Kinderwagen_t.jpg);
height:60px;
width:93px;
}
#fotogalerie a.slideg {
background:url(../css/thumbs/Werkstatt_t.jpg);
height:60px;
width:93px;
}
#fotogalerie a.slideh {
background:url(../css/thumbs/Marc01_t.jpg);
height:60px;
width:93px;
}
#fotogalerie a.slidei {
background:url(../css/thumbs/Marc02_t.jpg);
height:93px;
width:60px;
}
|
Seite Layoutgalerie (funktioniert nicht!!!)
Hier werden nur die zwei Bilder in groß dargestellt. Aber nicht wie gewünscht, sondern irgendwo auf der seite und Thumbnails sieht man auch nicht. Es soll das gleiche Design wie bei der Fotogalerie oben haben, nur eben andere Bilder. Da es sich um zwei verschiedene Themenbereiche handelt möchte ich die Bilder auf zwei Seiten verteilen.
Code: |
<div id="content">
<h1 style="text-decoration:underline">Printdesign</h1>
<div id="layouts">
<ul>
<li>
<a class="gallery slidea" href="#nogo">
<span>
<img src="css/Layouts/Aloha1.jpg" alt="Visitenkarte01" title="Visitenkarte01" />
<br />
Visitenkarte Vorne
<br />
<p>© by Adrian Fischer </p>
</span>
</a>
</li>
<li>
<a class="gallery slideb" href="#nogo">
<span>
<img src="css/Layouts/Aloha2.jpg" alt="Visitenkarte02" title="Visitenkarte02" />
<br />
Visitenkarte Rückseite
<br />
© by Adrian Fischer
</span>
</a>
</li>
</ul>
</div>
</div>
|
dazu css:
Code: |
<div id="content">
<h1 style="text-decoration:underline">Printdesign</h1>
<div id="layouts">
<ul>
<li>
<a class="gallery slidea" href="#nogo">
<span>
<img src="css/Layouts/Aloha1.jpg" alt="Visitenkarte01" title="Visitenkarte01" />
<br />
Visitenkarte Vorne
<br />
<p>© by Adrian Fischer </p>
</span>
</a>
</li>
<li>
<a class="gallery slideb" href="#nogo">
<span>
<img src="css/Layouts/Aloha2.jpg" alt="Visitenkarte02" title="Visitenkarte02" />
<br />
Visitenkarte Rückseite
<br />
© by Adrian Fischer
</span>
</a>
</li>
</ul>
</div>
</div>
|
Danke |
|
Nach oben |
|
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst deine Beiträge in diesem Forum nicht bearbeiten. Du kannst deine Beiträge in diesem Forum nicht löschen. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
|
|