Problem mit :visited

- WebmasterWork »
- Grafik & Programmierung »
- (X)HTML & CSS & DHTML & Javascript »
- Problem mit :visited »

Deffcon

König

Dabei seit: 11.11.2010

Beiträge: 897

Mittwoch, 16. März 2011, 19:17

Guten Tag,

ich habe ein Problem mit der so genannten "Pseudo-Klasse" :visited.
Ich habe schon gelesen, dass es immer vor :hover im css kommen muss und dass es alle css Eigenschaften enthalten kann.

HTML

<div id="pic-1-small">
<img src="./images/1small.jpg" width="150" height="100" alt="picture 1 small">
<div><img src="./images/1big.jpg" width="500" height="350" alt="picture 1 big"></div>
</div>

Cascading Style Sheet

#pic-1-small {
float:left;
width:150px;
height:100px;
margin-left:0px;
margin-top:0px;
margin-right:107px;
border:1px solid #000000;
}

#pic-1-small div{
display:none;
}

#pic-1-small:visited div{
display:block;
position:absolute;top:130px;left:350px;
width:500px;
height:350px;
border:5px solid #ffffff;
}

#pic-1-small:hover div{
display:block;
position:absolute;top:130px;left:350px;
width:500px;
height:350px;
border:5px solid #000000;
}

Ich habe auch versucht das Bild als Link zu definieren und dann "pic-1-small a:visited div{" anzusprechen, klappte aber auch nicht.
:hover und :active funktionieren bestens. Nur dieses widerspenstige visited nicht.

Hat einer ne Idee?

MFG Simon

lorenz

Haudegen

Dabei seit: 05.11.2002

Beiträge: 647

Mittwoch, 16. März 2011, 19:26

welchen Browser nutzt du denn ;>? und was genau willst du machen.

wo weit ich weiß wurde die style Möglichkeit von :visited massiv zurück gefahren wegen Sicherheitsrisiken und beschränkt sich auf color, background-color, border-*-color, and outline-color und wenn du Sibling Selektoren nutzt wird es so behandelt als wenn der link nicht besucht wurde.

ich denke auch solche sachen wie bei dir #pic-1-small:visited div werden nicht mehr funktionieren

mfg LA

jegi0605

Routinier

Dabei seit: 10.01.2011

Beiträge: 259

Mittwoch, 16. März 2011, 19:32

Hi ,

Ich glaube visited funktioniert nur bei "Links".
Müsstest Du mal ausprobieren

	PHP-Quelltext
1 2 3	<a class="pic_small" href=""> <img style="border: 0px solid ; width: 800px; height: 600px;" alt="" src="./images/1small.jpg"> </a>

	Cascading Style Sheet
