CSS Μάθημα 6ο Links σε ολόκληρο div

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

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

Απάντηση
Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

CSS Μάθημα 6ο Links σε ολόκληρο div

Δημοσίευση από manolism » 08 Ιαν 2007 12:55

Μάθημα 6ο Links σε ολόκληρο div

Στο παρακάτω κεφάλαιο θα δούμε πως θα κάνουμε όλο το περιεχόμενο ενός div link καθώς επίσης και μία τεχνική για rollover images.

Έχουμε δημιουργήσει μία εικόνα στην οποία στο πάνω μέρος της θα είναι αυτό που θα φαίνεται στην σελίδα μας και στο κάτω μέρος της αυτό που θα φαίνεται όταν κάνουμε rollover.

Εικόνα

Προσθέτουμε στο css αρχείο μας το παρακάτω:

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

div.music a{
background:url(music.gif) 0px 0px;
float: left;
width:150px;
text-indent: -5000px; 
height:50px;
margin-left:20px;
margin-top:20px;
text-decoration:none;
border: 1px solid #fff;
}
 
div.music a:hover {
background:url(music.gif)  0px 50px;
border: 1px solid #0099FF;
}
Το μηδέν στο background property ορίζει από ποιο pixel θα φαίνεται η εικόνα μας, το text-indent θα απομακρύνει το text-link που έχουμε χρησιμοποιήσει ώστε να μην ειναι ορατό και το border: 1px solid #fff θα βάλει γύρω από το div ένα περίγραμμα άσπρο 1px.
Όταν γίνεται rollover θα δείχνει την εικόνα από το 50 px και κάτω και το border θα αλλάζει χρώμα

Και στην σελίδα μας προσθέτουμε τον παρακάω κώδιακα στο σημείο που θέλουμε να εμφανίζεται το div μας

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

<div class="music"><a title="Music" href='#'>Music</a></div>
Live demo

Ολοκληρωμένος css κώδικας:

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

div.music a&#123;
background&#58;url&#40;music.gif&#41; 0px 0px;
float&#58; left;
width&#58;150px;
text-indent&#58; -5000px; 
height&#58;50px;
margin-left&#58;20px;
margin-top&#58;20px;
text-decoration&#58;none;
border&#58; 1px solid #fff;
&#125;
 
div.music a&#58;hover &#123;
background&#58;url&#40;music.gif&#41;  0px 50px;
border&#58; 1px solid #0099FF;
&#125;

 div.games a&#123;
background&#58;url&#40;games.gif&#41; 0px 0px;
float&#58; left;
width&#58;150px;
text-indent&#58; -5000px; 
height&#58;50px;
margin-left&#58;20px;
margin-top&#58;20px;
text-decoration&#58;none;
border&#58; 1px solid #fff;
&#125;
 
 div.games a&#58;hover &#123;
background&#58;url&#40;games.gif&#41;  0px 50px;
border&#58; 1px solid #0099FF;
&#125;

 div.photos a&#123;
background&#58;url&#40;photos.gif&#41; 0px 0px;
float&#58; left;
width&#58;150px;
text-indent&#58; -5000px; 
height&#58;50px;
margin-left&#58;20px;
margin-top&#58;20px;
text-decoration&#58;none;
border&#58; 1px solid #fff;
&#125;
 
 div.photos a&#58;hover &#123;
background&#58;url&#40;photos.gif&#41;  0px 50px;
border&#58; 1px solid #0099FF;
&#125;

 div.photoshop a&#123;
background&#58;url&#40;photoshop.gif&#41; 0px 0px;
float&#58; left;
width&#58;150px;
text-indent&#58; -5000px; 
height&#58;50px;
margin-left&#58;20px;
margin-top&#58;13px;
text-decoration&#58;none;
border&#58; 1px solid #fff;
&#125;
 
 div.photoshop a&#58;hover &#123;
background&#58;url&#40;photoshop.gif&#41;  0px 50px;
border&#58; 1px solid #0099FF;
&#125;

 div.fonts a&#123;
background&#58;url&#40;fonts.gif&#41; 0px 0px;
float&#58; left;
width&#58;150px;
text-indent&#58; -5000px; 
height&#58;50px;
margin-left&#58;20px;
margin-top&#58;13px;
text-decoration&#58;none;
border&#58; 1px solid #fff;
&#125;
 
 div.fonts a&#58;hover &#123;
background&#58;url&#40;fonts.gif&#41;  0px 50px;
border&#58; 1px solid #0099FF;
&#125;

 div.firefox a&#123;
