css div on top

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

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

Απάντηση
glaros
Δημοσιεύσεις: 24
Εγγραφή: 17 Οκτ 2011 13:05

css div on top

Δημοσίευση από glaros » 17 Οκτ 2011 13:16

καλημερα και καλος σας βρηκα.
μαθαινω css και εχω μια αποροια.

εxω χτισει μια σελιδα βασισμενοσ σε πρωτυπο του dreamweaver.
η σελιδα δειχνει ενταξει εκτος απο τη στιγμη που προσθεσθα ενα div επανω σε ενα αλλo div κανοντας χρηση του
relative
-700px

αλλα μου δημιουργεί ενα κενο απο κατω του, μεγεθους 700px.

Μηπως ξερεις καποιος γιατι γινεται αυτο το κενο;

ο κωδικας (10Κ) για οποιον ενδιαφέρεται και ξερει καποια λυση ειναι εδω
http://www.sendspace.com/file/xljnto

ευχαριστω εκ των προτερων

Kypros Lambrou
Δημοσιεύσεις: 96
Εγγραφή: 17 Οκτ 2011 13:29

css div on top

Δημοσίευση από Kypros Lambrou » 17 Οκτ 2011 14:06

glaros έγραψε:καλημερα και καλος σας βρηκα.
μαθαινω css και εχω μια αποροια.

εxω χτισει μια σελιδα βασισμενοσ σε πρωτυπο του dreamweaver.
η σελιδα δειχνει ενταξει εκτος απο τη στιγμη που προσθεσθα ενα div επανω σε ενα αλλo div κανοντας χρηση του
relative
-700px

αλλα μου δημιουργεί ενα κενο απο κατω του, μεγεθους 700px.

Μηπως ξερεις καποιος γιατι γινεται αυτο το κενο;

ο κωδικας (10Κ) για οποιον ενδιαφέρεται και ξερει καποια λυση ειναι εδω
http://www.sendspace.com/file/xljnto

ευχαριστω εκ των προτερων
Καλησπέρα φίλε.
Καταρχάς ο τρόπος με τον οποίο χρησιμοποιείς τον CSS και HTML κώδικα είναι λάθος αφού δεν χρησιμοποιείς τα διάφορα containers για διαχωρισμό της σελίδας σε μικρότερα κομμάτια.

Πχ. όπως το header περιλαμβάνει την πάνω κόκκινη μπάρα (topRed) με τις γλώσσες και το πρώτο μενού, έτσι θα ήταν σωστότερο να έχεις μετά ένα άλλο div για την κυρίως σελίδα και ΜΕΣΑ σε αυτό να συμπεριλαμβάνονται οι πληροφορίες που θέλεις να δείξεις στους χρήστες σου.
Με λίγα λόγια θα ήταν καλύτερο να έχει κάτι έτσι:

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

<div class="header">
	<!-- header content -->
</div>

<div class="main_page">
	<div class="Titlos_1"> O titlos 1 </div>
    
    <div class="Ipotitlos 2"> O ipotitlos </div>
    
    <div class="plirofories">
    	Plirofories poy thelis na perilamvanontai stin selida
    </div>
</div>

<div class="footer">
	<!-- footer content -->
</div>
Το δεύτερο μεγάλο λάθος που έχω προσέξει είναι ότι χρησιμοποιείς διαφορετικά αρχεία CSS για κάθε container που έχεις. Δηλαδή εσύ τώρα έχεις 22 αρχεία ".css", ένα για κάθε τι που θέλεις να του εφαρμόσεις css, ενώ όλα αυτά θα έπρεπε να είναι συγκεντρωμένα σε ένα αρχείο "template.css" και να το συμπεριλαμβάνει αυτό μόνο μια φορά.

Πέραν αυτού το πρόβλημα που έχεις με τα 700 px κενού χώρου είναι επειδή το δεύτερο (Text_PlaceHolder) div είναι ΜΕΤΑ το πρώτο (ImageBig) ενώ θα έπρεπε να είναι ΜΕΣΑ στο πρώτο. Δηλαδή η λύση σου θα είναι:

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

