Cleric Δημοσ. 26 Νοεμβρίου 2008 Δημοσ. 26 Νοεμβρίου 2008 κανω τα πρωτα μου βηματα σε κατασκευη ιστοσελιδας και διαβαζα εδω : http://www.w3schools.com/css/css_classification.asp και εδω http://www.w3schools.com/css/tryit.asp?filename=trycss_float3 για το πως να βαλω μια φωτο και το κειμενο αριστερα ή δεξια . Η ερωτηση μου ειναι , αν θελω να κανω συνδιασμο και των δυο πως μπορω να το κανω? Για παραδειγμα, θελω στη σελιδα σε μια παραγραφω το κειμενο αριστερα και μια φωτο δεξια , και στην επομενη παραγραφο να ειναι μια αλλη φωτο αριστερα και το κειμενο δεξια , και παει λεγοντας...
PCharon Δημοσ. 26 Νοεμβρίου 2008 Δημοσ. 26 Νοεμβρίου 2008 Η καλύτερη λύση είναι με table (οπότε απλά τα βάζεις στο κελί που θες).
takistmr Δημοσ. 26 Νοεμβρίου 2008 Δημοσ. 26 Νοεμβρίου 2008 Η καλύτερη λύση είναι με table (οπότε απλά τα βάζεις στο κελί που θες). Η εποχή που χρησιμοποιούσες πίνακες για να διαμορφώσεις τη δομή μιας σελίδας πέρασε ανεπιστρεπτί. Για να τοποθετήσεις αντικείμενα δεξιά ή αριστερά ή κεντραρισμένα, δημιουργείς κλάσεις με τις ιδιότητες (πχ. στοίχιση, κτλ.) και τις προσδίδεις σ' αυτά. Ρίξε μια ματιά στον παρακάτω κώδικα: > <html> <head> <style type="text/css"> .right { float:right; width:120px; margin:10px; padding:10px; border:1px solid black; } .left { float:left; width:120px; margin:10px; padding:10px; border:1px solid black; } </style> </head> <body> <p> <img src="logocss.gif" width="95" height="84" class="left"/> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> <p> <img src="logocss.gif" width="95" height="84" class="right"/> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </body> </html> Ελπίζω να βοήθησα. Καλή τύχη!!!
PCharon Δημοσ. 26 Νοεμβρίου 2008 Δημοσ. 26 Νοεμβρίου 2008 @takistmr το λες αυτό σε κάποιον που λατρεύει τα CSS και γνωρίζει τις ιδιότητες απ'έξω κι ανακατωτά και τα προτιμά απόλυτα. Για παράδειγμα εκεί που γράφεις εσύ width="95" height="84" εγώ θα έγραφα style="width:95px;height:84px". Το θέμα είναι πως η float δεν έχει πάντα το επιθυμητό αποτέλεσμα. Πρότεινα το table διότι με τον τρόπο που περιγράφει αυτό που θέλει δεν δείχνει να εννοεί πως επιθυμεί να φαίνεται κείμενο κάτω από την εικόνα. Τώρα αν άλλο σκεφτόταν κι άλλο διατύπωσε ή αντιλήφθηκα λάθος, άλλο θέμα.
Cleric Δημοσ. 26 Νοεμβρίου 2008 Μέλος Δημοσ. 26 Νοεμβρίου 2008 παιδια ευχαριστω πολυ για τις απαντησεις σας , φιλε takistmr αυτο ακριβως ηθελα , ευχαριστω και για το λινκ thanocaster
some1 Δημοσ. 27 Νοεμβρίου 2008 Δημοσ. 27 Νοεμβρίου 2008 αλήθεια, γιατί απορρίπτουμε τους πίνακες ενώ μπορεί να απλόποιήσουν αρκετά τα πράγματα??? εννοώ υπάρχει κάτι αρνητικό στην χρήση τους??
PCharon Δημοσ. 27 Νοεμβρίου 2008 Δημοσ. 27 Νοεμβρίου 2008 Όχι βέβαια! Κάθε άλλο, η χρήση πινάκων είναι εκτενής παντού. Προφανώς ο takistmr εννοούσε πως, ιδιαίτερα στη συγκεκριμένη περίπτωση που πρόκειται για κείμενο, αν κάτι γίνεται με χρήση CSS είναι προτιμότερο από τον ορισμό πίνακα.
zinas Δημοσ. 27 Νοεμβρίου 2008 Δημοσ. 27 Νοεμβρίου 2008 Το tag table της HTML έχει δημιουργηθεί με σκοπό να παρουσιάζονται αυτά που αποκαλούμε tabular data (πχ. μία λίστα του στυλ: ημερομηνία, έσοδα, έξοδα, καθαρό κέρδος, ζημιά). Όταν απορρίπτουμε τα tables, εννοούμε ότι τα απορρίπτουμε σαν μέθοδο σχεδιασμού του layout μιας σελίδας. Με χρήση CSS έχεις πιο ευέλικτο κώδικα, πιο καθαρογραμμένο και ακολουθείς τα διεθνή πρότυπα. Γενικά καλό είναι να μάθεις όσο καλύτερα μπορείς CSS άμα σε ενδιαφέρει η δημιουργία ιστοσελίδων.
PCharon Δημοσ. 27 Νοεμβρίου 2008 Δημοσ. 27 Νοεμβρίου 2008 Με χρήση CSS έχεις πιο ευέλικτο κώδικα, πιο καθαρογραμμένο και ακολουθείς τα διεθνή πρότυπα. Αν και οι φυλλομετρητές ακολουθούσαν τα πρότυπα...
zinas Δημοσ. 27 Νοεμβρίου 2008 Δημοσ. 27 Νοεμβρίου 2008 Αν και οι φυλλομετρητές ακολουθούσαν τα πρότυπα... Καλό θα ήταν, αλλά αφού δεν μπορείς να κάνεις τίποτα, το συνηθίζεις. Δεν είναι κάτι που δεν παλεύεται πάντως.
PCharon Δημοσ. 27 Νοεμβρίου 2008 Δημοσ. 27 Νοεμβρίου 2008 Άσ'τα να πάνε. Εντάξει μπορείς να το αντιμετωπίσεις, αλλά ουσιαστικά κάνοντας υπαναχωρήσεις σε αυτό που αρχικά είχες στο μυαλό σου. Θα βγω ελαφρώς off-topic αναφέροντας και τη συμπεριφορά με τη Javascript. Πρόσφατα έφτιαχνα κάτι, πάω να το βάλω στον Opera και δούλευε ΟΚ. Το βάζω στον Firefox δεν δούλευε. Το διορθώνω, το βάζω στον ΙΕ πάλι δε δούλευε. Το βάζω στον Chrome είχε άλλη συμπεριφορά! Safari δε δοκίμασα (δε πα να...). Τρελό σπάσιμο μιλάμε! Δηλαδή ένα scipt που "ζυγίζει" 1kB πρέπει να το κάνεις 10kB και να σπάσεις τα νεύρα σου στις δοκιμές για να παίζει (αν παίξει τελικά) παντού. Το παράτησα. Τον κακό τους τον καιρό για φυλλομετρητές, ο καθένας έβγαλε τη δική του πατέντα. Άμα αποφασίσουν ποτέ να ακολουθήσουν τα ίδια πρότυπα και να καταλαβαίνουν τον κώδικα με τον ίδιο τρόπο, να με πάρουν τηλ.
thanocaster Δημοσ. 27 Νοεμβρίου 2008 Δημοσ. 27 Νοεμβρίου 2008 Οι πίνακες είναι ένα εργαλείο απεικόνισης δεδομένων. Δεν έχουν προβλέψιμη συμπεριφορά όσον αφορά τη στοίχιση των στοιχείων της σελίδας σου, ενώ, δεν σου προσφέρουν και το πιο σημαντικό απ' όλα όσον αφορά την τοποθέτηση των στοιχείων της σελίδας σου: το positioning. Δηλαδή τί μένει σταθερό όταν προσθέτεις/αφαιρείς περιεχόμενο, τί κινείται και ως προς τί κινείται, τί μένει σταθερό όσον αφορά στο scrolling (πχ όπως είναι στο gmail το div που γράφει "loading..."), τα κινούμενα μέρη (αυτά που έχουν position: relative;) πού θα κάθονται, και άλλα πολλά που κάνουν τη διαχείριση και τις ανανεώσεις της σελίδας σου πολύ πιο εύκολες και λειτουργικές. Επίσης, με το να βάλεις όλη τη σελίδα σου σε πίνακα κάνεις ένα μεγάλο λάθος όσον αφορά τα semantics, κάτι που δεν θα περάσει απαρατήρητο από το Google και τις υπόλοιπες μηχανές αναζήτησης. Και αυτό διότι ο κώδικας όσον αφορά στο διαδίκτυο έχει κάποιες προδιαγραφές. Για να γνωρίζεις αν ο κώδικάς σου έχει τις προδιαγραφές που έχει ορίσει το Word Wide Web Consortium (w3), υπάρχουν εργαλεία που ονομάζονται validators και τους δίνεις τον κώδικα της σελίδας σου και σου επιστρέφουν τις ασυμφωνίες με τα παγκόσμια πρότυπα. Υπάρχει validator για html, css, xml, κ.ά. Αν λοιπόν ο κώδικάς σου δεν έχει σφάλματα σύμφωνα με τα παραπάνω εργαλεία μπορείς περίφανα (λέμε τώρα) να φέρεις στη σελίδα σου αυτά τα εικονιδιάκια.
PCharon Δημοσ. 27 Νοεμβρίου 2008 Δημοσ. 27 Νοεμβρίου 2008 Ααα, τώρα μάλιστα: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.google.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.606 Υ.Γ. Επικρατεί χάος.
Vasilis89 Δημοσ. 27 Νοεμβρίου 2008 Δημοσ. 27 Νοεμβρίου 2008 Πάντως τα tables σε γλιτώνουν από πολλά προβλήματα συμβατότητας. Opera, Chrome, Safari είναι πιστά στο www, και το firefox λίγο πολύ, αλλά ο Explorer καμία σχέση. Και ie8 beta2 που δοκίμασα συνεχίζει να τα έχει. Πρέπει να είναι πολιτική της Microsoft για να κρατήσει τον explorer πρώτο, αναγκάζει τους developers να ακολουθούν τα δικά της πρότυπα (αφού είναι ο πιο διαδεδομένος browser), και στους άλλους οι σελίδες δεν φαίνονται σωστά. Δέστε εδώ http://en.wikipedia.org/wiki/Acid3. Το αστείο είναι ότι ο Explorer 8 παίρνει 21% και το Safari του iPhone 72%!!! Πιστεύω ότι τώρα που μπήκε και η Google στους Browsers, και με πολύ καλό μάλιστα(εγώ αυτό χρησιμοποιώ) θα πέσει πολύ ο explorer
Προτεινόμενες αναρτήσεις
Αρχειοθετημένο
Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.