Συνδυασμος Div και Class

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

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

Απάντηση
koskal
Δημοσιεύσεις: 3
Εγγραφή: 13 Ιούλ 2011 00:51

Συνδυασμος Div και Class

Δημοσίευση από koskal » 13 Ιούλ 2011 01:39

Γεια σας.
Χαριν του FREESTUFF, -και συγκεκριμενα ο πρωτος μου δασκαλος ηταν ο ΜανωληςΜ- ξεκινησα να φτιαχνω μια ιστοσελιδα και εχω στησει τα βασικα.
Μετα απο πολυ καιρο που σας διαβαζω -συμβουλευομαι- εχω κολλησει και εχω την εξης ερωτηση.

Θελω η καθε ιστοσελιδα να εχει διαφορετικο υψος, αναλογα με το περιεχομενο της.
Αυτο το εκανα βεβαια με διαφορετικο ονομα Div Id για την καθε ιστοσελιδα μεσα στο CSS αρχειο.
Αναρωτιεμαι ομως αν μπορει να γινει αυτο με ενα Contαiner και με πολλες Class, και πως?
Διαβασα το ποστ του "fAzer" ( http://www.freestuff.gr/forums/viewtopic.php?t=52350 ) αλλα δεν καταφερα να το υλοποιησω, γιατι δεν ειναι και τοσο αναλυτικο για το επιπεδο μου.
Οποτε θα ηθελα αν γινεται καποια ποιο αναλυτικα παραδειγματα.

Ευχαριστω!

Υ.Γ. Φυσικα υπαρχει πληθωρα ερωτηματων και αποριων αλλα αυτα σε επομενα ποστ. Ορεξη να υπαρχει!!!
Η αλήθεια και το λάδι βγαίνουν πάντα από πάνω !

klix
Δημοσιεύσεις: 42
Εγγραφή: 03 Ιαν 2010 00:15
Τοποθεσία: Λονδίνο

Συνδυασμος Div και Class

Δημοσίευση από klix » 13 Ιούλ 2011 03:11

Φίλε KosKal γράφεις πως το ύψος της κάθε σελίδας θέλεις να αλλάζει ανάλογα με το περιεχόμενό της.
Έχεις π.χ.
<div id="header">
Εδώ μπαίνει το περιεχόμενο του header της σελίδας.
</div>
<div id="content">
Εδώ μπαίνει το κυρίως περιεχόμενο της σελίδας.
</div>
<div id="footer">
Εδώ μπαίνει το περιεχόμενο του footer της σελίδας.
</div>

Σε ένα τέτοιο απλό παράδειγμα, εαν στο css σου δεν ορίσεις κανένα height για τίποτα, τότε τα divs αυτόματα θα αλλάξουν ύψος ανάλογα με το περιεχόμενό τους. Οπότε αν έχεις σελίδες με διαφορετικό όγκο περιεχομένου, απλά μην ορίζεις κανένα height στο content div και αυτό θα αλλάξει ανάλογα με το περιεχόμενό του(έτσι λειτουργούν εξ ορισμού τα divs).
Αυτό που μπορεί να σου χαλάει το design είναι αν μέσα σε ένα div έχεις floating divs, τότε το container div πρέπει είτε να έχει στο css του overflow:hidden είτε κάτι σε στύλ zoom:1 έτσι ώστε να περικλέιει συνεχώς τα περιεχόμενά του.

Αν δώσεις κάποιο πιο συγκεκριμένο παράδειγμα ίσως να μπορέσω να σε βοηθήσω περισσότερο, δεν ξέρω αν σε κάλυψα με τα παραπάνω.
-What are we going to do tonight Brain?
-The same thing we do every night pinky,try to take over the world!

koskal
Δημοσιεύσεις: 3
Εγγραφή: 13 Ιούλ 2011 00:51

Συνδυασμος Div και Class

Δημοσίευση από koskal » 14 Ιούλ 2011 00:00

Αγαπητε Κλιχ σ ευχαριστω για την απαντηση.

Τελικα οσο απλο ειναι, τοσο δυσκολο ειναι να το σκεφτεις.
Ο διορθωμενος κωδικας, μετα απο τις οδηγιες σου δουλεψε μια χαρα και τελικα εχω το αποτελεσμα που θελω..
Εβγαλα τελειως το "height" εβαλα "overflow:hidden" και ολα οκ!

Παρακατω βαζω τον κωδικα προς επιθεωρηση.

#container {max-height:1350px;
color:#ffffff;
background-color:transparent;
margin:0 auto;
width: 72%;
overflow:hidden;
margin-top: 55px;
margin-bottom:0px;
padding: 0 0 150px 0;
border-radius:5px;
box-shadow: 0 25px 45px 5px #000000,inset 0px 0px 15px 8px rgba(25,37,0,0.8);}

#content {background-color:transparent;
width: 67%;
height:auto;
overflow:hidden;
float:left;
margin-top:-20px;
margin-left:265px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
font-size:0.87em;
color:#ffffff;
line-height:140%;
text-shadow:1px 1px #000000;}

Και παλι σ ευχαριστω για την λυση.
Η αλήθεια και το λάδι βγαίνουν πάντα από πάνω !

klix
Δημοσιεύσεις: 42
Εγγραφή: 03 Ιαν 2010 00:15
Τοποθεσία: Λονδίνο

Συνδυασμος Div και Class

Δημοσίευση από klix » 14 Ιούλ 2011 22:12

Κάποιες παρατηρήσεις:

Στο container έχεις margin: 0 auto; και απο κάτω έχεις margin-top:55px; και margin-bottom:0px.
Σ αυτή την περίπτωση οι τελευταίες γραμμές υπερισχύουν αλλά καλό θα ήταν να τα ορίζεις όλα μαζί.

margin: 55px auto 0px auto;

Στο content βλέπω ένα αρνητικό margin. Οκ αν σε βολεύει αλλά αν ένα div έχει αρνητικό margin, για μεγαλύτερη υποστήριξη απο τον internet explorer να το ορίζεις και position:relative; (εκτός αν αυτό σου σπάει όλο το design που δεν νομίζω).

Τέλος, border-radius, box-shadow,text-shadow κλπ δεν αναγνωρίζονται απο όλους τους σύγχρονους browsers όπως είναι.
Οπότε αν έχεις ένα border-radius:5px ας πούμε, στο ίδιο element προσθέτεις και

-moz-border-radius:5px;
-webkit-border-radius:5px;

για να κάνεις συμβατό το border-radius με περισσότερους browsers. Παρομοίως και για τους άλλους 2 κανόνες. Κάνε ένα search στο google για -moz- kai -webkit- prefixes και λογικά θα τα βρείς όλα.
-What are we going to do tonight Brain?
-The same thing we do every night pinky,try to take over the world!

koskal
Δημοσιεύσεις: 3
Εγγραφή: 13 Ιούλ 2011 00:51

Συνδυασμος Div και Class

Δημοσίευση από koskal » 16 Ιούλ 2011 21:48

Αγαπητε Κλιχ σ ευχαριστω για την απαντηση.

Το container διορθωθηκε margin: 55px auto 0px auto; και ολα οκ.

Στο content εχω ένα αρνητικό margin γιατι θελω να το σηκωσω λιγο και να το ευθυγραμισω με αλλα elements. Φαινεται καποιο αλλο element το σπρωχνει λιγο κατω αλλα δεν μπορω να το βρω.

Τους κανονες τους βρηκα και τους προσθεσα. Ηλπιζα οτι θα λυνοταν το προβλημα που εχω με τον chrome (μου χαλαει το layout και μεγαλωνει το μεγεθος των γραμματων), αλλα δεν εγινε τιποτα. Τωρα ψαχνω για αλλους κανονες αλλα δεν εχω βρει ακομα τιποτα, για συμβατοτητα με αλλους browsers. Αν εχεις καποιες πληροφοριες, δεκτες.

Ευχαριστω.
Η αλήθεια και το λάδι βγαίνουν πάντα από πάνω !

Απάντηση

Επιστροφή στο “HTML και XHTML”

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

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