Πρόβλημα με ευέλικτο πλάτος μενού.

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

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

Απάντηση
Άβαταρ μέλους
dj_kostas_pro
Δημοσιεύσεις: 210
Εγγραφή: 10 Οκτ 2007 16:54
Τοποθεσία: Πιερία

Πρόβλημα με ευέλικτο πλάτος μενού.

Δημοσίευση από dj_kostas_pro » 19 Αύγ 2013 14:55

Γεια σας παιδιά.

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

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

Έχω ένα μενού το οποίο έχει ύψος 40px και πλάτος 100%. Τώρα αυτό που θέλω να πετύχω είναι ο κάθε σύνδεσμος να έχει το κατάλληλο κενό ανάμεσα στους άλλους έτσι ώστε να απλώνετε το μενού σε όλο το πλάτος της εικόνας και οπότε όσο κλείνει η εικόνα αυτό το κενό να χάνετε και αντιστρόφως όταν η εικόνα ανοίγει αυτό το κενό μεταξύ των συνδέσμων να μεγαλώνει.

Παρακάτω είναι εικόνα από το photoshop για το τι θέλω να πετύχω.
Εικόνα

Άρχισα τα πειράματα και βρήκα άκρη με τον παρακάτω κώδικα.

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

#header-menu {
	position:relative;
	width:100%;
	height:40px;
	margin: 0px;
	padding:0px;
	text-align: center;
	pointer-events: none;
	background:#bd0f10;
}
#header-menu li {
	width:12%;
	list-style: none; margin: 0; padding: 0;
	pointer-events: auto;
	margin: 0px;
	padding: 8px 0px;
	display: inline-block;
}

#header-menu li a, #header-menu li a:hover {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	text-decoration: none;
	text-transform: uppercase;
	color:#FFF;
	position: relative;
	display: inline-block; 
	text-align: center;
}

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

<!-- Μενού -->
<ul id="header-menu" class="">
<li id="menu-item-4471" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4471"><a href="http&#58;//localhost/mousikopanorama.gr/?cat=10">Ραδιοφωνικά νέα</a></li>

<li id="menu-item-4486" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4486"><a href="http&#58;//localhost/mousikopanorama.gr/?page_id=195">Παραγωγοι</a></li>

<li id="menu-item-4487" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4487"><a href="http&#58;//localhost/mousikopanorama.gr/?page_id=175">Ο σταθμός</a></li>

<li id="menu-item-4488" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4488"><a href="http&#58;//localhost/mousikopanorama.gr/?page_id=177">TOP 10</a></li>

<li id="menu-item-4490" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4490"><a>Βιντεο</a></li>

<li id="menu-item-4489" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4489"><a href="http&#58;//localhost/mousikopanorama.gr/?page_id=623">Εικόνες</a></li>

<li id="menu-item-4491" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4491"><a href="http&#58;//localhost/mousikopanorama.gr/?cat=23">Downloads</a></li>

<li id="menu-item-4492" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4492"><a href="http&#58;//localhost/mousikopanorama.gr/?page_id=179">Επικοινωνία</a></li>
</ul>
Το αποτέλεσμα ήταν το μενού να επεκτείνετε κατά πλάτος τις οθόνης αλλά δυστυχώς όταν αρχίζω να κλείνω το πλάτος του brosewr κατάλαβα ότι όλοι σύνδεσμοι έχουν το ίδιο πλάτος οπότε το κενώ που υπάρχει είναι δυσανάλογο.

Όπως θα δείτε παρακάτω για παράδειγμα ο σύνδεσμος από το κουμπί ΡΑΔΙΟΦΩΝΙΚΑ ΝΕΑ δεν έχει κενό ενώ το TOP 10 έχει 10 στρέμματα κενό...
Εικόνα

kidpo21
Δημοσιεύσεις: 37
Εγγραφή: 09 Φεβ 2012 20:14
Τοποθεσία: thessaloniki
Επικοινωνία:

Πρόβλημα με ευέλικτο πλάτος μενού.

Δημοσίευση από kidpo21 » 20 Αύγ 2013 12:14

Καλησπερα, θα μπορούσες να βγάλεις το with: 12%; απο το li και να παιξεις με το padding-right και το padding-left ετσι ώστε να πλαρεις το επιθυμητό αποτέλεσμα.

Άβαταρ μέλους
dj_kostas_pro
Δημοσιεύσεις: 210
Εγγραφή: 10 Οκτ 2007 16:54
Τοποθεσία: Πιερία

Πρόβλημα με ευέλικτο πλάτος μενού.

Δημοσίευση από dj_kostas_pro » 20 Αύγ 2013 12:39

kidpo21 το είχα δοκιμάσει αλλά μου βγάζει πρόβλημα διότι από τα 1300pixel πλάτος της οθόνης αρχίζει και μου βγάζει σε άλλη γραμμή τον τελευταίο σύνδεσμο του μενου.

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

Apostolis_38
Δημοσιεύσεις: 1969
Εγγραφή: 14 Φεβ 2008 16:20
Τοποθεσία: ΠΕΙΡΑΙΑΣ

Πρόβλημα με ευέλικτο πλάτος μενού.

Δημοσίευση από Apostolis_38 » 20 Αύγ 2013 15:05

Δοκίμασε να βρείς άκρη με max-width και min-width με pixels στις διαστάσεις.
Θα πρέπει να πειραματιστείς αρκετά αλλά πιστεύω πως θα κάνεις δουλειά.

Άβαταρ μέλους
dj_kostas_pro
Δημοσιεύσεις: 210
Εγγραφή: 10 Οκτ 2007 16:54
Τοποθεσία: Πιερία

Πρόβλημα με ευέλικτο πλάτος μενού.

Δημοσίευση από dj_kostas_pro » 20 Αύγ 2013 15:27

Παιδιά τελικά το βρήκα σε ένα site.
jsfiddle.net/thirtydot/EDp8R/3/

Απάντηση

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

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

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