Εισαγωγή link σε lightbox

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
nekiman
Δημοσιεύσεις: 3
Εγγραφή: 26 Ιαν 2011 15:29

Εισαγωγή link σε lightbox

Δημοσίευση από nekiman » 26 Ιαν 2011 15:42

Γεια σε όλους!! Θα ήθελα τη βοήθεια σας σ ένα θεματάκι που έχω. Έχω ένα lightbox με εικόνες και θέλω κάτω από κάθε εικόνα να βάλω ένα link αλλά το lightbox να μην χάσει τη μορφή του. Εννοώ να είναι έτσι δίπλα δίπλα οι εικόνες και να κάνουν σειρές και όχι η μια κάτω από την άλλη και να κάνουν μια γραμμή. Αν μπορείτε πείτε μου πως θα το κάνω. Ευχαριστώ πολύ εκ των προτέρων. Στέλνω μαζί και ένα παράδειγμα από lightbox για δοκιμές. Thanks!!!
Συνημμένα
lightbox.rar
(155.7 KiB) Μεταφορτώθηκε 298 φορές

Άβαταρ μέλους
charavge
Δημοσιεύσεις: 378
Εγγραφή: 14 Σεπ 2006 15:47

Εισαγωγή link σε lightbox

Δημοσίευση από charavge » 31 Ιαν 2012 01:54

Βασικά πρέπει να αλλάξεις τη CSS.
Δε γνωρίζω και πολλά από CSS, αλλά εγώ θα έκανα την εξής "ταρζανιά".
Η δομή που έχεις είναι σε μορφή:

Κώδικας: Επιλογή όλων

<ul>
    <li> Εικόνα 1</li>
    <li> Εικόνα 2</li>
    <li> Εικόνα 3</li>
</ul>
Δε γνωρίζω τι επιλογές τροποποίησης έχεις σε αυτή τη μορφή.
Εμένα που μου αρέσει να παίζω με τα Divs (μου φαίνεται πιο εύκολο) θα έκανα το εξής:

Κώδικας: Επιλογή όλων

<div class="eikona">
      <span class="thumb"> <a href=......> <img src=eikona1..../> </a> </span> Για την εικόνα
      <span class="link"> <a href=......>LINK 1 </a> </span> Για το σύνδεσμο
</div>
<div class="eikona">
      <span class="thumb"> <a href=......> <img src=eikona2..../> </a> </span> Για την εικόνα
      <span class="link"> <a href=......>LINK 2 </a> <span> Για το σύνδεσμο
</div>
<div class="eikona">
      <span class="thumb"> <a href=......> <img src=eikona3..../> </a> </span> Για την εικόνα
      <span class="link"> <a href=......>LINK 3 </a> </span> Για το σύνδεσμο
</div>
Απλώς φτιάχνεις τις ιδιότητες των class thumb στη CSS να μοιάζουν με αυτά των <li> και ορίζεις και τις ιδιότητες των class link.

Τα class eikona πρέπει να έχουν οπωσδήποτε ιδιότητα float:left;, για να "κολλάνε" το ένα δίπλα στο άλλο και να έχεις το αποτέλεσμα που θέλεις, ενώ θα πρέπει να προσθέσεις στο class thumb την ιδιότητα clear:both; ή clear:left; ώστε να κατεβαίνει κάτω από το thumb το link σου (δηλαδή να συμβαίνει το αντίστροφο από ό,τι με τα class "eikona").

Ελπίζω να βοήθησα. Σίγουρα θα υπάρχει πιο απλός τρόπος, αλλά δε γνωρίζω κάτι άλλο να σου πω, εκτός από αυτό. Ίσως κάποιος άλλος που δουλεύει τη CSS να σου δώσει καλύτερη απάντηση.

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 3 επισκέπτες