Πώς ακριβώς δουλεύει το <div> της HTML

[Lanike71]

Λίγο τη βοήθειά σας...

 

Αν και διάβασα αρκετά παραδείγματα,δεν κατάφερα να στοιχίσω με το div ένα image και δίπλα ένα τίτλο.

Αν θέλει κάποιος ας δείξει αναλυτικά πώς ακριβώς δουλεύει (ή ας γράψει ένα καλό λινκ για να καταλάβω)

[parsifal]

Χμμμ...κάτι τέτοιο θέλεις;

<div style="float: left">
    <img src="http://dummyimage.com/140x40/000/fff.gif&text=image" />
</div>
<h1>Title</h1>

Μπορείς να πειραματιστείς μαζί του εδώ: http://jsfiddle.net/C9LDk/

[Lanike71]

 

 

 

Χμμμ...κάτι τέτοιο θέλεις;

<div style="float: left">
    <img src="http://dummyimage.com/140x40/000/fff.gif&text=image" />
</div>
<h1>Title</h1>

Μπορείς να πειραματιστείς μαζί του εδώ: http://jsfiddle.net/C9LDk/

Ευχαριστώ για τη βοήθεια κατ' αρχήν.

Ο τίτλος όμως θέλω να είναι σε πλαίσιο μήκους πχ 800px ,δε θα πρέπει και αυτός να μπει σε div ; Εκεί χάνομαι,πού θα τον στοιχίσω τον τίτλο;

[parsifal]

Δεν έχει ιδιαίτερο νόημα να βάλεις τον τίτλο μέσα σε ένα DIV. Τα h1-h6 είναι ήδη block-level elements.

 

Κάτι άλλο προσπαθείς να πεις/καταφέρεις και φοβάμαι πως δε σε «πιάνω»... :-\

 

Μπορείς να το...ζωγραφίσεις; (δεν κάνω πλάκα, το εννοώ!)

[Lanike71]

Αν είσαι new φαίνεται...

Θέλω να έχω τον τίτλο σε ένα πλαίσιο με χρώμα κόκκινο,ας πούμε,το οποίο θα εκτείνεται (το πλαίσιο) από εκεί που τελειώνει το image ως το τέλος της σελίδας.

 

ΥΓ.Είχα την εντύπωση ότι με το div χωρίζεις την οθόνη σε διαμερίοσματα και εκεί τοποθετείς ότι αντικείμενα θες ως γκρουπ.

[migf1]

Για δοκίμασε...

<div style="float:left;"><img src="my.png"></div>
<div style="float:left; width:800px; border:1px solid red; margin-left:1em;">
    <h1>Title</h1>
    <p>paragraph<p>
</div>
<div style="clear:both;"></div>

[ZAKKWYLDE]

 

 

ΥΓ.Είχα την εντύπωση ότι με το div χωρίζεις την οθόνη σε διαμερίοσματα και εκεί τοποθετείς ότι αντικείμενα θες ως γκρουπ.

 

Σωστά το σκέφτεσαι, απλά το style του. Δηλαδή το πόσο μεγάλο μέρος της οθόνης θα πιάνει, το που θα βρίσκεται σε σχέση με τα διπλανά elements κτλ πρέπει να το κάνεις με CSS. Δηλαδή πες ότι έχεις 3 div. Μπορείς να έχεις είτε το ένα διπλα απο το άλλο, είτε το ένα κάτω απο το άλλο, η 2 στην ίδια γραμμή και το άλλο απο κάτω κτλ....όλα αυτά θα καθοριστούν με CSS.

[Lanike71]

 

 

Το ...ζωγράφισα:

Πόσα div θα χρειαστώ;Τα γκρι περιθώρια στο πλάι θέλουν άλλο div;

 

[defacer]

Δεν πάει έτσι ακριβώς. Το div (και οποιοδήποτε άλλο element, δεν είναι πως το div έχει κάτι το ιδιαίτερο) δεν αντιστοιχεί απαραίτητα με κάτι που βλέπεις ή έστω με κάποια καθορισμένη περιοχή της οθόνης. Πολύ συχνά είναι όντως έτσι τα πράγματα, σε άλλες περιπτώσεις όμως ένα div δεν είναι κάτι άλλο από ένα πράγμα στο οποίο εφαρμόζονται οι layout κανόνες του CSS spec. Πόσα θα χρειαστείς για να κάνεις αυτό που φαντάζεσαι; Ανάλογα με το τι γράφει το spec και πόση φαντασία έχεις για να κάνεις την υλοποίηση.

 

Κλασικό παράδειγμα για την παραπάνω κατάσταση είναι τα διάφορα multicolumn layouts με background και κοινό footer, όπου ανάλογα με τις λεπτομέρειες της περίπτωσης ανοίγει ή κλείνει ο δρόμος για να χρησιμοποιήσεις συγκεκριμένες τεχνικές και το HTML αποτέλεσμα μπορεί να μη μοιάζει σχεδόν καθόλου μ' αυτό που βλέπει κανείς στο παράθυρο. Δεν είναι τυχαίο που τα λέμε holy grail.

 

Έτσι και στην δική σου περίπτωση το πόσα div θα χρειαστείς εξαρτάται από όλες τις λεπτομέρειες. Για παράδειγμα, μπορεί να μη χρειαστείς ούτε ένα.

[Lanike71]

 

 

 

Δεν πάει έτσι ακριβώς. Το div (και οποιοδήποτε άλλο element, δεν είναι πως το div έχει κάτι το ιδιαίτερο) δεν αντιστοιχεί απαραίτητα με κάτι που βλέπεις ή έστω με κάποια καθορισμένη περιοχή της οθόνης. Πολύ συχνά είναι όντως έτσι τα πράγματα, σε άλλες περιπτώσεις όμως ένα div δεν είναι κάτι άλλο από ένα πράγμα στο οποίο εφαρμόζονται οι layout κανόνες του CSS spec. Πόσα θα χρειαστείς για να κάνεις αυτό που φαντάζεσαι; Ανάλογα με το τι γράφει το spec και πόση φαντασία έχεις για να κάνεις την υλοποίηση.

 

Κλασικό παράδειγμα για την παραπάνω κατάσταση είναι τα διάφορα multicolumn layouts με background και κοινό footer, όπου ανάλογα με τις λεπτομέρειες της περίπτωσης ανοίγει ή κλείνει ο δρόμος για να χρησιμοποιήσεις συγκεκριμένες τεχνικές και το HTML αποτέλεσμα μπορεί να μη μοιάζει σχεδόν καθόλου μ' αυτό που βλέπει κανείς στο παράθυρο. Δεν είναι τυχαίο που τα λέμε holy grail.

 

Έτσι και στην δική σου περίπτωση το πόσα div θα χρειαστείς εξαρτάται από όλες τις λεπτομέρειες. Για παράδειγμα, μπορεί να μη χρειαστείς ούτε ένα.

 

Κατατοπιστικότατος,

 

Ευχαριστώ!

[migf1]

Αν 2 ή περισσότερα στοιχεία έχουν νόημα να είναι ομαδοποιημένα, είναι καλή ιδέα να τα εσωκλείσεις σε div, ώστε να μπορείς επιπλέον να μορφοποιείς και το γκρουπ τους αντί μονάχα το κάθε στοιχείο.