Αυτόματη αύξηση ύψος δύο παραλλήλων div

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

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

Απάντηση
Άβαταρ μέλους
nknet
Δημοσιεύσεις: 97
Εγγραφή: 23 Οκτ 2003 07:54

Αυτόματη αύξηση ύψος δύο παραλλήλων div

Δημοσίευση από nknet » 25 Μάιος 2010 14:39

Καλησπέρα, θα ήθελα την βοήθειά σας όσο αφορά το ύψος από 2 div τα οποία είναι κάθετα και παράλληλα μεταξύ τους. Συγκεκριμένα έψαχνα ένα τροπο ώστε όταν αυξάνεται το ύψος στο δεξί div (επειδή βάζω κείμενα πχ.) να αυξάνεται όμοια και το αριστερό και το ανάποδο. Δηλαδή τα ύψη των δύο div's να αυξάνονται παράλληλα.
Τα δύο div's τα έχω ονομάσει left και right τα οποία βρίσκονται σε ένα μεγαλύτερο div, το content.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
body &#123;
	text-align&#58;center;
	margin&#58;20px;
	padding&#58;0;
	color&#58; #000000;
	background-color&#58; #9343B9;
&#125;
#container &#123;
	position&#58;relative;
	width&#58;1000px;
	height&#58; 100%;
	margin-top&#58; 0px;
	margin-right&#58; auto;
	margin-bottom&#58; 0px;
	margin-left&#58; auto;
	border&#58; 1px solid #FFFFFF;
	background-color&#58; #FFFFFF;
&#125;
#header &#123;
	position&#58;relative;
	width&#58;1000px;
	height&#58; 50px;
	margin-top&#58; 0px;
	margin-right&#58; auto;
	margin-bottom&#58; 0px;
	margin-left&#58; auto;
	border&#58; 1px solid #FFFFFF;
	background-color&#58; #000000;
&#125;
#content &#123;
	position&#58;relative;
	width&#58;1000px;
	height&#58; auto;
	margin-top&#58; 0px;
	margin-right&#58; auto;
	margin-bottom&#58; 0px;
	margin-left&#58; auto;
	border&#58; 1px solid #FFFFFF;
	background-color&#58; #FFFFFF;
&#125;
#left &#123;
	width&#58;200px;
	margin-top&#58; 0px;
	margin-right&#58; auto;
	margin-bottom&#58; 0px;
	margin-left&#58; auto;
	background-color&#58; #CCCCCC;
	float&#58; left;
             height&#58; 100px;
&#125;
#right &#123;
	width&#58;800px;
	height&#58; auto;
	margin-top&#58; 0px;
	margin-right&#58; auto;
	margin-bottom&#58; 0px;
	margin-left&#58; auto;
	background-color&#58; #3366FF;
	float&#58; right;
&#125;
#footer &#123;
	position&#58;relative;
	width&#58;1000px;
	height&#58; 50px;
	margin-top&#58; 0px;
	margin-right&#58; auto;
	margin-bottom&#58; 0px;
	margin-left&#58; auto;
	border&#58; 1px solid #FFFFFF;
	background-color&#58; #FF66CC;
	clear&#58; both;
&#125;
-->
</style>
</head>

<body>

  <div id="container">
     <div id="header"></div>
     <div id="content">
       <div id="left"></div>

       <div id="right">
         <p>κείμενο - κείμενο </p>
       </div>
     </div>
     <div id="footer"></div>
  </div>

</body>
</html>

Ευχαριστώ εκ τον προτέρων.

nbc
Honorary Member
Δημοσιεύσεις: 526
Εγγραφή: 05 Σεπ 2009 20:12
Επικοινωνία:

Αυτόματη αύξηση ύψος δύο παραλλήλων div

Δημοσίευση από nbc » 25 Μάιος 2010 14:54

Απ' ότι βλέπω στα χαλάει το background. Αυτό λύνεται εύκολα με την τεχνική που λέγεται "faux columns". Ουσιαστικά, βάζεις ένα background repeat-y στο content, που να καλύπτει και τα δύο columns. Αν τα floats είναι boxed, τότε υπάρχει θέμα.

Άλλη λύση είναι να τους δηλώσεις κοινό ύψος, με παράλληλη χρήση overflow. Το ύψος μπορεί να αφορά τα floats ή το content.

Άλλη λύση είναι η javascript που θα ψηλώνει το κοντύτερο.

Αν δει το θέμα το korgr, θα σου πει και τη βασίλισσα των λύσεων - εγώ έχω πιπέρι στο στόμα :D

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Αυτόματη αύξηση ύψος δύο παραλλήλων div

Δημοσίευση από korgr » 25 Μάιος 2010 17:36

nbc έγραψε: Αν δει το θέμα το korgr, θα σου πει και τη βασίλισσα των λύσεων - εγώ έχω πιπέρι στο στόμα :D
Αυτα πια κομμενα!
Τωρα τα tables υπηρετουν μονο εμενα :P
Οι αλλοι στα fora και στους νευρολογους.
Τελικα το θεμα εχει ξεφυγει και απο τα semantic και απο το σωστο markup. Εχει οδηγηθει πλεον σε ενα απιστευτα χαζο εγωισμο του στυλ "γινεται δεν γινεται εγω θα το κανω με divs".
Αφορισαμε ενα εν δυναμει υφισταμενο html tag
Αντι να δουμε το viewport βλεπουμε το view-source. Αν αυτο ειναι οκ, ε ενταξει μωρε ποιος ασχολειται αν η σελιδα δεν υπηρετει την αισθητικη και την εργονομια του χρηστη...

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

