Προσαρμογη site σε καθε ανάλυση.

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

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

Απάντηση
shortyjr
Δημοσιεύσεις: 66
Εγγραφή: 17 Φεβ 2010 01:49

Προσαρμογη site σε καθε ανάλυση.

Δημοσίευση από shortyjr » 08 Μαρ 2010 02:43

Παιδια πως θα κάνω το site να φένετε σωστα σε ολες τις αναλύσεις.

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Προσαρμογη site σε καθε ανάλυση.

Δημοσίευση από Basilakis » 10 Μαρ 2010 18:04

Εξαρτάτε τι ενωείς με το σωστά...

θέλεις να ανοίγει σε όλες τις αναλύσεις ή θέλεις να είναι standar μέγεθος;

shortyjr
Δημοσιεύσεις: 66
Εγγραφή: 17 Φεβ 2010 01:49

Προσαρμογη site σε καθε ανάλυση.

Δημοσίευση από shortyjr » 11 Μαρ 2010 00:41

stadar μεγεθοσ φιλε

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Προσαρμογη site σε καθε ανάλυση.

Δημοσίευση από Basilakis » 11 Μαρ 2010 03:02

τότε θα ορίσεις στο width το μέγεθος που θέλεις;

shortyjr
Δημοσιεύσεις: 66
Εγγραφή: 17 Φεβ 2010 01:49

Προσαρμογη site σε καθε ανάλυση.

Δημοσίευση από shortyjr » 11 Μαρ 2010 03:41

εξηγησε μου λιγο καλυτερο γιατι ειμαι αρχαριοσ

Θελω να συυμπεριφερετε η σελιδα μου οπως αυτη η σελιδα
http://www.huffingtonpost.com/

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Προσαρμογη site σε καθε ανάλυση.

Δημοσίευση από Sermac » 11 Μαρ 2010 04:26

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml" lang="en">
<head>
    <title>Test</title>
    <style type="text/css">
        * &#123;
            padding&#58;0;
            margin&#58;0;
        &#125;
        
        body &#123;
            background-color&#58;#E8E8E8;
            color&#58;#000;
            font-family&#58;Arial,"Helvetica Neue",Helvetica,sans-serif;
            font-size&#58;12px;
        &#125;
        
        .inner &#123;
            width&#58;960px; /* stathero platos */
            margin&#58;0 auto; /* kentriki stixisi */
        &#125;
        
        #header &#123;
            background-color&#58;#DFDFDF; /* paradeigma */
            color&#58;#FFF;
        &#125;
        
        #header .inner &#123;
            background-color&#58;#3D3D3D;
        &#125;
        
        #main &#123;
        &#125;
        
        #main .inner &#123;
            background-color&#58;#FFF;
        &#125;
        
        #footer &#123;
            background-color&#58;#DFDFDF; /* paradeigma */
            color&#58;#FFF;
        &#125;
        
        #footer .inner &#123;
            background-color&#58;#3D3D3D;
        &#125;
    </style>
</head>
<body>
    <div id="header">
        <div class="inner">
            header<br />header<br />header<br />header<br />header
        </div>
    </div>
    <div id="main">
        <div class="inner">
            content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
        </div>
    </div>
    <div id="footer">
        <div class="inner">
            footer<br />footer<br />footer<br />footer<br />footer
        </div>
    </div>
</body>
</html>
Το http://www.huffingtonpost.com/ έχει ουσιαστικά μόνο ένα inner.

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

...
body &#123;
    background-color&#58;#E8E8E8;
    color&#58;#000000;
    ...
&#125;

div#wrapper &#123;
    background-color&#58;#FFFFFF;
    width&#58;971.5px; /* stathero platos */
    margin&#58;0 auto; /* kentriki stixisi */
&#125;
...

<body>
    <div id="wrapper">
        <div> ... </div>
        <div> ... </div>
        ...
    </div>
</body>
...
Στο παράδειγμα που σου έγραψα εγώ, όμως, υπάρχει το πλεονέκτημα ότι μπορείς εύκολα να αλλάξεις ένα div από fixed width σε liquid width, χωρίς να επηρεαστούν τα υπόλοιπα. Και φυσικά μπορείς να παίξεις με τα background για κάθε division ξεχωριστά.
Εικόνα

shortyjr
Δημοσιεύσεις: 66
Εγγραφή: 17 Φεβ 2010 01:49

Προσαρμογη site σε καθε ανάλυση.

Δημοσίευση από shortyjr » 11 Μαρ 2010 04:52