<div class="ImageBig">
    	<div class="Text_PlaceHolder">διαφορα, διαφορα,... .</div>
</div>
και να αφαιρέσεις τα

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

position&#58;relative;
top&#58; -700px;
απο το CSS.


Ελπίζω να σε έχω καλύψει κάπως στο τι πρέπει να διορθώσεις στον κώδικα σου αλλά κυρίως δική μου προτροπή θα ήταν να μελετήσεις λίγο περισσότερο τις CSS και HTML προτού "αρχίσεις το γράψιμο" για να είσαι σίγουρος ότι τα χρησιμοποιείς πιο σωστά.

glaros
Δημοσιεύσεις: 24
Εγγραφή: 17 Οκτ 2011 13:05

css div on top

Δημοσίευση από glaros » 17 Οκτ 2011 14:54

σε ευχαριστω πολυ για τις πολυτιμες παρατησησεις σου.
ηδη συμαζεψα το css ( και απιστευτο δεν μου επεσε ο ουρανος στο κεφαλι), ενω το Text_PlaceHolder καταλαβα πως δουλευει. (ευχαριστω)

αυτο με το container δεν εχω καταλαβει.

δηλ. εαν εχω ας πουμε:

Banner
main collum
left collum
footer

τοτε θα κανω και τα αντίστοιχα container;
οπουθα βαλω μεσα το υλικο (του καθε container);

δηλ. αυτη η σελιδα που ανεβασα εχει 2 container;
header
footer


ή στο κυριο container προσθετω div οπου μεσα εχουν αλλα div;

Kypros Lambrou
Δημοσιεύσεις: 96
Εγγραφή: 17 Οκτ 2011 13:29

css div on top

Δημοσίευση από Kypros Lambrou » 17 Οκτ 2011 15:22

glaros έγραψε:σε ευχαριστω πολυ για τις πολυτιμες παρατησησεις σου.
ηδη συμαζεψα το css ( και απιστευτο δεν μου επεσε ο ουρανος στο κεφαλι), ενω το Text_PlaceHolder καταλαβα πως δουλευει. (ευχαριστω)

αυτο με το container δεν εχω καταλαβει.

δηλ. εαν εχω ας πουμε:

Banner
main collum
left collum
footer

τοτε θα κανω και τα αντίστοιχα container;
οπουθα βαλω μεσα το υλικο (του καθε container);

δηλ. αυτη η σελιδα που ανεβασα εχει 2 container;
header
footer


ή στο κυριο container προσθετω div οπου μεσα εχουν αλλα div;
Βασικά θα πρέπει να διαχωρίσεις απο την αρχή στο μυαλό σου μια δομή την οποία θα ακολουθήσεις στην δημιουργία της σελίδας.
Πχ.

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

Κεντρική Σελίδα
 ->Header 
       -> Μενού Γλώσσας
       -> Μενού Πλοήγησης
 -> Main_Page
       -> Αριστερά Στήλη
       -> Κυριως Σελίδα &#40;Πληροφορίες&#41;
 -> Footer
      -> Κάποιο Περιεχόμενο 
Έτσι έχουμε ήδη χωρίσει την σελίδα σε 3 μέρη (Header, Main_Page και Footer) απο πάνω προς τα κάτω.
Ακολουθώντας το πιό πάνω ο κώδικας μέσα στο <body> του html κώδικα σου μπορεί απλά να γραφτεί ως:

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

<body>

    <div id="header">
       <div class="top_language_bar">
            <!--  links for languages   -->
       </div>
       
       <div class="top_navigation_menu">
            <!--  links for top navigation menu   -->
       </div>
    </div>
    
    <div id="main_page">
        <div class="left_navigation_menu"> 
            <!-- links for left navigation menu -->
        </div>
       
        <div class="main_page_contents">
            <!-- information to display to the user -->
        </div>
    </div>
    
    <div id="footer">
       <!-- footer content -->
    </div> 

