λειτουργεί σωστά αυτό το menu?

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

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

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

λειτουργεί σωστά αυτό το menu?

Δημοσίευση από sibas » 15 Απρ 2010 15:59

παιδεύομαι με αυτό το menu, νομίζω (είμαι σίγουρος) ότι είναι buggy,
αλλά θέλω να δω αν έχει δυνατότητες να βελτιωθεί :hammer:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu display inline</title>

<style type="text/css" media="all">
#nav&#123;
clear&#58;both;
font-size&#58;98%;
line-height&#58;normal;
margin&#58;40px 0 0 0;
&#125;

ul &#123;
list-style&#58;none;
&#125;

#nav li&#123;
float&#58; left;
margin&#58; 0;
&#125;

#nav  a&#123;
color&#58; #000;
background&#58; url&#40;"right-btn.png"&#41; right top no-repeat;
text-decoration&#58; none;
padding&#58;0px 10px 0px 0px;
&#125;

#nav a span&#123;
background&#58; url&#40;"left-btn.png"&#41; left top no-repeat;
padding&#58;4px 0px 0px 10px;
&#125;

#nav a, #nav a span&#123;
display&#58;inline-block;
height&#58;30px;
text-align&#58;center;
overflow&#58;hidden
&#125;

/* Hide from IE5-Mac \*/
#nav a, #nav a span&#123;
float&#58; none;
&#125;
/* End hide */

#nav a&#58;hover&#123;
color&#58; #fff;
background&#58; url&#40;"right-btn.png"&#41; right top no-repeat;
padding&#58;8px 10px 0px 0px;
&#125;

#nav a&#58;hover span&#123;
background&#58; url&#40;"left-btn.png"&#41; left top no-repeat;
padding&#58;8px 0px 0px 10px;
&#125;

#nav a&#58;hover, #nav a&#58;hover span&#123;
margin&#58;-8px 0 0 0;
&#125;

</style>
</head>
<body>
 <ul id="nav">
  <li><a href="#"> <span>start</span> </a></li>
  <li><a href="#"> <span>next</span> </a></li>
  <li><a href="#"> <span>after</span> </a></li>
  <li><a href="#"> <span>somethink</span></a></li>
  <li><a href="#"> <span>another</span> </a></li>
  <li><a href="#"> <span>some blog</span> </a></li>
  <li><a href="#"> <span>contact</span> </a></li>
 </ul>
</body>
</html>
το βασικό πρόβλημα είναι ότι δεν έχει width και για αυτό το λόγο έχω βάλει
display:inline-block ωστόσο ξέρω ότι ο ie μέχρι και 7 δεν λειτουργεί σωστά αυτό το display.
αν μπορεί να το δει κάποιος σε mac, ie6 κλπ και να βάλει κανένα screenshot να δούμε αν
παίζει σωστά ή αν μπορεί να βελτιωθεί θα ήμουν πολύ happy :D
Συνημμένα
menu.zip
(1.65 KiB) Μεταφορτώθηκε 370 φορές

Απάντηση

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

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

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