CSS Μάθημα 3ο Προσθέτοντας περιεχόμενο

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

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

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

CSS Μάθημα 3ο Προσθέτοντας περιεχόμενο

Δημοσίευση από manolism » 08 Ιαν 2007 10:44

Μάθημα 3ο Προσθέτοντας περιεχόμενο

Σε αυτό το μάθημα θα δούμε πως θα προσθέσουμε περιεχόμενο μέσα στα div μας.
Πρώτα απ’ όλα μέσα στο css αρχείο θα προσθέσουμε τα παρακάτω:

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

img {
margin-bottom:5px;
}
Δηλώνουμε ότι όλες οι εικόνες που θα τοποθετηθούν στην ιστοσελίδα μας θα έχουν κάτω περιθώριο 5px.

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

.image {
margin-left:5px;
margin-right:5px;
}
Εδώ θα δηλώσουμε μέσα στο html αρχείο μας όσες από τις εικόνες μας θα έχουν περιθώριο δεξιά και αριστερά με τον παρακάτω κώδικα:

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

<img src="εικόνα"  class="image" />
Οι δύο αυτές επιλογές είναι ανεξάρτητες μεταξύ τους

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

.emphasis &#123;
font-weight&#58;bold;
color&#58;#838181;
&#125;
Με αυτές τις επιλογές θα τονίσουμε ορισμένες από τις λέξεις μας με τον παρακάτω κώδικα:

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

<span class="emphasis">Λέξη που θέλουμε </span>
Div retouch:

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

<img src="retouch.gif" alt="Image Retouch" />
 <br />
 Μάθετε πως να διορθώνετε<br /> 
 χρωματικά μία εικόνα <br />
 με το Photoshop 
Div funny:

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

<img src="funny.gif" alt="Funny Creation" /><br />
Δημιουργήστε καταπληκτικά <br />
γραφικά χρησιμοποιώντας την φαντασία σας και το Photoshop
Div content1:

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

<span class="emphasis">Adobe Photoshop</span>, or simply <span class="emphasis">Photoshop</span>, is a graphics editor developed and published by Adobe Systems. It is the current market leader for commercial bitmap and image manipulation, and, in addition to Adobe Acrobat, is one of the best-known pieces of software produced by <span class="emphasis">Adobe Systems</span>. It is considered the industry standard in most jobs related to the use of visual elements. Photoshop is available for Microsoft Windows, Mac OS X, and Mac OS; versions up to <span class="emphasis">Photoshop 9.0</span> can also be used with other operating systems such as Linux using software such as CrossOver Office.
Div content2:

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

<img src="work1.jpg" alt="Work 1" width="134" height="111" class="image" /><img src="work2.jpg" alt="Work 2" width="134" height="111" class="image" /><img src="work3.jpg" alt="Work 3" width="134" height="111" class="image" /><br />
Δείγματα εργασιών
Div random:

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

<img src="../random.gif" alt="Nike Bug" /><br />
Τυχαίας εμφάνισης εικόνα
Div footer:

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

Copyright © 2003-2006 <span class="emphasis">Ilias Antonopoulos</span>. All Rights Reserved.
Template created by <span class="emphasis">EkLekTos</span>
Οπότε ολοκληρωμένη την σελίδα την βλέπουμε παρακάτω:
Live demo
Τελευταία επεξεργασία από το μέλος manolism την 18 Μάιος 2007 16:06, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
BanOr
Δημοσιεύσεις: 812
Εγγραφή: 07 Απρ 2006 17:08
Τοποθεσία: Φιλαδελφεια
Επικοινωνία:

CSS Μάθημα 3ο Προσθέτοντας περιεχόμενο

Δημοσίευση από BanOr » 28 Μαρ 2007 21:05

Μόλις τελείωσα με αυτο το βήμα το είδα σε ΙΕ και το αποτέλεσμα δεν είχε σχέση με αυτό που βλέπω στον Firefox..

Εικόνα
Εικόνα

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

CSS Μάθημα 3ο Προσθέτοντας περιεχόμενο