1 2 3 4 5 6 7	a.pic_small:visited { display:block; position:absolute;top:130px;left:350px; width:500px; height:350px; border:5px solid #ffffff; }

Nicht gestet , aber versuch das mal...

Gruß
Jens

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »jegi0605« (16. März 2011, 19:32)

Deffcon

König

Dabei seit: 11.11.2010

Beiträge: 897

Mittwoch, 16. März 2011, 22:26

@lorenz:

habe es versucht in aktuellem FF und Chrome und in IE8. Passiert nichts.

Mein Vorhaben:
ich wollte eine Galerie erstellen ohne Javascript etc. Nur auf HTML/CSS Basis.
Habe es zur Veranschaulichung mal hier hochgeladen:

Galerie

Ich habe die kleinen Bilder um einen Rahmen angeordnet, in dem das Große Bild angezeigt werden soll.
Ich habe in dem Div des kleinen Bildes ein Unterdiv erstellt, indem das große Bild ist.
Dieses Div ist auf Display none gesetzt und bei hover über das kleine Bild wird das div als block gedisplayed.

Das funktioniert soweit.

Nun wollte ich durch klick auf eines der kleinen Bilder das große Bild in der Mitte bleibt bis man ein anderes hovert.
Das wollte ich durch visited machen.
Active habe ich probiert das klappt auch - aber das bleibt ja nicht.

In dem CSS Block für Visited muss display block rein, die absolute positionierung auf top x und left x.

@jegi:
Wie ich anfangs geschrieben habe habe ich es auch mit <a...> probiert und das funktionierte auch nicht.
Habe deins auch noch mal direkt getestet. Leider Erfolglos.

@all
Gibt es eine andere Möglichkeit das zu lösen?

MFG Simon

lorenz

Haudegen

Dabei seit: 05.11.2002

Beiträge: 647

Mittwoch, 16. März 2011, 23:13

wie gesagt sowas kannst du auf jeden Fall nicht mit :visited machen damit würden sonst zu viele Sicherheits Probleme entstehen.

eine wirklich vernünftige Lösung ist denke ich mit css auch nicht wirklich möglich außer vielleicht mit abartigen cssHacks (da hab ich gerad nicht die zeit drüber nachzudenken ob es ne Möglichkeit geben könnte).

Was ich machen würde um wenigstens ein wenig das "User-Erlebnis" zu verbessern, wäre die kleinen divs so zu verbinden das es keine Lücken zwischen ihnen gibt so das man nie über keins gehovert sein kann und darin dann halt die Bilder so anzuordnen wie du möchtest.

mfg LA

Deffcon

König

Dabei seit: 11.11.2010

Beiträge: 897

Donnerstag, 17. März 2011, 09:23

Hmm...
Ja, das ist dann eigentlich nicht das was ich wollte, aber wenn's nicht anders geht...
Macht es überhaupt noch Sinn so eine Galerie zu erstellen oder kann man einfach frech davon ausgehen, dass heutzutage jeder JS aktiviert und nen Flash Player installiert hat?

MFG Simon

jegi0605

Routinier

Dabei seit: 10.01.2011

Beiträge: 259

Donnerstag, 17. März 2011, 09:48

Hi ,

bei Javascript weiss ich es nicht , aber Flash sollte die Mehrheit installiert haben.
Oder du wartest auf CSS3 /HTML5 , aber die Gallery funktionier dann nur in den neuen Browsern.

Ich persönlich würde es in Flash machen.

Gruß
Jens

lorenz

Haudegen

Dabei seit: 05.11.2002

Beiträge: 647

Donnerstag, 17. März 2011, 13:47

die Warscheinlichkeit das die Leute kein JS an haben ist eher gering bzw wenn haben sie meistens noscript an dann musst du halt im noscript tag drauf hinweisen das sie JS anmachen müssen um deine galerie sehen zu können. Von Flash würde ich für sowas eher abraten das einfach overkill.

mfg LA

Deffcon

König

Dabei seit: 11.11.2010

Beiträge: 897

Donnerstag, 17. März 2011, 17:32

Also ich habe das Beispiel nochmal abgeändert und die Hoverbereiche vergrößert, dass die Bilder länger im Bereich bleiben.

Beispiel hier

Die großen Bilder hatten verkorkste Ränder, war aber auch nur ein kurzer Test.

Das Beispiel ist finde ich aber keine gescheite Variante für eine Galerie.
Man sollte dann wohl doch auf Javascript vertrauen, oder was meint Ihr?

MFG Simon

lorenz

Haudegen

Dabei seit: 05.11.2002

Beiträge: 647

Donnerstag, 17. März 2011, 17:38

ich würde wie gesagt auf JS gehen die Leute die kein JS haben haben es in den meisten fällen ausgestellt und sind gewohnt teilweise nicht den gewohnten Seitenumfang zu erhalten. Wenn sie deine Bilder sehen wollen müssen sie JS halt anmachen.

mfg LA

ps du könntest ja wenn kein js da ist die Möglichkeit geben das kleine thumb als link zu den großen Bild zu bauen

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »lorenz« (17. März 2011, 17:38)