CSS floating menu - βοήθεια παρακαλώ

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

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

Απάντηση
dimitris_s
Δημοσιεύσεις: 10
Εγγραφή: 10 Ιουν 2007 19:41

CSS floating menu - βοήθεια παρακαλώ

Δημοσίευση από dimitris_s » 06 Απρ 2009 02:57

Σε μια αρκετά μακριά σελίδα του site που ετοιμάζω, επέλεξα να φτιάξω ένα μενού το οποίο θα ακολουθεί το scrolling.

Κατάφερα να το κάνω να στοιχίζεται σωστά ως προς το "top", αλλά κατά το scrolling δεν φαίνεται όλο το μενού, κι επίσης όταν φτάσει στο bottom, βγαίνει εκτός περιθωρίων και "πατάει" επάνω στο footer.

Δείτε το link

Να επισημάνω επίσης, ότι εάν αφαιρεθούν μερικά li από τo ul, και μικρύνει το μέγεθος του menu, τότε έρχεται και κάθεται, σχεδόν, μια χαρά.

Παρακαλώ για τις συμβουλές σας, κι ευχαριστώ προκαταβολικά.

Το επίμαχο CSS:

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

#floatMenu {
    position: absolute;
	left:47%;
    top: 575px;
    margin-left: 235px;
    width: 250px;
    font-family: Helvetica,Arial,Verdana,sans-serif;
}

#floatMenu ul {
    margin-bottom: -20px;
	list-style: none;
}

#floatMenu ul li a {
    display: block;
    border:1px solid #768c1f;
    background:#dae7a7;
    border-left:6px solid #768c1f;
    text-decoration:none;
    color:#903a45;
    padding:5px 5px 5px 25px;
	list-style: none;
}

#floatMenu ul li a:hover {
    display:block;
    border:1px solid #768c1f;
    background:#dae7a7 url(img/menu-bg.png) no-repeat;
    border-left:6px solid #768c1f;
    text-decoration:none;
    color:#903a45;
    padding:5px 5px 5px 25px;
	list-style: none;
}
Να αναφέρω ότι με Chrome, δουλεύει σχεδόν κανονικά. Το θέμα εμφανίζεται σε IE, Opera (νομίζω), και σε ΙΕ7.
Τελευταία επεξεργασία από το μέλος dimitris_s την 09 Απρ 2009 20:24, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
xhtmlhero
Δημοσιεύσεις: 4
Εγγραφή: 05 Μαρ 2009 22:30
Επικοινωνία:

CSS floating menu - βοήθεια παρακαλώ

Δημοσίευση από xhtmlhero » 07 Απρ 2009 02:48

Δοκίμασες να βγάλεις το margin-bottom:-20px;

dimitris_s
Δημοσιεύσεις: 10
Εγγραφή: 10 Ιουν 2007 19:41

CSS floating menu - βοήθεια παρακαλώ

Δημοσίευση από dimitris_s » 07 Απρ 2009 10:50

Ευχαριστώ για την απάντηση.

Το ίδιο γίνεται και χωρίς το συγκεκριμένο margin. Γενικά έχω παίξει πολυ με το margin-bottom, αλλά χωρίς εμφανές αποτέλεσμα.

Να διορθώσω το αρχικό μήνυμα λέγοντας, ότι το θέμα παρουσιάζεται σε IE7, Opera και FF 3.0.8. Σε Chrome δείχνει να δουλεύει.

dimitris_s
Δημοσιεύσεις: 10
Εγγραφή: 10 Ιουν 2007 19:41

CSS floating menu - βοήθεια παρακαλώ

Δημοσίευση από dimitris_s » 08 Απρ 2009 07:45

Λοιπόν. Ο εύκολος τρόπος να λυθεί, είναι να φύγει το top: 575px; από εδώ:

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


#floatMenu {
    position: absolute;
   left:47%;
    top: 575px;
    margin-left: 235px;
    width: 250px;
    font-family: Helvetica,Arial,Verdana,sans-serif;
} 
Εάν το βάλω π.χ το top να είναι 10px, όλα δουλεύουν μια χαρά, εκτός του ότι το μενού πάει by default πάνω πάνω στη σελίδα, γιατί θεωρεί ως top, όχι το αμέσως πιο πάνω object από αυτό, αλλά το top της σελίδας.

Και έρχεται η ερώτηση, και όποιος γνωρίζει παρακαλώ ας απαντήσει:

Πως γίνεται να του βάλω ένα div (π.χ) επάνω από το μενού, και το top να ορίζει την απόσταση από αυτό το div κι όχι απ' την αρχή της σελίδας;


Δε μου' ρχεται τίποτα τώρα, τέτοια ώρα τέτοια λόγια... ;)

Απάντηση

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

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

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