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

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

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

Απάντηση
heavyaris
Δημοσιεύσεις: 295
Εγγραφή: 15 Απρ 2008 21:31

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

Δημοσίευση από heavyaris » 11 Δεκ 2010 15:07

παιδιά, έκανα export απο photoshop σε divs, όμως θέλω να κεντράρω την σελίδα, αλλά δεν τα καταφέρνω.
ο κώδικας που είναι υπεύθυνος (υποθέτω) είναι:

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

#Table_01 {
	position:absolute;
	top:0px;
	width:980px;
	height:1280px;	
}
και πιο κάτω έχει:

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

<body style="margin-top&#58; 0px; margin-bottom&#58; 0px;">
δοκίμασα να βάλω

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

  margin-left&#58; auto ;
  margin-right&#58; auto ;
αλλά δεν άλλαξε τίποτα.
καμμια ιδέα;
ευχαριστώ.

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

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

Δημοσίευση από dimsis » 11 Δεκ 2010 15:53

Βάλε doctype αν δεν έχεις και δοκίμασε margin:0 auto στο #Table_01

heavyaris
Δημοσιεύσεις: 295
Εγγραφή: 15 Απρ 2008 21:31

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

Δημοσίευση από heavyaris » 11 Δεκ 2010 18:28

τα βλέπω σκούρα τα πράματα, το κάθε ένα slice που έκοψα, έγινε (όπως έπρεπε) div, άλλα με position:absolute, και άρα και να μετακινήσω το κεντρικό div, αυτά όλα θέλουν "πείραγμα", έτσι δεν είναι;
καλά μου είπε ένας φίλος μου, να χρησιμοποιήσω τα κομματιασμένα png απο το photoshop, αλλά να κάνω απο την αρχή εγώ τα divs,στο dreamweaver και να τα ριξω μέσα ένα ένα..

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

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

Δημοσίευση από dimsis » 11 Δεκ 2010 18:31

Ναι το εξωτερικό div μη το βάζεις absolute.
Καλά σου είπε ο φίλος...

heavyaris
Δημοσιεύσεις: 295
Εγγραφή: 15 Απρ 2008 21:31

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

Δημοσίευση από heavyaris » 12 Δεκ 2010 00:49

μπα, δεν κάνει τίποτα..
το λινκ της δοκιμής είναι το παρακάτω:

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

τι να πώ..

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

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

Δημοσίευση από manolism » 12 Δεκ 2010 00:59

Τα λάθη στο παραπάνω είναι τα εξής:

Στο div main δεν έχεις ορίσει position και στα επόμενα δύο έχεις ορίσει position inherit
Στο τρίτο div έχεις ξεχάσει να βάλεις ερωτηματικό στο τέλος των δύο πρώτων εντολών και κατά συνέπεια αγνοούνται.

Εάν θέλεις να κεντράρεις τα δύο div τότε

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

#logo &#123;
	margin&#58;0 auto;
	width&#58;250px;
	height&#58;50px;
&#125;

#date &#123;
	margin&#58;0 auto;
	width&#58;185px;
	height&#58;50px;
&#125;

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

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

Δημοσίευση από korgr » 12 Δεκ 2010 08:55

heavyaris έγραψε: καλά μου είπε ένας φίλος μου, να χρησιμοποιήσω τα κομματιασμένα png απο το photoshop, αλλά να κάνω απο την αρχή εγώ τα divs,στο dreamweaver και να τα ριξω μέσα ένα ένα..
Αυτή είναι η πιο σωστή κουβέντα που άκουσες, μακάρι να την ακολουθήσεις...

heavyaris
Δημοσιεύσεις: 295
Εγγραφή: 15 Απρ 2008 21:31

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

Δημοσίευση από heavyaris » 12 Δεκ 2010 12:07

παιδιά, σκάλωσα, έχω πρόβλημα με τα κενά divs που προσπαθώ να εισάγω για να δώσω την εντύπωση ότι η σελίδα είναι "διάφανη".
χρησιμοποιώ λοιπόν κενά divs ανάμεσα στα boxes. τώρα το χρωμάτισα κόκκινο για να φαίνεται, προσπαθώ να το βάλω κάτω από το αριστερό κουτί αλλά "μαγκώνει" σε ένα μεγάλο κεντρικό κάθετο div (το μαύρο κενό ανάμεσα στα 2 γκρι κουτιά). μήπως δεν είναι σωστό το slicing με τέτοιο τρόπο;
ευχαριστώ πολύ.
http://www.pieria-its.gr/dok/1.html

heavyaris
Δημοσιεύσεις: 295
Εγγραφή: 15 Απρ 2008 21:31

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

Δημοσίευση από heavyaris » 12 Δεκ 2010 14:31

τελικά το πάλεψα :)

heavyaris
Δημοσιεύσεις: 295
Εγγραφή: 15 Απρ 2008 21:31

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

Δημοσίευση από heavyaris » 18 Δεκ 2010 15:20

παιδιά, ενώ στον mozilla φαίνεται μια χαρά η σελίδα ακόμα και σε παλιούς υπολογιστές, στον explorer (όπως αυτός έρχεται μετα απο μια νέα εγκατάσταση των xp και με την τελευταία αναβάθμιση του flash), επέρχεται το χάος.
τι μπορώ να αλλάξω στο css?
το πρόχειρο link είναι: http://www.pieria-its.gr/dreambet/
το παρακάτω screenshot είναι από ένα virtual machine win xp:
Συνημμένα
dreamed_wrong.jpg

Απάντηση

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

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

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