</body>
Τώρα έχεις τα τρία container σε html και μπορείς εύκολα με μερικές γραμμές css να τα διαμορφώσεις ανάλογα. Αν πχ. θέλεις μέσα στο top_navigation_menu να βάλεις δύο συνδέσμους που να σε παίρνουν σε κάποιες άλλες σελίδες, τότε απλά θα αντικαταστήσεις τα σχόλια που έχω προσθέσει ΜΕΣΑ στο div αυτό, με απλά hyperlinks.
Εύκολο έτσι ? :D

glaros
Δημοσιεύσεις: 24
Εγγραφή: 17 Οκτ 2011 13:05

css div on top

Δημοσίευση από glaros » 17 Οκτ 2011 16:36

απιστευτο που το λεω αυτο: ναι εχεις δικιο (τωρα που μου το εξηγησες ) ειναι ευκολο.

ευχαριστω

Kypros Lambrou
Δημοσιεύσεις: 96
Εγγραφή: 17 Οκτ 2011 13:29

css div on top

Δημοσίευση από Kypros Lambrou » 17 Οκτ 2011 17:04

glaros έγραψε:απιστευτο που το λεω αυτο: ναι εχεις δικιο (τωρα που μου το εξηγησες ) ειναι ευκολο.

ευχαριστω
Καλό αυτό! :)
Βλέποντας τον κώδικα που έχεις ανεβάσει (αν και φαντάζομαι τον έχεις βελτιώσει) υπάρχουν δύο closing tags για το </head> άρα σβήσε το ένα αν εξακολουθεί να υπάρχει στον κώδικα σου για να αποφύγεις error ή warnings στο markup της σελίδας σου.

glaros
Δημοσιεύσεις: 24
Εγγραφή: 17 Οκτ 2011 13:05

css div on top

Δημοσίευση από glaros » 18 Οκτ 2011 10:31

ευχαριστω, εχω κανει τις αλλαγες αυτες, αλλα εχω αλλη μια αποροια:
εαν ηθελα να βαλω εικονα στο πισω div πως θα το εκανα;

-δοκιμασα να το κανω με insert image στο div, αλλα μου μετακινει το πανω div

-δοκιμασα να το κανω με css bacground αλλα θα πρεπει για καθε σελιδα να γραφω και css.

υπαρχει καποιος αλλος τροπος;

Kypros Lambrou
Δημοσιεύσεις: 96
Εγγραφή: 17 Οκτ 2011 13:29

css div on top

Δημοσίευση από Kypros Lambrou » 18 Οκτ 2011 11:20

glaros έγραψε:ευχαριστω, εχω κανει τις αλλαγες αυτες, αλλα εχω αλλη μια αποροια:
εαν ηθελα να βαλω εικονα στο πισω div πως θα το εκανα;

-δοκιμασα να το κανω με insert image στο div, αλλα μου μετακινει το πανω div

-δοκιμασα να το κανω με css bacground αλλα θα πρεπει για καθε σελιδα να γραφω και css.

υπαρχει καποιος αλλος τροπος;
Όταν λές "στο πίσω" ποιο ακριβώς container εννοείς?

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

css div on top

Δημοσίευση από korgr » 18 Οκτ 2011 12:01

glaros έγραψε: εαν ηθελα να βαλω εικονα στο πισω div πως θα το εκανα;
Σου προτείνω να μελετήσεις και να κατανοήσεις και τα 10 βήματα του βοηθήματος που θα βρεις εδώ:
http://www.barelyfitz.com/screencast/ht ... sitioning/

Διαφορετικά πίστεψε με δεν θα καταφέρεις τίποτα καλό!

glaros
Δημοσιεύσεις: 24
Εγγραφή: 17 Οκτ 2011 13:05

css div on top

Δημοσίευση από glaros » 18 Οκτ 2011 12:27

ως "πίσω" αναφερομαι στο ImageBig
ως "επανω" στο "Text_PlaceHolder"

---------------
ευχαριστω korgr για το Link, σε αυτο βασιστηκα για να καταλαβω τα βασικα, αλλα στη πραξη χρειαζομαι και λιγη βοηθεια.

Kypros Lambrou
Δημοσιεύσεις: 96
Εγγραφή: 17 Οκτ 2011 13:29

css div on top

Δημοσίευση από Kypros Lambrou » 18 Οκτ 2011 12:48