background&#58;url&#40;firefox.gif&#41; 0px 0px;
float&#58; left;
width&#58;150px;
text-indent&#58; -5000px; 
height&#58;50px;
margin-left&#58;20px;
margin-top&#58;13px;
text-decoration&#58;none;
border&#58; 1px solid #fff;
&#125;
 
 div.firefox a&#58;hover &#123;
background&#58;url&#40;firefox.gif&#41;  0px 50px;
border&#58; 1px solid #0099FF;
&#125;

 div.dreamweaver a&#123;
background&#58;url&#40;dreamweaver.gif&#41; 0px 0px;
float&#58; left;
width&#58;150px;
text-indent&#58; -5000px; 
height&#58;50px;
margin-left&#58;20px;
margin-top&#58;13px;
text-decoration&#58;none;
border&#58; 1px solid #fff;
&#125;
 
 div.dreamweaver a&#58;hover &#123;
background&#58;url&#40;dreamweaver.gif&#41;  0px 50px;
border&#58; 1px solid #0099FF;
&#125;

 div.chat a&#123;
background&#58;url&#40;chat.gif&#41; 0px 0px;
float&#58; left;
width&#58;150px;
text-indent&#58; -5000px; 
height&#58;50px;
margin-left&#58;20px;
margin-top&#58;13px;
text-decoration&#58;none;
border&#58; 1px solid #fff;
&#125;
 
 div.chat a&#58;hover &#123;
background&#58;url&#40;chat.gif&#41;  0px 50px;
border&#58; 1px solid #0099FF;
&#125;

 div.email a&#123;
background&#58;url&#40;email.gif&#41; 0px 0px;
float&#58; left;
width&#58;150px;
text-indent&#58; -5000px; 
height&#58;50px;
margin-left&#58;20px;
margin-top&#58;13px;
text-decoration&#58;none;
border&#58; 1px solid #fff;
&#125;
 
 div.email a&#58;hover &#123;
background&#58;url&#40;email.gif&#41;  0px 50px;
border&#58; 1px solid #0099FF;
&#125;
Ολοκληρωμένος html κώδικας:

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

<div class="music"><a title="Music" href='#'>Music</a></div>
<div class="games"><a title="Games" href='#'>Games</a></div>
<div class="photos"><a title="Photos" href='#'>Photos</a></div>
<div class="photoshop"><a title="Photoshop" href='#'>Photoshop</a></div>
<div class="fonts"><a title="Fonts" href='#'>Fonts</a></div>
<div class="firefox"><a title="Firefox" href='#'>Firefox</a></div>
<div class="dreamweaver"><a title="Dreamweaver" href='#'>Dreamweaver</a></div>
<div class="chat"><a title="Chat" href='#'>Chat</a></div>
<div class="email"><a title="Email" href='#'>Email</a></div>

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

CSS Μάθημα 6ο Links σε ολόκληρο div

Δημοσίευση από xmavidis » 08 Ιαν 2007 13:15

Πολύ ωραία βοηθήματα lunar :clap: :clap: :clap:
I want to know God’s thoughts; the rest are details.
Albert Einstein

Άβαταρ μέλους
medred
Δημοσιεύσεις: 33
Εγγραφή: 18 Μάιος 2007 14:29
Τοποθεσία: Rethymno
Επικοινωνία:

CSS Μάθημα 6ο Links σε ολόκληρο div

Δημοσίευση από medred » 04 Σεπ 2007 12:30

Έχω μια απορία μήπως κάποιος μπορει να βοηθήσει.

Λόγο του text-indent: -5000px; υποθέτω δηλαδή, στον firefox
εμφανίζει μια μπάρα που κυκλώνει το div και πάει μέχρι πολύ αριστερά.
Όλα αυτά φυσικά όταν πατήσουμε σε ολόκληρο το link.

Μήπως γνωρίζει κανείς πως φεύγει αυτό το περίγραμμα?

Για να καταλάβει κάποιος μπορεί στο livedemo να πατήσει στις
εικονίτσες...στο music πχ...

thanks :pint:

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

CSS Μάθημα 6ο Links σε ολόκληρο div

Δημοσίευση από sibas » 04 Σεπ 2007 14:12

outline:none; στο κεντρικό a

Άβαταρ μέλους
medred
Δημοσιεύσεις: 33
Εγγραφή: 18 Μάιος 2007 14:29
Τοποθεσία: Rethymno
Επικοινωνία:

CSS Μάθημα 6ο Links σε ολόκληρο div

Δημοσίευση από medred » 04 Σεπ 2007 14:35

Φίλε μου χίλια ευχαριστώ :pint: :pint: :pint:

