κεντράρισμα κεντρικού div

[heavyaris]

ναι, καλά κατάλαβες, κάνουμε το remake της σελίδας με τα παιδιά που την έχουν.

http://www.pieria-its.gr/betant/2/web16/

έτσι θέλω να γίνει, απλά εκεί είναι με tables και είπα να δοκιμάσω με css, αλλά αντιμετωπίζω πολλά εμπόδια..

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

 

πρόσθεσα και επισύναψη, ελπίζω να έγινα κατανοητός.

ευχαριστώ.

[orotoi]

άκυρο για το logo τότε ¨

 

Παίξε με το margin για να πετύχεις το περιθώριο (το κενό) που θες να χεις με κάθε div. Δηλαδή θα έχεις μαύρο το background του body, καθόλου χρώμα στο container που μέσα σε αυτό θα είναι τα υπόλοιπα div σου. (αυτό θα το χρησιμοποιήσεις για να έχεις ορισμένο μέγεθος στη σελίδα και να είναι κεντραρισμένη).

 

Τα υπόλοιπα div τα ορίζεις να έχουν το σκούρο-γκρί αυτό χρώμα που έχουν.. και με margin τα κενά μεταξύ τους.

 

---edit--- αυτό το κίτρινο δηλαδή που έχεις εκεί.. δεν χρειάζεται να είναι div.

Ξέχνα τη νοοτροπία των πινάκων για layout. Με το css έχεις layers που τα βάζεις όπου γουστάρεις (φαντάσου το κάπως σαν photoshop)

[heavyaris]

αυτό ήταν κάτι που ήθελα να ρωτήσω, χρειάζεται τα κενά να είναι divs? (έστω και άδεια - απλά να έχουν διαστάσεις) μάλλον καλύτερα με margin.

ευχαριστώ

[orotoi]

φυσικά και οχι! εδώ είμαστε οτι είναι..

[heavyaris]

ευχαριστώ πολύ, όντως το έκανα με margin και έσβησα τα divs, δεν μπορώ όμως να καταλάβω γιατί δεν μπορώ να "παρκάρω" το δέυτερο κουτί άκριβώς κάτω απο το απο πάνω;

http://www.pieria-its.gr/dok/1.html

σαν να υπάρχουν αόρατα όρια και δεν ανεβαίνει με τίποτα..

[spartakoscs]

θα φτιάξεις 2 divs ένα πχ με id right και ένα με left ! στο left θα βάζεις μέσα όλα τα κουτάκια τις αριστερής στήλης και στο right ανάλογα ! φαντάσου αυτά τα 2 divs θα είναι τα όρια ασκούμαι της κάθε στήλης !

 

 

>#cont{
width:800px;
}
#left{
widht:300px;
float:left;
}
#right{
width:500px;
float:left;
}
.clr{
clear:both;
}
<div id="cont">
<div id="left">
	<div id="1"></div>
	<div id="2"></div>
	......
</div>
<div id="right">
	<div id="10"></div>
	<div id="11"></div>
	.....
</div>
<div class="clr"></div>
</div>

[orotoi]

κάνε το main box float:right

[heavyaris]

έκανα 2 μέγάλα, ένα αριστερό και ένα δεξί div και νομίζω το έλυσα (μέχρι να βρεθεί κάτι άλλο)

έβαλα και height auto γιατί το κείμενο θα είναι μεταβλητο και προχωράω

[heavyaris]

παιδιά, έχω ενσωματώσει το http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/#blog

αλλά πώς μπορώ να το κάνω να συνχρονιστεί με το άνω δεξί άκρο του σκελετού της ιστοσελίδας, και όχι του παραθύρου;

ευχαριστώ πολύ. (και αυτό το μπλε περίγραμμα να έφευγε καλά θα ήταν)

http://www.pieria-its.gr/dok/1.html

[spartakoscs]

>img {
   border: 0 none;
}

 

αλλά πώς μπορώ να το κάνω να συνχρονιστεί με το άνω δεξί άκρο του σκελετού της ιστοσελίδας, και όχι του παραθύρου;

 

δεν έχω καταλάβει τι εννοείς !

[heavyaris]

ευχαριστώ για την απάντηση, όταν το έχω το παραθυρο σε full screen, πηγαίνει τέρμα δεξιά στην οθόνη πάνω το σπάσιμο της σελίδας, ενω για να φανεί σωστά πρέπει να είναι πάνω δεξιά στο banner.

ελπίζω να έγινα κατανοητός.

ευχαριστώ.

[spartakoscs]

>
#main {
position: relative;
width: 980px;
}

 

και είσαι μια χαρά

[heavyaris]

ευχαριστώ πολύ!

μέχρι στιγμής τρέχει καλά

http://www.pieria-its.gr/dreambet/

[thanocaster]

Θα σου πρότεινα να διαβάσεις κάποια πράγματα για το css πριν συνεχίσεις. Μπορεί να σου πάρει 2-3 μέρες τώρα να τα διαβάσεις και να τα κατανοήσεις, αλλά θα σου γλυτώσει πάρα πολύ χρόνο στη συνέχεια...

 

• http://htmlhelp.com/reference/css/properties.html
  
• http://css-tricks.com/all-about-floats/
  
• http://css-tricks.com/the-how-and-why-of-clearing-floats/
  
• http://css-tricks.com/containers-dont-clear-floats/
  
• http://css-tricks.com/forums/discussion/9782/min-max-width-floats/p1
  

[heavyaris]

ευχαριστώ πολύ.