Ευχαριστώ πολύ φιλε.
Εγώ θέλω οταν κάνω resize το window του browser να μένει σταθερό οπως η σελιδα που έστειλα, ή όπως η σελίδα της apple που νομιζω οτι είναι το fluid. Σωστά?

Άρα με ενδιαφέρει ο δεύτερος κωδικας?

Έχω ενα μενού με width 900. Και θέλω να είναι στο κέντρο του site.
Πώς θα γίνει αυτο?
Γιατι το κάνω και δε βρισκετε μεσα στο πεδιο της σελιδα που παραμένει σταθερο ανεξαρτητα απο το μεγεθος το browser. Αλλα παραμένει συνεχεια στο μέσων οσο μικραινει το μεγεθος.
Καταλαβατε τι εννοω?

Βοηθειαααααααααααα

Δηλαδη πως θα τοποθετώ εικονες και οτι αλλο θέλω μεσα σε αυτα τα 960px ωστε να κινουντε ολα αυτα που βάζω σα να ειναι ολο μια εικονα.
Οπως δηλαδη τα site Που ανέφερα.

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Προσαρμογη site σε καθε ανάλυση.

Δημοσίευση από Sermac » 11 Μαρ 2010 05:34

shortyjr έγραψε:Εγώ θέλω οταν κάνω resize το window του browser να μένει σταθερό οπως η σελιδα που έστειλα, ή όπως η σελίδα της apple που νομιζω οτι είναι το fluid. Σωστά?
Fixed width σημαίνει ότι όσο και να μεγαλώσεις το πλάτος του παραθύρου, το πλάτος του element (στην προκειμένη περίπτωση του div) θα παραμείνει σταθερό (π.χ. 960 pixel). Στο liquid width δεν υπάρχει σταθερό πλάτος. Όσο μεγαλώνεις το πλάτος του παραθύρου, τόσο θα μεγαλώνει και το πλάτος του element.

π.χ.
Αυτό είναι fixed width.
Αυτό είναι liquid width.

Το apple.com λοιπόν είναι fixed.
shortyjr έγραψε:Άρα με ενδιαφέρει ο δεύτερος κωδικας?
Και τα δύο είναι fixed. Δούλεψε αυτό που καταλαβαίνεις περισσότερο.
shortyjr έγραψε:Έχω ενα μενού με width 900. Και θέλω να είναι στο κέντρο του site.
Πώς θα γίνει αυτο?
Γιατι το κάνω και δε βρισκετε μεσα στο πεδιο της σελιδα που παραμένει σταθερο ανεξαρτητα απο το μεγεθος το browser. Αλλα παραμένει συνεχεια στο μέσων οσο μικραινει το μεγεθος.
Καταλαβατε τι εννοω?
Αν μπορείς παρέθεσε τον κώδικα.
Εικόνα

shortyjr
Δημοσιεύσεις: 66
Εγγραφή: 17 Φεβ 2010 01:49

Προσαρμογη site σε καθε ανάλυση.

Δημοσίευση από shortyjr » 11 Μαρ 2010 05:44

Ωραιος. Fixed θέλω.

Απλα θέλω να μου εξηγήσεις πώς θα τοποθετήσω το μενου σε αυτο που μου εγραψες και καθε εικονα ωστε να συμπεριφερονται οπως στο site της apple.

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

 HTML&#58;
.
.
.
<ul id="menu">
   <li><a href="1.html" class="1 active">1</a></li>
   <li><a href="2.html" class="2">2</a></li>
   <li><a href="3.html" class="3">3</a></li>
   <li><a href="4.html" class="4">4</a></li>
   <li><a href="5.html" class="5">5</a></li>
</ul>
.
.
.

CSS&#58;