glaros έγραψε:ως "πίσω" αναφερομαι στο ImageBig
ως "επανω" στο "Text_PlaceHolder"

---------------
ευχαριστω korgr για το Link, σε αυτο βασιστηκα για να καταλαβω τα βασικα, αλλα στη πραξη χρειαζομαι και λιγη βοηθεια.
To σωστό θα είναι να χρησιμοποιήσεις στο ImageBig κώδικα css που να βάζεις το background στην εικόνα που θέλεις να φαίνεται ως background και ο λόγος είναι επειδή και εσύ θέλεις να εμφανίζεται ως background πίσω απο το Text_Placeholder.
Τώρα αν πχ σε κάποιο απο τις άλλες σελίδες σου ξαναχρειαστείς ενα container με τις ίδιες ιδιότητες όπως το ImageBig πολύ απλά θα το ονομάσεις και αυτό με class="ImageBig" έτσι ώστε να ξαναπάρει το ίδιο style.

Αν όμως χρειαστείς κάποια εικόνα για παράδειγμα μέσα στο Text_PlaceHolder ανάμεσα στις πληροφορίες, τότε δεν θα βάλεις css αλλά θα χρησιμοποιήσεις html κώδικα

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

<img src="eikona.jpg" />
Βασικά θα χρησιμοποιείς html κώδικα για την δομή και το περιεχόμενο της σελίδας σου και σε αυτό θα εφαρμόζεις CSS για την στυλιστική παρουσίαση του περιεχομένου.

glaros
Δημοσιεύσεις: 24
Εγγραφή: 17 Οκτ 2011 13:05

css div on top

Δημοσίευση από glaros » 24 Οκτ 2011 17:38

μολις μου προεκυψε αλλη μια αποροια.

εχω ενα div και μεσα στο div αυτο εχω ενα αλλο με γριζο χρωμα και διαφανεια 50%
τωρα ομως θελω να προσθεσω, μια εικονα, στο div με τη διαφανεια 50%, οταν το κανω, τοτε η εικονα παιρνει την ιδιοτητα: διαφανεια 50%

πως μπορω να εισαγω εικονα χωρις να επηρεαζεται απο τη διαφανεια;

Kypros Lambrou
Δημοσιεύσεις: 96
Εγγραφή: 17 Οκτ 2011 13:29

css div on top

Δημοσίευση από Kypros Lambrou » 24 Οκτ 2011 18:22

Βασικά για να λύσεις το πρόβλημα αυτό είναι μέσω css hack και το πιο εύκολο που προσωπικά γνωρίζω είναι μέσω CSS3 όπου βασικά αντί για το opacity:0.5; χρησιμοποιούμε
background: rgba(0,51,255, .5);
στο εξωτερικό container δίνοντας τον rgba αριθμό του χρώματος που θέλουμε για background και ως τέταρτη παράμετρο το Alpha opacity που χρειαζόμαστε για την διαφάνεια και με αυτό η διαφάνεια δεν περνά στα άλλα elements που περιέχει το container.

glaros
Δημοσιεύσεις: 24
Εγγραφή: 17 Οκτ 2011 13:05

css div on top

Δημοσίευση από glaros » 25 Οκτ 2011 14:20

ναι τα καταφερα. ευχαριστω.

τελικα γραφω κωδικα, απιστευτο.
τερμα τα WYSIWYG (λεμε τωρα)

Kypros Lambrou
Δημοσιεύσεις: 96
Εγγραφή: 17 Οκτ 2011 13:29

css div on top

Δημοσίευση από Kypros Lambrou » 25 Οκτ 2011 14:28

Ωραία!
Προσωπική μου άποψη, μόλις "νιώθεις έτοιμος" ξέχνα τον editor και γράφε όλο τον κώδικα στο χέρι αφού πολλές φορές θα σου βάζει μικρά κομμάτια κώδικα εδώ και εκεί που δεν θα ξέρεις τι κάνουν ακριβώς και όταν δεν θα κάνει αυτό που θέλεις δεν θα είναι και τόσο εύκολο να βρεις το τι προκαλεί το λάθος.

Απάντηση

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

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

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