3 Column Layout

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

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

Απάντηση
nikos-manias
Δημοσιεύσεις: 38
Εγγραφή: 15 Ιαν 2010 10:13

3 Column Layout

Δημοσίευση από nikos-manias » 26 Ιαν 2012 19:41

Γειά σε όλους.

Προσπαθώ να στήσω το layout της ιστοσελίδας μου αλλά κάποια σημεία μάλλον μου ξεφεύγουν.

Η δομή της σελίδας είναι:

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

<body>
	<div id="container">
		<div id="mainBody">
			<div id="leftContent">
			</div>
			<div id="mainContent">
			</div>
			<div id="rightContent">
			</div>
		</div>
	
	</div>
</body>


Και το css είναι:

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

#container &#123;
	height&#58; auto;
	width&#58; 1024px;
	margin-right&#58; auto;
	margin-left&#58; auto;
	padding-right&#58; 0px;
	padding-left&#58; 0px;
	background-color&#58; #FFF;
&#125;
#container #mainbody  &#123;
	width&#58; 100%;
	margin-right&#58; 0px;
	margin-left&#58; 0px;
	position&#58; relative;
	background-color&#58; #FFFFFF;
	padding&#58; 0px;
	border&#58; 0px none #FFF;
	float&#58; left;
	height&#58; 100%;
&#125;
#mainbody #mainContent &#123;
	width&#58; 580px;
	position&#58; relative;
	height&#58; 100%;
	background-color&#58; #FFFFFF;
	font-size&#58; 13px;
	margin&#58; 0px;
	float&#58; left;
&#125;
#mainbody #leftContent &#123;
	width&#58; 200px;
	position&#58; relative;
	height&#58; 100%;
	float&#58; left;
	background-color&#58;#EBEBEB;
	padding&#58; 0px;
	margin&#58; 0px;
	color&#58; #444444;
&#125;
#mainbody #rightContent &#123;
	width&#58; 220px;
	position&#58; relative;
	height&#58; 100%;
	float&#58; right;
	background-color&#58;#EBEBEB;
	padding&#58; 0px;
	color&#58; #444444;
	font-size&#58; 12px;
	margin-top&#58; 0px;
	margin-right&#58; 15px;
	margin-bottom&#58; 0px;
	margin-left&#58; 0px;
&#125;




Αυτό που θέλω να πετύχω είναι, και οι τρείς στήλες να έχουν το ίδιο ύψος.
Η παραπάνω λύση δουλεύει μόνο εάν θέσω εγώ τιμή στο #mainbody (πχ: height:1200px;).

Μπορεί να γίνει αυτό αυτόματα?

Ευχαριστώ...

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

3 Column Layout

Δημοσίευση από apsuh0s » 26 Ιαν 2012 20:32

Αν κατάλαβα καλά κάτι τέτοιο θέλεις. Θα δεις τη βασική ιδέα και φαντάζομαι θα μπορείς να το επεκτείνεις για 3στηλο.
.ninja { color: black; visibility: hidden !important; }

nikos-manias
Δημοσιεύσεις: 38
Εγγραφή: 15 Ιαν 2010 10:13

3 Column Layout

Δημοσίευση από nikos-manias » 27 Ιαν 2012 12:02

Όντως μπορεί να γίνει έτσι.

Αλλά μήπως υπάρχει τρόπος να το πετύχω χωρίς να βάλω background image , όπως κάνει στο παράδειγμα αυτό?

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

3 Column Layout

Δημοσίευση από apsuh0s » 27 Ιαν 2012 12:32

Για δες αν σε βολεύει με jquery

http://filamentgroup.com/lab/setting_eq ... th_jquery/
.ninja { color: black; visibility: hidden !important; }

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

3 Column Layout

Δημοσίευση από korgr » 27 Ιαν 2012 14:22

