Css align θεματάκι

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

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

Απάντηση
Άβαταρ μέλους
cdhyper
Literature Moderator
Δημοσιεύσεις: 9707
Εγγραφή: 23 Ιουν 2001 03:00
Τοποθεσία: Φωτονερόπετρα
Επικοινωνία:

Css align θεματάκι

Δημοσίευση από cdhyper » 27 Ιαν 2009 12:16

Κάνω αναγκαστικά edit ένα css layout template του phpbb3 (το default) και είναι στη μορφή

<div id ταδε>μπλαμπλα</div>
<div id ταδε>μπλαμπλα</div>
<div id ταδε>μπλαμπλα</div>

Επειδή είναι liquid 100% το περιόρισα στα 970pixels (καλά μέχρι εδώ) και θέλω να το στοιχίσω στο κέντρο το όλο θέμα. Επομένως, λογικά σκεπτόμενος έκανα αυτό:

<div align="center">
<div id ταδε>μπλαμπλα</div>
<div id ταδε>μπλαμπλα</div>
<div id ταδε>μπλαμπλα</div>
</div>

Αλλά πήγε και κεντράρισε όλα τα κείμενα όλων των divs! Σα να έκανα text align όλα τα περιεχόμενα των divs. Τι είναι αυτά; Πώς μπορεί να γίνει ένα τόσο απλό πράγμα χωρίς παραλογισμούς;
Σύγκριση τιμών Supermarket: http://www.shopnsave.gr
Νέα Ιταλικα επιπλα κουζινας
Για φιλοσόφους: http://filosofia.gr και http://liantinis.org

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

Css align θεματάκι

Δημοσίευση από manolism » 27 Ιαν 2009 12:49

Για δοκίμασε αυτό:

<div style="margin:0 auto;">
<div id ταδε>μπλαμπλα</div>
<div id ταδε>μπλαμπλα</div>
<div id ταδε>μπλαμπλα</div>
</div>

Άβαταρ μέλους
greekbytes
WebDev Moderator
Δημοσιεύσεις: 2438
Εγγραφή: 15 Νοέμ 2002 15:42
Τοποθεσία: Αθήνα
Επικοινωνία:

Css align θεματάκι

Δημοσίευση από greekbytes » 27 Ιαν 2009 17:46

Όπως το λέει ο lunar, μόνο που σ'αυτό το εξωτερικό div βάλε και το width που θες. Τα υπόλοιπα μέσα μπορεις να τα αφήσεις με ποσοστά ώστε αν θες να το αλλάξεις ξανά σε liquid να γίνεται αμέσως!

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

<div style="width&#58;970px; margin&#58;0 auto;">
<div id ταδε>μπλαμπλα</div> 
<div id ταδε>μπλαμπλα</div> 
<div id ταδε>μπλαμπλα</div> 
</div>

alexsoft

Css align θεματάκι

Δημοσίευση από alexsoft » 27 Ιαν 2009 17:58

<div style="position:relative; left: 50%; width: 970px; margin-left: -485px; text-align:left;" >
<div id ταδε>μπλαμπλα</div>
<div id ταδε>μπλαμπλα</div>
<div id ταδε>μπλαμπλα</div>
</div>

το align κεντράρει το κείμενο και όχι το div

εάν δεν σου δουλέψει σωστά άλλαξε το position:relative; σε position: absolute;

Άβαταρ μέλους
cdhyper
Literature Moderator
Δημοσιεύσεις: 9707
Εγγραφή: 23 Ιουν 2001 03:00
Τοποθεσία: Φωτονερόπετρα
Επικοινωνία:

Css align θεματάκι

Δημοσίευση από cdhyper » 28 Ιαν 2009 00:32

relative; left: 50%; width: 970px; margin-left: -485px;
:o :o

και μετά μου λετε να κάνω css layouts. τι πατέντες είναι αυτές :D :D

thanks πάντως.
Σύγκριση τιμών Supermarket: http://www.shopnsave.gr
Νέα Ιταλικα επιπλα κουζινας
Για φιλοσόφους: http://filosofia.gr και http://liantinis.org

