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

  • Ευχαριστούμε για το σχόλιο Ευγενία. Δυστυχώς δεν γνωρίζουμε αν υπάρχει παρόμοια γραμματοσειρά με την ENGLAND HAND στα Ελληνικά.

    10 δωρεάν καλλιγραφικές γραμματοσειρές
  • Πολύ χρήσιμο άρθρο. Ο αλγόριθμος της Google εξελίσσεται και μαζί του και η τέχνη του seo. Θα έλεγα ότι ωθεί τους seo experts σε μια πιο ολιστική προσέγγιση της online παρουσίας των πελατών τους. Αυτο σημαίνει ότι θα πρέπει να εμπλακούν σε θέματα content strategy, branding και social media γιατί η Google συνυπολογίζει όλα αυτά όταν αποφασίζει για το ranking μιας ιστοσελίδας. Ειδικά το content είναι το κλειδί στην νέα εποχή του search engine optimization. Θα πρέπει να δημιουργείται έχοντας στο μυαλό μας κυρίως τον επισκέπτη της ιστοσελίδας μας και λιγότερο τις μηχανές αναζήτησης. Θα πρέπει να προσθέτει πραγματικό value στους αναγνώστες του και ιδεατά να έχει χαρακτηριστικά που να συμβάλλουν στη δημιουργία buzz στα social media. Με τον τρόπο αυτό θα δημιουργηθούν με φυσικό τρόπο

    Google Panda 3.3, Google Venice και 38 επιπλέον αλλαγές στον αλγόριθμο της Google

Latest From Twitter