Αυτόματη αύξηση ύψος δύο παραλλήλων div

Δημοσίευση από fafos » 25 Μάιος 2010 17:58

korgr έγραψε: Αυτα πια κομμενα!
Τωρα τα tables υπηρετουν μονο εμενα :P
Οι αλλοι στα fora και στους νευρολογους.
Τελικα το θεμα εχει ξεφυγει και απο τα semantic και απο το σωστο markup. Εχει οδηγηθει πλεον σε ενα απιστευτα χαζο εγωισμο του στυλ "γινεται δεν γινεται εγω θα το κανω με divs".
Αφορισαμε ενα εν δυναμει υφισταμενο html tag
Αντι να δουμε το viewport βλεπουμε το view-source. Αν αυτο ειναι οκ, ε ενταξει μωρε ποιος ασχολειται αν η σελιδα δεν υπηρετει την αισθητικη και την εργονομια του χρηστη...
tha ta poume me sena opisthodromike sthn HTML ekdosh 13... :lol:

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Αυτόματη αύξηση ύψος δύο παραλλήλων div

Δημοσίευση από korgr » 25 Μάιος 2010 19:38

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

<div>
   <div>
      <div>
         <div>
            <div>
               <div>
                  <div id="I_like_Tables"> Να τα πούμε, γιατι να μην τα πουμε?</div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
:lol:

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Αυτόματη αύξηση ύψος δύο παραλλήλων div

Δημοσίευση από Basilakis » 25 Μάιος 2010 23:56

βασικά η έκδοση HTML5 έχει πολλά στοιχεία τα οποία θα κάνανε εάν τη διαβάσεις να έχει και ένα backwards capability...

Προσωπικά έτσι μου φαίνεται σαν δομή πλέον....

Άβαταρ μέλους
nknet
Δημοσιεύσεις: 97
Εγγραφή: 23 Οκτ 2003 07:54

Αυτόματη αύξηση ύψος δύο παραλλήλων div

Δημοσίευση από nknet » 26 Μάιος 2010 12:17

Καταρχήν σας ευχαριστώ για το ενδιαφέρον σας αν και δυσκολεύομαι ακομη να καταλάβω τι πρέπει να κάνω. Θεωρώ ότι η γνώμη του Basilakis είναι σωστή εν μέρη, γιατί δεν θα είμαι ποτέ σίγουρος εαν ο χρήστης που θα βλέπει το site μου θα έχει τις τελευταίες version όλων των web broswers. Γι'αυτό θα ήθελα αν ήταν έύκολο ο nbc να μου το εξηγήσει λίγο καλύτερα. Με background repeat-y δεν λύνω τίποτα γιατί το κεντρικό div και τα 2 εσωτερικά έχουν διαφορετικά backrounds. Επίσης λες ''αν τα floats είναι boxes'', δηλαδή? Τα floats δεν είναι left και right??
Ή τελικά να κατασταλάξω ότι δεν γίνεται αυτό που ζητάω χρησιμοποιώντας τα div's αλλα μόνο με τα tables, σύμφωνα με τον korg????

Σας ευχαριστώ!

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Αυτόματη αύξηση ύψος δύο παραλλήλων div

Δημοσίευση από Basilakis » 26 Μάιος 2010 12:34

κοίτα, απο κάποιο σημείο και μετά πρέπει να αρχίσεις να σκέφτεσαι και το

- Πόσο χρόνο θα μου πάρει να βρω μια λύση με divs

- Πόσο χρόνο θα μου πάρει να το τελειώσω τσακ - μπαμ χωρίς περιτά Hacks Και ιστορίες; :P


Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Αυτόματη αύξηση ύψος δύο παραλλήλων div

Δημοσίευση από dimsis » 26 Μάιος 2010 14:12

Η ερώτηση που κάνεις πρέπει να είναι από τις πρώτες απορίες που έχουν όλοι όσοι προσπαθούν να μεταβούν από τα tables σε div layouts. Την έχω κάνει και εγώ εδώ μέσα στο παρελθόν. Τεχνικές λύσεις υπάρχουν, αλλά ενημερωτικά και εμπειρικά σου λέω επειδή το ψάχνεις για το κλασικό τρίστηλο που κάναμε με 3 td σε ένα table και όλα τα βάζαμε εκεί μέσα, ή όλη λογική του στησίματος με CSS διαφέρει εντελώς, χωρίς αυτό να είναι αρνητικό. Το αντίθετο θα έλεγα. Αν θα στήσεις μερικά sites από mockup σε xhtml θα το δεις και εσύ στην πράξη. Σκέψου λίγο αν αυτό που θέλεις να πετύχεις είναι απαραίτητο να γίνει με equal height divs ή μπορεί να γίνει και με blocks μέσα σε αυτά τα divs που θα σου δημιουργήσουν ένα τρίστηλο ας πούμε.

Τεχνικές λύσεις υπάρχουν:
faux columns, javascript, clean cross browser λύσεις, λύσεις με hacks κλπ
http://matthewjamestaylor.com/blog/equa ... s-no-hacks
http://www.ejeliot.com/blog/61
http://www.positioniseverything.net/art ... qualheight

old topics:
http://www.freestuff.gr/forums/viewtopic.php?t=20340
http://www.freestuff.gr/forums/viewtopic.php?t=41082

Άβαταρ μέλους
nknet
Δημοσιεύσεις: 97
Εγγραφή: 23 Οκτ 2003 07:54

Αυτόματη αύξηση ύψος δύο παραλλήλων div

Δημοσίευση από nknet » 27 Μάιος 2010 15:26

Οκ σας ευχαριστώ όλους

Απάντηση

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

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

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