Css float και αυτοματο heigh

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

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

Απάντηση
Άβαταρ μέλους
christos312
Δημοσιεύσεις: 126
Εγγραφή: 13 Νοέμ 2005 22:13
Επικοινωνία:

Css float και αυτοματο heigh

Δημοσίευση από christos312 » 04 Σεπ 2010 01:52

Χαιρετώ την εξαιρετική παρέα.

Έχω την εξής απορία ...

Έστω οτι έχω ένα rule στο css με id main

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

#main {
	width: 1190px;
	margin-bottom: 50px;
	float: right;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 3em;
}
μέσα στο main υπάρχει ενα class Articles και κάτω από ενα κείμενο θέλω ένα άλλο div μέσα στο main το οποίο θα χωρίζεται σε άλλα 4 μικρότερα div κάτι σαν κουτάκια...

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

#main #offers{
	width: 860px;
	margin-left: 120px;
	padding: 5px;
	clear: both;
	margin-bottom: 100px;
	float: left;
}
#main #offers h1{
	font-family: "Comic Sans MS", cursive;
	color: #193742;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #193742;
	font-size: 1.5em;
	margin-bottom: .5em;
}
#wrapper #main #offers .box h2 {
	font-weight: bold;
	color: #960;
	margin-top: 0.3em;
	margin-right: 0px;
	margin-bottom: 0.5em;
	margin-left: 0.3em;
}

#main #offers .box{
	background-image: url(../_images/box_bg.png);
	background-repeat: no-repeat;
	width: 400px;
	height: 200px;
	float: left;
	margin-bottom: 4px;
	padding: 5px;
	
}
Τωρα το πρόβλημα είναι οτι αν και το #Main και το #offers είναι και τα δυο float: left τοτε το main σταμάτα πλέον να αναγνωρίζει οτι υπάρχει μέσα του υλικό και το ύψος του μηδενίζετε.

Δείτε οτι δεν έχω δηλωμένο ύψος στο main.

Τωρα για να το διορθώσω έκανα το main να κάνει float:left και το #main #offers να κάνει float:right Και clear:both;


Δεν ξέρω όμως κατά πόσο είναι η σωστή προσέγγιση. Γιατι όταν τα 2 div Κάνουν και τα δυο float:left το parent div χάνει την ικανότητα να αναγνωρίζει πόσο ύψος πρέπει να είναι με βάση τα δεδομένα;; Και πια ειναι η καλυτερη λυση;

Παράδειγμα αν το parent div κάνει float:left καλο είναι κάθε child div αντι να κάνει float να μπαινει στην θεση του με margins?

By the way το offers Θελω να μπει στην μέση της σελίδας...

Ελπιζω να μην σας κούρασα και να καταλαβαίνεται τι έγραψα :kaloe:

Ευχαριστώ εκ τον προτέρων
Εικόνα
"All This Has Happened Before And It Will Happen Again.."
Battlestar Galactica RULEZZ

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

Css float και αυτοματο heigh

Δημοσίευση από Khronos » 05 Σεπ 2010 14:26

Ενας τρόπος είναι να βάλεις στο div που περικλείει τα floatαρισμένα divs, overflow: hidden;

Ο σωστός τρόπος όμως είναι αυτός. Βάζεις την κλάση .clr στο div.

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

.clr { min-height: 0px; }
* html .clr { height: 1%!important; }

.clr:after {
   content: ".";
   display: block;
   height: 0px;
   font-size:0px;
   clear: both;
   visibility:hidden;
   overflow: hidden;
}

Άβαταρ μέλους
christos312
Δημοσιεύσεις: 126
Εγγραφή: 13 Νοέμ 2005 22:13
Επικοινωνία:

Css float και αυτοματο heigh

Δημοσίευση από christos312 » 06 Σεπ 2010 00:11

ευχαριστώ πολύ για την απάντηση... Θα το δοκιμάσω

Μπορίς όμως να μου πεις πως δουλεύει αυτό που έβαλες;

Η τουλάχιστον πως ονομάζεται για να ψάξω στο google για περισσότερες πληροφορείς για το πως δουλεύει και τι κάνει ακριβός; :roll:

:D
Εικόνα
"All This Has Happened Before And It Will Happen Again.."
Battlestar Galactica RULEZZ

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

Css float και αυτοματο heigh

Δημοσίευση από Khronos » 06 Σεπ 2010 03:10

Απλά διάβασε για τα css floats. Αν καταλάβεις πώς δουλεύουν, θα καταλάβεις και τον κώδικα.

Απάντηση

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

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

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