ίσο ύψος αριστερού με δεξί div

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

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

Απάντηση
mgiota
Δημοσιεύσεις: 190
Εγγραφή: 15 Σεπ 2009 13:11
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

ίσο ύψος αριστερού με δεξί div

Δημοσίευση από mgiota » 23 Δεκ 2009 13:58

Καλησπέρα παιδιά,

στήνω ένα site το οποίο είναι αρκετά απλό ως layout: header, αριστερή στήλη, δεξιά στήλη, footer.
Χρησιμοποιώ divs και όχι tables. Το πρόβλημά μου είναι το εξής: στη δεξιά στήλη κάτω δεξιά θέλω να βάλω μια εικόνα. Η εικόνα αυτή όμως θέλω να εμφανίζεται τέρμα κάτω έτσι ώστε να ευθυγραμμίζεται με την αριστερή στήλη. (επισυνάπτω μια εικόνα παρακάτω)

Στη δεξιά στήλη έχω ένα div column_right που έχει background-image την εικόνα που θέλω και position bottom (αυτά τα γράφω στο css). Με jquery, παίρνω το ύψος της αριστερής στήλης (μια και αυτό αλλάζει δυναμικά) και έπειτα θέτω το ύψος της δεξιάς στήλης ίσο με αυτό που πήρα. Αυτό που συμβαίνει είναι όταν μπαίνω στη σελίδα η εικόνα να μην τοποθετείται σωστά, παρά μόνο όταν κάνω refresh.

Γιατί συμβαίνει αυτό; Μήπως με jquery πρέπει να βάλω το bacgound-image του column_right; Η μήπως θα πρέπει να χρησιμοποιήσω tables;
Συνημμένα
layout.jpg

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

ίσο ύψος αριστερού με δεξί div

Δημοσίευση από nbc » 23 Δεκ 2009 16:42

Αυτό που ζητάς γίνεται και χωρίς jQuery. Η τεχνική είναι ευρέως γνωστή ως "faux column" (google it). Εν ολίγεις, βάζεις το background σε container που περιέχει τα columns, και όχι στο column απευθείας.

Φυσικά, γίνεται και με jQuery. Δεν παραθέτεις τον κώδικα, συνεπώς δεν μπορώ να σου πω που είναι το λάθος.

Σου προτείνω τη λύση markup/css.

mgiota
Δημοσιεύσεις: 190
Εγγραφή: 15 Σεπ 2009 13:11
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

ίσο ύψος αριστερού με δεξί div

Δημοσίευση από mgiota » 23 Δεκ 2009 17:56

Πήγα να ακολουθήσω αυτή την προσέγγιση, αλλά έχω προβλήματα με τον explorer. Να σου πω λίγο τι έκανα να μου πεις σαν λογική αν είναι σωστό.

Έβαλα ένα div maincontent και του 'βαλα background-color το χρώμα που θέλω. Επίσης το 'κανα position:relative.

Στην html μέσα στο maincontent έβαλα ένα div, όπου περιέχει μια εικόνα και έχει position:absolute, bottom:0px και right:0px. Τοποθετείται μια χαρά, αλλά η δεξιά στήλη δεν παίρνει το background-color.

Δεν παραθέτω τον κώδικα, αλλά τουλάχιστον σα λογική θέλω να μου πείτε αν είναι σωστή. Κοίταξα για clear αλλά δε βλέπω κάτι περίεργο.

mgiota
Δημοσιεύσεις: 190
Εγγραφή: 15 Σεπ 2009 13:11
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

ίσο ύψος αριστερού με δεξί div

Δημοσίευση από mgiota » 23 Δεκ 2009 18:08

Τελικά λύθηκε και με τον explorer. Δεν είχα βάλει width στο maincontent.

Πώς γίνεται όλοι οι υπόλοιποι browsers να το καταλαβαίνουν και ο explorer όχι; Τέλοσπάντων..

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

ίσο ύψος αριστερού με δεξί div

Δημοσίευση από nbc » 23 Δεκ 2009 18:57

Οφείλεται στην περιβόητη εσωτερική του ιδιότητα που είναι γνωστή ως "hasLayout".

Επειδή είναι αιτία πολλών δεινών (=bugs), αξίζει τον κόπο να ενημερωθείς σχετικά.

mgiota
Δημοσιεύσεις: 190
Εγγραφή: 15 Σεπ 2009 13:11
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

ίσο ύψος αριστερού με δεξί div

Δημοσίευση από mgiota » 24 Δεκ 2009 11:03

ok θα το κοιτάξω. σ' ευχαριστώ πολύ!

Απάντηση

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

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

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