Float για center?

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

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

Απάντηση
Evi_J
Δημοσιεύσεις: 84
Εγγραφή: 08 Αύγ 2006 09:10

Float για center?

Δημοσίευση από Evi_J » 18 Νοέμ 2006 03:24

Για να βάλω δυο πράγματα δίπλα-δίπλα μπορώ να χρησιμοποιήσω είτε table cells είτε την css εντολή float. Όμως το float είναι μόνο left και right. Δεν υπάρχει center; Πώς θα το κάνω να είναι στο κέντρο της σελίδας;

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

Float για center?

Δημοσίευση από ThyClub » 18 Νοέμ 2006 03:27

Θα υπάρχουν δυο πράγματα ή ένα? Δλδ 2 στήλες, 1 στήλη ή 3 στήλες?

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Float για center?

Δημοσίευση από skeftomilos » 18 Νοέμ 2006 15:08

Αν πρόκειται για inline elements (π.χ. images) τότε στέκουν δίπλα-δίπλα από μόνα τους. Αν πρόκειται για block elements (π.χ. divs) τότε βάλτα σ' ένα table να βρεις την υγειά σου. :)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
RADICAL
Δημοσιεύσεις: 386
Εγγραφή: 14 Ιούλ 2004 01:07
Τοποθεσία: Athens
Επικοινωνία:

Float για center?

Δημοσίευση από RADICAL » 18 Νοέμ 2006 20:08

To css:

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

#wrap { width:50%; text-align:center; margin:0 auto}
#wrap #element1 { width:40%; float:left; margin:0 10px 0 0}
#wrap #element2 { width:40%; float:left; margin:0 }
Στα width βάζεις ότι θέλεις.

Και η html

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

<div id="wrap">
   <div id="element1"> ....content... </div>
   <div id="element2"> ....content... </div>
</div>
Εικόνα

Evi_J
Δημοσιεύσεις: 84
Εγγραφή: 08 Αύγ 2006 09:10

Float για center?

Δημοσίευση από Evi_J » 18 Νοέμ 2006 23:07

ThyClub
Θέλω 3 στήλες


skeftomilos
Θέλω divs για να βάλω μέσα το content άρα block elements. Σωστά; ( Ερώτηση: Πώς μπορώ να ξέρω ποιο είναι inline και ποιο block element; ) Δεν ξέρω αν είναι λίγο νωρίς για μένα αλλά προσπαθώ να κάνω tableless design. Και το πρώτο πράγμα που με απασχόλησε ήταν αυτό.


Radical
Ευχαριστώ για τον κώδικα. Τον έβαλα, τον δοκίμασα και για να φαίνεται καλύτερα πρόσθεσα και τυχαία χρώματα, αλλά τότε παρατήρησα μια διαφορά στην εμφάνιση. Ο Mozilla το βλέπει λίγο διαφορετικά από ότι οι opera/explorer (αυτοί το βλέπουν το ίδιο) αλλά δεν ξέρω γιατί. Παρατήρησε που τελειώνει το γκρίζο χρώμα στον mozilla και που στους άλλους δύο.

Επίσης παρατήρησα μια μικρή διαφορά στο width μεταξυ αυτών των δύο. Αν και δεν με πολύ πειράζει θα ήθελα να ξέρω γιατί γίνεται αυτό.
Συνημμένα
moz_op_ie__screenshot_bug.gif
(2.83 KiB) Μεταφορτώθηκε 601 φορές

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Float για center?

Δημοσίευση από skeftomilos » 19 Νοέμ 2006 00:55

Block είναι τα elements που καταλαμβάνουν το 100% του πλάτους της γραμμής τους. Παραδείγματα είναι div, h1, form, pre, body. Τα inline elements καταλαμβάνουν μονάχα όσο χώρο χρειάζονται. Παραδείγματα: span, strong, input, button, img. Τα tables είναι ειδική περίπτωση. Αυτά όλα είναι γραμμένα στο HTML specification, αλλά μπορεί να τα μάθει κανείς και πειραματιζόμενος με τα διάφορα elements.

Το γκρίζο χρώμα στον Mozilla θα φτάσει μέχρι κάτω αν προστεθεί κάποιο στοιχείο κάτω από τα divs (π.χ. <br>), με style="clear:both".

Τα floats είναι κάπως επικίνδυνα γιατί υπάρχουν διάφορα σενάρια όπου δε θα χωρέσουν και τα δύο δίπλα-δίπλα, και θα πάει το ένα από κάτω. Τέτοιες περιπτώσεις είναι ένα μακρύ url σε κάποιο από τα δύο divs, ο χρήστης μειώνει το πλάτος του browser, ή μεγαλώνει το μέγεθος των γραμμάτων.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
RADICAL
Δημοσιεύσεις: 386
Εγγραφή: 14 Ιούλ 2004 01:07
Τοποθεσία: Athens
Επικοινωνία:

Float για center?

Δημοσίευση από RADICAL » 19 Νοέμ 2006 01:17

Όσον αφορά τα inline και block elements ρίξε μια ματιά σε αυτά τα κλασσικά αριστουργήματα inline και block :p.

Τώρα όσον αφορά το διαφορετικό width είναι γιατί καταραμένος ie αντιλαμβάνεται διαφορετικά τα pixels.

Βέβαια μικρό το κακό καθώς αυτό ισχύει για όλα τα margins κλπ οπότε είναι σχετικό.
Παρόλα αυτά υπάρχουν κάποια "hacks" και για αυτήν την περίπτωση.
Δλδ σε ένα css rule να δηλώνεις διαφορετικά properties για κάθε class,
π.χ

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

