Διαγώνιο menu

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

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

Απάντηση
argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Διαγώνιο menu

Δημοσίευση από argate7 » 13 Οκτ 2012 01:53

Καλησπέρα,

Προσπαθώ να φτιάξω ένα διαγώνιο μενού που να είναι κεντραρισμένο στο πάνω μέρος της σελίδας και έχω φάει αρκετές ώρες χωρίς αποτέλεσμα.

Μπορεί κάποιος να με βοηθήσει?? Θέλω να το κάνω μόνο με css και όχι με photoshop ή τίποτα τέτοιο.

Κάτι τέτοιο θέλω να κάνω... http://mirificampress.com/permalink/dia ... v_rollover

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

Διαγώνιο menu

Δημοσίευση από apsuh0s » 13 Οκτ 2012 13:05

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* &#123; margin&#58; 0; padding&#58; 0; &#125;
#header &#123; width&#58; 940px; margin&#58; 0 auto; border-top&#58; 5px solid #000; &#125;
ul &#123; list-style&#58; none; margin&#58; 50px 0 0 50px; &#125;
li &#123; float&#58; left;
transform&#58; rotate&#40;45deg&#41;;
-ms-transform&#58; rotate&#40;45deg&#41;; 
-webkit-transform&#58; rotate&#40;45deg&#41;;
-o-transform&#58; rotate&#40;45deg&#41;;
-moz-transform&#58; rotate&#40;45deg&#41;; 

/*transform&#58; skew&#40;30deg,20deg&#41;;
-ms-transform&#58; skew&#40;30deg,20deg&#41;; 
-webkit-transform&#58; skew&#40;30deg,20deg&#41;; 
-o-transform&#58; skew&#40;30deg,20deg&#41;; 
-moz-transform&#58; skew&#40;30deg,20deg&#41;; 
*/

&#125;
li a &#123; width&#58; 150px; color&#58; #fff;display&#58; inline-block; text-decoration&#58; none; text-align&#58; center; padding&#58; 10px 0; &#125;
.home &#123; background&#58; #033; &#125;
.about &#123; background&#58; #903; margin-left&#58; -60px; &#125;
.downloads &#123; background&#58; #F00;margin-left&#58; -60px; &#125;
.contact &#123; background&#58; #333; margin-left&#58; -60px;&#125;
	
</style>
</head>

<body>
<div id="header">
    <ul class="nav">
        <li class="home"><a href="#">Home</a></li>
        <li class="about"><a href="#">About Us</a></li>
        <li class="downloads"><a href="#">Downloads</a></li>
        <li class="contact"><a href="#">Contact Us</a></li>
    </ul>
</div>
</body>
</html>

βάλε τις κατάλληλες τιμές στα rotate και skew
.ninja { color: black; visibility: hidden !important; }

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Διαγώνιο menu

Δημοσίευση από argate7 » 13 Οκτ 2012 14:13

Ευχαριστώ για την απάντηση σου φίλε μου.

Κάτι τέτοιο έχω φτιάξει και γω. Το θέμα μου είναι αλλού. Θέλω να κόβεται και πάνω και κάτω το "κουτί" και να φαίνεται μία διαγώνιος αλλά κοφτή.

Όπως και στο link που έδωσα παραπάνω.

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

Διαγώνιο menu

Δημοσίευση από apsuh0s » 13 Οκτ 2012 14:50

Αν κατάλαβα καλά, θα πρέπει να κάνεις skew το container του anchor και rotate το ίδιο το anchor.

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


* &#123; margin&#58; 0; padding&#58; 0; &#125; 
#header &#123; width&#58; 940px; margin&#58; 0 auto; background&#58; #CCC; height&#58; 500px; &#125; 
ul &#123; list-style&#58; none; margin-left&#58; 50px; &#125; 
li &#123; float&#58; left; width&#58; 85px; height&#58; 150px; /* paizei rolo sto margin-left tou ul */ -webkit-transform&#58; skew&#40;20deg,0deg&#41;; margin-right&#58; 20px; &#125; 
li a &#123;  color&#58; #fff;display&#58; inline-block; text-decoration&#58; none; -webkit-transform&#58; rotate&#40;90deg&#41;; 
position&#58; relative; left&#58; 20px; top&#58; 30px; /*prosarmozeis&#40;?&#41; &#125; 

.home &#123; background&#58; #033; &#125; 
.about &#123; background&#58; #903; &#125; 
.downloads &#123; background&#58; #F00; &#125; 
.contact &#123; background&#58; #333; &#125; 

.ninja { color: black; visibility: hidden !important; }

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Διαγώνιο menu

Δημοσίευση από argate7 » 13 Οκτ 2012 14:55

Ναι, αυτό ακριβώς!! Νά'σαι καλά φίλε μου!!

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

Διαγώνιο menu

Δημοσίευση από apsuh0s » 13 Οκτ 2012 15:20

Καλύτερα έτσι ώστε όλο το anchor να είναι link. Το έγραψα πιο καθαρά. Προσάρμοσέ το όπως ακριβώς θέλεις εσύ. Πρόσθεσα και κάποια unsemantic spans στο markup καθώς και ένα nav. Τσέκαρε το.

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

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 
<style> 

