ul στο κέντρο div

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

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

Απάντηση
Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

ul στο κέντρο div

Δημοσίευση από Khronos » 13 Οκτ 2009 02:46

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

<div id="top-menu">
	<ul id="nav">
    	<li><a href="#">Profile</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

#top-menu &#123; 
	height&#58;35px; 
	background&#58;url&#40;../template_images/topmenu_bg.jpg&#41; repeat-x; 
	border-bottom&#58;1px solid #7f8184;
        text-align&#58;center;
&#125;

#nav &#123; padding&#58;0px; margin&#58;0px; list-style&#58;none; &#125;
#nav li &#123; float&#58;left; font-size&#58;11px; &#125;
#nav a &#123; font-weight&#58;bold; color&#58;#333333; text-decoration&#58;none; padding&#58;10px 10px 0px 10px; height&#58;25px; display&#58;block; &#125;
#nav a&#58;hover &#123; background&#58;#C6BBA9; &#125;
Πώς γίνεται να πάει το μενού στο κέντρο του div? Δοκίμασα με text-align:center αλλά τίποτα.

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

ul στο κέντρο div

Δημοσίευση από dimsis » 13 Οκτ 2009 09:30

Πρέπει να δώσεις fix width στο #nav σου και αντί για σκέτο margin:0px να βάλεις margin:0 auto;

π.χ.
#nav { padding:0px; margin:0 auto; list-style:none; width:200px; }

nbc
Honorary Member
Δημοσιεύσεις: 526
Εγγραφή: 05 Σεπ 2009 20:12
Επικοινωνία:

ul στο κέντρο div

Δημοσίευση από nbc » 13 Οκτ 2009 09:46

Το κόλπο είναι να σπρώξεις το ul 50% από αριστερά και το li ανάποδα. Βάζεις και ένα overflow στο div και καθάρισες!

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

.centeredList
    &#123;
    width       &#58; 100%; 
    overflow    &#58; hidden;
    &#125;
.centeredList ul, 
.centeredList ul li
    &#123;
    position    &#58; relative;
    float       &#58; left;
    text-align  &#58; center;
    margin      &#58; 0;
    padding     &#58; 0;
    &#125;
.centeredList ul
    &#123;
    list-style  &#58; none;
    left        &#58; 50%;
    &#125;
.centeredList ul li
    &#123;
    right       &#58; 50%;
    margin      &#58; 0 5px;
    &#125;

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

<div class="centeredList">
    <ul>
        <li>...</li>
    </ul>
</div>

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

ul στο κέντρο div

Δημοσίευση από Khronos » 13 Οκτ 2009 12:08

Θέλω το div να έχει 100% width οπότε η λύση του nbc μου κάνει και δουλεύει μια χαρά.

Πολλή ταλαιπωρία όμως το layout με css. Εχω ξεκινήσει αρκετές φορές να μάθω αλλά τα παρατάω. Να δω που θα φτάσω τώρα :P

Ευχαριστώ

Άβαταρ μέλους
cpulse
Script Master
Δημοσιεύσεις: 1527
Εγγραφή: 21 Μαρ 2006 19:30
Τοποθεσία: Αθήνα village
Επικοινωνία:

ul στο κέντρο div

Δημοσίευση από cpulse » 13 Οκτ 2009 18:33

Υπάρχει και τρόπος να το κεντράρει ο browser αυτόματα χωρίς να ορίσεις κανένα πλάτος.

Με tables φυσικά :pint:

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

<table align="center><tr><td>

<div id="top-menu">
	<ul id="nav">
    	<li><a href="#">Profile</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

</td></tr></table>


Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

ul στο κέντρο div

Δημοσίευση από Khronos » 13 Οκτ 2009 19:10

Το θέμα είναι να μην χρησιμοποιηθούν καθόλου tables αν κ γω έτσι έμαθα.

Αλλά τώρα σε όποια εταιρεία και να πας έχουν σαν κριτήριο να ξέρεις να κατασκευάζεις tableless σελίδες...

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

ul στο κέντρο div

Δημοσίευση από dimsis » 13 Οκτ 2009 19:29

