Ελαστικό design με CSS @media queries

Το prince.gr έχει αλλάξει αρκετά στη version 3.0, αλλαγή που συνέπεσε με την ισάριθμη version του WordPress. Οι αισθητικές αλλαγές είναι ολοφάνερες αλλά έχει αλλάξει επίσης αρκετά το CSS που δίνει μορφή στο site. Η σημαντικότερη βελτίωση είναι που πλέον, το design προσαρμόζεται στην οθόνη του χρήστη. Δεν πρόκειται όμως για ένα «απλό» ελαστικό site…

Κεντραρισμένες εικόνες προεπισκόπησης (thumbnails)

Πολλές φορές απαιτείται να παρουσιάσουμε μια λίστα με εικόνες προεπισκόπησης (thumbnails) το μέγεθος των οποίων δεν το γνωρίζουμε ή δεν είναι σταθερό. Αυτό μπορεί να συμβεί είτε γιατί οι φωτογραφίες προέρχονται από διαφορετικές πηγές είτε γιατί το CMS που χρησιμοποιείται δεν έχει τη δυνατότητα να προσαρμόσει το μέγεθος στις απαιτήσεις μας κατά την καταχώρηση των προϊόντων. Ακολουθεί μια εύκολη μέθοδος για …ευπαρουσίαστες λίστες προϊόντων — χωρίς tables φυσικά!

Breadcrumb navigation και άλλες ιστορίες!

Μετά από 6 δύσκολους, σε προσωπικό αλλά και επαγγελματικό επίπεδο, επιστρέφω στην ενεργό «δράση», με ένα σύντομο tutorial και τις καλύτερες ευχές για τη νέα χρονιά που μόλις πριν από 1 μήνα ξεκίνησε!

Πρώτα βήματα στα CSS: hacks και bugs

Τα CSS hacks ανακαλύφθηκαν επειδή ο κάθε browser -ασχέτως με το πόσο κοντά στα standards βρίσκεται- έχει δική του άποψη για το πως θα ερμηνεύσει τον κώδικα CSS. Περίεργο, αλλά συμβαίνει, και τις περισσότερες φορές οφείλεται σε bugs, με πρωταθλητή τον Internet Explorer.

Πρώτα βήματα στα CSS: μενού

Έχοντας ολοκληρώσει τα header και container, μπορούμε να δούμε το μενού πλοήγησης του site. Η λίστα ul (unordered list) είναι το καταλληλότερο tag για την δημιουργία του βασικού μας μενού και με την βοήθεια των CSS θα την φέρουμε στα μέτρα μας.



Αυτό το website στηρίζεται στην πλατφόρμα WordPress. Οι σελίδα είναι έγκυρη XHTML Strict (όχι για πολύ ακόμα…) ενώ, έγκυρα είναι και τα CSS. Υπάρχει RSS feed στη διάθεση σας. Το περιεχόμενο προσφέρεται ελεύθερα εκτός απ'όπου δείτε τη σήμανση creative commons. Και κάποιος, επιτέλους, να σταματήσει τις πατέντες στο λογισμικό!