CSS Layout με αριστερή στήλη με φόντο & ύψος όσο η κεντρική;

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

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

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

CSS Layout με αριστερή στήλη με φόντο & ύψος όσο η κεντρική;

Δημοσίευση από dimsis » 24 Ιαν 2006 15:39

Έκανα κάτι δοκιμές για liquid css template, όπου υπάρχει header, αριστερή στήλη, κεντρική, δεξιά στήλη και footer.
Η ερώτηση είναι πως βάζουμε tiled background image π.χ. στην αριστερή στήλη που το ύψος της να προσαρμόζεται αναλόγως το ύψος της κεντρικής στήλης; (πολύ εύκολο και κλασικό όταν χρησιμοποιούμε tables)
Προσοχή! δεν ψάχνω πως θα κάνω το ύψος δυναμικό βάση του συνολικού ύψους (ανάλυσης) του browser, αλλά η αριστερή (και η δεξιά) στήλη να έχουν πάντα το ίδιο ύψος με την κεντρική...
Δύσκολο;

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

CSS Layout με αριστερή στήλη με φόντο & ύψος όσο η κεντρική;

Δημοσίευση από sibas » 24 Ιαν 2006 16:02

Γεια σου πατρίδα dimsis

Σχετικά με το tiled background image μπορείς να χρησιμοποιήσεις μέσα στο div
background-image: url("someimage.jpg.") no-repeat;
background-position:0% 0%;
background-attachment: fixed; ή scroll

Το no-repeat μπορεί να είναι repeat, repeat-χ ή repeat-y αναλόγως το τι tiles έχεις.

Σχετικά με το ύψος μάλλον θα πρέπει να βάλεις μια απόλυτη τιμή και στα 2.

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

CSS Layout με αριστερή στήλη με φόντο & ύψος όσο η κεντρική;

Δημοσίευση από dimsis » 24 Ιαν 2006 16:21

Thanx sibas, αλλά δεν θέλω απόλυτες τιμές. Όπως έγραψα και στο μήνυμα μου με ενδιαφέρει liquid layout, τα πάντα δηλαδή είναι με ποσοστά (και ΑΝ θελήσω να το αλλάξω απλώς να βάζω στο CSS fix τιμή σε pixels αντί για %).

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

CSS Layout με αριστερή στήλη με φόντο & ύψος όσο η κεντρική;

Δημοσίευση από sibas » 24 Ιαν 2006 17:09

Ναι ίσωςνα μην το είπα εγώ σωστά,
μπορείς να βάλεις απόλυτο %
πχ
#left {
position:absolute;
left:0;
top:0px;
padding:0;
width:200px;
height:100%;
}

αν βάλεις το ίδιο height και στο right τότε δεν θα έχεις κανένα πρόβλημα.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

CSS Layout με αριστερή στήλη με φόντο & ύψος όσο η κεντρική;

Δημοσίευση από skeftomilos » 24 Ιαν 2006 19:56

Είναι πρόβλημα με το CSS1 γιατί δεν υπάρχει τρόπος να προσαρμόζεται το ύψος των στοιχείων ως προς το στοιχείο με το περισσότερο περιεχόμενο. Ίσως να μπορεί να γίνει κάτι σχετικά ασφαλές και εμφανίσιμο κάνοντας διαφανή την αριστερή στήλη και βάζοντας το background image στο body.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

CSS Layout με αριστερή στήλη με φόντο & ύψος όσο η κεντρική;

Δημοσίευση από dimsis » 25 Ιαν 2006 22:06

Οπότε πάμε για tables πάλι έτσι;...
με την πρώτη προσπάθεια παρατάω το css layout ... βρήκα σε ένα site κάτι τέτοιο που ψάχνω, αλλά θέλει 50 γραμμές στο css για να κάνει κάτι που γίνετε με 5 γραμμές και table

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

CSS Layout με αριστερή στήλη με φόντο & ύψος όσο η κεντρική;

Δημοσίευση από skeftomilos » 25 Ιαν 2006 22:41

Χμ, μάλλον. Αρκεί μόνο να μη μας πάρει είδηση ο Cherouvim γιατί αλίμονό μας! :D
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

CSS Layout με αριστερή στήλη με φόντο & ύψος όσο η κεντρική;

Δημοσίευση από chchrist » 25 Ιαν 2006 23:47

Πάντως η λύση που πρότινε ο skeftomilos είναι αρκετά καλή. Θα μπορούσες να έχεις ένα <div id="main"></div>

με :

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

#main &#123;
background&#58;url&#40;toimagesou&#41; repeat-y;
float&#58;left;
width&#58;100% ή 770px; fixed ότι προτιμάς
&#125;
Και το background image να είναι έτσι σχεδιασμένο ώστε εκεί που θα έιναι τα columns σου να έχει το χρώμα ή το σχέδιο που θέλεις.

