CSS Μάθημα 2ο Φτιάχνοντας το μενού

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

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

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

CSS Μάθημα 2ο Φτιάχνοντας το μενού

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

Μάθημα 2ο Φτιάχνοντας το μενού

Στο μάθημα αυτό θα δούμε πως θα στήσουμε το μενού με τις επιλογές μέσα στο div navigation. Πρώτα θα γράψουμε στο css αρχείο το παρακάτω:

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

#menu {
        margin: 0;
        padding: 0;
        list-style-type: none;
}
Σε αυτό το div δεν έχουμε κανένα εσωτερικό ή εξωτερικό περιθώριο καθώς επίσης λέμε ότι η οριζόντια λίστα που θα χρησιμοποιήσουμε δεν θα έχει κανένα τύπο.

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

#menu li {
  display: inline;
  padding-right: 15px;
  padding-left: 17px;
}
Εδώ με την επιλογή li ορίζουμε ότι η λίστα μας θα είναι οριζόντια καθώς επίσης και ότι οι επιλογές μεταξύ τους θα έχουν απόσταση αριστερά 17px και δεξιά 15px.

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

#menu a:link{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#ffffff;
text-decoration: none; 
} 
Οι επιλογές εδώ έχουν να κάνουν πως θα εμφανίζονται τα links στο μενού δηλαδή γραμματοσειρά, μέγεθος, στυλ, χρώμα και το text-decoration ορίζει αν θα υπάρχει κάποια υπογράμμιση ή όχι.

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

#menu a:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#0099FF;
text-decoration:underline; 
}
Οι επιλογές εδώ έχουν να κάνουν πως θα εμφανίζονται τα hover των links στο μενού δηλαδή όταν περνάει το ποντίκι από πάνω και με τις επιλογές που δίνουμε του λέμε να αλλάζει το χρώμα και να υπογραμμίζεται.

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

#menu a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:# FFFFCC;
text-decoration: none; 
} 
Οι επιλογές εδώ έχουν να κάνουν πως θα εμφανίζονται τα links που έχουμε επισκεφτεί στο μενού.

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

#menu a:active {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:# 99CCFF;
text-decoration: none; 
} 
Οι επιλογές εδώ έχουν να κάνουν πως θα εμφανίζονται τα links που είναι ενεργά στο μενού.

Στην συνέχεια θα προσθέσουμε το παρακάτω μέσα στο div navigation

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

<ul id="menu"> 
<li><a href=" #"  title="Home">Home</a></li> 
<li><a href=" #"  title="Portfolio">Portfolio</a></li> 
<li><a href=" #"  title="Gallery">Gallery</a></li> 
<li><a href=" #"  title="Tutorials">Tutorials</a></li> 
<li><a href=" #"title="Donate">Donate</a></li>
<li><a href=" #"  title="Forum">Forum</a></li>
<li><a href=" #"  title="About">About</a></li>
<li><a href=" #"  title="Admin panel">Admin panel</a></li>   
<li><a href=" #"  title="Contact">Contact</a></li>      
</ul>
Επίσης εδώ έχουμε χρησιμοποιήσει και το:

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

title="Home"

το οποίο δίνει τίτλο στην επιλογή μας ώστε να είναι πιο φιλικό στις μηχανές αναζήτησης καθώς επίσης και όταν πηγαίνει το ποντίκι μας πάνω του να βγάζει το γνωστό κίτρινο ταμπελάκι.
Live demo

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

CSS Μάθημα 2ο Φτιάχνοντας το μενού

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

Είναι ωραίο να κάνεις float: left τα "li" και display: block τα "a" έτσι ώστε η ενεργή (clickable) επιφάνεια του link να είναι πλήρης, και να μην περιορίζεται μόνο στο λεκτικό.

Άβαταρ μέλους
Risk
Δημοσιεύσεις: 319
Εγγραφή: 02 Μάιος 2006 01:16
Τοποθεσία: Κάπου εδώ γύρω...
Επικοινωνία:

