Απορία σχετικά Div positioning

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

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

Απάντηση
Άβαταρ μέλους
cdhyper
Literature Moderator
Δημοσιεύσεις: 9707
Εγγραφή: 23 Ιουν 2001 03:00
Τοποθεσία: Φωτονερόπετρα
Επικοινωνία:

Απορία σχετικά Div positioning

Δημοσίευση από cdhyper » 13 Οκτ 2007 20:13

Επειδή δεν είμαι εξοικειωμένος με το div positioning και νομίζω ότι αυτό που θέλω πρέπει να γίνεται με divs, σας κάνω την εξής ερώτηση:

Έχω ένα διαθέσιμο χώρο σε πλάτος 500 pixels και εκεί θα εμφανίζονται κάποια στοιχεία με πλάτος 250 pixels το καθένα. Το θέμα είναι ότι το τρίτο στοιχείο θέλω να "γλιστρήσει" από κάτω και να μην πάει τρίτο στη σειρά (για να μην φτάσει η σειρά μου 750 pixels κλπ). Έτσι θα έχω 2 στοιχεία 250 pixels το καθένα ανά σειρά.

Το παραπάνω δε νομίζω να γίνεται με tables, αλλά και να γίνεται ευπρόσδεκτο.

Το παραπάνω το χρειάζομαι βασικά γιατί φτιάχνω ένα template για ένα δυναμικό site.
Σύγκριση τιμών Supermarket: http://www.shopnsave.gr
Νέα Ιταλικα επιπλα κουζινας
Για φιλοσόφους: http://filosofia.gr και http://liantinis.org

Άβαταρ μέλους
mrpc
WebDev Moderator
Δημοσιεύσεις: 3393
Εγγραφή: 03 Μάιος 2000 03:00
Τοποθεσία: Εξάρχεια
Επικοινωνία:

Απορία σχετικά Div positioning

Δημοσίευση από mrpc » 13 Οκτ 2007 20:34

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

Άβαταρ μέλους
dik_
Δημοσιεύσεις: 476
Εγγραφή: 07 Ιουν 2007 11:28

Απορία σχετικά Div positioning

Δημοσίευση από dik_ » 13 Οκτ 2007 20:49

Πρόχειρα, νομίζω κάτι τέτοιο θέλεις:

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

<div>
	<div style="float&#58;right;">
		<img width="250px" src="right.gif">
	</div>
	<img width="250px" src="left.gif">
</div>
<div>
	<img width="250px" src="bottom.gif">
</div>

Άβαταρ μέλους
mrpc
WebDev Moderator
Δημοσιεύσεις: 3393
Εγγραφή: 03 Μάιος 2000 03:00
Τοποθεσία: Εξάρχεια
Επικοινωνία:

Απορία σχετικά Div positioning

Δημοσίευση από mrpc » 13 Οκτ 2007 20:58

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

<table border="0">
<tr><td>image 1</td><td>image 2</td></tr>
<tr><td colspan="2">image 3</td></tr>
</table>
:question: :question: :question:

alexsoft

Απορία σχετικά Div positioning

Δημοσίευση από alexsoft » 13 Οκτ 2007 21:01

Με το table είναι το κακό ότι εάν μεγαλώσει το ένα td μεγαλώνει σε ύψος και το άλλο ενώ με div μπορεί τα περιεχόμενα να έχουν διαφορετικό τελικά height

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


<div style="width&#58;500px;">
   <div style="width&#58;250px; float&#58;left;">
      ........
   </div>
   <div style="width&#58;250px; float&#58;right;">
      ........
   </div>
   <div style="clear&#58;both;"></div>
   <div>
      ............
   </div>
</div> 


Άβαταρ μέλους
cdhyper
Literature Moderator
Δημοσιεύσεις: 9707
Εγγραφή: 23 Ιουν 2001 03:00
Τοποθεσία: Φωτονερόπετρα
Επικοινωνία:

Απορία σχετικά Div positioning

Δημοσίευση από cdhyper » 13 Οκτ 2007 21:06

dik_ αυτό που έδωσες είναι οκ με μια παραλλαγή που έκανα για να με βολέψει. mrpc δεν θέλω να κλείνω <tr> κάθε 2 images.

Κι εσύ alexsoft σωστός. Δε μου λέτε, αν βάλω και στα 2 images float left ή right υπάρχει πρόβλημα πρακτικά; Βασικά χρησιμοποιώ ακριβώς το ίδιο template ανά εικόνα και βαριέμαι να φτιάχνω διαφορετικά.
Σύγκριση τιμών Supermarket: http://www.shopnsave.gr
Νέα Ιταλικα επιπλα κουζινας
Για φιλοσόφους: http://filosofia.gr και http://liantinis.org

alexsoft

Απορία σχετικά Div positioning

Δημοσίευση από alexsoft » 13 Οκτ 2007 21:19

cdhyper έγραψε:dik_ αυτό που έδωσες είναι οκ με μια παραλλαγή που έκανα για να με βολέψει. mrpc δεν θέλω να κλείνω <tr> κάθε 2 images.

Κι εσύ alexsoft σωστός. Δε μου λέτε, αν βάλω και στα 2 images float left ή right υπάρχει πρόβλημα πρακτικά; Βασικά χρησιμοποιώ ακριβώς το ίδιο template ανά εικόνα και βαριέμαι να φτιάχνω διαφορετικά.
Δηλώνοντας το μέγεθος στο div όπως σου το έδωσα και όχι στο images έχεις σταθερό μήκος και στα δύο στα 250px. Έτσι εκεί μπορείς να βάλεις ότι θέλεις διότι αυτόματα περιορίζεται στα 250px. εάν βάλεις και padding ακόμη καλύτερα.

Δεν έχει σημασία εάν βάλεις στην image align το left ή το right εφόσον θα περιοριστεί μέσα στο div που ανήκει

Δηλαδή αυτό που σου έδωσα είναι γενικό, και για κείμενα, εικόνα και ότι άλλο θέλεις

Απάντηση

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

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

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