nicht angemeldet
Linkgallerie mit hover | ich dreh durch
Hallo ihr Crack's!
Ich hab seit Tagen ein echtes Problem
mit einer Linkgallerie die ich gern
zum laufen kriegen würde.
Ich hab schon alles versucht und komm
net weiter. Hab den Kram sogar schon
ein zweites und drittes Mal versucht
neu zu bauen.
Es geht um folgende Seite:
http://www.alexanderwelitschko.de/try/links
CSS:
http://www.alexanderwelitschko.de/try/css/links.css
http://www.alexanderwelitschko.de/try/css/screen.css
Ich möchte gern erreichen das im "portfolio"-
Container die Beschreibung mit dem Bild
am rechten Rand im Kasten auftaucht, sobald
ich mit der Maus über eins der hochkantigen
Bilder links fahre.
Das passiert auch schon, nur das die Beschreibung
dann mitspringt nach link oder rechts.
Ich platz bald.
Weiß Jemand wie ich das löse, so das der Container
an einer Stelle stehen bleibt?
Er tut es einfach nicht, trotz "position: absolute"
Und als ich es mal hinbekommen hatte, hats in Safari
nicht gestimmt. Als Vorlage diente das hier:
http://www.webreference.com/programming/css_gallery/examples/gallery.htm
Ich danke schonmal vorab tausendfach!
Tachikoma
-
Hallo Tachikoma,
Weiß Jemand wie ich das löse, so das der Container
an einer Stelle stehen bleibt?
Er tut es einfach nicht, trotz "position: absolute"Das Problem, bzw. die Ursache ist in SELFHTML beschrieben.
"absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat. Scrollt mit"
Deine Links selbst sind auch mit positon:absolute; positioniert. Dadurch orientieren sich die Kindelemente an den Positionen der Links. Auf Deiner Beispielseite sind die Links nicht positioniert, daher gibt es hier keine Probleme.
Entweder lässt Du die Links z.B. floaten und positionierst die Kindelemente weiterhin wie gehabt, oder du positionierst die Kinder abhängig der Position der Eltern.
Gruß,
small-step-
Thanx small step!
Ich habe es, denk ich, grundsätzlich verstanden.
Aber ich bekomm es dennoch nicht wirklich hin!
Ich hab nun alle "Kinder" nach left floaten
lassen und ihre absolte position gelöscht.
Jetzt liegen alle "Links" links übereinander,
so das nur eins zu sehen ist und ich raff net
welchem der container ich nun ein margin verpassen
muss damit die guten wieder nebeneinander stehen!Ich werd echt irre!
Ich hatte es schon komplett gelöst!
Nur dieser .... Safari hat es ganz anders gezeigt.
Und ich hab es nicht gesichert! *heul*-
Hallo Tachi,
Aber ich bekomm es dennoch nicht wirklich hin!
Ich hab nun alle "Kinder" nach left floaten
lassen und ihre absolte position gelöscht.
Jetzt liegen alle "Links" links übereinander,
so das nur eins zu sehen ist und ich raff net
welchem der container ich nun ein margin verpassen
muss damit die guten wieder nebeneinander stehen!Ist die geänderte Seite online? Zeig mal her.
Ich werd echt irre!
Ich hatte es schon komplett gelöst!
Nur dieser .... Safari hat es ganz anders gezeigt.
Und ich hab es nicht gesichert! *heul*Geht mir ständig so. Nur gut, dass es SVN und SourceSafe gibt...
Gruß,
small-step-
http://www.alexanderwelitschko.de/try/links
Ist online!
Nur eins der Bilder ist jetz rechts, weil
ich grad testen wollt ob ich schon total
plemmplemm bin oder ob float right noch geht!:-(
-
Hallo Tachikoma,
Nur eins der Bilder ist jetz rechts, weil
ich grad testen wollt ob ich schon total
plemmplemm bin oder ob float right noch geht!In Deinem CSS steht ein ganzer Haufen Quatsch...
Ich hab jetzt gerade keinen Webspace zur Hand, deswegen poste ich die wichtigsten Änderungen hier ins Forum.
Hab mir nicht alles durchgeschaut, aber jetzt funktioniert es wenigstens.
links.css:
/* CSS Document */
/* Die folgenden Container betreffen die linkSeite links.html */
#portfolio {
position: absolute 120px 10px 10px 10px;
width: 320px;
height: 168px;
background-color: transparent;
border: none;
}#portfolio ul {
width: 490px;
height: 345px;
list-style-type: none;
}#portfolio li {
border: none;
list-style-type: none;
}#portfolio a.gallery, #container a.gallery:visited {
display: block;
height: 168px;
width: 30px;
background-color: transparent;
text-decoration: none;
margin: 0px;
text-align: left;
cursor: default;
float: left;
background: url(../pix/60to60.jpg);
margin-right:10px;
}#portfolio a.gallery span {
position: absolute;
width: 0px;
height: 0px;
right:10px;
top:300px;
overflow: hidden;
}#portfolio a.gallery:hover {
border: 0px;
margin: 0px 10px 0px 0px;
}#portfolio a.gallery:hover img {
border: 0px;
}#portfolio a.gallery:hover span {
position: absolute;
top: 120px;
right: 10px;
z-index: 100;
color: #CCCCCC;
width: 160px;
height: 345px;
border: 0px;
}und die geänderten Ausschnitte aus der HTML-Datei:
<div id="portfolio">
<ul>
<li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Nicholas Bredel" /><br /> <h1>Mr. Bredel aka danick</h1><p>Ähnlich wie Motoko, nur wesentlich früher, entstand diese Illustrator "ClipArt" Umsetzung der Schauspielerin Eva Mendes. </p></span></a></li>
<li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Osthessen Gesoxx" /><br /> <h1>Osthessen Gesoxx</h1><p>Ähnlich wie Motoko, nur wesentlich früher, entstand diese Illustrator "ClipArt" Umsetzung der Schauspielerin Eva Mendes. </p></span></a></li>
<li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Logo & Signet Design | Illustrator" /><br /> <h1>Logo & Signet Design | Illustrator</h1><p>Das Logo ist das Herz der Corporate Identity und somit das wichtigste Element... sowie die Grundlage für das weitere Erscheinungsbild. Weniger ist dabei meistens mehr, deshalb aber nicht minder wertvoll.</p></span></a></li>
<li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>
<li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>
<li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>
<li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>
<li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>
</ul>
</div>Schau es Dir aber nochmal auf verschiedenen Browsern an und überprüfe Dein CSS im allgemeinen mal. Da ist ziemlich viel völlig unnütz.
Gruß,
small-step-
Boah, geil!
Ich hack das jetzt zusammen...
und wenn es klappt, dann ...
dann... dann, bist DU mein Held
des Tages... NEIN, des Monats!Ich weiß das bei mir viel Quatsch
drinsteht, aber ich versuche anhand
von Veränderungen festzustellen
was wofür steht und was es auslöst.
Deshalb füg ich immer mal was dazu
oder lösch was weg um zu sehen was
es bringt.Erstmal vieeeeeeeelen Dank!
Ich hoffe das ich das dann auch check
was Du da gemacht hast, denn es muss
ja net nur funktionieren!:-)
-
Hi smallstep!
Schaust Du nochmal hier!
http://www.alexanderwelitschko.de/try/linksSo hat ich mir das gedacht!
Vielen Dank!
-
Hallo Tachikoma,
http://www.alexanderwelitschko.de/try/links
Na dann ist ja alles in Butter.
Viel Spaß noch!
small-step
-
-
-
Aaaaaaaaaaahrgh!
Jetzt haben wir den Salat!
Es funktioniert zwar, auch auf den Browsern
die ich hier so rumfliegen hab, aber:Jetzt sind natürlich durch dieses Teil hier:
#portfolio a.gallery, #container a.gallery:visited {
display: block;
height: 168px;
width: 30px;
background-color: transparent;
text-decoration: none;
margin: 0px;
text-align: left;
cursor: default;
float: left;
background: url(../pix/60to60.jpg);
margin-right:10px;
}... alle Linkbilder mit dem selben Bild versehen.
Das ist aber kein Problem. Hab es schon geändert
und jedem seine eigene Klasse zugewiesen.Klasse!
Nun kommt gleich der nächste Hammer an dem ich dann
letztes Mal verzweifelt bin.
Noch eine solche Reihe mit Links genau darunter??:-D
-
Hallo Tachikoma,
Nun kommt gleich der nächste Hammer an dem ich dann
letztes Mal verzweifelt bin.
Noch eine solche Reihe mit Links genau darunter??Das ist wirklich kein Problem.
<div id="portfolio"> <ul id="list1"> <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Nicholas Bredel" /><br /> <h1>Mr. Bredel aka danick</h1><p>Ähnlich wie Motoko, nur wesentlich früher, entstand diese Illustrator "ClipArt" Umsetzung der Schauspielerin Eva Mendes. </p></span></a></li> <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Osthessen Gesoxx" /><br /> <h1>Osthessen Gesoxx</h1><p>Ähnlich wie Motoko, nur wesentlich früher, entstand diese Illustrator "ClipArt" Umsetzung der Schauspielerin Eva Mendes. </p></span></a></li> <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Logo & Signet Design | Illustrator" /><br /> <h1>Logo & Signet Design | Illustrator</h1><p>Das Logo ist das Herz der Corporate Identity und somit das wichtigste Element... sowie die Grundlage für das weitere Erscheinungsbild. Weniger ist dabei meistens mehr, deshalb aber nicht minder wertvoll.</p></span></a></li> <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li> <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li> <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li> <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li> <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li> </ul> <ul id="list2"> <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Nicholas Bredel" /><br /> <h1>Mr. Bredel aka danick</h1><p>Ähnlich wie Motoko, nur wesentlich früher, entstand diese Illustrator "ClipArt" Umsetzung der Schauspielerin Eva Mendes. </p></span></a></li> <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Osthessen Gesoxx" /><br /> <h1>Osthessen Gesoxx</h1><p>Ähnlich wie Motoko, nur wesentlich früher, entstand diese Illustrator "ClipArt" Umsetzung der Schauspielerin Eva Mendes. </p></span></a></li> <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Logo & Signet Design | Illustrator" /><br /> <h1>Logo & Signet Design | Illustrator</h1><p>Das Logo ist das Herz der Corporate Identity und somit das wichtigste Element... sowie die Grundlage für das weitere Erscheinungsbild. Weniger ist dabei meistens mehr, deshalb aber nicht minder wertvoll.</p></span></a></li> <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li> <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li> <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li> <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li> <li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li> </ul> </div>ul einfach verdoppeln, jeweils eine id vergeben und ein bisschen am css rumspielen
ul#list2 a.gallery:hover span { position:absolute; top:300px; }Allerdings musst Du jetzt darauf achten, dass der Container schnell zu klein wird für den Text. Eventuell solltest Du mit overflow:auto; Scrollbalken ermöglichen.
Gruß,
small-step
-
-
-
-
-
-
-
Hi,
versteh ich das richtig?
Du möchtest, daß z.B. wenn man über das linke Bild fährt, "Mr.Bredel aka danick" auch am rechten oberen Rand angezeigt wird wie "Referenz (hier ist eine Beispielreferenz)" ?
Oder, daß der Beschreibende Text immer rechts neben dem rechten hochkantigen Verweispic erscheint und nur die Bilder entsprechend links, mitte oder rechts angezeigt werden?
-
Ohje...
ich würde gern antworten, aber ich
bin nichtmal mehr selber sicher ob
ich das jetzt verstanden hab!?Also: Im Grunde geht die Seite ja
schon! Und die zeigt auch schon alles
was sie zeigen soll, nur verschiebt
die Seite eben das was sie zeigen
soll und das soll sie nicht!Alle Klarheiten beseitigt?
Also konkret möchte ich das das rechts
erscheinende Bild mit dem Text drunter
(hier ist eine Beispielreferenz) immer
an einer festen Position stehen belibt!
Und zwar ganz egal über welchen der
Links mit dem lachenden Icon ich geh.Aber: Das ist wohl nicht ganz einfach!
-
Also so wie ich das versteh, musst du einfach für jedes Hochkante Linkbild(mit smiley) eine andere Größe angeben. Also für die drei Links z.B.:
#portfolio {
position: absolute 120px 10px 10px 10px;
width: 320px;
height: 168px;
background-color: transparent;
border: none;
}
für "Referenz"#portfolio1 {
position: absolute 120px 10px 10px 10px;
width: 360px;
height: 168px;
background-color: transparent;
border: none;
}
für OsthessenGesox
usw.-
Aber dann sind doch einfach nur die Smile-Bilder grösser!?
Ich versteh nicht ganz wohin mich das bringen soll??Oder um es nochmal zu erklären:
Die SmileBilder sind perfekt!
Die werden dann später durch spezielle JPG's ersetzt
die auf den Inhalt der jeweils verlinkten Seite schliessen
lassen. Da gibts keine Probleme!Das Problem ist das was dann rechts davon erscheint
wenn man mit der Maus über den Link geht!Das was erscheint soll ne fixe Position auf der rechten
Seite innerhalb des grossen graugeborderten Kastens
haben. Und zwar 10px davon entfernt. Wie alles in dem
Kasten.Soweit die Theorie.
Aber vielleicht hab ich auch einfach nicht verstanden
was du genau mit deinem Vorschlag meinst!
-
-
-
-
smallstep?
Ich hab da nochmal was gebastelt!
Schau mal, bei mir sieht es jetzt gerade so aus,
wie ich es mir von Anfang an vorgestellt hatte!http://www.alexanderwelitschko.de/try/links
Jetzt ist nur noch die Frage ob mein Safari
zu Hause das auch noch so zeigt, denn eigentlich
will ich das die Seite hauptsächlich auf dem Browser
läuft. Nur hier @ work i don't have no Safari!Aber es sieht schonmal sehr gut aus!
Yiiiiippppiiiiiieh!Vielen Dank für die Hilfe!!!