ul#menu &#123;width&#58; 900px; margin&#58; 120px auto; position&#58;relative; top&#58; -110px; list-style&#58; none;&#125;
ul#menu li &#123; display&#58; inline; &#125;
ul#menu li a &#123;display&#58; block; float&#58; left; height&#58; 60px; position&#58; centre; background-image&#58; url&#40;Pictures/Menu.jpg&#41;; text-indent&#58; -9999px;&#125;

    ul#menu li a.1 &#123;width&#58; 149px; background-position&#58; 0 0;&#125;
	ul#menu li a.2 &#123;width&#58; 255px; background-position&#58; -149px 0;&#125;
    ul#menu li a.3 &#123;width&#58; 223px; background-position&#58; -404px 0;&#125;
	ul#menu li a.4 &#123;width&#58; 159px; background-position&#58; -627px 0;&#125;
	ul#menu li a.5 &#123;width&#58; 114px; background-position&#58; -785px 0;&#125;
	
    ul#menu li a.1&#58;hover, ul#menu li a.1.active, ul#menu li a.1&#58;focus &#123;background-position&#58; 0 -60px;&#125;
	ul#menu li a.2&#58;hover,ul#menu li a.2.active, ul#menu li a.2&#58;focus &#123;background-position&#58; -149px -60px;&#125;
	ul#menu li a.3&#58;hover,ul#menu li a.3.active, ul#menu li a.3&#58;focus &#123;background-position&#58; -404px -60px;&#125;
	ul#menu li a.4&#58;hover,ul#menu li a.4.active, ul#menu li a.4&#58;focus &#123;background-position&#58; -627px -60px;&#125;
	ul#menu li a.5&#58;hover,ul#menu li a.5.active, ul#menu li a.5&#58;focus &#123;background-position&#58; -785px -60px;	&#125;
	
a &#123; outline&#58; none; &#125;

Τελευταία επεξεργασία από το μέλος shortyjr την 11 Μαρ 2010 05:49, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Προσαρμογη site σε καθε ανάλυση.

Δημοσίευση από Sermac » 11 Μαρ 2010 05:46

Στείλε μου και την εικόνα Menu.jpg.
Εικόνα

shortyjr
Δημοσιεύσεις: 66
Εγγραφή: 17 Φεβ 2010 01:49

Προσαρμογη site σε καθε ανάλυση.

Δημοσίευση από shortyjr » 11 Μαρ 2010 05:56

Οριστε φιλε[/img]
Συνημμένα
Menu.jpg
Η εικονα

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Προσαρμογη site σε καθε ανάλυση.

Δημοσίευση από Sermac » 11 Μαρ 2010 06:45

:hammer:
Συνημμένα
shortyjr.zip
(1.87 KiB) Μεταφορτώθηκε 410 φορές
Εικόνα

shortyjr
Δημοσιεύσεις: 66
Εγγραφή: 17 Φεβ 2010 01:49

Προσαρμογη site σε καθε ανάλυση.

Δημοσίευση από shortyjr » 11 Μαρ 2010 09:20

Ευχαριστώ φιλε.

Εγω ομως θέλω να είναι 900px επι 60 η μπαρα και στο μέσων της σελιδας. Αυτο πως γινεται?
Επίσης μια εικόνα πώς θα την τοποθετησω πχ τέρμα δεξια της σελιδας με πλατος 960 που ορισαμε πριν?

σε παρακαλω φιλε, αν με βοηθησεις σε αυτο θα προχωρησω παρα πολυ στο site μου εχω κολλησει σε αυτο αρκετο καιρο

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Προσαρμογη site σε καθε ανάλυση.

Δημοσίευση από Sermac » 11 Μαρ 2010 14:22

shortyjr έγραψε:Εγω ομως θέλω να είναι 900px επι 60 η μπαρα και στο μέσων της σελιδας. Αυτο πως γινεται?
900px το πλάτος του μενού.
30px περιθώριο (margin) στα αριστερά.
30px περιθώριο (margin) στα δεξιά.
Σύνολο 960px, ίσο δηλαδή με το πλάτος της σελίδας. Οπότε το <div id="menu"> εμφανίζεται απόλυτα στοιχισμένο στο κέντρο.
shortyjr έγραψε:Επίσης μια εικόνα πώς θα την τοποθετησω πχ τέρμα δεξια της σελιδας με πλατος 960 που ορισαμε πριν?

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

<div class="inner">
    ...
    <img src="" alt="" style="float&#58;right;" />
    ...
</div>
Συνημμένα
shortyjr2.zip
(1.98 KiB) Μεταφορτώθηκε 433 φορές
Εικόνα

shortyjr
Δημοσιεύσεις: 66
Εγγραφή: 17 Φεβ 2010 01:49

Προσαρμογη site σε καθε ανάλυση.

Δημοσίευση από shortyjr » 11 Μαρ 2010 14:36

Ευχαριστώ παρα πολυ φιλε.
Δυο τελευταιες ερωτήσεις.

1)Εγραψα ξανά τον κώδικα και τον προσάρμοσα ωστε το μενου να ειναι με την εικόνα.
Δεν εμφανιζονται η διακεκομενες που εχει στον δικο σου. Γιατι?

2) με ποιες εντωλες θα τοποθετω οπου θέλω την εικόνα, δηλαδη αντι τέρμα αριστερα 20px απο αριστερα 10px απο πάνω.

Απάντηση

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

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

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