li με άλλα χρώματα...

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

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

Απάντηση
Άβαταρ μέλους
p_pan
Δημοσιεύσεις: 1248
Εγγραφή: 11 Φεβ 2007 20:45
Τοποθεσία: Άστεγος!

li με άλλα χρώματα...

Δημοσίευση από p_pan » 29 Νοέμ 2011 03:49

Καλησπέρα,
θέλω να φτιάξω μια λίστα που κάθε <li> να έχει άλλο χρώμα όταν κάποιος περνάει το ποντίκι από πάνω!

(Τα <li> είναι γύρω στα 10)


Ευχαριστώ!
Αγράματος...

Άβαταρ μέλους
nirvana
Δημοσιεύσεις: 241
Εγγραφή: 01 Σεπ 2005 18:28
Τοποθεσία: Αγ. Παρασκευή

li με άλλα χρώματα...

Δημοσίευση από nirvana » 29 Νοέμ 2011 10:03

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

<ul id="mylist">
  <li id="greenhover"><a href="#">ma</a></li>
  <li id="redhover"><a href="#">tsa</a></li>
  <li id="bluehover"><a href="#">blo</a></li>
  <li id="grayhover"><a href="#">kos</a></li>
</ul>
και το style:

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

#mylist &#123; color&#58; #000; &#125;
#mylist #greenhover a&#58;hover &#123; color&#58; #0f0; &#125;
#mylist #redhover a&#58;hover &#123; color&#58; #f00; &#125;
#mylist #bluehover a&#58;hover &#123; color&#58; #00f; &#125;
#mylist #grayhover a&#58;hover &#123; color&#58; #888; &#125;
Θελεις κάτι διαφορετικό από αυτό?

Άβαταρ μέλους
p_pan
Δημοσιεύσεις: 1248
Εγγραφή: 11 Φεβ 2007 20:45
Τοποθεσία: Άστεγος!

li με άλλα χρώματα...

Δημοσίευση από p_pan » 29 Νοέμ 2011 18:06

Επιασες σχεδον αυτο που θελω! :)
Αλλα θελω να παιξω με τα background colors!

δλδ με ενα σταθερο padding να τα κανω σαν tabs που ειναι ολα γκρι στην αρχη και οταν γινετε onmouseover στην λιστα το καθε tab να γινεται ενα διαφορετικο χρωμα...


ευχαριστω.
Αγράματος...

Άβαταρ μέλους
p_pan
Δημοσιεύσεις: 1248
Εγγραφή: 11 Φεβ 2007 20:45
Τοποθεσία: Άστεγος!

li με άλλα χρώματα...

Δημοσίευση από p_pan » 29 Νοέμ 2011 18:09

περνοντας σαν παραδιγμα αυτο http://css.maxdesign.com.au/listamatic/horizontal02.htm
Αγράματος...

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

li με άλλα χρώματα...

Δημοσίευση από apsuh0s » 29 Νοέμ 2011 21:35

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

<style>
	li&#123;float&#58;left;margin-right&#58;10px;list-style&#58;none;&#125;
	a&#123;padding&#58;5px 8px;background&#58;grey;color&#58;#fff;text-decoration&#58;none;&#125;
	.item1 a&#58;hover&#123;background&#58;#606;&#125;
	.item2 a&#58;hover&#123;background&#58;#399;&#125;
	.item3 a&#58;hover&#123;background&#58;#F0C;&#125;
	.item4 a&#58;hover&#123;background&#58;#C60;&#125;
</style>

<ul>
    <li class="item1"><a href="#">item1</a></li>
    <li class="item2"><a href="#">item2</a></li>
    <li class="item3"><a href="#">item3</a></li>
    <li class="item4"><a href="#">item4</a></li>
</ul>
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
p_pan
Δημοσιεύσεις: 1248
Εγγραφή: 11 Φεβ 2007 20:45
Τοποθεσία: Άστεγος!

li με άλλα χρώματα...

Δημοσίευση από p_pan » 30 Νοέμ 2011 13:11

πως μπορω να κανω το li ποιο συγκεκριμενο;


Δλδ εχω και αλλα li μεσα στην ιδια σελιδα και αν το βαλω τοσο γενικα θα μου χαλασει και τα αλλα! μπορω να το κανω με καποιο ονομα li;
Αγράματος...

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

li με άλλα χρώματα...

Δημοσίευση από apsuh0s » 30 Νοέμ 2011 14:34

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

<style>
	.colored-list li&#123;float&#58;left;margin-right&#58;10px;list-style&#58;none;&#125;
	.colored-list a&#123;padding&#58;5px 8px;background&#58;grey;color&#58;#fff;text-decoration&#58;none;display&#58;inline-block;&#125;
	.item1 a&#58;hover&#123;background&#58;#606;&#125;
	.item2 a&#58;hover&#123;background&#58;#399;&#125;
	.item3 a&#58;hover&#123;background&#58;#F0C;&#125;
	.item4 a&#58;hover&#123;background&#58;#C60;&#125;
</style>

<ul class="colored-list">
    <li class="item1"><a href="#">item1</a></li>
    <li class="item2"><a href="#">item2</a></li>
    <li class="item3"><a href="#">item3</a></li>
    <li class="item4"><a href="#">item4</a></li>
</ul>
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
p_pan
Δημοσιεύσεις: 1248
Εγγραφή: 11 Φεβ 2007 20:45
Τοποθεσία: Άστεγος!

li με άλλα χρώματα...

Δημοσίευση από p_pan » 30 Νοέμ 2011 14:40

Σε ευχαριστω πολυ!!! :)
Αγράματος...

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

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

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