CSS Μάθημα 2ο Φτιάχνοντας το μενού

Δημοσίευση από Risk » 09 Ιαν 2007 00:22

Κατ' αρχάς θέλω να σου πώ πως τα tutorial σου είναι πολύ ωραία και πιστεύω πως θα βοηθήσουν πολλούς, μέσα σε αυτούς και εγώ!!! Thanks!

Θέλω να σε ρωτήσω τι εννοείς λέγοντας:
η οριζόντια λίστα που θα χρησιμοποιήσουμε δεν θα έχει κανένα τύπο.
Σε τι τύπο αναφέρεσαι???
Εικόνα

Άβαταρ μέλους
greekbytes
WebDev Moderator
Δημοσιεύσεις: 2438
Εγγραφή: 15 Νοέμ 2002 15:42
Τοποθεσία: Αθήνα
Επικοινωνία:

CSS Μάθημα 2ο Φτιάχνοντας το μενού

Δημοσίευση από greekbytes » 09 Ιαν 2007 00:30

Εννοεί ότι δε θα έχει μπροστά κανένα bullet ή αρίθμιση όπως έχει μία λίστα <ul> ή <ol> ... Δες αυτό το παράδειγμα για να καταλάβεις τι κάνει το list-style-type: http://www.w3schools.com/css/tryit.asp? ... style-type )

Συγχαρητήρια για το πλήρες tutorial σου lunar!!!

Άβαταρ μέλους
Risk
Δημοσιεύσεις: 319
Εγγραφή: 02 Μάιος 2006 01:16
Τοποθεσία: Κάπου εδώ γύρω...
Επικοινωνία:

CSS Μάθημα 2ο Φτιάχνοντας το μενού

Δημοσίευση από Risk » 09 Ιαν 2007 00:34

ΟΚ! Τώρα κατάλαβα!
Thanks!
Εικόνα

Άβαταρ μέλους
kallileo
Δημοσιεύσεις: 66
Εγγραφή: 05 Μαρ 2007 13:05

CSS Μάθημα 2ο Φτιάχνοντας το μενού

Δημοσίευση από kallileo » 20 Απρ 2007 10:13

Γιατι σε μενα δεν παιζει σωστα το μενου στον IE6.0 ενω στο Opera τρεχει οπως θα επρεπε????

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

CSS Μάθημα 2ο Φτιάχνοντας το μενού

Δημοσίευση από manolism » 20 Απρ 2007 13:04

Τι λάθος σου παρουσιάζει;

Κανονικά θα έπρεπε να παίζει σωστά.

Άβαταρ μέλους
quixote
Δημοσιεύσεις: 2
Εγγραφή: 09 Νοέμ 2007 14:17
Τοποθεσία: Πάτρα

CSS Μάθημα 2ο Φτιάχνοντας το μενού

Δημοσίευση από quixote » 12 Νοέμ 2007 11:34

Όταν επιλέξω έστω κι ένα link, όλα γίνονται αυτόματα visited και αλλάζουν χρώμα. Επιπλέον στην συνέχεια κάνοντας hover πάνω από οποιοδήποτε link του δεν το υπογραμμίζει.. Χρησιμοποιώ firefox... Πρέπει να προστεθεί κάτι στο css??
Q for Quixote

Άβαταρ μέλους
greekbytes
WebDev Moderator
Δημοσιεύσεις: 2438
Εγγραφή: 15 Νοέμ 2002 15:42
Τοποθεσία: Αθήνα
Επικοινωνία:

CSS Μάθημα 2ο Φτιάχνοντας το μενού

Δημοσίευση από greekbytes » 12 Νοέμ 2007 11:44

Ο λόγος είναι ότι όλα τα links στο παράδειγμα "δείχνουν"στο "#". Αν στη θέση του βάλεις πραγματικές σελίδες, θα έχεις σωστό αποτέλεσμα.

