CSS Μάθημα 1ο Στήσιμο του layout

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

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

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

CSS Μάθημα 1ο Στήσιμο του layout

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

Μάθημα 1ο Στήσιμο του layout

Πρώτα θα δημιουργήσουμε ένα αρχείο για το css το οποίο θα το ονομάσουμε index.css και έπειτα θα δημιουργήσουμε και ένα αρχείο html το οποίο θα το ονομάσουμε index.html. Στην συνέχεια θα συνδέσουμε τα δύο αυτά αρχεία γράφοντας το παρακάτω στο head του index.html:

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

<link href="index.css" rel="stylesheet" type="text/css" />
Θα πρέπει να φροντίσουμε όλα τα αρχεία μας μαζί με τις εικόνες να βρίσκονται στον ίδιο φάκελο.
Αφού συνδέσαμε τα αρχεία μας θα αρχίσουμε να γράφουμε το CSS μας.

Το πρώτο πράγμα που θα γράψουμε είναι:

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

body &#123;
margin&#58; 0;
background-image&#58;url&#40;background.gif&#41;;
background-repeat&#58;repeat-x;
&#125;
Το margin δηλώνει ότι τα περιθώριά του από όλες τις πλευρές θα είναι μηδενικά, το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο στην σελίδα μας το γραφικό background.gif και το background-repeat δηλώνει ότι το φόντο θα αναπαραχθεί μόνο ως προς τον άξονα x δηλαδή προς τα δεξιά.
Live demo

Στην συνέχεια θα τοποθετήσουμε το κύριο div στο οποίο θα τοποθετηθεί όλη η ιστοσελίδα μας.

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

#container &#123;
margin&#58; 0 auto;
padding&#58; 0px;
width&#58; 781px;
height&#58;800px; 
background-image&#58;url&#40;main_back.gif&#41;;
&#125;
Το margin δηλώνει ότι περιθώριά του από όλες τις πλευρές θα είναι μηδενικά και θα τοποθετηθεί στο κέντρο, το padding είναι τα περιθώρια που θα έχει από τα αντικείμενα που θα δεχτεί εσωτερικά και αυτό είναι μηδενικό ώστε όλα τα νέα αντικείμενα που θα βάλουμε μέσα του να κολλήσουν στις πλευρές του, το width είναι το πλάτος του και το Height είναι το ύψος του και το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο μέσα στο div μας το γραφικό main_back.gif
Στην συνέχεια μέσα στο body της σελίδας μας θα πρέπει να γράψουμε το παρακάτω:

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

<div id="container"></div>
Live demo


Το επόμενο div μας θα είναι το header και στο css αρχείο μας γράφουμε το:

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

#header &#123;
background-image&#58;url&#40;main_banner.jpg&#41;;
width&#58; 780px; 
height&#58; 117px;
margin&#58; 0;
padding&#58; 0;
&#125;
Το margin δηλώνει ότι περιθώριά του από όλες τις πλευρές θα είναι μηδενικά , το padding είναι τα περιθώρια που θα έχει από τα αντικείμενα που θα δεχτεί εσωτερικά και αυτό είναι μηδενικό ώστε όλα τα νέα αντικείμενα που θα βάλουμε μέσα του να κολλήσουν στις πλευρές του, το width είναι το πλάτος του και το Height είναι το ύψος του και το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο μέσα στο div μας το γραφικό main_banner.gif.
Στην συνέχεια μέσα στο div container της σελίδας μας θα πρέπει να γράψουμε το παρακάτω:

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

<div id="header"></div>
Οπότε θα έχουμε το παρακάτω:

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

<div id="container">
<div id="header"></div>
</div>
Live demo

Το επόμενο div μας θα είναι το navigation και στο css αρχείο μας γράφουμε το:

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

