Κάθετο μενού μέσα σε κουτί

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

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

Απάντηση
Diavolakos
Δημοσιεύσεις: 51
Εγγραφή: 06 Αύγ 2003 11:35
Τοποθεσία: Αθήνα

Κάθετο μενού μέσα σε κουτί

Δημοσίευση από Diavolakos » 17 Ιαν 2012 13:30

Καλησπέρα σας,
Έχω φτιάξει ένα κουτί σε photoshop και θέλω να βάλω επιλογές λιστας μέσα του.Το κουτί θα παίζει σε ένα κάθετο menu.Προσπάθησα να το φτιάξω με webkit-border-radius και moz-border-radius για να μπορέσω να το κάνω resizαble κυρίως (έχει γωνίες και background gardien) και σε μήκος και σε πλάτος αλλά αντιμετωπίζω πρόβλημα με τον ie 8 που δεν υποστηρίζει css3.
Πως αλλιώς μπορώ να το φτιάξω;Πως μπορώ να κόψω το μπορέσει να ενσωματωθεί στον κώδικα ul του css ώστε να δουλεψει όπως το θέλω;
Σας ευχαριστώ.
To css

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

#navigation{
width:865px;
	padding-left:60px;
	height:26px;

/*background-color:#999;*/
}

#navigation ul{

margin:0px; 
padding:0px;
}


#navigation ul li{
display:inline; height:26px; float:left; list-style:none; margin-left:0px;position:relative;
color: #6D6E71;

	font-family:trebuchet MS;
	font-size:11px;
	font-weight:bold;

}

#navigation li a{

color: #6D6E71; text-decoration:none;
}

#navigation li a:hover{

}

#navigation li ul{
margin:5px;
padding:0px;
padding-left:5px;
display:none;
position:absolute;
left:0px;
top:20px;
/*background-image:url(images/submenu_bg.png);
background-repeat:repeat-y;*/
/*background-color:#999;*/
}

#navigation li:hover ul{
display:block;
width:160px;
}

#navigation li li{
background-image: url(images/arrow_footer_gray.png);
background-repeat: no-repeat;
background-position: 0 .3em;
padding-left: .9em;
display:list-item;
}

#navigation li li a{
color:#fff; 
text-decoration:none;
}

#navigation li li a:hover{
background-image: url(images/arrow_footer_black.png);
background-repeat: no-repeat;
background-position: 0 .3em;
padding-left: .9em;
}
H html

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

<div id="navigation">

        <ul>
            
 <div class="homebutton"><a id="home_bnt_roll" href="index.html" title="home"></a></div>
 
 
<li>
<a class="button" href="qui-sommes-nous.html"><span>Qui sommes-nous?</span></a>
        
                <ul> 
  <div id="box2">
                      <li>sub menu item 1</li>
                      <li>sub menu item 2</li>
                      <li>sub menu item 3</li>
                      <li>sub menu item 4</li>
 </div>
              </ul> 
            </li>

<li>
<a class="button" href="re-source_engineering_solutions.html"><span>Re-Source Engineering Solutions</span></a>

                <ul>
                      <li>sub menu item 1 sub menu item 1</li>
                      <li>sub menu item 2</li>
                      <li>sub menu item 3</li>
                      <li>sub menu item 4</li>
                </ul> 
            </li>

<li>
<a class="button" href="gestion_distribution_VHU.html"><span>Gestion Distribution VHU</span></a>
                <ul>
                      <li>sub menu item 1</li>
                      <li>sub menu item 2</li>
                      <li>sub menu item 3</li>
                      <li>sub menu item 4</li>
                </ul>
            </li>

<li>
<a class="button" href="demontage_industriel.html"><span>D&#233;montage Industriel</span></a>
                <ul>
                      <li>sub menu item 1</li>
                      <li>sub menu item 2</li>
                      <li>sub menu item 3</li>
                      <li>sub menu item 4</li>
                </ul>