Άβαταρ μέλους
3dotsgr
Δημοσιεύσεις: 106
Εγγραφή: 20 Ιαν 2005 19:12
Τοποθεσία: Κομοτηνή
Επικοινωνία:

CSS Layout με αριστερή στήλη με φόντο & ύψος όσο η κεντρική;

Δημοσίευση από 3dotsgr » 09 Φεβ 2006 22:53

έρχομαι αρκετά κοντά σε αυτό που θέλεις ;

για ρίξε μια ματιά

http://www.3dots.gr/experiment/fordimsis.htm

:wink:
You take the blue pill and the story ends. You wake in your bed and believe whatever you want to believe. You take the red pill and you stay in Wonderland and I show you how deep the rabbit-hole goes. Remember.. all I am offering is the truth, nothing more.

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

CSS Layout με αριστερή στήλη με φόντο & ύψος όσο η κεντρική;

Δημοσίευση από dimsis » 09 Φεβ 2006 23:19

3dotsgr ναι! Και μια δεξιά στήλη να συμπεριφέρετε όπως η αριστερή. Δηλαδή το ύψος της να είναι ίσο με της μεγαλύτερης "στήλης". Το ίδιο πρέπει να ισχύει και για τις 3 στήλες.
Οι υπόλοιπες προσαρμόζονται στο ύψος της ψηλότερης, όπως θα γινόταν με table.
Αν μπορείς να προσθέσεις και ένα header / footer θα είσαι super! THANX!
(αν δοκιμάσεις να το μικρύνεις αρκετά βέβαια χάνετε πάλι η μπάλα... δηλαδή τα κείμενα της μεσαίας στήλης πάνε τέρμα θεού... αλλά έστω και έτσι είναι πολύ κοντά)

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

CSS Layout με αριστερή στήλη με φόντο & ύψος όσο η κεντρική;

Δημοσίευση από cherouvim » 10 Φεβ 2006 08:12

Ayto sou kanei?

An se halaei to oti mpainei to ena content mesa sto allo otan o hristis mikrinei poly ton browser, pou den tha eprepe giati einai epilogi tou hristi na kanei mia toso extreme rithmisi, mporeis na valeis min-width: 600px; sto #container. Ston IE to min-width den doulevei omos opote tha thes kiallo psaksimo.

Oso gia ta bgs, des to live-demo pou ekana (rip apo to floatutorial).

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

CSS Layout με αριστερή στήλη με φόντο & ύψος όσο η κεντρική;

Δημοσίευση από skeftomilos » 10 Φεβ 2006 09:51

cherouvim έγραψε:Oso gia ta bgs, des to live-demo pou ekana (rip apo to floatutorial).
Nice! Όμως με min-width:600px πώς θα χωρέσει στην οθόνη ενός κινητού;
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

CSS Layout με αριστερή στήλη με φόντο & ύψος όσο η κεντρική;

Δημοσίευση από cherouvim » 10 Φεβ 2006 10:50

Milame gia to style pou exei attribute media='screen, projection'. An thes ftiahneis ena style gia media='mobile' (gia advanced syskeves) opou enoeitai oti den tha eihes tristilo, apla ta divs to ena kato apo to allo me ta analoga 'skip to content', 'skip to links' links. An kai outosiallos gnorizeis oti to klasiko mobile den kserei CSS opote den hriazete na kaneis tipota. Apo ti stigmi loipon pou to min-width einai dilosi sto style pou den vlepei to kinito kai oxi sto HTML pou ypohreotika tha to diavasei i othoni, to kinito, o ektypotis kai to screen reader tou tyflou tote gnorizeis oti tha horesei.

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

CSS Layout με αριστερή στήλη με φόντο & ύψος όσο η κεντρική;

Δημοσίευση από dimsis » 10 Φεβ 2006 11:10

cherouvim έγραψε:Ayto sou kanei?
.
Πολύ καλά και τα δυο αν και έχουν πάλι μικρές απώλειες όταν μικραίνουμε το παράθυρο κάτω από τα 550 pixels περίπου, και μάλλον η μεσαία στήλη δεν είναι valign=top ... πάντως είναι πολύ κοντά σε αυτό που έψαχνα, ευχαριστώ.

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

CSS Layout με αριστερή στήλη με φόντο & ύψος όσο η κεντρική;

Δημοσίευση από cherouvim » 10 Φεβ 2006 11:29

Apolies sta Gecko based browsers den yparxoun logo tou oti sevontai tin min-width dilosi sto style. Gia ton IE tha prepei na kaneis arketo research gia na vreis to katalilo css hack pou tha se volepsei.
Gia ti mesaia stili den katalaba ti enoeis me to valign. Apo terma pano den arhizei to periehomeno tis?

Απάντηση

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

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

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