fixed positioning και δεξιά στοίχιση

22.11.11

Είχα ένα μενού στοιχισμένο δεξια, και ήθελα να γίνει fixed (δηλαδή να μένει στο ίδιο μέρος καθώς η σελίδα θα κάνει scroll), χωρίς να χρειάζεται να του αλλάζω θέση κάθε φορά που προσθέτω ένα καινούριο αντικείμενο. Αυτό είναι εύκολο να το κάνεις στο δεξί άκρο της σελίδας, η σε κάποιο σημείο μετρημένο με pixels από την άκρη της σελίδας. Σε ένα πλήρως δυναμικό (fluid) layout αυτό δεν είναι ικανοποιητικό. Επίσης ήθελα ο χώρος που καταλαμβάνει το μενού να μην καλύπτεται από άλλα div που το ακολουθούν στο markup, με άλλα λόγια, το υπόλοιπο layout να μην μεταβληθεί καθόλου, καθώς το μενού θα γίνει από static -> fixed.

Η λύση είναι η εξής (λίγο βρόμικη αλλά λειτουργεί καλά)

<div>
     <div>
          <div>
               <a href="#">home</a>
               <a href="#">contact</a>
               ...
          </div>
     </div>
</div>

.menu { text-align: right; float: right; } .menu:after{ content: " "; height: auto; display: block; float: none; clear: both; font-size: όσο και το μενού σας } .menu .fixed .abs{ right: 0; } .fixed{ position: fixed; } .abs { position: absolute; }

Υπ' όψιν ότι αν το element που θέλετε να κάνετε fixed έχει μεταβλητό ύψος το σύστημα αυτό δεν λειτουργεί.