2 Divs / Το ενα αριστερα και το αλλο δεξια του.

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

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

Απάντηση
Άβαταρ μέλους
caspave
Δημοσιεύσεις: 22
Εγγραφή: 24 Μαρ 2009 19:54

2 Divs / Το ενα αριστερα και το αλλο δεξια του.

Δημοσίευση από caspave » 24 Μαρ 2009 20:27

Γεια σας!

Τοσο καιρο χρησιμοποιω tables και τωρα ειπα να αλλαξω και να χρησιμοποιησω σε κατι τα divs,αλλα εχω ενα προβλημα.

Αυτο που θελω ειναι το εξης:
Οπως ειναι η σελιδα (στοιχισμενη στο κεντρο --> χρησιμοποιω ενα div με ονομα container) θελω μεσα να βαλω 2 divs.Το ενα θα ειναι αριστερα και το αλλο διπλα του,δεξια.
Το προβλημα ειναι οτι αυτο που ειναι δεξια παω απο κατω :(
Εδω ειναι οτι ο κωδικας των divs:

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

.container {
background: #FFFFFF;
margin:0 auto;
position: relative;
width:970px;
}
Αυτο ειναι το div container που σας ελεγα οπου εκει μεσα θα βαλω τα περιεχομενα του site.
Τα αλλα divs (αριστερο - δεξι μερος) ειναι:

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

.aristeromeros {
position: relative;
width:590px;
height:450px;
}

.deksimeros {
position: relative;
width:360px;
height:450px;
}
(Το συνολικο τους αθροισμα ειναι μικροτερο του div container οποτε δεν πιστευω να φταιει αυτο)

Τελος,ο html κωδικας:

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

<div class="container">
<div class="aristeromeros">
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj

</div>
<div class="deksimeros">

43432532523<br />9898<br />46.84.984984<br />
43432532523<br />9898<br />46.84.984984<br />
43432532523<br />9898<br />46.84.984984<br />
43432532523<br />9898<br />46.84.984984<br />
43432532523<br />9898<br />46.84.984984<br />
43432532523<br />9898<br />46.84.984984<br />
43432532523<br />9898<br />46.84.984984<br />

</div>
</div>
		
(Τυχαιο κειμενο για να δω το τελικο αποτελεσμα)

Και οπως σας ειπα,το προβλημα ειναι οτι το div deksimeros παει απο κατω,αντι να μενει δεξια του div aristeromeros.

Τι κανω λαθος,και πως μπορω να το διορθωσω?
Ευχαριστω.

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

2 Divs / Το ενα αριστερα και το αλλο δεξια του.

Δημοσίευση από ThyClub » 24 Μαρ 2009 20:50

Χρησιμοποίησε τις ιδιότητες float.

Πχ:

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


.aristeromeros &#123;
float&#58;left;
position&#58; relative;
width&#58;590px;
height&#58;450px;
&#125;

.deksimeros &#123;
float&#58;right;
position&#58; relative;
width&#58;360px;
height&#58;450px;
&#125; 

Άβαταρ μέλους
caspave
Δημοσιεύσεις: 22
Εγγραφή: 24 Μαρ 2009 19:54

2 Divs / Το ενα αριστερα και το αλλο δεξια του.

Δημοσίευση από caspave » 24 Μαρ 2009 21:09

Α καλα... :hammer:
Αυτο το ειχα κανει απο την αρχη αλλα το εβγαλα γιατι μετα εγινε κατι αλλο.
Μολις το εκανα, τοτε ενα table που ειχα απο κατω, πηγε και κολλησε πανω στο δεξιο div...
βασικα το ιδιο εγινε και τωρα (παροτι το εχω κλεισει το div)

Αλλα βασικα,μολις τωρα παρατηρησα οτι αυτο γινεται μονο στο chrome.
στους αλλους browsers δεν γινεται.

πφ.. :(

Σ'ευχαριστω παντως!

edit:
Τωρα εκανα και κατι αλλο.
εβαλα και ενα div (ονομα main) κατω απο αυτα , (δεξι-αριστερο div) (σαν συνεχεια της σελιδας δηλαδη) και αποτι βλεπω απο το firebug,αυτο πεφτει πανω απο τα aristeromeros-deksimeros divs.. (παροτι εμφανιζεται κατω απο αυτα)
του εχω βαλει αυτον τον κωδικα:

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

.main &#123;
margin&#58;0 auto;
position&#58; relative;
width&#58;950px;
&#125;
ο html κωδικας:

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

<div class="container">
<div class="aristeromeros">
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj
tr<br />fcfdsfdsdsffds<br />fcdsfjsdfdsj

</div>
<div class="deksimeros">

43432532523<br />9898<br />46.84.984984<br />
43432532523<br />9898<br />46.84.984984<br />
43432532523<br />9898<br />46.84.984984<br />
43432532523<br />9898<br />46.84.984984<br />
43432532523<br />9898<br />46.84.984984<br />
43432532523<br />9898<br />46.84.984984<br />
43432532523<br />9898<br />46.84.984984<br />

</div>
</div> 

<div class="main">
keimeno
</div> 


Αυτο τωρα γιατι εγινε? :evil:

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

2 Divs / Το ενα αριστερα και το αλλο δεξια του.

Δημοσίευση από ThyClub » 24 Μαρ 2009 22:24

Καλως ήρθες στον κόσμο του box model. Ψάξε λίγο εδώ: http://www.alistapart.com/articles/holygrail μήπως σε βοηθήσει.

Άβαταρ μέλους
caspave
Δημοσιεύσεις: 22
Εγγραφή: 24 Μαρ 2009 19:54

2 Divs / Το ενα αριστερα και το αλλο δεξια του.

Δημοσίευση από caspave » 25 Μαρ 2009 00:40

χμ..
ενδιαφερον το site απ'οτι βλεπω!
ωραια,θα το κοιταξω και λογικα θα την βρω την λυση.

ευχαριστω! :)

starfish
Δημοσιεύσεις: 600
Εγγραφή: 15 Δεκ 2006 12:58

2 Divs / Το ενα αριστερα και το αλλο δεξια του.

Δημοσίευση από starfish » 28 Μαρ 2009 13:58

Κάθε φορά που κάνεις float κάποια div θα βάζεις απο κάτω
ένα κενο div της μορφής <div class="clear"></div>

το clear θα το δηλώσεις

.clear {
clear:both;}

επίσης τα div που γίνονται floated πρέπει να είναι μέσα σε ένα div το οποίο επίσης κάνει float.
Βαλτου ενα style της μορφής

#wrapper {
float:none;}

Tέλος εάν έχεις ορίσει πλάτος στα floated div και τους έχεις padding ο ΙΕ μετράει το πλάτος με το Padding οπότε έχεις άλλο τελικο width σε explorer και άλλο σε Firefox.

Βάλτε απόλυτο πλάτος στα div ώστε να είναι σίγουρος ότι χωράνε να επιπλέυσουν ένα δεξιά και ένα αριστερα, και μέσα σε αυτά βάλε άλλο ένα div χωρίς πλάτος και βάλε σε εκείνο padding.

Απάντηση

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

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

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