#navigation &#123;
background-image&#58;url&#40;navbar.jpg&#41;;
width&#58; 780px; 
height&#58; 31px;
padding-top&#58;9px;
&#125;
Tο padding-top είναι τα περιθώρια που θα έχει το κείμενο του μενού από το πάνω μέρος του div και αυτό είναι 9 px, το width είναι το πλάτος του και το Height είναι το ύψος του και το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο μέσα στο div μας το γραφικό navbar.gif.
Στην συνέχεια μέσα στο div container της σελίδας μας και κάτω από το div header θα πρέπει να γράψουμε το παρακάτω:

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

<div id="header"></div>
Οπότε θα έχουμε το παρακάτω:

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

<div id="container">
<div id="header"></div>
<div id="navigation"></div>
</div>
Live demo

Το επόμενο div θα είναι το main_content μέσα στο οποίο θα τοποθετήσουμε όλα τα divs που θα χρησιμοποιήσουμε για το περιεχόμενο της ιστοσελίδας μας.

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

#main_content &#123;
background&#58;none;
width&#58; 741px;
height&#58;600px;
padding-top&#58;20px;
padding-bottom&#58;20px;
padding-left&#58;20px;
padding-right&#58;20px;
&#125;
Όλα τα padding είναι τα περιθώρια που θα έχει το περιεχόμενο του div από τις 4 πλευρές του και αυτό είναι 20 px (παρατηρήστε ότι το άθροισμα του width και των padding-left και padding-right μας κάνουν 781px,) το Width είναι το πλάτος του και το Height είναι το ύψος του και το background:none δηλώνει ότι δεν θα τοποθετηθεί τίποτα σαν φόντο.
Στην συνέχεια μέσα στο div container της σελίδας μας και κάτω από το div navigation θα πρέπει να γράψουμε το παρακάτω:

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

<div id="main_content"></div>
Οπότε θα έχουμε το παρακάτω:

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

<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="main_content"></div>
</div>
Live demo

Το επόμενο div θα είναι το retouch δηλαδή το πάνω αριστερά «κουτί»

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

#retouch &#123;
float&#58;left;
background-image&#58;url&#40;main_retouch.gif&#41;;
width&#58; 218px;
height&#58; 143px;
padding-top&#58;40px;
text-align&#58;center;
line-height&#58;15px;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
color&#58;#ffffff;
&#125;
Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το padding-top δηλώνει ότι το περιεχόμενο του div θα ξεκινήσει 40 px από το πάνω άκρο του (παρατηρήστε ότι το άθροισμα του height και του padding-top μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο), το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση, το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων.

Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container θα πρέπει να γράψουμε το παρακάτω:

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

<div id="retouch"></div>
Οπότε θα έχουμε το παρακάτω:

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

<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="main_content">
<div id="retouch"></div>
</div>
</div>
Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo

Το επόμενο div θα είναι το content1 δηλαδή το «κουτί» που βρίσκεται δεξιά του retouch.

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

#content1 &#123;
float&#58;left;
background-image&#58;url&#40;main_content1.gif&#41;;
width&#58; 480px;
height&#58; 133px;
margin-left&#58;20px;
padding-top&#58;40px;
padding-bottom&#58;10px;
padding-left&#58;10px;
padding-right&#58;10px;
line-height&#58;15px;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
color&#58;#ffffff;
&#125;
Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το margin-left δηλώνει ότι θα υπάρχει απόσταση από τα αριστερά 20px, τα padding δηλώνουν ότι το περιεχόμενο του div θα απέχει από τα άκρα του τα αντίστοιχα px (παρατηρήστε ότι το άθροισμα του height και των padding top και bottom μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο και το άθροισμα του weight και των padding left και right μας κάνει 500px όσο δηλαδή είναι το πλάτος της εικόνας που έχουμε ως φόντο), το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων.

Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container και κάτω από το div retouch θα πρέπει να γράψουμε το παρακάτω:

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

<div id="content1"></div>
Οπότε θα έχουμε το παρακάτω:

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