alexsoft

Css align θεματάκι

Δημοσίευση από alexsoft » 28 Ιαν 2009 00:35

cdhyper έγραψε:
relative; left: 50%; width: 970px; margin-left: -485px;
:o :o

και μετά μου λετε να κάνω css layouts. τι πατέντες είναι αυτές :D :D

thanks πάντως.
Σου δούλεψε όπως ήθελες;

....και το κακό με το CSS είναι ότι υπάρχουν διαφορές από browser σε browser....

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Css align θεματάκι

Δημοσίευση από patriot » 28 Ιαν 2009 03:49

Συγνώμη αλλά το παλιό καλό κλασσικό text-align:left πώς και δεν το σκέφτηκε κανείς; :think:



Ερώτηση: Γιατί <div align="center"> μέσα στον html κώδικα και όχι #onoma {margin:auto;} μέσα στο css; Υπάρχει ιδιαίτερος λόγος;
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

alexsoft

Css align θεματάκι

Δημοσίευση από alexsoft » 28 Ιαν 2009 10:39

patriot έγραψε:Συγνώμη αλλά το παλιό καλό κλασσικό text-align:left πώς και δεν το σκέφτηκε κανείς; :think:



Ερώτηση: Γιατί <div align="center"> μέσα στον html κώδικα και όχι #onoma {margin:auto;} μέσα στο css; Υπάρχει ιδιαίτερος λόγος;
Καταρχάς θέλει να το κεντράρει και όχι να το έχει αριστερά.
Δεύτερον μιλάμε για την ετικέτα <div> και όχι για το κείμενο.

Για να καταλάβεις έκανα ένα παράδειγμα του αρχικού κώδικα με αυτό που προτείνω για να γίνουν κατανοητές οι διαφορές

Και για να γίνει και βοήθημα.... το αναλύουμε:

1) Με το left:50%
Λέμε στον Browser να ξεκινήσει την οριζόντια εμφάνιση του div από το μέσο της ενεργής διαθέσιμης οθόνης ή εάν βάλουμε position:relative; από το μέσο του αντικειμένου στο οποίο είναι ενθυλακωμένο.

2) Με το width ορίζουμε το σταθερό μέγεθος του DIV. απαραίτητο για να λειτουργήσει η παρούσα μέθοδος.

3) Με το margin-left: -XXXpx που τα XXX πρέπει να είναι το μισό του width, λέμε να σπρώξει κατά 50% του μεγέθους του DIV αριστερά από την θέση που ξεκίνησε. Έτσι στην ουσία στο left:50% θα υπάρχει το 50% του πλάτους του DIV.

6) Επίσης για μεγαλύτερη ασφάλεια προσθέτουμε και ένα overflow:hidden; ώστε εάν τα δεδομένα ξεπεράσουν το μέγεθος του DIV να μην εμφανιστούν.

7) Το αντίστοιχο μπορεί να γίνει και κάθετα αλλά χρησιμοποιούμε τα top:50%; height:400px; margin-top:-200px;
Συνημμένα
div_center_code.jpg
div_center_test.jpg
(16.9 KiB) Μεταφορτώθηκε 258 φορές
Τελευταία επεξεργασία από το μέλος alexsoft την 28 Ιαν 2009 11:00, έχει επεξεργασθεί 5 φορές συνολικά.

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

Css align θεματάκι

Δημοσίευση από cherouvim » 28 Ιαν 2009 10:48

Προσοχή με τα αρνητικά margins.

alexsoft

Css align θεματάκι

Δημοσίευση από alexsoft » 28 Ιαν 2009 10:52

cherouvim έγραψε:Προσοχή με τα αρνητικά margins.
Ναι θέλει μεγάλη προσοχή η χρήση τους. Μερικές φορές όμως είναι αναπόφευκτη.

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Css align θεματάκι

Δημοσίευση από patriot » 28 Ιαν 2009 20:06