Πχ. το πρώτο link να δείχνει στην index.html σελίδα κ.ο.κ.

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

<li><a href="index.html"  title="Home">Home</a></li> 

Άβαταρ μέλους
quixote
Δημοσιεύσεις: 2
Εγγραφή: 09 Νοέμ 2007 14:17
Τοποθεσία: Πάτρα

CSS Μάθημα 2ο Φτιάχνοντας το μενού

Δημοσίευση από quixote » 12 Νοέμ 2007 11:48

Ευχαριστώ για την άμεση απάντηση.
Το δοκίμασα αλλά πάλι το ίδιο... Μήπως είναι κάποια ρύθμιση του Firefox..? Να σημειώσω ότι κάθε φορά κάνω <Clear private Data> πριν κάνω reload τη σελίδα.
Q for Quixote

Άβαταρ μέλους
MegasmorF
Honorary Member
Δημοσιεύσεις: 1154
Εγγραφή: 07 Απρ 2005 20:05
Τοποθεσία: ./Root
Επικοινωνία:

CSS Μάθημα 2ο Φτιάχνοντας το μενού

Δημοσίευση από MegasmorF » 04 Αύγ 2008 04:28

Τι γίνετε όμως αν εγώ έχω ένα buttonbar σε κομμάτια δηλαδή άλλο κουμπί το home άλλο το contact κ.τ.λ
πώς θα τα βάλω δίπλα δίπλα
Πες μου τη λέξη σ αγαπώ σε σένα να πιστέψω...και γω μια ολοκληρη ζωή μπορώ να καταστρεψω...

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

CSS Μάθημα 2ο Φτιάχνοντας το μενού

Δημοσίευση από patriot » 04 Αύγ 2008 06:27

Δηλ αν έχεις π.χ μια 5αδα links έτσι:

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

<a href="url1">link 1</a>
<a href="url2">link 2</a>
<a href="url3">link 3</a>
<a href="url4">link 4</a>
<a href="url5">link 5</a>
ρωτάς πως θα τα κάνεις έτσι:

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

<a href="url1">link 1</a><a href="url2">link 2</a><a href="url3">link 3</a><a href="url4">link 4</a><a href="url5">link 5</a>
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
loxy
Δημοσιεύσεις: 208
Εγγραφή: 17 Ιούλ 2007 01:18

CSS Μάθημα 2ο Φτιάχνοντας το μενού

Δημοσίευση από loxy » 03 Οκτ 2008 00:07

Μαθαινω ( ή τουλαχιστον προσπαθω :D ) και γω απο το αναλυτικο tutorial ( :wink: ) ,
για να ξεκιναει σιγα σιγα η εργασια για τη σχολη ,και επειδη ακομα πειραματιζομαι ( βαζοντας
εικονες οχι απαραιτητα καταλληλες σε μεγεθος ), εχω μια δυσκολια...

Εχει μπει το φοντο του navigation , αλλα οι τιτλοι του μενου εμφανιζονται ελαφρως πιο κατω.
Πειραξα καποια padding αλλα δεν εβγαλα ακρη, καμια ιδεα ;

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

CSS Μάθημα 2ο Φτιάχνοντας το μενού

Δημοσίευση από manolism » 03 Οκτ 2008 00:15

Φρόντισε όσο padding προσθέτεις τόσο να αφαιρείς από το ύψος του navigation.

Κάποια στιγμή θα έρθουν στα ίσια τους.

Άβαταρ μέλους
loxy
Δημοσιεύσεις: 208
Εγγραφή: 17 Ιούλ 2007 01:18

CSS Μάθημα 2ο Φτιάχνοντας το μενού

Δημοσίευση από loxy » 03 Οκτ 2008 00:30

Το padding του div menu αλλαζουμε , αν δεν κανω λαθος ;

Απάντηση

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

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

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