Δημοσίευση από patriot » 29 Μαρ 2007 06:43

BanOr έγραψε:Μόλις τελείωσα με αυτο το βήμα το είδα σε ΙΕ και το αποτέλεσμα δεν είχε σχέση με αυτό που βλέπω στον Firefox..
1) Σε γενικές γραμμές, μεταξύ τους οι browsers έχουν διαφορές
2) Ο explorer είναι για πέταμα μην του δίνεις σημασία.
3) Αν θες να σχεδιάσεις μια σελίδα θα την σχεδιάσεις για mozilla που υποστηρίζει τα W3 standards όχι για explorer.
Τελευταία επεξεργασία από το μέλος patriot την 29 Μαρ 2007 09:26, έχει επεξεργασθεί 1 φορά συνολικά.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

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

CSS Μάθημα 3ο Προσθέτοντας περιεχόμενο

Δημοσίευση από manolism » 29 Μαρ 2007 09:11

Το πρωτότυπο το είδες σε FF και IE;

Γιατί δείχνει ακριβώς το ίδιο. Πρόσεξε μην έχεις ξεχάσει να κλείσεις κανένα div.

Άβαταρ μέλους
BanOr
Δημοσιεύσεις: 812
Εγγραφή: 07 Απρ 2006 17:08
Τοποθεσία: Φιλαδελφεια
Επικοινωνία:

CSS Μάθημα 3ο Προσθέτοντας περιεχόμενο

Δημοσίευση από BanOr » 29 Μαρ 2007 17:57

Σε ff είδα το πρωτότυπο.
Τον IE δεν τον χρησιμοποιώ καθόλου αλλά τον χρησιμοποιούν αρκετοι...
Τέσπα thanks :)
Ολα τα div ειναι κλείστα.


patriot ... trunks?
Εικόνα

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

CSS Μάθημα 3ο Προσθέτοντας περιεχόμενο

Δημοσίευση από patriot » 30 Μαρ 2007 04:01

BanOr έγραψε:patriot ... trunks?
Α, και εσύ πορωμένος ε; :kaloe: :hammer: :hammer: Το πρώτο μου avatar από τότε που έγινα μέλος στο freestuff και δεν λέω να το αλλάξω!!
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
BanOr
Δημοσιεύσεις: 812
Εγγραφή: 07 Απρ 2006 17:08
Τοποθεσία: Φιλαδελφεια
Επικοινωνία:

CSS Μάθημα 3ο Προσθέτοντας περιεχόμενο

Δημοσίευση από BanOr » 30 Μαρ 2007 04:49

Τρέλα είνaι το Dball :)
Εμένα ο αγαπημένος ειναι ο Gohan
Εικόνα

ibanezix
Δημοσιεύσεις: 38
Εγγραφή: 26 Νοέμ 2004 13:45
Τοποθεσία: Λεμεσός, Κύπρος

CSS Μάθημα 3ο Προσθέτοντας περιεχόμενο

Δημοσίευση από ibanezix » 18 Μάιος 2007 15:51

Το ένα προβληματάκι που βγάζει ο ΙΕ και είναι η στοίχηση στα αριστερά αντί στο κέντρο, λύνεται με την προσθήκη Strict DTD όπως μου πρότεινε ο patriot όταν έκανα τη σχετική ερώτηση εδώ. Ίσως χρειαστεί καμμιά ψιλοαλλαγούλα μετά, αλλά θα κάνει και validate.

@lunarmedia:

εκεί που δείχνεις τον κώδικα για το κάθε div ξεχωριστά, όταν φτάνεις στο div funny, έχεις περιλάβει μέσα στα code tags και τον τίτλο Div random και τον αντίστοιχο κώδικα αυτού. Για να δεις πόσο προσεκτικά σε διαβάζω :cop: :lol:


Άβαταρ μέλους
wired
Δημοσιεύσεις: 12
Εγγραφή: 21 Ιουν 2007 14:12
Επικοινωνία:

CSS Μάθημα 3ο Προσθέτοντας περιεχόμενο

Δημοσίευση από wired » 22 Ιουν 2007 12:18

patriot έγραψε:
BanOr έγραψε:Μόλις τελείωσα με αυτο το βήμα το είδα σε ΙΕ και το αποτέλεσμα δεν είχε σχέση με αυτό που βλέπω στον Firefox..
1) Σε γενικές γραμμές, μεταξύ τους οι browsers έχουν διαφορές
2) Ο explorer είναι για πέταμα μην του δίνεις σημασία.
3) Αν θες να σχεδιάσεις μια σελίδα θα την σχεδιάσεις για mozilla που υποστηρίζει τα W3 standards όχι για explorer.
Συμφωνώ απόλυτα ότι ο explorer είναι για πέταμα αλλά δεν μπορείς να μην τον λαμβάνεις υπ όψιν σου από την στιγμή που ακόμα το 57-60% των χρηστών τον χρησιμοποιεί

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

CSS Μάθημα 3ο Προσθέτοντας περιεχόμενο

Δημοσίευση από manolism » 22 Ιουν 2007 12:24

Το συγκεκριμένο παράδειγμα έχει το ίδιο αποτέλεσμα στους IE, Opera, FF

Αν προσέξεις μπορείς να πετύχεις συμβατότητα.

Άβαταρ μέλους
Gmand
Δημοσιεύσεις: 52
Εγγραφή: 01 Σεπ 2008 23:52

CSS Μάθημα 3ο Προσθέτοντας περιεχόμενο

Δημοσίευση από Gmand » 04 Σεπ 2008 10:58

Καλημερα

Δημιουγω μια ιστοσελιδα με css με το dreamweaver mx 2004.To προβλημα ειναι πως οταν βαζω ελληνικους χαρακτηρες μεσα στο div ο explorer h o firefox τα βγαζει κινεζικα και αναγνωριζει μονο τους αγγλικους.βαζω αυτων τον κωδικα που βρηκα στο site. τον βαζω μεσα στο <div id="retouch"></div>
Div retouch:
<img src="retouch.gif" alt="Image Retouch" />
<br />
Μάθετε πως να διορθώνετε<br />
χρωματικά μία εικόνα <br />
με το Photoshop
μπορει να μοθ πει καποιος που ειναι το προβλημα??
ευχαριστω

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

CSS Μάθημα 3ο Προσθέτοντας περιεχόμενο

Δημοσίευση από manolism » 04 Σεπ 2008 12:42

Σιγουρέψου ότι στο head είναι σωστό το encoding της σελίδας

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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />

Άβαταρ μέλους
Gmand
Δημοσιεύσεις: 52
Εγγραφή: 01 Σεπ 2008 23:52

CSS Μάθημα 3ο Προσθέτοντας περιεχόμενο

Δημοσίευση από Gmand » 04 Σεπ 2008 19:55

Euxaristw poly

Apokatastathike.to problhma htan oti <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" /> sto telos egw eixa to (1) enw esei exeis 7
thnks kai pali

jk111gr
Δημοσιεύσεις: 16
Εγγραφή: 07 Αύγ 2008 19:30

CSS Μάθημα 3ο Προσθέτοντας περιεχόμενο

Δημοσίευση από jk111gr » 07 Οκτ 2008 18:24

Το ίδιο πρόβλημα αντιμετωπίζω και εγώ με την κωδικοποίηση στην σελίδα. Αναγνωρίζει μόνο αγγλικούς χαρακτήρες, τα ελληνικά εμφανίζονται ακαταλαβίστικα. Εχω ελέγξει το <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" /> στην σελίδα και είναι σωστό. Πιθανότατα επειδή το tamplate το βρήκα έτοιμο και κάνω μερικές μετατροπές να υπάρχει στο αρχείο css κάτι που εμποδίζει την Ελληνική κωδικοποίηση παρά το γεγονός ότι έχω charset=iso-8859-7! Αν μπορεί κάποιος να με βοηθήσει θα του ημουν υπόχρεος...

Απάντηση

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

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

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