<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="main_content">
<div id="retouch"></div>
<div id="content1"></div>
</div>
</div>
Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo

Το επόμενο div θα είναι το funny δηλαδή το μεσαίο αριστερά «κουτί»

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

#funny &#123;
float&#58;left;
background-image&#58;url&#40;main_funny.gif&#41;;
width&#58; 218px;
height&#58; 143px;
margin-top&#58;20px;	
padding-top&#58;40px;
text-align&#58;center;
line-height&#58;15px;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
color&#58;#ffffff;
&#125;
Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το margin-top δηλώνει ότι θα υπάρχει απόσταση από πάνω 20px, το padding-top δηλώνει ότι το περιεχόμενο του div θα ξεκινήσει 40 px από το πάνω άκρο του (παρατηρήστε ότι το άθροισμα του height και του padding-top μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο), το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση, το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων.
Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container και κάτω από το div content1 θα πρέπει να γράψουμε το παρακάτω:

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

<div id="funny"></div>
Οπότε θα έχουμε το παρακάτω:

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

<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="main_content">
<div id="retouch"></div>
<div id="content1"></div>
<div id="funny"></div>
</div>
</div>
Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo

Το επόμενο div θα είναι το content2 δηλαδή το «κουτί» που βρίσκεται δεξιά του funny.

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

#content2 &#123;
float&#58;left;
background-image&#58;url&#40;main_content2.gif&#41;;
width&#58; 480px;
height&#58; 133px;
margin-left&#58;20px; 
margin-top&#58;20px;
padding-top&#58;40px;
padding-bottom&#58;10px;
padding-left&#58;10px;
padding-right&#58;10px;
line-height&#58;15px;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
color&#58;#ffffff;
text-align&#58;center;
&#125;
Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το margin-left και top δηλώνει ότι θα υπάρχει απόσταση από τα αριστερά και πάνω 20px, τα padding δηλώνουν ότι το περιεχόμενο του div θα απέχει από τα άκρα του τα αντίστοιχα px (παρατηρήστε ότι το άθροισμα του height και των padding top και bottom μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο και το άθροισμα του weight και των padding left και right μας κάνει 500px όσο δηλαδή είναι το πλάτος της εικόνας που έχουμε ως φόντο), το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων και το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση.
Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container και κάτω από το div funny θα πρέπει να γράψουμε το παρακάτω:

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

<div id="content2"></div>
Οπότε θα έχουμε το παρακάτω:

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

<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="main_content">
<div id="retouch"></div>
<div id="content1"></div>
<div id="funny"></div>
<div id="content2"></div>
</div>
</div>
Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo

Το επόμενο div θα είναι το random δηλαδή το κάτω αριστερά «κουτί»

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

#random &#123;
float&#58;left;
background-image&#58;url&#40;main_funny.gif&#41;;
width&#58; 218px;
height&#58; 143px;
margin-top&#58;20px;	
padding-top&#58;40px;
text-align&#58;center;
line-height&#58;15px;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
color&#58;#ffffff;
&#125;
Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το margin-top δηλώνει ότι θα υπάρχει απόσταση από πάνω 20px, το padding-top δηλώνει ότι το περιεχόμενο του div θα ξεκινήσει 40 px από το πάνω άκρο του (παρατηρήστε ότι το άθροισμα του height και του padding-top μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο), το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση, το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων.
Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container και κάτω από το div content2 θα πρέπει να γράψουμε το παρακάτω:

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

<div id="random"></div>
Οπότε θα έχουμε το παρακάτω:

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

<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="main_content">
<div id="retouch"></div>
<div id="content1"></div>
<div id="funny"></div>
<div id="content2"></div>
<div id="random"></div>
</div>
</div>
Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo


Τελευταίο div που θα τοποθετήσουμε είναι το footer:

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

#footer &#123;
float&#58;left;
background-image&#58;url&#40;main_footer.jpg&#41;;
width&#58; 781px; 
height&#58; 24px;
padding-top&#58;10px;
text-align&#58;center;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
color&#58;#FFFFFF;
&#125;
Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το padding-top δηλώνει ότι το περιεχόμενο του div θα ξεκινήσει 10 px από το πάνω άκρο του (παρατηρήστε ότι το άθροισμα του height και του padding-top μας κάνει 34px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο), το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων.
Στην συνέχεια μέσα στο div container και κάτω από το σημείο που κλείνει το div main_content θα πρέπει να γράψουμε το παρακάτω:

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

<div id="footer"></div>
Οπότε θα έχουμε το παρακάτω:

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

<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="main_content">
<div id="retouch"></div>
<div id="content1"></div>
<div id="funny"></div>
<div id="content2"></div>
<div id="random"></div>
</div>
<div id="footer"></div>
</div>
Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo

Άβαταρ μέλους
Figaro
Honorary Member
Δημοσιεύσεις: 2706
Εγγραφή: 08 Φεβ 2004 19:48

CSS Μάθημα 1ο Στήσιμο του layout

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

Poli wraios Lunar !
Thanx.

emphasy
Honorary Member
Δημοσιεύσεις: 4303
Εγγραφή: 16 Ιαν 2005 10:31

CSS Μάθημα 1ο Στήσιμο του layout

Δημοσίευση από emphasy » 11 Ιαν 2007 22:54

Απλά τέλειος...! Πολύ χρήσιμο κ αναλυτικό! :)

Άβαταρ μέλους
ArchangelX
Honorary Member
Δημοσιεύσεις: 2430
Εγγραφή: 24 Μαρ 2004 13:33
Τοποθεσία: 7ος Ουρανός
Επικοινωνία:

CSS Μάθημα 1ο Στήσιμο του layout

Δημοσίευση από ArchangelX » 11 Ιαν 2007 23:10

Πολύ αναλυτικό κύριε συνάδελφε. :respect: Congrats ;)
Εικόνα

Άβαταρ μέλους
kallileo
Δημοσιεύσεις: 66
Εγγραφή: 05 Μαρ 2007 13:05

CSS Μάθημα 1ο Στήσιμο του layout

Δημοσίευση από kallileo » 08 Μαρ 2007 10:48

Εξαιρετικο....Γιατι δεν εγινε sticky????

id12586
στις καρδιές μας
Δημοσιεύσεις: 8387
Εγγραφή: 23 Ιουν 2003 23:28
Τοποθεσία: Far away
Επικοινωνία:

CSS Μάθημα 1ο Στήσιμο του layout

Δημοσίευση από id12586 » 08 Μαρ 2007 11:10

Είναι ήδη βοήθημα.

Μπορείς να βρείς όλα τα Βοήθηματα της συγκεκριμένης Περιοχής εδώ :wink:
Chris at your Services
ΕικόναSacame de Aqui

Άβαταρ μέλους
gwgw
Honorary Member
Δημοσιεύσεις: 658
Εγγραφή: 05 Ιούλ 2005 12:44
Τοποθεσία: Στον κόσμο μου...

CSS Μάθημα 1ο Στήσιμο του layout

Δημοσίευση από gwgw » 08 Μαρ 2007 12:28

Πολύ καλό και πολύ χρήσιμο όπως και όλα τα υπόλοιπα... :respect:
Ευχαριστούμε! :)
Όλα θα πάνε καλά στο τέλος. Αν δεν πάνε καλά, δεν είναι το τέλος.

Εικόνα

Άβαταρ μέλους
kallileo
Δημοσιεύσεις: 66
Εγγραφή: 05 Μαρ 2007 13:05

CSS Μάθημα 1ο Στήσιμο του layout

Δημοσίευση από kallileo » 08 Μαρ 2007 14:03

Ναι τωρα το ειδα....καλη μαγκια!!!!!!!

id12586
στις καρδιές μας
Δημοσιεύσεις: 8387
Εγγραφή: 23 Ιουν 2003 23:28
Τοποθεσία: Far away
Επικοινωνία:

CSS Μάθημα 1ο Στήσιμο του layout

Δημοσίευση από id12586 » 08 Μαρ 2007 14:18

Και γενικά όλα τα βοηθήματα του Freestuff είναι εδώ:
http://www.freestuff.gr/tutorials/

Καλή Ανάγνωση! :)
Chris at your Services
ΕικόναSacame de Aqui

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

CSS Μάθημα 1ο Στήσιμο του layout

Δημοσίευση από manolism » 08 Μαρ 2007 18:00

kallileo έγραψε:Εξαιρετικο....Γιατι δεν εγινε sticky????
Είναι sticky εδώ:

http://www.freestuff.gr/forums/viewtopic.php?t=26378

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

CSS Μάθημα 1ο Στήσιμο του layout

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

πολύ καλό lunar :)
Μόνο ένα λάθος εντόπισα..
Αλλά οκ το έλυσα μονος μου :P

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

#random &#123;
float&#58;left;
background-image&#58;url&#40;main_funny.gif&#41;;
width&#58; 218px;
height&#58; 143px;
margin-top&#58;20px;   
padding-top&#58;40px;
text-align&#58;center;
line-height&#58;15px;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
color&#58;#ffffff;
&#125;
ενώ είναι

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

#random &#123;
float&#58;left;
background-image&#58;url&#40;main_random.gif&#41;;
width&#58; 218px;
height&#58; 143px;
margin-top&#58;20px;   
padding-top&#58;40px;
text-align&#58;center;
line-height&#58;15px;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
color&#58;#ffffff;
&#125;
Αλλά λάθη είμαστε ανθρώπους κάνουμε..
Εικόνα

Άβαταρ μέλους
EkLekTos
WebDev Moderator
Δημοσιεύσεις: 7422
Εγγραφή: 07 Απρ 2005 15:44
Τοποθεσία: Inside the Effects
Επικοινωνία:

CSS Μάθημα 1ο Στήσιμο του layout

Δημοσίευση από EkLekTos » 28 Μαρ 2007 22:10

Το ίδιο έχεις γράψει νομίζω... Που είναι το λάθος?
* Apple Technical Support Specialist *
* Apple Sales & Product Professional Certificate since 2011 * Εικόνα
Follow me @Twitter

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

CSS Μάθημα 1ο Στήσιμο του layout

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

sto background image
Εικόνα

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

CSS Μάθημα 1ο Στήσιμο του layout

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

BanOr έγραψε:sto background image
?? :o Η μόνη διαφορά στο background-image είναι ότι το gif έχει διαφορετικό όνομα. Που το βλέπεις εσύ το λάθος;
Εκτός αν εννοείς ότι δεν έβαλε αυτάκια γύρω από το όνομα: background-image:url("main_funny.gif");


Πάντως εγώ είδα ένα λάθος αλλά δεν μπορείς να το πεις λάθος του Lunar. Το λάθος είναι τα κενά. Άλλο αυτό:
background-image:url(tade.gif)
και άλλο αυτό:
background-imageκενό:κενόurl(tade.gif)
Οι παλιοί browsers θα είχαν πρόβλημα γιατί άλλο πράγμα θα θεωρούσαν το "background-image" και άλλο το "(tade.gif)"!!!! Αλλά όλοι έχουν νέους browsers σήμερα. Εγώ το γράφω χωρίς κενά για να έχω το κεφάλι μου ήσυχο, έστω και αν δεν είναι απόλυτη ανάγκη....
Τελευταία επεξεργασία από το μέλος patriot την 29 Μαρ 2007 09:24, έχει επεξεργασθεί 2 φορές συνολικά.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

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

CSS Μάθημα 1ο Στήσιμο του layout

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

Δεν υπάρχει κανένα λάθος στο BG. Η εικόνα είναι σωστή.

Απάντηση

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

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

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