<li>
<a class="button" href="le_reseau-pieces_et_vehicules.html"><span>Le r&#233;seau- Pi&#232;ces et V&#233;hicules</span></a>
                <ul>
                      <li>sub menu item 1</li>
                      <li>sub menu item 2</li>
                      <li>sub menu item 3</li>
                      <li>sub menu item 4</li>
</ul>
<li>
<a class="button" href="contact.html"><span>Contact</span></a></li>

</div>
Συνημμένα
sub-menu-empty.png
sub-menu-empty.png (1.11 KiB) Προβλήθηκε 1361 φορές

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

Κάθετο μενού μέσα σε κουτί

Δημοσίευση από apsuh0s » 17 Ιαν 2012 15:52

Η λογική σου είναι λάθος. Δεν μπορείς να σχεδιάζεις ένα ορθογώνιο κουτί με gradients και rounded corners στο photoshop και να περιμένεις να "κάτσει" μέσα του το vertical navigation.

Παρατήρησα μέσα στο css σου το εξής:

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

*background-image&#58;url&#40;images/submenu_bg.png&#41;;
background-repeat&#58;repeat-y;*/
/*background-color&#58;#999;*/
&#125; 
το submenu_bg.jgp είναι η εικόνα που παραθέτεις στο μήνυμα σου;

Δεν θα πάρεις όλη την εικόνα και θα την κάνεις repeat στον y. Θα πάρεις μια τομή και θα την επαναλάβεις. Εφόσον έχεις gradient από top σε bottom η τομή σου θα είναι κάθετη.

Ωστόσο και το gradient και τα rounded corners μπορείς να τα πετύχεις με css3. Όσον αφορά τον IE8 μπορείς να βάλεις ένα solid color ως fallback. Αν θέλεις gradient στον ΙΕ8 τότε μπορείς να χρησιμοποιήσεις την τομή της εικόνας που σου αναφέρω πιο πάνω. Τα rounded corners δεν θα τα καταλάβει και θα τα προσπεράσει. Αν θέλεις και στον IE8 rounded corners θα πρέπει να το κάνεις με χρήση εικόνων ή javascript.
.ninja { color: black; visibility: hidden !important; }

Diavolakos
Δημοσιεύσεις: 51
Εγγραφή: 06 Αύγ 2003 11:35
Τοποθεσία: Αθήνα

Κάθετο μενού μέσα σε κουτί

Δημοσίευση από Diavolakos » 17 Ιαν 2012 16:12

apsuh0s έγραψε:Η λογική σου είναι λάθος. Δεν μπορείς να σχεδιάζεις ένα ορθογώνιο κουτί με gradients και rounded corners στο photoshop και να περιμένεις να "κάτσει" μέσα του το vertical navigation.

Παρατήρησα μέσα στο css σου το εξής:

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

*background-image&#58;url&#40;images/submenu_bg.png&#41;;
background-repeat&#58;repeat-y;*/
/*background-color&#58;#999;*/
&#125; 
το submenu_bg.jgp είναι η εικόνα που παραθέτεις στο μήνυμα σου;

Δεν θα πάρεις όλη την εικόνα και θα την κάνεις repeat στον y. Θα πάρεις μια τομή και θα την επαναλάβεις. Εφόσον έχεις gradient από top σε bottom η τομή σου θα είναι κάθετη.

Ωστόσο και το gradient και τα rounded corners μπορείς να τα πετύχεις με css3. Όσον αφορά τον IE8 μπορείς να βάλεις ένα solid color ως fallback. Αν θέλεις gradient στον ΙΕ8 τότε μπορείς να χρησιμοποιήσεις την τομή της εικόνας που σου αναφέρω πιο πάνω. Τα rounded corners δεν θα τα καταλάβει και θα τα προσπεράσει. Αν θέλεις και στον IE8 rounded corners θα πρέπει να το κάνεις με χρήση εικόνων ή javascript.
Σε ευχαριστώ για την απάντηση. το submenu_bg.jgp δεν εναι η εικόνα της παράθεσης αλλά ένα κάθετο image(height 1px) που έκοψα αν δεν μου έβγαινε το gardien ώστε να επαναλαμβάνεται κάθετα.Από ότι κατάλαβα το image πρέπει να το κόψω κάθετα σε 2 μέρη όπως έχω δει τεχνικές για buttons σωστά;Πως όμως θα το προσαρμόσω μετά στο css μου;Υπάρχει κάποιο τutorial για την περίσταση;Εχω κολήσει 3 μέρες τώρα...

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