#foo &#123;
	width&#58; 150px;
	voice-family&#58; "\"&#125;\"";
	voice-family&#58;inherit;
	width&#58; 120px;
	&#125;

html>body #foo&#123;
	width&#58; 120px;
	&#125; 
Το συγκεκριμένο αν δεν κάνω λάθος ισχύει και για ie5 άν ήθελες μόνο ie6
αρκεί το

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

#foo &#123; background&#58; url&#40;../_img/layout/page.gif&#41; repeat-y #fff; &#125;

html>body #foo&#123; background&#58; url&#40;../_img/layout/page.png&#41; repeat-y #fff;&#125; 
Δηλαδή ο ie θα λάβει υπόψιν τα properties της πρώτης περίπτωσης ενώ ο firefox και οι
υπόλοιποι σωστοί browsers (konqueror, safari κλπ) την δεύτερη.

Το συγκεκριμένο παράδειγμα ας πούμε βολεύει γιατί ο ie δεν υποστηρίζει png transparent
ενώ οι άλλοι υποστιρίζουν.

Βέβαια εγώ προσωπικά τα hacks τα αποφεύγω στις περισσότερες των περιπτώσεων αλλά
κάποιες φορές χρειάζονται.


Τώρα για το γκρί που λές δοκίμασε αυτήν την πιό βελτιωμένη έκδοση.

css:

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

* &#123;padding&#58; 0; margin&#58; 0&#125;
#wrap &#123; width&#58;50%; text-align&#58;center; margin&#58;10px auto; background-color&#58;#00CCFF; padding&#58;5px; &#125;
#element1 &#123; width&#58;47%; float&#58;left; border&#58;1px solid #fff; background&#58;#999; padding&#58;5px 3px; margin&#58;0 10px 0 0&#125;
#element2 &#123; width&#58;47%; float&#58;right; border&#58;1px solid #fff; background&#58;#ccc; padding&#58;5px 3px;  margin&#58;0 &#125;
.clear &#123;clear&#58; both; font-size&#58;0px; height&#58; 0px;&#125;
html:

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

<div id="wrap">
   <div id="element1">
	 <h1>Use Headers</h1> 
         <p>....content...</p> 
        <br /> blah blahblahblahblah blah
   </div>
   <div id="element2">
         <h1>Use Headers</h1> 
         <p>....content...</p> 
         <br /blah blahblahblahblah blah 
  </div>
   <div class="clear"></div>
</div> 
Δές και κάποια links που θα σε βοηθήσουν σίγουρα γενικά σε πρακτικά και θεωρητικά ζητήματα.
http://alistapart.com/
http://cssplay.co.uk/
http://www.htmldog.com/

και γενικά συνέχισε το tabless design είναι ο σωστός τρόπος :)
Εικόνα

Άβαταρ μέλους
RADICAL
Δημοσιεύσεις: 386
Εγγραφή: 14 Ιούλ 2004 01:07
Τοποθεσία: Athens
Επικοινωνία:

Float για center?

Δημοσίευση από RADICAL » 19 Νοέμ 2006 01:28

Α και όπως είπε ο skeftomilos για τα floats πράγματι, αν κοιτάξεις των κώδικα
που σου έδωσα και αρχίσεις πχ και μικρίνεις το παράθυρο με το ποντίκι σου θα δείς
πως το ένα πάει κάτω απο το άλλο.
Στην περίπτωση που δέν θές να γίνεται αυτό πρέπει να ορίσεις στο css
min-width καθώς και max-width του element.
Βέβαια σιγά μην καταλαβαίνει ο ie6 τέτοια πράγματα :)
(ευτυχώς στον 7 νομίζω επιτέλους το φτιάξανε).

Αλλά και για αυτό υπάρχει λύση,
να καταλάβει δλδ ο ie min και max width με τα κουλά expressions στο css.

Ολά αυτά βέβαια θα σε απασχολήσουν αν δουλεύεις με ποσοστά και με em και όχι με fixed πράγματα.
Εικόνα

Άβαταρ μέλους
softius
Script Master
Δημοσιεύσεις: 241
Εγγραφή: 11 Ιαν 2004 19:07
Επικοινωνία:

Float για center?

Δημοσίευση από softius » 19 Νοέμ 2006 13:59

Μάλλον το ακόλουθο θα κάνει αυτό που θες...

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

<div class="three-columns">
    <div class="left"> ...</div>
    <div class="center"> ... </div>
    <div class="right"> ... </div>
    <div class="clear"></div>
</div>

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

.three-columns .left,
.three-colums .center &#123;
    width&#58; 32%;
    margin-right&#58; 2%;
    float&#58; left;
&#125;
.three-columns .right &#123;
    width&#58; 32%;
    float&#58; right;
&#125;
.clear &#123; clear&#58; both; &#125;
[/code]

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

Float για center?

Δημοσίευση από cherouvim » 19 Νοέμ 2006 14:08

Καλό είναι αντί για class="left" και class="center" να λέμε id="sidebar" id="content", μιας και τα πρώτα είναι πληροφορία παρουσίασης, ενώ στο HTML θέλουμε μόνο πληροφορία δομής. Επίσης γίνεται χρήση του id γιατί μόνο ένα sidebar, footer, header και content έχουμε, και όχι πολλά.

Evi_J
Δημοσιεύσεις: 84
Εγγραφή: 08 Αύγ 2006 09:10

Float για center?

Δημοσίευση από Evi_J » 20 Νοέμ 2006 01:03

Θα ασχοληθώ με όλα τα παραδείγματα που μου δώσατε αύριο και άμα είναι θα επανέλθω με ερωτήσεις. Μέχρι τότε ευχαριστώ. :victory:

Απάντηση

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

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

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