make a layout with CSS

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

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

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

make a layout with CSS

Δημοσίευση από thdim » 29 Μάιος 2005 14:49

Μπορεί κάποιος να μου εξηγήσει με ποία τεχνική διμιουργούμε layouts με css, αν χρησιμοποιήσω absolute positioning σε όλα μου τα πεδία θα έχω προβλημα σε άλλες αναλήσεις, απο την αλλη με relative positioning το βρήσκω εξαιρετικά δύσκολο να κάνεις όλη την σελίδα. Υπάρχει κάποια αλλη τεχνική που δεν ξέρω...

έχω και ενα παράδειγμα, ας πούμε το παρακάτω

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

   <table>
    <tr>
     <td align="center" width="130"><img src="images/red.png"></td>
     <td align="center" width="130"><img src="images/red.png"></td>
     <td align="center" width="130"><img src="images/red.png"></td>
     <td align="center" width="130"><img src="images/red.png"></td>
     <td align="center" width="130"><img src="images/red.png"></td>
    </tr>

    <tr>
     <td align="center" width="130">option</td>
     <td align="center" width="130">option</td>
     <td align="center" width="130">option</td>
     <td align="center" width="130">option</td>
     <td align="center" width="130">option</td>
    </tr>
   </table>
πως θα μπορούσα να πάρω το ίδιο αποτέλεσμα με css?

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

make a layout with CSS

Δημοσίευση από ThyClub » 29 Μάιος 2005 16:27

Μήπως θα έπρεπε να επισημάνεις οτι θές να το κάνεις χωρίς tables?

Γιατί η ύπαρξη css δεν απαγορεύει τα tables και το αντίστροφο.

Μπορείς να ρίξεις μια ματιά εδώ www.alistapart.com και να πάρεις μερικές ιδέες.

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

make a layout with CSS

Δημοσίευση από patriot » 29 Μάιος 2005 16:36

Το display (display:block, display:inline και λοιπά) το float:left/right, το clip:left/right/both είναι από τα βασικά για ένα layout. Ρίξε μια ματιά και εδώ για περισσότερες πληροφορίες....

W3schools
Devguru

Αν θες να έχεις ένα layout για όλες τις αναλύσεις ξεκίνα από την μικρότερη που είναι 800χ600. Και για να μην περισσεύει χώρος στα δεξία βάλτο στην μέση. Αν έχεις πρόβλημα για το πως θα βάλεις κάτι στο κέντρο χωρίς "center" (το center καταργήθηκε) ρώτα να σου πω...

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

make a layout with CSS

Δημοσίευση από thdim » 29 Μάιος 2005 17:37

patriot έγραψε:Το display (display:block, display:inline και λοιπά) το float:left/right, το clip:left/right/both είναι από τα βασικά για ένα layout. Ρίξε μια ματιά και εδώ για περισσότερες πληροφορίες....
Ναι πάω να ρίξω μία ματία γιατι δεν έχω καταλάβει ακόμα το display...

patriot έγραψε:Αν θες να έχεις ένα layout για όλες τις αναλύσεις ξεκίνα από την μικρότερη που είναι 800χ600. Και για να μην περισσεύει χώρος στα δεξία βάλτο στην μέση. Αν έχεις πρόβλημα για το πως θα βάλεις κάτι στο κέντρο χωρίς "center" (το center καταργήθηκε) ρώτα να σου πω...
Αυτό κάνει

#content {
position: relative;
left: 15%;
width: 650px;
padding: 10px;
}

είναι οτι καλήτερο μπόρεσα να κάνω, αλλα δεν το εχω δοκιμάσει ακόμα σε 800x600. Αν έχει κατι καλήτερο να προτίνεις, ευχαρίστως να το ακούσω :wink:

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

make a layout with CSS

Δημοσίευση από thdim » 29 Μάιος 2005 17:54

βασικά εχω μεγάλο προβλημα στο να κατανοήσω το παρακάτω παράδειγμα.

εστω οτι έχουμε τα έξης:

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

#field4 &#123;
 position&#58; relative;
 top&#58; 4px;
 &#125;

