• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV mit zwei verlinkten Bereichen

K

KI-MEDIA

Guest
Hallo,

ich habe mit css selbst eine Bilder-Galerie erstellt und nun das Problem, dass ich nur vorwärts klicken kann und nicht zurück. ich müsste praktisch auf der linken seite des Bildschirms (100% height; 50% width) sowie auf der rechten jeweils einen verlinkten Bereich haben.

Einfacher gesagt, ich brauche theoretisch das hier:
Code: 
<a left href="link1.html" name="zurück">
<a right href"bild3.png" name="vorwärts">
<img src="bild2.png"/>
</a>
</a>
Geht ja aber nicht...

Zu sehen gibts die Galerie jedenfalls live hier: http://www.wanjapflueger.de/portrait.html

Die Galerie funktioniert so:

Das hier ist das angezeigte, große Bild nach dem Klick auf die Vorschau. Die Galerie klickt sich also von Bild zu Bild.
Code: 
<ul class="lightbox">
<li id="01">
<a href="#start"><div class="close"></div></a>
<a href="#02"><img height="100%"  src="bilder/creative/01.jpg" /></a>

</li>
</ul>
Das hier ist die vorschau (kleines bild)
Code: 
<a href="#01"><img class="preview" src="bilder/creative/01.jpg" /></a>

Und das hier ist das css:
Code: 
@charset "utf-8";
/* CSS Document */
ul.lightbox li {
    overflow: hidden;
    position: fixed;
    width: 0px;
    height:0px;
    left: 0;
    top:0;
    opacity: 0;
    z-index:1;
    cursor:pointer;
    list-style-type: none;
}
ul.lightbox li:target {
    background: rgba(0,0,0,0.8);
    width:100%;
    height:100%;
    opacity: 1;
    cursor:default;
   

}
ul.lightbox li:target a {
    position: fixed;
    top: 0px;
    height:100%;
    width:100%;
    left: 0%;
    border: 0px solid #000;
    -moz-box-shadow: 0px 0px 50px rgba(0,0,0,0.7);
    -o-box-shaow:0px 0px 50px rgba(0,0,0,0.7);
    -webkit-box-shadow:0px 0px 50px rgba(0,0,0,0.7);


}
.close {
    position:fixed;
    top:5px;
    right:5px;
    background-image:url(close.png);
    background-repeat:no-repeat;
    width:25px;
    height:25px;
    z-index:2;
}
.preview {
    opacity:0.85;   
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    margin-right:5px;
    margin-left:5px;
    margin-bottom:10px;
    vertical-align: middle;
    height:225px;
}
.preview:hover {
    opacity:1;
        -moz-box-shadow: 0px 0px 50px rgba(0,0,0,0.7);
    -o-box-shaow:0px 0px 50px rgba(0,0,0,0.7);
    -webkit-box-shadow:0px 0px 50px rgba(0,0,0,0.7);

}
.previewabout {
    opacity:0.85;   
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    margin-right:5px;
    margin-left:5px;
    margin-bottom:10px;
    vertical-align: middle;
}
.previewabout:hover {
    opacity:1;
        -moz-box-shadow: 0px 0px 50px rgba(0,0,0,0.7);
    -o-box-shaow:0px 0px 50px rgba(0,0,0,0.7);
    -webkit-box-shadow:0px 0px 50px rgba(0,0,0,0.7);

}

Vielen Dank schon mal,
KI-MEDIA
 
Aktuell ist dein Weiter-Link ja um das ganze vergrößerte Bild gelegt. Daher würde ein 2. Link, der als "Zurück" dienen soll, für den Nutzer nicht erreichbar sein. Du müsstest also den Weiter-Link vom Bild trennen und per CSS irgendwo an oder über dem Bild positionieren. Genauso kannst Du dann den zurück-Link positionieren. Als Linkziel für Weiter gibst Du die ID des nächsten <li>'s an, als Linkziel des die ID des vorherigen <li>'s an.

Allerdings solltest Du unbedingt auch noch den HTML-Code an sich überarbeiten:
http://validator.w3.org/check?verbose=1&uri=http://www.wanjapflueger.de/portrait.html#start
 
Danke ich werde das ausprobieren! Muss ich denn meinen Code modernisieren, so dass er nicht mehr obsolete ist? Funktionieren tut er auf allen Endgeräten.
 
Auf die Geräte kommt es weniger an, eher auf die Browser. Und dass Du "alle" getestest hast bezweifle ich. Allerdings ist der Code nicht nur gefährlich für die Darstellungssicherheit sondern auch ungünstig für die Suchmaschinenindizierung. Dein HTML-Code ist an den wenigsten Stellen semantisch sinnvoll geschrieben. Das erschwert es Suchmaschinen, und ist nicht gerade modern.
 
Mir erscheint ein Steinblock zum Text einmeißeln auch als simpelste und sicherste möglichkeit.

Ich hoffe doch mal das die aussage nicht ernst gemeint, denn das währe sehr traurig, mehr möchte ich da zu eigentlich nicht sagen.

Cheffchen
 
KI-MEDIA schrieb:
Mir erscheint eine Tabelle als die simpelste Möglichkeit Elemente nebeneinander anzuordnen ohne lästige positionsbeschreibungen...
Zum Vergrößern anklicken....

Falsch. Eine Tabelle schränkt dich in den Gestaltungsmöglichkeiten ein. Sie unterstützt dich keinesfalls bei der Gestaltung. Sie zeichnet zudem die Inhalte falsch aus, was für die Indizierung deiner Seite bei Suchmaschinen einen großen Nachteil hat. Du ignorierst dabei auch Vorgaben vom W3C, welches Tabellen nur für tabellarische Daten vorsieht. Und die hast Du keinesfalls. Wenn Du sie nur nutzt weil Du bisher nur mit position gearbeitet hast, versuch dich mal an float, margin und padding - das ist die Lösung für dein eigentliches Problem, und würde dich auch von den vielen anderen Problemen befreien die Du dir mit einer Tabelle einhandelst.
 
also ich habe alles überarbeitet, die Galerie hat jetzt sowohl vor- als auch zurück Bereiche und ich habe die semantisch nicht sinnvollen Bereiche semantisch sinnvoll gestaltet... Die seiten haben jetzt nur noch minimale Fehler, die zum einen durch den Youtube-Player herrühren, den ich aber nicht verändern will/kann und zum anderen weiß ich nicht wie ich die bilder in der galerie zentrieren soll ohne center. hab text-align: center ausprobiert, geht aber nicht.

www.wanjapflueger.de/portrait

PS: wenn ich die seite auf dem handy aufrufe muss ich für die galerie ins querformat wechseln, dabei verschwinden aber die prev und next buttons, die ich als hintergrundgrafik für die linkbereiche eingesetzt habe...

Code: 
.next {
    height: 100%;
    width: 50%;
    position: absolute;
    top: 100px;
    right: 0;
    background-image:url(next.png);
    background-size:auto;
    background-repeat:no-repeat;
    background-position:right;
    background-attachment:fixed;
    cursor: pointer;
}
.prev {
    height: 100%;
    width: 50%;
    position: absolute;
    left: 0;
    top: 100px;
    cursor: pointer;
        background-image:url(prev.png);
    background-size:auto;
    background-repeat:no-repeat;
    background-position:left;
    background-attachment:fixed;

}

PPS: kann ich hier http://wanjapflueger.de/about.html eine tabelle für den lebenslauf benutzen? eine alternative erschließt sich mich hier nicht...
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben