make a layout with CSS

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

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

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

make a layout with CSS

Δημοσίευση από patriot » 30 Μάιος 2005 13:23

thdim έγραψε:
patriot έγραψε: ......................
Ναι αυτό κάνω και εγώ... αλλά χωρίς να βάλω το table.... και το αποτέλεσμα είναι να μου πετάει απο εξω απο το outerbox το δευτερο κουτί... :cry: :cry:
Λυπάμαι αλλά ο χρόνος μου τελείωσε γιατί έχω να γράψω ένα άρθρο. Όταν βρω ευκαιρία θα το ψάξω λίγο.... Για την ώρα όμως.... Περίμενε μήπως και σε βοηθήσει κάποιος άλλος...

Όμως έχω μια ερώτηση. Γιατί δεν θες html; Μπορεί η html να έχει κάποια προβλήματα (σαν γλώσσα. Δεν ειναι επαρκής) αλλά και τα css έχουν (όχι σαν γλώσσα, οι browsers φταίνει με τις ασυμβατικότες τους). Ουσιαστικά όμως είναι το ίδιο. Εξάλου ο ΝΟΥΜΕΡΟ ΕΝΑ κανόνας στα css είναι ότι πρέπει να ξεχωρίζεις την ομορφιά που θα περιβάλει το αντικείμενο από το περιεχόμενο που είναι καθαρά θέμα html...

ΥΓ: Επίτρεψε μου: Λοιπόν όχι "λοιπών".

Άβαταρ μέλους
thdim
Δημοσιεύσεις: 75
Εγγραφή: 10 Σεπ 2004 17:20
Τοποθεσία: Έχω ξεχάσει...

make a layout with CSS

Δημοσίευση από thdim » 30 Μάιος 2005 13:27

Οk!!! πάμε ένα ένα... (chat το κάναμε το forum... , μήπως να πηγαίναμε για καμία μπήρα καλήτερα... :wink:
patriot έγραψε:
thdim έγραψε:Λοιπών παιδία, από την μέχρι τώρα ερεύνα που έχω κάνει ανακάλυψα οτι τα layouts δεν τα φτιάχνουν με το position.

Οι guru μπορούν πίστεψε με...
Μα τα παιδία του zendgarden δεν είναι guru ??? Αν παρατηρήσεις καλά θα δείς οτι σχεδών όλα είναι χτησμένα χωρίς καθόλου position
patriot έγραψε:
Φαίνεται λοιπών ότι γίνεται κατά κόρων χρήση του float.
Μόνο όταν περάσει ο καιρός θα συνειδητοποιήσεις ότι δεν πετυχαίνει άμα το float είναι στο right. Με τον καιρό θα καταλάβεις τι εννοώ...


Ωχ νομίζω οτι αυτό μόλις το κατάλαβα... (μου κάνει κατι παιχνήδια ενα δευτερο κουτί που θελω να βάλω κάτω απο αυτό που θα είναι δεξιά)
patriot έγραψε:
(εκτός από έναν πίνακα που συστηχεί icons, το οποίο δεν βλέπω να μπορώ να το αποφύγω :-? ).
Σου ξαναλέω να δοκιμάσεις το display:block ή το display:inline. Το block πιστεύω ότι είναι αυτό που θες...
Μα το δοκιμάζω και δεν βλέπω καμία απολήτος αλλαγή...

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

make a layout with CSS

Δημοσίευση από skeftomilos » 30 Μάιος 2005 21:21

Νομίζω ότι τα div και span είναι κουτιά που διαφέρουν μόνο στην ιδιότητα display. Το πρώτο είναι block το δεύτερο inline. Μάλλον υπάρχουν για απλή διευκόλυνση, γιατί αν θέλουμε μπορούμε να αλλάξουμε την ιδιότητα display και στα δύο.

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

<html>
  <head>
    <style>
      div &#123; background-color&#58;yellow; &#125;
      span &#123; background-color&#58;orange; &#125;
    </style>
  </head>
  <body>
    <h2>Div vs Span</h2>

    Text
    <div>Div</div>
    Text
    <span>Span</span>
    Text
    <div style="display&#58;inline">Div Inline</div>
    Text
    <span style="display&#58;block">Span Block</span>
    Text

  </body>
</html>
Εικόνα

Όσο για τη διαφορά Margin και Padding, είναι αρκετά σημαντική. Αν χρωματίσεις τα κουτιά, θα καταλάβεις αμέσως τη διαφορά τους. Το πρώτο ορίζει την απόσταση από το περίγραμμα μέχρι τα γειτονικά στοιχεία, ενώ το δεύτερο την εσωτερική απόσταση του περιεχομένου από το περίγραμμα.

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

<html>
  <head>
    <style>
      div &#123; background-color&#58;yellow; border&#58; 1px dashed gray; &#125;
      span &#123; background-color&#58;orange; &#125;
    </style>
  </head>
  <body>
    <h2>Margin vs Padding</h2>

    <div style="margin&#58;10px">
      <span>Margin&#58;10px</span>
    </div>
    <div style="padding&#58;10px">
      <span>Padding&#58;10px</span>
    </div>

  </body>
</html>
Εικόνα

Η μόνη περίπτωση που υπάρχει σύγχυση είναι με το πιο εξωτερικό κουτί, το body δηλαδή. Για να είσαι σίγουρος ότι θα μηδενίσεις τα περιθώρια του body σε όλους τους browsers πρέπει να ορίσεις και margin και padding ίσο με 0:

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

body &#123; margin&#58;0px; padding&#58;0px; &#125;
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

make a layout with CSS

Δημοσίευση από ThyClub » 31 Μάιος 2005 10:00

Όμως έχω μια ερώτηση. Γιατί δεν θες html;
?

Χωρίς HTML τίποτα :wink:

Πιστεύω οτι εννοείς HTML layout vs css layout

Mut3
Δημοσιεύσεις: 167
Εγγραφή: 03 Σεπ 2004 16:23
Επικοινωνία:

make a layout with CSS

Δημοσίευση από Mut3 » 03 Ιουν 2005 15:33

Δεν ειναι html layout αλλα table layout κατα την γνωμη μου. Τεσπα...

Tωρα για css layout, δεν υπαρχει καμια μαγικη συνταγη. Μπορει να χρησιμοποιεις float, position, display:block/inline και οτι αλλο γουσταρεις. Το θεμα ειναι να εχεις τελικα πιο καθαρο κωδικα απο οτι με tables και να εμφανιζεται οπως πρεπει.

Να ενα παραδειγμα για αυτο που θες να κανεις (me borders για να φαινεται τι γινεται):

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

<style>
.icon &#123;float&#58;left; width&#58;130px; height&#58;60px; border&#58;1px solid black;&#125;
.option &#123;float&#58;left; width&#58;130px; height&#58;30px;border&#58;1px solid black;&#125;
#wrap &#123;width&#58;660px;&#125;
</style>

<div id="wrap">
   <div class="icon">1</div>
   <div class="icon">2</div>
   <div class="icon">3</div>
   <div class="icon">4</div>
   <div class="icon">5</div>
   <div class="option">option1</div>
   <div class="option">option2</div>
   <div class="option">option3</div>
   <div class="option">option4</div>
   <div class="option">option5</div>
</div>
Τι γινεται εδω λοιπον: Βαζουμε ενα wrap div με συγκεκριμενο width. Αν δεν βαλεις borders δουλευει και με ακριβως 650px, εγω το εβαλα λιγο παρπαπανω. Αρχιζουμε το float left και επειδη χωραει μονο 5 div των 130px στην πρωτη σειρα, απο το 6ο και μετα κατεβαινει σε 2η σειρα. Ετσι καταφεραμε αυτο που θελαμε, δηλαδη 2 σειρες με 5 boxes των 130px η καθε μια.

Παιξε λιγο μαζι του και δες πως συμπεριφερονται τα divs, τα borders etc.

Mut3
Δημοσιεύσεις: 167
Εγγραφή: 03 Σεπ 2004 16:23
Επικοινωνία:

make a layout with CSS

Δημοσίευση από Mut3 » 03 Ιουν 2005 16:28

Προσπάθησα να δοκιμάσω το παράδειgμα που μου έδωσες (με τα fields) αλλά επειδή συνήθως χρησιμοποιώ <span></span> αντί για <div></div> (επειδή το div προσθέτει το κενό μιας γραμμής... και ακριβώς γι' αυτό το display:block είναι χρήσιμο αφού αποφεύγει αυτήν την άχρηστη γραμμή) δεν κατάφερα και πολλά αφού δεν ξέρω από div....
Που την ειδες την extra γραμμη; Δεν μου εχει τυχει κατι τετοιο. Το να βαζεις span με display:block ειναι τελειως μπακαλιστικο, αφου υπαρχει το div.
Χίλια συγνώμη φίλε μου κάτι δεν καταλαβαίνω, απο την στιγμή που το βάζω μεσα σε ένα αντικείμενο δεν θα έπρεπε να είναι relative σε αυτο που το περιβάλει;
Θα σου δωσω ενα παραδειγμα που ισως σε βοηθησει. Εχουμε ενα div1 με width:150px και αλλο ενα div2 με width:50px που καθεται στην μεση του div1. Ετσι το div2 απεχει 50px απο τα δεξια και αριστερα.

Οταν βαλεις position:relative στο div2 μπορεις να το μετακινησεις σχετικα με την θεση που βρισκεται τωρα. Δηλαδη αν βαλεις left:50px θα παει αλλα 50px πιο δεξια απο οτι ηταν. Αν βαλεις bottom:50px θα μετακινηθει 50px πιο πανω σε σχεση με την προηγουμενη θεση του.

Π.χ δεν κατάλαβα ποτέ τι κάνει το div αφού πρώτα από όλα υπάρχει το display:block.
Και για την ακρίβεια δεν έχω καταλάβει για ποιο λόγο μερικά elements λέγονται "block elements" αφού βρίσκονται "μέσα" στην σελίδα και για ποιο λόγο κάποια άλλα elements λέγονται "inline" αφού και αυτά μέσα στην σελίδα είναι.... I have a question... Θα μου πεις ότι τα block τα κάνεις ότι θες με ορισμένες (και συγκεκριμένες προφανώς) εντολές. Μα αφού και τα inline έτσι τα κάνεις... Μόνο που οι εντολές οι μεν είναι για τα μεν και οι δε για τα δε. Ποια οι διαφορά; Π.χ τι margin τι padding? Το ίδιο πράγμα δεν είναι; Το ένα πιάνει μόνο στο text (έτσι λένε ορισμένοι) το άλλο μόνο στα άλλα (images π.χ) αλλά κανένας browser δεν τα βλέπει και τα δύο στο ίδιο γιατί το ένα είναι το άλλο και το άλλο το ένα... ή και το ανάποδο!!!! Ναι καλά... άντε να βρεις άκρη....
Ενα παραδειγμα που ισως βοηθησει παλι. Φτιαξε μια λιστα <ul> με 3 <li>.
Απο default τα li εχουν display:block και βγαινουν το ενα κατο απο το αλλο.
Αν βαλεις display:inline θα βγαινουν το ενα διπλα στο αλλο, δημιουργωντας μια οριζοντια λιστα.
Η διαφορα των block και inline ειναι πως εμφανιζονται.
Δευτερο παραδειγμα τα <h1>,<h2> κτλ. Αν τους βαλεις display:inline και βαλεις 3 το ενα διπλα στο αλλο θα εμφανιζονται στην ιδια γραμμη. Αλλιως θα με το default (display:block) εμφανιζονται το ενα κατο απο το αλλο.

Με το margin μπορεις να κανεις πολλα πραγματα, οπως να του βαλεις αρνητικες τιμες (negative margins) και εχει διαφορες εφαρμογες. Το Padding ειναι αλλο θεμα τωρα. Δεν θα επεκταθω εδω γιατι και εγω εχω περιορισμενες γνωσεις και μπορει να πω βλακειες.

Απάντηση

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

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

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