Πολυεπίπεδο...

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

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

Απάντηση
theking
Δημοσιεύσεις: 56
Εγγραφή: 09 Οκτ 2008 21:09
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Πολυεπίπεδο...

Δημοσίευση από theking » 31 Οκτ 2008 15:17

Καλησπέρα σας!

Ξέρει κάποιος να μου πει πως μπορεί κανείς να δημιουργήσει διαφορά επίπεδα (Layer) στο FrontPage ή Dreamweaver έτσι ώστε να σου δίνεται η δυνατότητα να τοποθετήσεις κάτι πάνω από κάτι άλλο; Για παράδειγμα να βάλεις ένα flash πάνω σε μια εικόνα χωρίς να πετάγονται δεξιά – αριστερά τα αντικείμενα, σαν να είναι δηλαδή μέσα σε κάποιο κελί…

Ευχαριστώ ,,,

alexsoft

Πολυεπίπεδο...

Δημοσίευση από alexsoft » 31 Οκτ 2008 15:48

με CSS

z-index

π.χ.
.layer1 {z-index:100; }
.layer2 {z-index:200; }

το layer2 θα εμφανιστεί μπροστά από το layer1

Δες ΕΔΩ

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

Η Ιδιότητα z-index

Τα CSS δουλεύουν σε τρεις διαστάσεις : ύψος (height), πλάτος (width) και βάθος (depth). Έχουμε ήδη δει τις δύο πρώτες διαστάσεις νωρίτερα και τώρα θα δούμε το πώς μπορούμε να τοποθετήσουμε κάποια στοιχεία το ένα πάνω από το άλλο και να δημιουργήσουμε έτσι επίπεδα (layers).

Για να γίνει αυτό, θα πρέπει να εκχωρήσουμε σε κάθε στοιχείο έναν αριθμό, που είναι γνωστός με τον όρο z-index. Αυτό που ισχύει είναι ότι ένα στοιχείο που έχει μεγαλύτερο αριθμό z-index θα επικαλύπτει (overlaps) ένα άλλο στοιχείο που έχει μικρότερο αριθμό z-index.

Ας υποθέσουμε ότι έχουμε 5 τραπουλόχαρτα σε αντίστοιχες εικόνες. Θέλουμε να δημιουργήσουμε την εξής διάταξη στην ιστοσελίδα μας :

 

Ο κώδικας θα είναι ως εξής :

#ten_of_diamonds {

                    position: absolute;

                    left: 100px;

                    bottom: 100px;

                    z-index: 1;

}

#jack_of_diamonds {

                    position: absolute;

                    left: 115px;

                    bottom: 115px;

                    z-index: 2;

}

#queen_of_diamonds {

                    position: absolute;

                    left: 130px;

                    bottom: 130px;

                    z-index: 3;

}

#king_of_diamonds {

                    position: absolute;

                    left: 145px;

                    bottom: 145px;

                    z-index: 4;

}

#ace_of_diamonds {

                    position: absolute;

                    left: 160px;

                    bottom: 160px;

                    z-index: 5;

}

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

Ακολουθεί ένα παράδειγμα με τοποθέτηση μιας εικόνας πάνω από μια άλλη εικόνα :

<html>

<style>

#img1 &#123;

                                       position&#58;absolute;

                                       top&#58; 100px;

                                       left&#58; 200px;

                                       z-index&#58; 2;

&#125;

#img2 &#123;

                                       position&#58;absolute;

                                       top&#58; 100px;

                                       left&#58; 200px;

                                       z-index&#58; 1;

&#125;

</style>

<body>

<h1 align=center>Hallo from Florina!</h1>

<div id="img1">

                                       <img src="florina01.jpg">

</div>

<div id="img2">

                                       <img src="florina02.jpg">

</div>

</body>

</html>

theking
Δημοσιεύσεις: 56
Εγγραφή: 09 Οκτ 2008 21:09
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Πολυεπίπεδο...

Δημοσίευση από theking » 03 Νοέμ 2008 01:25

euxaristw polu file mou!!!
tha prospathisw na ylopoiisw osa les parapanw...

eyxaristw ksana gia tin boitheia!

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

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

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