css menu with background image

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

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

Απάντηση
mgiota
Δημοσιεύσεις: 190
Εγγραφή: 15 Σεπ 2009 13:11
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

css menu with background image

Δημοσίευση από mgiota » 09 Δεκ 2009 17:18

Γεια σας παιδιά έχω την εξής απορία:

Θέλω να κάνω ένα μενού όπου οι λέξεις θα αντικαθίστανται από εικόνες (στην ουσία η εικόνα θα είναι η ίδια λέξη απλά με πιο ωραία γραμματοσειρά που έχει δώσει ο γραφίστας) και στο hover η εκόνα θα αντικαθίσταται από μια άλλη που είναι στην ουσία η ίδια η λέξη απλά με μια κόκκινη γραμμή στη μέση. Επειδή δεν ξέρω αν το εξήγησα σωστά επισυνάπτω μια εικόνα με αυτό που περιέγραψα.

Διάβασα το παρακάτω tutorial http://www.webdesignerwall.com/tutorial ... -css-menu/, το οποίο εξηγεί πως μπορώ να πετύχω κάτι τέτοιο με background-image και position, το πρόβλημά μου όμως είναι ότι το μενού δημιουργείται δυναμικά.

Μπορώ να ενσωματώσω php σε css για να το πετύχω αυτό; Ή να χρησιμοποιήσω inline style στον κώδικά μου; Η μήπως υπάρχει πιο απλή λύση;
Συνημμένα
copyazri20091124.png
copyazri20091124.png (2.29 KiB) Προβλήθηκε 2714 φορές

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

css menu with background image

Δημοσίευση από dimsis » 09 Δεκ 2009 18:08

Όταν λες το μενού δημιουργείται δυναμικά, θα ανεβάζει ο admin και την εικόνα του μενού;
inline πρέπει να το κάνεις, γιατί δεν μπορείς να μαντεύεις το όνομα της εικόνας που θα ανέβει ώστε να το έχεις από πριν σε external CSS ... εκτός και αν δημιουργείς ένα CSS file και τον CSS κώδικα για το μενού κάθε φορά που αλλάζουν οι επιλογές του μενού.

mgiota
Δημοσιεύσεις: 190
Εγγραφή: 15 Σεπ 2009 13:11
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

css menu with background image

Δημοσίευση από mgiota » 09 Δεκ 2009 18:21

Ναι ο admin θα ανεβάζει και την εικόνα του μενού.

Άλλαξα τη λογική όμως ως εξής: Δε χρησιμοποίησα background-image αλλά <img src="<?php echo $photo;?>"/> για τις λέξεις και όταν είναι επιλεγμένο κάποιο μενού τοποθέτησα με position absolute μία εικόνα που είναι η κόκκινη γραμμή. Η γραμμή τοποθετείται μια χαρά, αλλά τώρα έχω πρόβλημα στο να την εμφανίσω για το επιλεγμένο μενού γιατί γίνεται ένα μπέρδεμα με ajax και jquery (χρησιμοποιώ το jquery.url.js), οπότε θέλει να το ψάξω κι' άλλο.
dimsis έγραψε: εκτός και αν δημιουργείς ένα CSS file και τον CSS κώδικα για το μενού κάθε φορά που αλλάζουν οι επιλογές του μενού.
Δεν το κατάλαβα αυτό που λες.

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

css menu with background image

Δημοσίευση από dimsis » 09 Δεκ 2009 18:28

Λέω πως αν δεν ήθελες inline θα μπορούσες να δημιουργούσες / έγραφες / έφτιαχνες ένα αρχείο ας πούμε menu.css με τον κώδικα css που χρειάζεται για να παίξει το μενού.

Πες π.χ. ότι είμαι admin φτιάχνω μια επιλογή του μενού "Home" και ανεβάζω και την εικόνα home.png που θα συσχετιστεί με αυτό. Με το που πατάω submit για να καταχωρηθεί στη βάση μου η νέα επιλογή του μενού, δημιουργώ και το αρχείο menu.css που έχω ως background-image:$eikona την εικόνα που μόλις ανέβασε ο admin.
Στη σελίδα μου το μόνο που χρειάζομαι είναι ένα μόνιμο @import του menu.css ...

mgiota
Δημοσιεύσεις: 190
Εγγραφή: 15 Σεπ 2009 13:11
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

css menu with background image

Δημοσίευση από mgiota » 09 Δεκ 2009 18:39

δηλαδή αν έχω στο css background-image:$eikona, θα πρέπει και στην php σελίδα εκεί που τραβάω τα δεδομένα από τη βάση δεδομένων να την ονομάσω $eikona ή μπορώ και στο css να γράψω κανονικά php; sorry μπορεί να ρωτάω και βλακεία. δεν ξέρω αν κατάλαβες τι εννοώ γιατί και γω μπερδεύτηκα λίγο.

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

css menu with background image

Δημοσίευση από dimsis » 09 Δεκ 2009 18:47

Το $eikona το έβαλα για να δείξω ότι αναφέρομαι σε variable της php, sorry αν σε μπέρδεψε. Όχι στο css δεν μπορείς να γράψεις php.
Στον php κώδικα πρέπει να το κάνεις. Όπως φτιάχνει το μενού δυναμικά και εισάγει κάποια δεδομένα λογικά στη βάση, σε εκείνη την φάση π.χ. μετά την εισαγωγή των δεδομένων στην βάση, μπορεί να δημιουργείται και το external css αρχείο. Δεν μπορώ να το περιγράψω πιο απλά.

Με την php δείχνετε κάποια φάση μια φόρμα όπου εισάγει ο διαχειριστής τα στοιχεία της επιλογής του μενού π.χ.
τίτλος:Κεντρική
εικόνα: home.png

μόλις ο διαχειριστής πατήσεις ας πούμε το κουμπί "Καταχώρηση" εκτελείτε μια διεργασία. π.χ. κάποια insert στην βάση δεδομένων. Όπως δημιουργείται το query που θα τρέξει για να εισαχθούν τα δεδομένα στην βάση, με τον ίδιο τρόπο μπορείς σε εκείνη τη φάση να δημιουργείς ( ο developer τελοσπάντων όχι εσύ ) και ένα CSS αρχείο στο folder του server που θέλεις που θα έχει το class name και το όνομα της εικόνας που ανέβασε και ότι άλλο css κώδικα χρειάζεσαι για το μενού σου...

mgiota
Δημοσιεύσεις: 190
Εγγραφή: 15 Σεπ 2009 13:11
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

css menu with background image

Δημοσίευση από mgiota » 09 Δεκ 2009 19:42

ok to piasa tha to dokimasw.

thanks

Απάντηση

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

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

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