alexsoft έγραψε:Καταρχάς θέλει να το κεντράρει και όχι να το έχει αριστερά.
Δεύτερον μιλάμε για την ετικέτα <div> και όχι για το κείμενο.
Μα, αν κατάλαβα καλά, θέλει να έχει το div στο κέντρο και τα λόγια στα αριστερά. Αυτό δεν σημαίνει το "αλλά":
cdhyper έγραψε:Αλλά πήγε και κεντράρισε όλα τα κείμενα όλων των divs!
Ας έχει το div στο κέντρο (margin:auto) και το κείμενο στα αριστερά (text-align:left).
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
cdhyper
Literature Moderator
Δημοσιεύσεις: 9707
Εγγραφή: 23 Ιουν 2001 03:00
Τοποθεσία: Φωτονερόπετρα
Επικοινωνία:

Css align θεματάκι

Δημοσίευση από cdhyper » 29 Ιαν 2009 01:04

<div style="margin:0 auto;">

ok δούλεψε αλλά είναι ανώμαλο το θέμα :)
Σύγκριση τιμών Supermarket: http://www.shopnsave.gr
Νέα Ιταλικα επιπλα κουζινας
Για φιλοσόφους: http://filosofia.gr και http://liantinis.org

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

Css align θεματάκι

Δημοσίευση από sibas » 29 Ιαν 2009 08:45

cdhyper παρακολουθώ συχνά πυκνά τα topic που ανεβάζεις κατά διαστήματα
και βλέπω ότι έχεις κάποιο κολληματάκι με τα css
Τα css είναι απλά
για να στήσεις οποιοδήποτε div στο κέντρο χρειάζεσαι μόνο 2 τιμές

πρώτα να πεις στο "center" να είναι στην μέση
και μετά να πεις στα υπόλοιπα divs που να σταθούν
ένα παράδειγμα είναι το παρακάτω
ps: δεν ισχύει για ie5 κλπ

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<style type="text/css" media="screen">

body&#123;
padding-top&#58; 10px;
font&#58; normal 95% arial, helvetica, sans-serif;
background-color&#58; yellow;
&#125;	

.center&#123;
width&#58;800px;
margin&#58;0 auto;
background-color&#58; #fff;
&#125;

#one, #two &#123;
float&#58;left;
text-align&#58; center;
width&#58; 100px;
height&#58; 100px;
background-color&#58; #fff;
border&#58; 1px solid #000;
&#125;

#two&#123;
float&#58;right;
&#125;

#three-a, #three-b, #three-c, #four1, #four2&#123;
text-align&#58; center;
border&#58; 1px solid #000;
&#125;

#three-a&#123;
float&#58;left
&#125;

#three-b&#123;
float&#58;right
&#125;

</style>
</head>
<body>

<div class="center">
<div id="one">one</div>
<div id="two">two</div>
<div id="three-a">three-a</div>
<div id="three-b">three-b</div>
<div id="three-c">three-c</div>
<div id="four1">four1</div>
<div id="four2">four2</div>
</div>

</body>
</html>

Άβαταρ μέλους
cdhyper
Literature Moderator
Δημοσιεύσεις: 9707
Εγγραφή: 23 Ιουν 2001 03:00
Τοποθεσία: Φωτονερόπετρα
Επικοινωνία:

Css align θεματάκι

Δημοσίευση από cdhyper » 29 Ιαν 2009 10:51

Με τα css δεν έχω κανένα κόλλημα, τα χρησιμοποιώ πάντα αλλά μόνο για styling και όχι για layout.
Σύγκριση τιμών Supermarket: http://www.shopnsave.gr
Νέα Ιταλικα επιπλα κουζινας
Για φιλοσόφους: http://filosofia.gr και http://liantinis.org

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

Css align θεματάκι

Δημοσίευση από sibas » 29 Ιαν 2009 14:52

ναι το ξέρω, :D
κόλλημα έχω εγώ αν πάω να κάνω layout με tables :hammer:
το παραπάνω δεν το έβαλα για layout, απλά είναι ένας τρόπος για το κεντράρισμα.

Απάντηση

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

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

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