Πως να κεντράρουμε ένα οριζόντιο μενού πλοήγησης

Το άρθρο δημοσιεύτηκε από τον Αλέξανδρος Ίτσιος

Ονομάζομαι Αλέξανδρος Ίτσιος και είμαι ο ιδρυτής της κοινότητας του ifeed. Eίμαι Co-founder της EnterLogic που ειδικεύεται κυρίως στο Internet Marketing. Σκοπός μου είναι να δείξω στον αρχάριο internet marketer, καθώς επίσης και τον επιχειρηματία που μόλις μπήκε στον χώρο του internet, πως να φτιάξει μια επικερδή διαδικτυακή επιχείρηση. Σε περίπτωση που θέλετε να επικοινωνήσετε μαζί μου, μπορείτε να με βρείτε στο Facebook, Twitter και Google Plus.


Πρόσφατα ήρθα αντιμέτωπος με ένα css πρόβλημα, στο οποίο έπρεπε να κεντράρω ένα μενού πλοήγησης σε wordpress. Αν και όλοι συνιστούν απλά να βάλουμε margin αριστερά ή δεξιά, ώστε να φαίνεται οπτικά ότι είναι στο κέντρο, υπάρχει το πρόβλημα ότι το μενού αν είναι δυναμικό, θα πρέπει να προσαρμόζουμε το margin αντίστοιχα.

Μία δεύτερη λύση ήταν να χρησιμοποιήσω jquery για να επιλύσω το πρόβλημα, αλλά μου φαινόταν υπερβολικό απλά για ένα μενού. Τελικά κατάφερα να επιλύσω το πρόβλημα με την παρακάτω μέθοδο.

Ας υποθέσουμε ότι ο html κώδικας μας είναι κάπως έτσι:

<div id=”topmenu”>
<ul>
<li><a href=”#”>Αρχική</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Επικοινωνία</a></li>
</ul>
</div>

Μέσα στο css αρχείο μας θα περάσουμε την ταυτότητα topmenu και μέσα σε αυτή θα περάσουμε την εντολή display: table, μαζί με ένα margin: 0 auto; Συγκεκριμένα ο κώδικας μας θα μοιάζει κάπως έτσι:

#topmenu {
display: table;
margin: 0 auto;
}

Μετά στο ul θα βάλουμε την εντολή display: table-cell, και αυτό θα κεντράρει το μενού στη μέση του container.

#topmenu ul {
display:table-cell;
list-style: none;
}

Το list-style: none; το πέρασα απλά επειδή συνηθίζεται τα οριζόντια μενού να μην έχουν bullets. Έπειτα μπορείτε να συνεχίσετε να φτιάχνετε τον κώδικα σας όπως θα τον κάνατε κανονικά. Συγκεκριμένα, μπορείτε τώρα να περάσετε και ένα float: left; και να συνεχίσετε το μενού σας από εκεί και πέρα. Όταν τελειώσετε ο κώδικας σας θα πρέπει να είναι κάπως έτσι.

#topmenu {
display: table;
margin: 0 auto;
}

#topmenu ul {
display:table-cell;
list-style: none;
}

#topmenu li {
float: left;
}


Σημείωση: Μην βάζετε keywords στο πεδίο για το όνομα καθώς επίσης και links προς άσχετες ιστοσελίδες με τη θεματολογία του άρθρου. Οι διαχειριστές του ifeed θα μαρκάρουν αυτόματα αυτά τα σχόλια ως spam!

2 Σχόλια στο Άρθρο “Πως να κεντράρουμε ένα οριζόντιο μενού πλοήγησης


  1. skapator on said:

    Πραγματικά απο ποιο χρήσιμα snippets που έχω βρεί.

  2. Δε μπορείς να φανταστείς πόσο με παίδεψε για να βρω μια τέτοια λύση 😀

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Αποκτήστε τα Παρακάτω Δύο
ΔΩΡΕΑΝ Ebook

seo ebook

Τα συγκεκριμένα ebook θα σας αποκαλύψουν κάποια από τα μεγαλύτερα μυστικά για να αυξήσετε τις θέσεις σας στο Google, καθώς επίσης και τα έσοδα σας μέσω internet!!!

  • Ανεβείτε Εύκολα Στο Google
  • Αποκτήστε Υψηλή Επισκεψιμότητα
  • Κερδίστε Περισσότερα Χρήματα

Εγγραφείτε στο Εβδομαδιαίο NEWSLETTER

&

Αποκτήστε ΔΩΡΕΑΝ το SEO Ebook
"Αποτελεσματικό Link Building" & το Ebook "Χρήματα Μέσω Internet".