Μια χαρά είναι η πρόταση του nbc.
Στην αρχή μέχρι να μπεις στην λογική των CSS είναι λίγο ζόρι, αλλά όσο περισσότερο τα συνηθίζεις θα ανακαλύπτεις και νέες ευκολίες.
Έχει φάσεις που κάνεις πιο εύκολα και πιο γρήγορα τη δουλειά σου με tables, όπως και κάποιες που γράφεις περισσότερο κώδικα για τα stylesheets, αλλά στο τέλος αυτός ο διαχωρισμός του CSS αρχείου με τον HTML κώδικα, βοηθάει πολύ σε μετέπειτα αλλαγές στο design αλλά και στη συντήρηση του design γενικότερα.
Αν όμως τα βάζεις όλα inline στη σελίδα και όχι σε ξεχωριστό css αρχείο, δεν γλιτώνεις και πολλά. Από μακαρονάδα σπέσιαλ, πας σε μακαρονάδα σκέτη...

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

ul στο κέντρο div

Δημοσίευση από korgr » 13 Οκτ 2009 19:35

nbc έγραψε:Το κόλπο είναι να σπρώξεις το ul 50% από αριστερά και το li ανάποδα. Βάζεις και ένα overflow στο div και καθάρισες!
Να ηξερες ολο αυτο, ετσι που το διατυπωσες, πως ακουγεται στα αυτια μας...
Μου θυμιζει Χαρι Κλιν (σε εποχες που οι περισσοτεροι δεν γνωρισατε) οταν ελεγε:
"Πιαστό, γυριστό με τη γλώσσα και καρφωτό από τα ρουθούνια!"

Κατα τα αλλα ολα αυτα τα κολπα, τα %, τα ανάποδα και τα overflow ειναι ο σωστος τροπος ενω ενα table που εξ ορισμου συμπεριφερεται σωστα χωρις αλχημειες ειναι λαθος!
Ωραια λογικη, συνεχιζω να τα ακουω και να με διασκεδαζουν...

Κατα τα αλλα αρκετες εταιριες θα αλλαζαν την φιλοσοφια τους περι σχεδιασμου ιστοσελιδων απο το να εχαναν την ευκαιρια να ενταξουν τον Αλεξη (cpulse) στο δυναμικο τους 8)

Άβαταρ μέλους
cpulse
Script Master
Δημοσιεύσεις: 1527
Εγγραφή: 21 Μαρ 2006 19:30
Τοποθεσία: Αθήνα village
Επικοινωνία:

ul στο κέντρο div

Δημοσίευση από cpulse » 13 Οκτ 2009 20:27

Τώρα βγαίνω εντελώς off topic αλλά κι εγώ κάποτε υποστήριζα πολύ τα CSS μέχρι που ασχολήθηκα ο ίδιος και κατάλαβα τι μπάχαλο επικρατεί, ειδικά με τους IE. Και όταν ξεθώριασε η πώρωση κατάλαβα οτι είχα χάσει το νόημα το οποίο είναι το αποτέλεσμα (λειτουργικές σελίδες σε λογικούς χρόνους). Στο κάτω κάτω ο πελάτης σου δεν σε πληρώνει για να παίζεις με hacks και ξεhacks.

Επίσης ο κώδικας που καμιά φορά πρέπει να γράψει κανείς για την συμβατότητα με όλους τους browsers μπορεί να βγεί 10-20 γραμμές μόνο και μόνο για ένα απλό πράγμα. Αυτό αναιρεί την ίδια την φιλοσοφία του CSS που ουσιαστικά είναι ο καλύτερος έλεγχος. Όσο λιγότερο κώδικα γράφουμε τόσο ποιο εύκολα αντιλαμβανόμαστε τα bugs και τόσο ποιο εύκολα θυμόμαστε τι @#$@% είχαμε γράψει όταν ξανακοιτάμε τα δικά μας scripts μετά από πολύ καιρό.

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

ul στο κέντρο div

Δημοσίευση από dimsis » 13 Οκτ 2009 20:44

Θα στρώσει και άλλο παίδες που θα πάει. Ιδιαίτερα με τα aligments χρειάζονται αλλαγές. Ακόμα και το margin: 0 auto μια μλκ και μισή είναι... θα έπρεπε να έχει κάτι απλό σαν το align=center που κάνεις σε ένα td και να δούλευε, αλλά τι να κάνουμε τώρα.
Όπως και στην ευκολία του να φτιάξεις στήλες όπου έφτιαχνες 3 td και είχες ένα τρίστηλο και με τα align και valign έκανες και τις στοιχίσεις σου.
Τώρα θέλει κάπως παραπάνω παίδεμα για μερικά θεματάκια με CSS αλλά στο τέλος αν το συνηθίσει κανείς βολεύει πραγματικά.