#field5 &#123;
 position&#58; relative;
 left&#58; 4px;
 top&#58; 2px;
 width&#58; 400px;
 &#125;

 #field6 &#123;
  position&#58; relative;
  right&#58; 2px;
  top&#58; 2px;
  width&#58; 170px;
 &#125;

και

   <div id="field4">
    <div id="field5">
     <p>this is a box</p>
    </div>
   
    <div id="field6">
     <p>and this is an another box</p>
    </div>
   </div>
θέλω να πάρω ενα κουτί που μέσα του θα έχει αλλα δύο κουτιά, το ένα στα αριστερά και το αλλο στα δεξιά του. Το προβλημα είναι οτι ένω το ενα κουτί (το field5) είναι κανονικά μεσα στην μάνα του (field4), το άλλο βγένει εκτός αυτού και δεν μπορώ να καταλάβω με τί προσπαθεί να γίνει relative. Τι κάνω λάθως, μπορεί καποιως να μου εξηγήσει;

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

make a layout with CSS

Δημοσίευση από patriot » 29 Μάιος 2005 18:45

Ναι υπάρχει μια λύση! Πρώτα από όλα βάζεις όλα τα περιεχόμενα σε ένα table και μετά βάζεις όπου θες το table. Σωστά; H μοναδική λύση που μένει για να είναι ίσο το περιθώριο δεξιά και αριστερά (δηλ τα πράγματα να είναι το κέντρο) είναι το βάζεις το περιθώριο να υπολογίζεται ΑΥΤΟΜΑΤΑ αναλόγος με το πόσο τοις 100% είναι το table. Αν δηλ το table είναι 80% τότε να περισεύει 10% από κάθε πλευρά. Αν σκεφτεί κανείς λιγάκι (εδώ χρειάζεται κάποια πείρα γιατί συνήθως το margin το χρησιμοποιούμε σε άλλα πράγματα) τότε θα σκεφτεί ότι στα αγγλικά το περιθώριο λέγεται MARGIN! Ουσιαστικά λοιπόν αυτό:

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

table&#123;margin-left&#58;AUTO; margin-right&#58;AUTO&#125;
Και το table θα είναι στο κέντρο!!!

(ΝΑΙ τόσο απλά!!! Ξέρεις πόσο με ταλαιπώρησε;;; Όπως είπα το margin το χρησιμοποιούμε για άλλα πράγματα... δεν ήξερα και το "auto" σαν εντολή του margin και προσπαθούσα και προσπαθούσα....)

Αν τώρα θες για 800χ600 οθόνη απλά βάλε:

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

<table width="770">......</table>
σε συνδιασμό με το αποπάνω κόλπο.

Αν θες το table να είναι σε όλες τις αναλύσεις το ίδιο π.χ το 90% της σελίδας τότε γράψε:

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

<table width="90%">......</table>
Πρέπει όμως να σου πω ότι δεν υπάρχει πράγμα που να μην έχει δύο πλευρές. Μια καλή και μια κακή... Μπορεί η καλή να είναι ότι το αποπάνω κολπάκι πιάνει σε όλους του browsers αλλά το κακό είναι ότι για άλλη μια φορά ο explorer μας υπενθύμησε ότι πρέπει να είναι πρωτοπόρος σε όλα!! Ακόμα και στα κακά και στα ανάποδα. Το αποπάνω κόλπο δεν πιάνει στον explorer!!!! Ευτυχώς που υπάρχει και εδώ ένα κολπάκι!!

Για να το δει και ο explorer πρέπει εκτός από το αποπάνω (για τους άλλους browsers) να προσθέσεις και αυτό: Μπορεί ο explorer να μην τα βλέπει κατευθείαν τα πράγματα όμως τα βλέπει όταν είναι μέσα σε div ή κάπως παραλαγμένα ή και τα δύο μαζί σε συνδιασμό. Μπορεί με την βοήθεια του div να βλέπει τα περισσότερα (περικυκλώνοντας με ένα div το table) αλλά το auto του margin δυστυχώς δεν το βλέπει. Πρέπει λοιπόν να βρούμε κάτι άλλο. Η επόμενη σχετική εντολή είναι το text-align:center που όμως δεν μας βολεύει γιατί βάζει ακόμα και το κείμενο στο κεντρο (μιας και είναι "κληρονομικό" (inherited) το χάρισμα!!!) κάτι που είναι πολύ άσχημο... Εκτός αν είναι class το οποίο class δεν στοχεύει σε κάποιο tag συγκεκριμένα αλλά όπου το βάλεις εσύ π.χ μέσα στο div που περικυκλώνει το table: Δηλ:

