10Απρ

Μάθετε πώς να κάνετε clear floating layers (divs).

, 10 Απριλίου 2008 | WEB DESIGN - AUTHORING | 0 Σχόλια

Ένα συχνό πρόβλημα που αντιμετωπίζουν οι web designers όταν χρησιμοποιούν float layer layouts είναι ότι το βασικό layer (container) που περιέχει τα floats δεν μεγαλώνει σε ύψος (stretch) για να τα καλύψει (wrap). Αυτό ουσιαστικά είναι ένα σημαντικό θέμα που δεν τους επιτρέπει να έχουν πλήρη έλεγχο των divs (layers) και τους μειώνει τις εικαστικές δυνατότητες.

ΠΑΡΑΔΕΙΓΜΑ

Ας υποθέσουμε πως θέλετε να σχεδιάσετε ένα layout με δύο στήλες που στο πίσω μέρος (background ) του να είναι χρώματος γκρι. Ορίζετε λοιπόν το βασικό σας div (container) με background-color γκρι το οποίο θα φιλοξενήσει τα δύο floating divs.

}
#container {
background-color: #CCCCCC;
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
}

Ύστερα ορίζετε και τα δύο floats που θα είναι ουσιαστικά οι δύο στήλες που θα περιέχουν το κείμενο της ιστοσελίδας σας.

}
#left_div {
float: left;
width: 200px;
}
#right_div {
float: right;
width: 500px;
}

Aς δούμε το παράδειγμα με το πρόβλημα όπως προκύπτει.

Ουσιαστικά ή λύση είναι πολύ απλή, ορίζετε ένα div με clear-both attribute κάτω από τα floating divs και έχετε το επιθυμητό αποτέλεσμα.

}
#clear_all {
clear: both;
}

Παράδειγμα με clear-both

Υπάρχουν και άλλοι τρόποι που μπορείτε να χρησιμοποιήσετε εάν δεν σας ικανοποιεί ο παραπάνω τρόπος όπως:

http://www.positioniseverything.net/easyclearing.html
http://www.quirksmode.org/css/clearing.html

ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Μάθετε πώς να κάνετε clear floating layers (divs). γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.

Σχολιάστε

Back to top

Recent comments

  • Πολυ καλο αθρο πραγματικα!

    Η σωστή αρχιτεκτονική ενός website και τα οφέλη της
  • Πολύ χρήσιμη η λίστα με τα online tools. Ο επιτυχημένος σχεδιασμός μιας ιστοσελίδας βοηθά σε δύο κατευθύνσεις. Η πρώτη είναι ότι βελτιώνει την εμπειρία του επισκέπτη της ιστοσελίδας με συνέπεια ο τελευταίος να βλέπει περισσότερες σελίδες και να μένει περισσότερο χρόνο σε αυτή. Η δεύτερη είναι ότι επειδή ακριβώς βελτιώνονται τα στατιστικά στοιχεία της ιστοσελίδας, όπως το bounce rate, ο μέσος χρόνος παραμονής στην ιστοσελίδα και ο αριθμός των σελίδων ανά επίσκεψη, βελτιώνεται και η κατάταξη της ιστοσελίδας στα οργανικά αποτελέσματα της Google.

    10+1 Χρήσιμα website και on line tools

Latest From Twitter