Αν εννοείς να γίνει "καθαρά" μόνο με CSS η απάντηση είναι κατηγορηματική: ΟΧΙ
Έχει συζητηθεί πολλές φορές το συγκεκριμένο οπότε οι λύσεις είναι:
  • Με bg image
    Με js
    Με tables
    Με μεταμφιεσμένα tables :lol:

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

    <div style="background-color&#58;red; display&#58;table-cell">some content</div>
    <div style="background-color&#58;green; display&#58;table-cell"><br><br> some other content</div>

nikos-manias
Δημοσιεύσεις: 38
Εγγραφή: 15 Ιαν 2010 10:13

3 Column Layout

Δημοσίευση από nikos-manias » 02 Φεβ 2012 09:12

Τελικά χρησιμοποίησα την πρόταση του apsuh0s.
Μέχρι τώρα δουλεύει μια χαρά σε όλο το site μου..

Ευχαριστώ πολύ!!! :) :)

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

3 Column Layout

Δημοσίευση από nbc » 02 Φεβ 2012 13:12

Όλο το κόλπο είναι το μεγάλο padding-bottom το οποίο "ρουφιέται" με αντίστοιχο αρνητικό margin.

Τα υπόλοιπα είναι άνευ σημασίας, τα στήνετε όπως θέλετε.

Να σημειωθεί πως η μέθοδος είναι "αρχαία" (δεν θυμάμαι ποιος την πρωτο-ανακάλυψε) αλλά λειτουργεί ακόμη! Να προσθέσω πως υπάρχουν 2-3 ακόμη pure CSS μέθοδοι, αλλά η συγκεκριμένη είναι η πιο απλή και ανώδυνη.

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

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title>Pure CSS Equal Height Columns Test</title>
    
    <style type="text/css">
        *     &#123;margin&#58;0; padding&#58;0; border&#58;0;&#125;
        #page &#123;width &#58; 976px; margin&#58; 0 auto;&#125;
        #body &#123;overflow&#58; hidden;&#125;
        .col  &#123;float &#58; left; margin-bottom&#58; -99999px; padding-bottom&#58; 99999px;&#125;
        #col1 &#123;width &#58; 25%; background&#58; yellow;&#125;
        #col2 &#123;width &#58; 50%; background&#58; teal;  &#125;
        #col3 &#123;width &#58; 25%; background&#58; cyan;  &#125;
        #head, 
        #foot &#123;background&#58; silver;&#125;
    </style>
</head>

<body>

<div id="page">

    <div id="head">
        <h1>Header</h1>
    </div>

    <div id="body">
        <div id="col1" class="col">
            <p>1 liner</p>
        </div>
        <div id="col2" class="col">
            <p>2 liner<br/>2 liner</p>
        </div>
        <div id="col3" class="col">
            <p>3 liner<br/>3 liner<br/>3 liner</p>
        </div>
    </div>

    <div id="foot">
        <p>Footer</p>
    </div>
</div>

</body>

</html>

nikos-manias
Δημοσιεύσεις: 38
Εγγραφή: 15 Ιαν 2010 10:13

3 Column Layout

Δημοσίευση από nikos-manias » 02 Φεβ 2012 13:18

Όντως πολύ απλή λύση.
Αλλά βλέπω ότι έχει κάποιο θέμα σε IE 6.

Αλλά τελικά, έχει νόημα να κοιτάω πώς εμφανίζεται σε αυτήν την έκδοση?

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

3 Column Layout

Δημοσίευση από nbc » 02 Φεβ 2012 13:52

Παίζει και σε IE6, είμαι βέβαιος γιατί χρησιμοποιώ αυτήν την τεχνική από παλιά. Απλά, θα θέλει κάποιο από τα γνωστά hack του, λόγω των floats.

Δυστυχώς δεν τον έχω για να σου πω ακριβώς τι να κάνεις. Έχει πάψει να με απασχολεί... :D

Edit
----
Για δοκίμασε να προσθέσεις "zoom: 1;" στο #body, γιατί εκεί βλέπω ένα πιθανό πρόβλημα... Αλλιώς, πες μου τι σου παρουσιάζει.

Απάντηση

Επιστροφή στο “HTML και XHTML”

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

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