Το class

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

   .explorer&#123;text-align&#58;center&#125;

Το div

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

<div class="explorer">
<table>.......</table>
</div>
All broswers σύνολο:

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

table&#123;margin-left&#58;auto; margin-right&#58;auto;&#125; /* Όλοι οι browsers εκτός του Ie */
   .explorer&#123;text-align&#58;center&#125; /* Ειδικά για τον Ie*/

<div class="explorer">
<table>.......</table>
</div>
Με αυτά τα δύο κολπάκια όλοι οι browsers θα βλέπουν το ίδιο. Δεν είναι δύσκολα αλλά γίνεται χαμός με τα πολλά-πολλά και ο χρήστης χάνει τον μπούσουλα...

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

make a layout with CSS

Δημοσίευση από patriot » 29 Μάιος 2005 18:56

Ναι πάω να ρίξω μία ματία γιατι δεν έχω καταλάβει ακόμα το display...

Θα σου πω ένα παράδειγμα για το τι κάνει το display. Π.χ το display:block.

Σκέψου ότι έχεις ένα link. Το βάζεις και ξεμπέρδεψες. Τι γίνεται όμως άμα έχεις 10-100-200???? Το ένα δίπλα στο άλλο (display:inline) δεν χωράνε παρά μόνο αν σου βγει ΚΑΤΩ μπάρα κάτι που είναι υπερβολικά άσχημο. Καταναγκαστικά λοιπόν θα τα βάλεις το ένα κάτω από το άλλο. Αν το κάνεις αυτό με html θα γράψεις αυτό:

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

<a href="">link 1 </a><br>
<a href="">link 2 </a><br>
<a href="">link 3 </a><br>
<a href="">link 4 </a><br>
<a href="">link 5 </a><br>
Δηλ σε κάθε τέλος του link θα γράφεις και από ένα <br>. Είναι περιτό να το κάνεις αυτό όταν μπορείς να γράψεις στο css

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

a &#123;display&#58;block&#125;
και ξεμπέρδεψες. Και φυσικά δεν είναι ανάγκη να είναι link. Μπορεί να είναι ένα TABLE!!!!

Γράψε

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

table &#123;display&#58;block&#125;
και όλα τα tables θα είναι το ένα κάτω από το άλλο...

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

make a layout with CSS

Δημοσίευση από patriot » 29 Μάιος 2005 19:09

δεν μπορώ να καταλάβω με τί προσπαθεί να γίνει relative....
με το προηγούμενο αντικείμενο.. "relative" σημαίνει "εν σχέση" με την κανονική ροή που είχε πριν στο document.

Από το devguru:
The relative value moves the element an offset distance relative to the position it has in the normal flow of the display of the page.

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

make a layout with CSS

Δημοσίευση από thdim » 29 Μάιος 2005 19:22

patriot έγραψε:
δεν μπορώ να καταλάβω με τί προσπαθεί να γίνει relative....
με το προηγούμενο αντικείμενο.. "relative" σημαίνει "εν σχέση" με την κανονική ροή που είχε πριν στο document.

Από το devguru:
The relative value moves the element an offset distance relative to the position it has in the normal flow of the display of the page.
Χίλια συγνώμη φίλε μου κάτι δεν καταλαβαίνω, απο την στιγμή που το βάζω μεσα σε ένα αντικείμενο δεν θα έπρεπε να είναι relative σε αυτο που το περιβάλει;

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

make a layout with CSS

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

Βλέπω Patriot το έχεις ξεψαχνίσει καλά το CSS!

Thdim δοκιμάζεις σε όλους τους browsers τη σελίδα σου; Είναι πολύ σημαντικό όταν χρησιμοποιείς CSS. Ο κάθε browser έχει τη δική του συλλογή από bugs, και ειδικά με τα display:absolute, display:relative και margin:auto ο καθένας κάνει τα δικά του. Δοκίμαζε τουλάχιστον IE6, Firefox και Opera, αλλά αν θέλεις να είσαι απόλυτα σίγουρος πρέπει να δοκιμάζεις επιπλέον και IE5, IE Mac, Safari και Konqueror.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