Για να κεντραριστεί η λίστα σε 100% width div και χωρίς τις πατέντες του nbc θα μπορούσε να μπει στο εξωτερικό div ένα margin:0 auto και να έκανε και πάλι τη δουλειά.
align="center" = 14 χαρακτήρες
margin:0 auto = 13 χαρακτήρες :) (μόνο που θέλει και κάποιες αλλαγές ακόμα :p )

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

ul στο κέντρο div

Δημοσίευση από korgr » 13 Οκτ 2009 22:21

dimsis έγραψε:...αλλά στο τέλος αυτός ο διαχωρισμός του CSS αρχείου με τον HTML κώδικα, βοηθάει πολύ σε μετέπειτα αλλαγές στο design αλλά και στη συντήρηση του design γενικότερα.
Αν όμως τα βάζεις όλα inline στη σελίδα και όχι σε ξεχωριστό css αρχείο, δεν γλιτώνεις και πολλά. Από μακαρονάδα σπέσιαλ, πας σε μακαρονάδα σκέτη...
Δημητρη συμφωνω απολυτα με αυτο!
Αυτο που δεν καταλαβαινω ειναι το γιατι η χρηση των tables εχει ταυτιστει με css μακαροναδα.
Εννοω πως δεν βλεπω διαφορα στο <table class="anyclass"> με το <div class="anyclass"> και οταν εφαρμοζεται εχουμε απολυτο διαχωρισμο του CSS αρχειου με τον HTML κωδικα...

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

ul στο κέντρο div

Δημοσίευση από dimsis » 14 Οκτ 2009 10:54

Μπα όχι μια χαρά είναι να δίνεις class names σε tables, td και να αλλάζεις του στυλ του από εξωτερικό αρχείο. Νότη δεν χρειάζεται να δίνουμε σημασία σε όσους γκαρίζουν, ακόμα και αν πρόκειται για tabular data, όταν βλέπουν table στον κώδικα. Τέτοια κολλήματα δεν έχουν ουσία για μένα.
Για layouts όμως αν μπορείς να το αποφύγεις και κάνεις τη δουλειά tableless, ακόμα και αν χρειαστεί περισσότερος κώδικα, που για να λέμε την αλήθεια συνήθως είναι λιγότερος όταν το πάμε με divs / css, αργότερα μπορεί να σου λύσει τα χέρια και να κάνεις αλλαγές στο styling χωρίς καν να χρειαστεί να ανοίξεις και να πειράξεις τον κώδικα σου. Και μιλάω ακόμα και για αλλαγή στο όλο στήσιμο του layout από το CSS, όχι μόνο για χρωματάκια και εικόνες φόντου σε διάφορα elements.
Π.χ. ένα μενού που έχεις βάλει σε tables:
<table class="mymenu"><tr><td>Option 1</td><td> Option 2</td><td> Option 3</td><td> Option 4</td><td> Option 5</td></tr></table>
Του έβαλες το style και το παρουσίασες μια χαρά, αλλά για να το κάνεις από οριζόντιο, κάθετο θα πρέπει να αρχίζεις να αλλάζεις γραμμές <tr> στο αρχείο με τον κώδικα σου. Αν το είχες χτίσει έτσι:
<ul class="mymenu"><li>Option 1</li><li> Option 2</li><li> Option 3</li><li> Option 4</li><li> Option 5</li></ul> απλώς θα έβγαζες στο CSS αρχείο το display:inline ή float:left χωρίς να χρειαστεί να πειράξεις τον κώδικα σου.
Ένα απλό παράδειγμα δίνω, αλλά καταλαβαίνεις τι εννοώ. Αντιστοίχως υπάρχουν παραδείγματα όπως και αυτό εδώ που συζητάμε, όπου με tables γίνονται πιο γρήγορα κάποια πράγματα που με css χρειάζεσαι πατέντες επειδή δεν έχουν προβλεφθεί.

