αρχάριος-απλο μενού-βοήθεια

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

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

Απάντηση
shortyjr
Δημοσιεύσεις: 66
Εγγραφή: 17 Φεβ 2010 01:49

αρχάριος-απλο μενού-βοήθεια

Δημοσίευση από shortyjr » 17 Φεβ 2010 01:58

Γειά σας παιδία. Τώρα αρχισα να ασχολούμε. Θέλω να φιάξω μια σελίδα.
Εχω ψάξει αρκετά στο internet άλλα δε βρίκα ακριβώς αυτο που θέλω γιαυτο.. βοήθεια.
Εχω σχεδιάσει στο photoshop το navigator menu της σελίδας δυο φορές. Απο πάνω πως να είναι χωρις να είναι πάνω το ποντίκι και απο κάτω πως θέλω να είναι με το ποντίκι πάνω(μονο διαφορετική γραμματοσειρά εχω βάλει)
Τώρα το θέμα ειναι πώς με CSS θα το κάνω να λειτουργεί να χωρίσω τα κουμπια στο σωστο σημείο κλπ. Νομίζω καταλαβατε. Για καποιον που ξέρει πρεπει να είναι πολύ απλο.


Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

αρχάριος-απλο μενού-βοήθεια

Δημοσίευση από Sermac » 18 Φεβ 2010 00:39

Εγώ θα πρωτοτυπήσω! Αντί για link, σε παραπέμπω στην σελίδα 386 του βιβλίου Designing With Web Standards, 2nd edition του Jeffrey Zeldman.
Εικόνα

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

αρχάριος-απλο μενού-βοήθεια

Δημοσίευση από Basilakis » 19 Φεβ 2010 15:51

Jeffrey Zeldman.

Ο Άνθρωπος είναι ΘΕΟΣ. ΘΕΟΣ

shortyjr
Δημοσιεύσεις: 66
Εγγραφή: 17 Φεβ 2010 01:49

αρχάριος-απλο μενού-βοήθεια

Δημοσίευση από shortyjr » 20 Φεβ 2010 22:21

Αυτος ειναι ο κώδικας για ενα μενου.
Εχω ενα πρόβήμα.
Χωρίς να έχω βάλει την εντολή active στον IE οταν πατάω σε ένα κουμπί μένει active ετσι οπως θέλω αλλα οταν πατάω στο φόντο φεύγει.
Αυτο δέν γίνετε στο google chrome που χρησιμοποιώ δηλαδη λειτουργει οπως θα έπρεπε παταω ενα κουμπί και δεν γίνετε τιποτα.

η εντολή active πια είναι?
έβαλα οπου .hover , .active γιατι θέλω να είναι το ίδιο αλλα δε λειτουργει.
έκανα δηλαδη αντιγραφεί ολα τα hover κ κάτω απο αυτα εκανα επικολληση και απλά άλλαξα το hover σε active.
Μπορει κάποιος να βοηθήσει.
Παραθέτο παρακάτω τον κώδικο χωρίς το active

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

* { margin: 0; padding: 0; } /* Reset stuff */


ul#menu {
	width: 900px; margin: 120px auto;
	list-style: none;
}

ul#menu li { display: inline; }
	
ul#menu li a {
	display: block; float: left; height: 60px;
	background-image: url(Menu.jpg); text-indent: -9999px;
}

	ul#menu li a.A {
		width: 149px; background-position: 0 0;	
	}
	
	ul#menu li a.B {
		width: 255px; background-position: -149px 0;	
	}
	
	ul#menu li a.C {
		width: 223px; background-position: -404px 0;	
	}
	
	ul#menu li a.D {
		width: 159px; background-position: -627px 0;	
	}
	
	ul#menu li a.E {
		width: 114px; background-position: -785px 0;	
	}
	
	
	ul#menu li a.A:hover, ul#menu li a.A:focus {
		background-position: 0 -60px;	
	}
	
	ul#menu li a.B:hover, ul#menu li a.B:focus {
		background-position: -149px -60px;	
	}
	
	ul#menu li a.C:hover, ul#menu li a.C:focus {
		background-position: -404px -60px;	
	}
	
	ul#menu li a.D:hover, ul#menu li a.D:focus {
		background-position: -627px -60px;	
	}
	
	ul#menu li a.E:hover, ul#menu li a.E:focus {
		background-position: -785px -60px;	
	}
	
a { outline: none; } 

επίσης θα ήθελα κάποιος να μου εξηγησει τι έιναι αυτος ο κώδικος που έχω γράψει. δηλαδη να μπορέσω να καταλάβω το A B C D E που έχω βάλει για πιο λόγο το έχω βάλει καθε φορά.

και στον παρακάτω κώδικα
τι είναι αυτα που εχουν διπλα παυλα
και καθε Α ποιο κάτω ως τι λειτουργεί

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

-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>


-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

-<link rel="stylesheet" href="styles.css" />
</head>

<body>
<ul id="menu">
  <li><a href="#Α" class="Α">Α</a></li>
     .
     .
     .
     .