*                          &#123; margin&#58; 0; padding&#58; 0; &#125;
.clearfix                  &#123; *zoom&#58; 1; &#125;
.clearfix&#58;before,
.clearfix&#58;after            &#123; display&#58; table; content&#58; ""; &#125;
.clearfix&#58;after            &#123; clear&#58; both; &#125;

#header  &#123; width&#58; 940px; margin&#58; 50px auto 0; &#125;
nav &#123; background&#58; grey; &#125;
ul       &#123; list-style&#58; none; margin-left&#58; 61px; /* to prosarmozeis */ &#125;
li       &#123; margin-right&#58; 20px; float&#58; left; 

	       -webkit-transform&#58; skew&#40;20deg,0&#41;;
	          -moz-transform&#58; skew&#40;20deg,0&#41;;
	            -o-transform&#58; skew&#40;20deg,0&#41;;
	               transform&#58; skew&#40;20deg,0&#41;;		
&#125;
li a       &#123; text-decoration&#58; none; color&#58; white; width&#58; 100px; display&#58; block; text-align&#58; center; padding&#58; 10px 0 300px 0;  &#125;

span       &#123; display&#58; inline-block; position&#58; relative; top&#58; 40px; /* to prosarmozeis to kathe child &#40;den ksero giati to topothetei etsi&#41;*/ font-size&#58; 20px;

	         -webkit-transform&#58; rotate&#40;90deg&#41;;
	            -moz-transform&#58; rotate&#40;90deg&#41;;
	              -o-transform&#58; rotate&#40;90deg&#41;;
	                 transform&#58; rotate&#40;90deg&#41;;
&#125;

li&#58;nth-child&#40;1&#41; a &#123; background&#58; green; &#125;
li&#58;nth-child&#40;2&#41; a &#123; background&#58; red; &#125;
li&#58;nth-child&#40;3&#41; a &#123; background&#58; purple; &#125;
li&#58;nth-child&#40;4&#41; a &#123; background&#58; blue; &#125;
li a&#58;hover        &#123; background&#58; black; &#125;

    
</style> 
</head> 

<body> 
<div id="header"> 
	<nav>
        <ul class="nav clearfix"> 
            <li class="home"><a href="#"><span>Home</span></a></li> 
            <li class="about"><a href="#"><span>About Us</span></a></li> 
            <li class="downloads"><a href="#"><span>Downloads</span></a></li> 
            <li class="contact"><a href="#"><span>Contact Us</span></a></li> 
    </ul> 
    </nav>
</div> 
</body> 
</html> 
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

Διαγώνιο menu

Δημοσίευση από dva_dev » 13 Οκτ 2012 15:23

Για δοκίμασε αυτές τις μικρές αλλαγές

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* &#123; margin&#58; 0; padding&#58; 0; &#125;
#header &#123;
width&#58; 940px;
margin&#58; 0 auto;
border-top&#58; 5px solid #000;
height&#58; 77px;
overflow&#58; hidden;
&#125;
ul &#123; list-style&#58; none; margin&#58; 50px 0 0 50px; &#125;
li &#123; float&#58; left;
position&#58; relative;
top&#58; -32px;
transform&#58; rotate&#40;45deg&#41;;
-ms-transform&#58; rotate&#40;45deg&#41;;
-webkit-transform&#58; rotate&#40;45deg&#41;;
-o-transform&#58; rotate&#40;45deg&#41;;
-moz-transform&#58; rotate&#40;45deg&#41;;

/*transform&#58; skew&#40;30deg,20deg&#41;;
-ms-transform&#58; skew&#40;30deg,20deg&#41;;
-webkit-transform&#58; skew&#40;30deg,20deg&#41;;
-o-transform&#58; skew&#40;30deg,20deg&#41;;
-moz-transform&#58; skew&#40;30deg,20deg&#41;;
*/

&#125;
li a &#123; width&#58; 150px; color&#58; #fff;display&#58; inline-block; text-decoration&#58; none; text-align&#58; center; padding&#58; 10px 0; &#125;
.home &#123; background&#58; #033; &#125;
.about &#123; background&#58; #903; margin-left&#58; -60px; &#125;
.downloads &#123; background&#58; #F00;margin-left&#58; -60px; &#125;
.contact &#123; background&#58; #333; margin-left&#58; -60px;&#125;
   
</style>
</head>

<body>
<div id="header">
	<ul class="nav">
		<li class="home"><a href="#">Home</a></li>
		<li class="about"><a href="#">About Us</a></li>
		<li class="downloads"><a href="#">Downloads</a></li>
		<li class="contact"><a href="#">Contact Us</a></li>
	</ul>
</div>
</body>
</html>

Cretan1986
Δημοσιεύσεις: 79
Εγγραφή: 14 Απρ 2012 13:57

Διαγώνιο menu

Δημοσίευση από Cretan1986 » 13 Οκτ 2012 15:49

πάντως καλό είναι να κάνεις και ένα fallback για παλιές εκδόσεις του ie.

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

Διαγώνιο menu

Δημοσίευση από apsuh0s » 13 Οκτ 2012 15:58

dva_dev πολύ καλή σκέψη..

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

height&#58; 77px; 
overflow&#58; hidden;
top&#58; -32px;
.ninja { color: black; visibility: hidden !important; }

Απάντηση

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

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

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