Όταν βλέπω 7-8στηλα tabular data όπου ξεσκίζονται σε πατέντες και 50 γραμμές στο CSS για να τα δείξουν σωστά χωρίς να χρησιμοποιήσουν tables, προσωπικά το θεωρώ ανόητο και χάσιμο χρόνου.
Τα tables δεν είναι άχρηστα αλλά και όταν χρησιμοποιούνται για οτιδήποτε θέλεις να δείξεις στην σελίδα σου, πολλές φορές σου μπλέκουν τον κώδικα και σου τον κάνουν δυσανάγνωστο. Το ίδιο μπορεί να γίνει και αν βάλεις 500 divs σε μια σελίδα. Γενικώς χρειάζεται μέτρο και να μπορείς να καταλάβεις που να χρησιμοποιήσεις τα σωστό tags που θα σου γλιτώσουν χρόνο, κόπο αλλά και θα σου δώσουν καλύτερη ταχύτητα στο rendering από τους browsers. Η αλήθεια πάντως είναι πως ιδιαίτερα σε όσους μάθαμε και δουλεύαμε slicing από template σε table layout , ακόμα κάνουμε τη δουλειά μας πολύ πιο γρήγορο και λιγότερο επώδυνα, και χωρίς να χρειάζεται ξεψείρισμα για να πετύχεις συμβατότητα με τους περισσότερους browsers, αλλά και αυτοί που κόβουν πολλά templates σε tableless layouts και έχουν αποκτήσει εμπειρία στο τέλος χρειάζονται τους ίδιους ίσως και μικρότερους χρόνους. Το έχω δει στην πράξη από τους συνεργάτες μας, όπου PSD σε XHTML το κάνουν σε λίγες ώρες όσο πολύπλοκα και αν είναι τα templates. Άσε που έχουν βγει και CSS Frameworks που αν πεις ότι μαθαίνεις κάποιο και ασχολείσαι εις βάθος μπορεί να μειώσεις ακόμα περισσότερο τους χρόνους.

Όπως και να’χει στη δουλειά μας καθημερινά αλλάζουν τα δεδομένα, οι τεχνολογίες και ο τρόπος που δουλεύουμε εξελίσσεται. Μακάρι να υπήρχε κάτι άλλο που να διαχώριζε εντελώς το design από τον κώδικα. Ως τότε ότι έχουμε στα χέρια μας και μας βολεύει περισσότερο το χρησιμοποιούμε. Στην HTML5 ας πούμε βάζουν tags που εμπλέκονται και στο layout / design μας, τα <header>, <nav>, <section> , <footer> κλπ οπότε πάλι θα έχουμε αλλαγές στην html μας. Αφού θα μας παρέχονται τέτοια tags θα τα αγνοήσουμε και θα συνεχίσουμε τα <table class="header"> ή <div class="header"> επειδή τα μάθαμε, τα συνηθίσαμε και μας βολεύουν; Αυτό δεν σημαίνει πως όλα τα προηγούμενα που κάναμε από τη μια μέρα στην άλλη τα βγάζουμε άχρηστα ή λανθασμένα, αλλά αν μας παίρνει (από χρόνο και χρήμα) και θα βοηθήσει στην πράξη ένας «εκμοντερνισμός» τους, γιατί να μην γίνει;

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

ul στο κέντρο div

Δημοσίευση από korgr » 14 Οκτ 2009 13:30

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

<table class="mymenu"><tr><td>Option 1</td><td> Option 2</td><td> Option 3</td><td> Option 4</td><td> Option 5</td></tr></table>
lol οποιος χρησιμοποιει τα tables με τετοια λογικη ειναι αξιος της μοιρας του
Τωρα οσον αφορα τα νεα tags, ολα καλα, αλλα θα μπουμε στο νεο κυκεωνα ασυμβατοτητας, ποιοι το βλεπουν με html5 browsers, ποιοι με παλαιοτερους κλπ.
Σε γενικες γραμμες, ειμαι υπερ του να κανεις ευκολα τη δουλεια σου διατηρωντας οσο το δυνατον μεγαλυτερη συμβατοτητα χωρις πολλα πολλα.
Και το κυριοτερο, αλλο το να γνωριζεις σε βαθος να δημιουργεις "σωστα" sites και αλλο το να παραγεις "καλά" sites (στα ματια αυτων που δεν ασχολουνται με το view source)

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8575
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

ul στο κέντρο div

Δημοσίευση από Basilakis » 14 Οκτ 2009 14:01

korgr έγραψε: Και το κυριοτερο, αλλο το να γνωριζεις σε βαθος να δημιουργεις "σωστα" sites και αλλο το να παραγεις "καλά" sites (στα ματια αυτων που δεν ασχολουνται με το view source)
AMIN for that!

Απάντηση

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

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

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