HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum
 

 
 

Anzeige 
 
HTMLWorld » Forum

Thema anzeigen - Probleme mit Fotogalerien

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

Probleme mit Fotogalerien

 

Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Vorheriges Thema:
Nächstes Thema:  
Autor Nachricht
sunny55



Anmeldungsdatum: 05.08.2008
Beiträge: 1

BeitragVerfasst am: 07.08.2008 12:32:49    Titel: Probleme mit Fotogalerien Antworten mit Zitat

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  &copy; 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  &copy; 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  &copy; 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  &copy; 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  &copy; 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  &copy; 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  &copy; 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  &copy; 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  &copy; 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>&copy; 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&uuml;ckseite
          <br />
          &copy; 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>&copy; 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&uuml;ckseite
          <br />
          &copy; by Adrian Fischer
        </span>
      </a>
   </li>
     
  </ul>
</div>
       
           
        </div>




Danke
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
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.