Κάθετο μενού μέσα σε κουτί

Δημοσίευση από apsuh0s » 17 Ιαν 2012 16:58

Λοιπόν, ας το πάρουμε από την αρχή.

Η λογική λέει πως δεν μπορείς γνωρίζεις το ύψος του container(ul) των list-items poυ συνθέτουν το menu σου διότι αύριο μεθαύριο μπορεί να προσθέσεις/αφαιρέσεις κάποιο από αυτά τα list items. Ισχύει αυτό στη δική σου περίπτωση;

Εφόσον ισχύει αντιλαμβάνεσαι πως δεν μπορεις να φτιάξεις μία εικόνα η οποία θα έχει ορισμένο ύψος και να περιμένεις πως θα προσαρμόζεται στις αλλαγές που κάνεις στο menu σου.

Η εικόνα αυτή που αναφέρω θα έχει πλάτος 1px και height όσο νομίζεις εσύ(ας πούμε 300px). Αυτό συμβαίνει διότι θα την επαναλάβεις κατά τον x άξονα και ουσιαστικά θα δημιουργείται το κάθετο gradient. Σωστά μέχρι εδώ;

Αν όμως κάποια στιγμή το menu σου ξεπεράσει τα 300px από εκεί και κάτω τι γίνεται; Αναγκαστικά θα πρέπει να βάλεις ένα background-color το οποίο θα είναι ίδιο με το χρώμα με το οποίο τελειώνει η εικόνα που δημιούργησες(το bottom gradient). Έτσι στον χρήστη θα δίνεται η εντύπωση πως κάποια στιγμή το gradient τελειώνει και από εκεί και κάτω συνεχίζει το solid background color ομαλά. Αυτά όλα είναι για τον IE8.

Για τους σύγχρονους browsers χρησιμοποιείς css3 και κατασκευάζεις το gradient.
.ninja { color: black; visibility: hidden !important; }

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

Κάθετο μενού μέσα σε κουτί

Δημοσίευση από apsuh0s » 17 Ιαν 2012 17:42

Πρόσεξε στον ΙΕ8 που σταματάει το χρώμα και συνεχίζει ομαλά σε solid color. Αυτό γίνεται διότι το ύψος της εικόνας είναι στα 300px ενώ το container του menu μεγαλύτερο.

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

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

.container &#123;width&#58;960px;margin&#58;0 auto;padding-top&#58;100px;&#125;
ul &#123;margin&#58;0;padding&#58;0;list-style-type&#58;none;width&#58;300px;

	background&#58;#d5d4d3 url&#40;bg.png&#41; repeat-x; /*To #d5d4d3 είναι το χρώμα του bottom-gradient */
	background-image&#58; linear-gradient&#40;bottom, rgb&#40;213,211,211&#41; 0%, rgb&#40;251,247,247&#41; 50%&#41;; /* Το rgb&#40;213,211,211&#41; είναι το #d5d4d3 */
	background-image&#58; -o-linear-gradient&#40;bottom, rgb&#40;213,211,211&#41; 0%, rgb&#40;251,247,247&#41; 50%&#41;;
	background-image&#58; -moz-linear-gradient&#40;bottom, rgb&#40;213,211,211&#41; 0%, rgb&#40;251,247,247&#41; 50%&#41;;
	background-image&#58; -webkit-linear-gradient&#40;bottom, rgb&#40;213,211,211&#41; 0%, rgb&#40;251,247,247&#41; 50%&#41;;
	background-image&#58; -ms-linear-gradient&#40;bottom, rgb&#40;213,211,211&#41; 0%, rgb&#40;251,247,247&#41; 50%&#41;;
	
	background-image&#58; -webkit-gradient&#40;
	linear,
	left bottom,
	left top,
	color-stop&#40;0, rgb&#40;213,211,211&#41;&#41;,
	color-stop&#40;0.5, rgb&#40;251,247,247&#41;&#41;