make a layout with CSS

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

Χμ.. δεν το έχω σκεφτεί αυτό.. μάλλον δεν μου έτυχε μέχρι στιγμής... δεν τα ξέρω και πολύ καλά μην νομίζεις... Μια ιδέα μου είναι πως μάλλον όχι. Μην ξέχνας ότι το table ας πούμε έχει κάποια properties από μόνο του, δηλ κάτι το συγκεκριμένο. Ενώ το div έχει ότι θες εσύ. Δεν μπορείς λοιπόν να του λες να είναι relative με κάτι που δεν ξέρει ποιο είναι αφού το div δεν έχει ορισμένα properties... Αλλά με βεβαιότητα δεν το ξέρω αυτό.

Προσπάθησα να δοκιμάσω το παράδειgμα που μου έδωσες (με τα fields) αλλά επειδή συνήθως χρησιμοποιώ <span></span> αντί για <div></div> (επειδή το div προσθέτει το κενό μιας γραμμής... και ακριβώς γι' αυτό το display:block είναι χρήσιμο αφού αποφεύγει αυτήν την άχρηστη γραμμή) δεν κατάφερα και πολλά αφού δεν ξέρω από div....

Πάντως ένα πράγμα πρέπει να βάλεις καλά στο μυαλό σου και αυτο στο λέω εκ πείρας. ΜΟΝΑΧΑ όσο ασχολούνται και έχουν μεγάλη πείρα στα css μπορουν να φτιάξουν layouts χωρίς tables.... οι άλλοι απλά προσπαθούμε... Και ακριβώς λόγο πείρας σου λέω ότι θα φτιάξεις ένα πολύ καλύτερο αποτέλεσμα αν χρησιμοποιήσεις και css και html μαζί παρά μόνο το ένα (css). Π.χ αν κατάλαβα καλά αυτό είναι αυτό που θες:


Στο head

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

<style type="text/css">
<!--
.OuterBox&#123;border&#58;red 1px solid; width&#58;*%;background-color&#58;#E0E0E0;&#125;
.CellOne&#123;border&#58;black 1px solid;
background-color&#58;yellow; margin&#58;5px; padding&#58;5px;&#125;
.CellTwo&#123;border&#58;black 1px solid;
background-color&#58;transparent;margin&#58;5px; padding&#58;5px;&#125;
table&#123;margin&#58;1em auto; width&#58;200px;&#125;
//-->
</style>
Στο body

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

<P class="OuterBox">
<table border="0" cellpadding="0" cellspacing="2"><tr><td class="CellOne">111</td><td class="CellTwo">222</td></tr></table>
</p>
Αυτό ήθελες;

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

make a layout with CSS

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

skeftomilos έγραψε:Βλέπω Patriot το έχεις ξεψαχνίσει καλά το CSS!
Δυστυχώς δεν θα το έλεγα... Έχω σχεδόν τα ίδια προβλήματα με τον φίλο από πάνω απλά προφανώς έτυχε να είμαι ένα βήμα ποιο μπροστά... Π.χ δεν κατάλαβα ποτέ τι κάνει το div αφού πρώτα από όλα υπάρχει το display:block.
Και για την ακρίβεια δεν έχω καταλάβει για ποιο λόγο μερικά elements λέγονται "block elements" αφού βρίσκονται "μέσα" στην σελίδα και για ποιο λόγο κάποια άλλα elements λέγονται "inline" αφού και αυτά μέσα στην σελίδα είναι.... :question: Θα μου πεις ότι τα block τα κάνεις ότι θες με ορισμένες (και συγκεκριμένες προφανώς) εντολές. Μα αφού και τα inline έτσι τα κάνεις... Μόνο που οι εντολές οι μεν είναι για τα μεν και οι δε για τα δε. Ποια οι διαφορά; Π.χ τι margin τι padding? Το ίδιο πράγμα δεν είναι; Το ένα πιάνει μόνο στο text (έτσι λένε ορισμένοι) το άλλο μόνο στα άλλα (images π.χ) αλλά κανένας browser δεν τα βλέπει και τα δύο στο ίδιο γιατί το ένα είναι το άλλο και το άλλο το ένα... ή και το ανάποδο!!!! Ναι καλά... άντε να βρεις άκρη....

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

make a layout with CSS

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

Λοιπών παιδία, από την μέχρι τώρα ερεύνα που έχω κάνει ανακάλυψα οτι τα layouts δεν τα φτιάχνουν με το position. (μπορεί να κάνω και λάθος βέβαια, αλλά διάβασα καλά του zendgarden τα css και του alistapart και αυτό είναι το συμπέρασμα). Φαίνεται λοιπών ότι γίνεται κατά κόρων χρήση του float. Φίλε patriot βασικά έχω σχεδόν τελειώσει το layout που ήθελα να κάνω, με καθόλου χρήση html (εκτός από έναν πίνακα που συστηχεί icons, το οποίο δεν βλέπω να μπορώ να το αποφύγω :-? ).

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

make a layout with CSS

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

patriot έγραψε: Πάντως ένα πράγμα πρέπει να βάλεις καλά στο μυαλό σου και αυτο στο λέω εκ πείρας. ΜΟΝΑΧΑ όσο ασχολούνται και έχουν μεγάλη πείρα στα css μπορουν να φτιάξουν layouts χωρίς tables.... οι άλλοι απλά προσπαθούμε... Και ακριβώς λόγο πείρας σου λέω ότι θα φτιάξεις ένα πολύ καλύτερο αποτέλεσμα αν χρησιμοποιήσεις και css και html μαζί παρά μόνο το ένα (css). Π.χ αν κατάλαβα καλά αυτό είναι αυτό που θες:


Στο head

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

<style type="text/css">
<!--
.OuterBox&#123;border&#58;red 1px solid; width&#58;*%;background-color&#58;#E0E0E0;&#125;
.CellOne&#123;border&#58;black 1px solid;
background-color&#58;yellow; margin&#58;5px; padding&#58;5px;&#125;
.CellTwo&#123;border&#58;black 1px solid;
background-color&#58;transparent;margin&#58;5px; padding&#58;5px;&#125;
table&#123;margin&#58;1em auto; width&#58;200px;&#125;
//-->
</style>
Στο body

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

<P class="OuterBox">
<table border="0" cellpadding="0" cellspacing="2"><tr><td class="CellOne">111</td><td class="CellTwo">222</td></tr></table>
</p>
Αυτό ήθελες;
Ναι αυτό κάνω και εγώ... αλλά χωρίς να βάλω το table.... και το αποτέλεσμα είναι να μου πετάει απο εξω απο το outerbox το δευτερο κουτί... :cry: :cry:

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

make a layout with CSS

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

thdim έγραψε:Λοιπών παιδία, από την μέχρι τώρα ερεύνα που έχω κάνει ανακάλυψα οτι τα layouts δεν τα φτιάχνουν με το position.

Οι guru μπορούν πίστεψε με...
(μπορεί να κάνω και λάθος βέβαια, αλλά διάβασα καλά του zendgarden τα css και του alistapart και αυτό είναι το συμπέρασμα).
Γι' αυτό σου λέω ότι εμείς είμαστε άσχετοι...
Φαίνεται λοιπών ότι γίνεται κατά κόρων χρήση του float.
Μόνο όταν περάσει ο καιρός θα συνειδητοποιήσεις ότι δεν πετυχαίνει άμα το float είναι στο right. Με τον καιρό θα καταλάβεις τι εννοώ...
Φίλε patriot βασικά έχω σχεδόν τελειώσει το layout που ήθελα να κάνω, με καθόλου χρήση html
Δεν ξέρω αν αυτό είναι ότι καλύτερο... ο καιρός θα δείξει... έρχονται και τα Css3...
(εκτός από έναν πίνακα που συστηχεί icons, το οποίο δεν βλέπω να μπορώ να το αποφύγω :-? ).
Σου ξαναλέω να δοκιμάσεις το display:block ή το display:inline. Το block πιστεύω ότι είναι αυτό που θες...

Απάντηση

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

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

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