stefanos4
Δημοσιεύσεις: 71
Εγγραφή: 10 Μάιος 2007 13:57

CSS Μάθημα 6ο Links σε ολόκληρο div

Δημοσίευση από stefanos4 » 09 Σεπ 2007 14:13

Πολυ καλη δουλεια!
Εικόνα

adworks
Δημοσιεύσεις: 5
Εγγραφή: 03 Μάιος 2007 09:52

CSS Μάθημα 6ο Links σε ολόκληρο div

Δημοσίευση από adworks » 24 Φεβ 2008 14:38

Γεια χαρα. Πολυ χρησιμα τα μαθηματα σου. Μπορεις να μου λυσεις μια απορία? Πώς μπορώ να κάνω ενα Link, που ννα μπορει να οδηγεί σε μία τυχαία σειρά? π.χ. εχω ενα link, και θελω πατώντας το να βγαίνουν σε τυχαια σειρά κάποια τραπουλόχαρτα. Ευχαριστώ εκ των προτέρων!!!
Υ. Γ. Αν μπορείς να μου το εξηγήσεις χωρίς κώδικα :wink:
bill

Άβαταρ μέλους
zekia
Δημοσιεύσεις: 146
Εγγραφή: 04 Μάιος 2004 16:38
Τοποθεσία: thessaloniki

CSS Μάθημα 6ο Links σε ολόκληρο div

Δημοσίευση από zekia » 30 Μάιος 2008 00:34

οταν γραφουμε div.music a εννοούμε πως ορίζουμε ένα συγκεκριμένο τυπο ή υποκατηγορια link? θελω να πω θα μπορούσαμε να γράψουμε .music a? ο τρόπος με τον οποίο ορίζουμε με μπερδεύει λιγο

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

CSS Μάθημα 6ο Links σε ολόκληρο div

Δημοσίευση από manolism » 30 Μάιος 2008 11:32

Δεν είμαι σίγουρος άλλα μπορεί και να δουλεύει όπως το έγραψες.

Αν το δοκιμάσεις και το αλλάξεις θα δεις τα αποτελέσματα οπότε μας ενημερώνεις κιόλας.

Άβαταρ μέλους
tsiger
Honorary Member
Δημοσιεύσεις: 1431
Εγγραφή: 11 Νοέμ 2002 13:40
Τοποθεσία: Thessaloniki Observation Center
Επικοινωνία:

CSS Μάθημα 6ο Links σε ολόκληρο div

Δημοσίευση από tsiger » 30 Μάιος 2008 23:37

Αντι για ενα ξεχωριστο DIV για καθε επιλογη γιατι δε χρησιμοποιεις ενα unordered list; (απορια).

antonis_ath
Δημοσιεύσεις: 113
Εγγραφή: 22 Μαρ 2007 07:56

CSS Μάθημα 6ο Links σε ολόκληρο div

Δημοσίευση από antonis_ath » 31 Μάιος 2008 17:51

Πολύ καλό!! :respect:

Άβαταρ μέλους
fusion
Δημοσιεύσεις: 146
Εγγραφή: 23 Αύγ 2008 21:34
Τοποθεσία: Λάρισα
Επικοινωνία:

CSS Μάθημα 6ο Links σε ολόκληρο div

Δημοσίευση από fusion » 24 Αύγ 2008 02:18

Η τεχνικη της μετατοπισης του εικονας για rollover effect ειναι πολυ δυνατη. Την πετυχα πρωτη φορα στο webdesignwall.com και με εντυπωσιασε.
Εγω την δουλεψα με span και transparent png με σκοπο να πεταει εικονιδια (π.χ. zoom icon) πανω απο εικονες.
Συγχαρητηρια για το πολυ κατανοητο tutorial.

Άβαταρ μέλους
Aflex
Δημοσιεύσεις: 1769
Εγγραφή: 16 Δεκ 2007 16:40

CSS Μάθημα 6ο Links σε ολόκληρο div

Δημοσίευση από Aflex » 28 Αύγ 2008 22:10

Πολύ καλό μάθημα Lunar για άλλη μια φορά!! :respect:

Άβαταρ μέλους
Snowball
Δημοσιεύσεις: 80
Εγγραφή: 29 Μαρ 2009 22:29
Τοποθεσία: Αθήνα

CSS Μάθημα 6ο Links σε ολόκληρο div

Δημοσίευση από Snowball » 26 Νοέμ 2010 12:29

Ενημερωτικά, δεν υπάρχουν τα εικονίδια για photoshop,fonts,firefox,chat,email και dreamweaver, στο zipped file με τα αρχεία του tutorial...

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

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

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