&#41;;
/*Για τα borders σε σύγχρονους browsers. Στον IE8 δεν εμφανίζονται */
/*Αν θέλεις να εμφανίζονται πρέπει να το κάνεις με εικόνες ή javascript */
	-webkit-border-radius&#58; 6px;
	-moz-border-radius&#58; 6px;
	border-radius&#58; 6px;
&#125;

ul li &#123;border-bottom&#58;1px solid #555;&#125;
ul li&#58;last-child&#123;border-bottom&#58;0;&#125;
ul li a&#123;display&#58;block;text-decoration&#58;none;padding&#58;8px 0 8px 8px;&#125;
ul li a&#58;hover&#123;background-color&#58;#fff;&#125;

</style>
</head>

<body>
<div class="container">
    <ul>
        <li><a href="#">list item 1</a></li>
        <li><a href="#">list item 2</a></li>
        <li><a href="#">list item 3</a></li>
        <li><a href="#">list item 4</a></li>
        <li><a href="#">list item 5</a></li>
        <li><a href="#">list item 6</a></li>
        <li><a href="#">list item 7</a></li>
        <li><a href="#">list item 8</a></li>
        <li><a href="#">list item 9</a></li>
        <li><a href="#">list item 10</a></li>
        <li><a href="#">list item 11</a></li>
        <li><a href="#">list item 12</a></li>
        <li><a href="#">list item 13</a></li>
        <li><a href="#">list item 14</a></li>
        <li><a href="#">list item 15</a></li>
        <li><a href="#">list item 16</a></li>
	</ul>
</div><!-- .container -->
</body>
</html>
Συνημμένα
bg.png
bg.png (1.32 KiB) Προβλήθηκε 1272 φορές
.ninja { color: black; visibility: hidden !important; }

Diavolakos
Δημοσιεύσεις: 51
Εγγραφή: 06 Αύγ 2003 11:35
Τοποθεσία: Αθήνα

Κάθετο μενού μέσα σε κουτί

Δημοσίευση από Diavolakos » 17 Ιαν 2012 21:35

Καλησπέρα και σε ευχαριστώ για την κάλυψη σχεδόν του 90%.Όλα κατανοητά μέχρι στιγμής και άψογο το trick ώστε να καλυφθεί η συνέχεια του gardien background.Το πρόβλημα είναι με τα rounded corners δηλαδή τις γωνίες στον ie8.Όταν λες εικόνες πως ακριβώς τις ορίζω στην κάθε λίστα;Μιας και δεν ξέρω από java λέω να χρησιμοποιήσω αυτήν την τεχνική.

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

Κάθετο μενού μέσα σε κουτί

Δημοσίευση από apsuh0s » 18 Ιαν 2012 11:56

Άλλο java και άλλο javascript. Για τα rounded corners υπάρχει πληθώρα από tutorials στο internet. Δοκίμασε να ψάξεις όρους του τύπου: "Flexible rounded corners with images". Υπάρχουν διάφορες τεχνικές.

παράδειγμα
.ninja { color: black; visibility: hidden !important; }

Diavolakos
Δημοσιεύσεις: 51
Εγγραφή: 06 Αύγ 2003 11:35
Τοποθεσία: Αθήνα

Κάθετο μενού μέσα σε κουτί

Δημοσίευση από Diavolakos » 18 Ιαν 2012 13:36

Καλησπέρα.Νομίζω πως κάτι βρήκα.Μόλις το δοκιμάσω και δω πως παίζει θα σου πω.
Ευχαριστώ!

Απάντηση

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

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

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