CSS Sprite Menu

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

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

Απάντηση
andreaskor
Δημοσιεύσεις: 199
Εγγραφή: 03 Μάιος 2007 14:28
Επικοινωνία:

CSS Sprite Menu

Δημοσίευση από andreaskor » 27 Ιαν 2010 00:40

Είναι πολύ χρήσιμα και γρήγορα και είναι και της μόδας... Ψάχνωντας στο WEB βρήκα ένα tutorial στο θέμα αυτό και είπα να φτιάξω και εγώ ένα τέτοιο μενού δοκιμαστικά...

Για όσους δεν ξέρουν είναι τα μενού και γενικά borders, icons που είναι αποθηκευμένα όλα σε μια εικόνα για εξοικονόμηση μεγέθους αρχείων!!

Μου παρουσιάστηκε όμως ένα πρόβλημα. Ένα φαίνεται να τα έχω όλα σωστα, δεν δουλεύει και τόσο σωστα! Παραθέτω κώδικες μήπως μπορεί κάποιος να εντοπήσει τυχόν λάθη!

Θέλω να βγεί κάτι τέτοιο:
Εικόνα

Τα έχω όλα σε αυτή την εικόνα:
Εικόνα

O html κώδικας είναι αυτός (για οικονομία χώρου γράφω από το title και κάτω):

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

<title>CSS menu with same background image</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">

<ul id="topnav">
<li class="home"><a href="#" class="active">Home</a></li>
<li class="articles"><a href="#">Articles</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>

<div id="table1">
</div>
<div id="table2">
</div>

</div>
</body>
Και το CSS μου είναι αυτό:

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

body &#123;
	padding&#58; 0px;
	margin&#58; 0px;
	background&#58;#d1d1d1 url&#40;images/body.jpg&#41; repeat-x left top;
&#125;
#container &#123;
	width&#58; 495px;
	height&#58; 700px;
	margin&#58; 0px auto 0px auto;
&#125;

ul#topnav&#123;
	margin&#58;0px auto 0px auto;
	padding&#58;0px;
	list-style&#58;none;
&#125;

#topnav li&#123;
	display&#58;inline;
	text-indent&#58;-9999px;
	float&#58;left;
	margin&#58;0px 19px 0px 0px;	
&#125;

#topnav li a&#123;
	display&#58;block;
	width&#58;139px;
	height&#58;125px;
	background&#58;url&#40;images/background.png&#41; no-repeat;
	
&#125;

<!-- HOME BUTTON -->
#topnav li.home a&#123;
	background-position&#58;0 0px;
&#125;

#topnav li.home a&#58;hover&#123;
	background-position&#58;0 -127px;
&#125;

#topnav li.home a.active&#123;
	background-position&#58;0 -253px;
&#125;

<!-- ARTICLES BUTTON -->
#topnav li.articles a&#123;
	background-position&#58;-158px 0px;
&#125;

#topnav li.articles a&#58;hover&#123;
	background-position&#58;-158px -127px;
&#125;

#topnav li.articles a.active&#123;
	background-position&#58;-158px -253px;
&#125;

<!-- CONTACT BUTTON -->
#topnav li.contact a&#123;
	background-position&#58;-316px 0px;
&#125;

#topnav li.contact a&#58;hover&#123;
	background-position&#58;-316px -127px;
&#125;

#topnav li.contact a.active&#123;
	background-position&#58;-316px -253px;
&#125;
Και το αποτέλεσμα που παραγεται, το οποίο είναι λάθος είναι αυτό:
Sprite Menu

Ευχαριστώ πολύ!

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

CSS Sprite Menu

Δημοσίευση από dimsis » 27 Ιαν 2010 00:44

Με !important στο

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

#topnav li.home a&#58;hover&#123;
   background-position&#58;0 -127px !important;&#125;
κάτι γίνετε αλλά δεν λέει έτσι...

andreaskor
Δημοσιεύσεις: 199
Εγγραφή: 03 Μάιος 2007 14:28
Επικοινωνία:

CSS Sprite Menu

Δημοσίευση από andreaskor » 27 Ιαν 2010 01:23

Ναί έφτιαξε έτσι το hover του home...
Αλλά τα άλλα δυο είδες που συνεχίζουν να μην εχούν το εικονίδιο τους? Και πέρνουν του home..:/

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

CSS Sprite Menu

Δημοσίευση από fafos » 27 Ιαν 2010 03:35

an vgaleis ta sxolia apo to css tha doulepsei... auta eina sxolia gia html.. oxi gia css
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...


Απάντηση

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

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

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