</body>
</html>
[/code]

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

αρχάριος-απλο μενού-βοήθεια

Δημοσίευση από Sermac » 21 Φεβ 2010 18:53

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

#asdf	=	id selector &#40;μπορείς να το καλέσεις μόνο μία φορά μέσα στο ίδιο έγγραφο&#41;
.asdf	=	class selector &#40;μπορείς να το καλέσεις πολλές φορές μέσα στο ίδιο έγγραφο&#41;
&#58;asdf	=	pseudo-class &#40;προσθέτει εφέ σε tags ή selectors&#41;
Το .active είναι class, όχι pseudo-class όπως το :hover.

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

ul#menu li a.A&#58;hover &#123; ... &#125;
Αυτό, λοιπόν, σημαίνει:

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

ul#menu   =   <ul id="menu">
li        =   <li>
a.A       =   <a class="A">
a.A&#58;hover =   αν βρίσκεται ο δείκτης πάνω από το <a class="A">

Το menu που θες να φτιάξεις θα είναι κάπως έτσι:

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

<ul id="menu">
	<li><a href="" class="active">choice 1</a></li>
	<li><a href="">choice 2</a></li>
	<li><a href="">choice 3</a></li>
	<li><a href="">choice 4</a></li>
</ul>
Δηλαδή πρέπει να φροντίσεις ώστε κάποιο li να κουβαλάει τη κλάση active. Μπορείς να βάλεις και περισσότερες κλάσεις, χωρισμένες με κενό. Παράδειγμα:

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

<a href="" class="A active">choice 1</a>
Το stylesheet του παραπάνω menu μπορεί να είναι:

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

ul#menu &#123; ... &#125;

ul#menu li &#123; ... &#125;

ul#menu li&#58;hover &#123; ... &#125;

ul#menu li a &#123; ... &#125;

ul#menu li a&#58;hover &#123; ... &#125;

ul#menu li a.active &#123; ... &#125;

ul#menu li a.active&#58;hover &#123; ... &#125;

κ.λπ.
Επίσης, όταν κλικάρεις αυτό:

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

<a href="#Α">Κείμενο</a>
τότε θα ψάξει και θα σε μεταφέρει στο σημείο του εγγράφου όπου υπάρχει αυτό:

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

<a name="Α"></a>
ή αυτό:

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

... id="A" ...

Τέλος, οι παύλες που αναφέρεις, δεν θα 'πρεπε να βρίσκονται εκεί. Πιθανόν μπήκαν εξαιτίας copy-paste. Πολλοί editors ομαδοποιούν τα tags και για σύμβολο υπάρχει μια παύλα:

Εικόνα
Εικόνα

shortyjr
Δημοσιεύσεις: 66
Εγγραφή: 17 Φεβ 2010 01:49

αρχάριος-απλο μενού-βοήθεια

Δημοσίευση από shortyjr » 22 Φεβ 2010 00:17

φιλε προσπάθησα να το κάνω αλλα δε εγινε. μπορείς να μου γράψεις ακριβώς τι θέλει?

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

αρχάριος-απλο μενού-βοήθεια

Δημοσίευση από Sermac » 22 Φεβ 2010 19:23

Δείξε μας κάτι και θα βοηθήσω.
Εικόνα

shortyjr
Δημοσιεύσεις: 66
Εγγραφή: 17 Φεβ 2010 01:49

αρχάριος-απλο μενού-βοήθεια

Δημοσίευση από shortyjr » 23 Φεβ 2010 00:37

ο κώδικα είναι παραπάνω. να μου πεις απλα τι θέλει και που.

επισης με ποιο κώδικα τοποθετώ εκει που θέλω το navigation bar

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

αρχάριος-απλο μενού-βοήθεια

Δημοσίευση από Sermac » 23 Φεβ 2010 05:02

Χωρίς την εικόνα του background δεν γίνεται να βγάλω άκρη από τον κώδικά σου. Γι' αυτό σου επισυνάπτω ένα δικό μου παράδειγμα, με απλή html, ώστε να καταλάβεις την λογική τουλάχιστον.

Live demo εδώ.
Συνημμένα
menu-active-state.rar
Μενού με κατάσταση active και διαφορετικό φόντο στο hover.
(17.12 KiB) Μεταφορτώθηκε 324 φορές
Τελευταία επεξεργασία από το μέλος Sermac την 02 Αύγ 2010 05:45, έχει επεξεργασθεί 1 φορά συνολικά.
Εικόνα

shortyjr
Δημοσιεύσεις: 66
Εγγραφή: 17 Φεβ 2010 01:49

αρχάριος-απλο μενού-βοήθεια

Δημοσίευση από shortyjr » 23 Φεβ 2010 16:48

φιλε ευχαριστώ πολύ που ασχολήσε.
αλλα αυτο που εχεις γραμμενο δε μπορω να το κάνω σε εμενα.
πως μπορεις να βοηθήσεις?

Απάντηση

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

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

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