Αλλαγή μεγέθους σε div - αλλαγή του περιεχομένου.

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

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

Απάντηση
Άβαταρ μέλους
diti
Δημοσιεύσεις: 56
Εγγραφή: 09 Ιαν 2004 17:41
Τοποθεσία: ΘΕΣΣΑΛΟΝΙΚΗ
Επικοινωνία:

Αλλαγή μεγέθους σε div - αλλαγή του περιεχομένου.

Δημοσίευση από diti » 12 Αύγ 2013 12:30

Καλησπέρα.

Θα ήθελα να ρωτήσω το εξής: μέσα σε ένα div έχω 2 buttons, 1 text και ένα table. Όταν αλλάζω το width ή και το height του div να αλλάζει το περιεχόμενο. Δηλαδή και το κείμενο του text αλλά και το table. Έχω στο table π.χ. width = 90% και αλλάζει όταν αλλάζω το width του div. Αλλά αν βάλω και το height δεν το δείχνει σωστά. Κάνω διάφορες δοκιμές αλλά δεν αλλάζουν όλα σωστά όταν αλλάζω το μέγεθος του div.
Έχετε κάτι να προτείνετε;
Σας ευχαριστώ πολύ.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Αλλαγή μεγέθους σε div - αλλαγή του περιεχομένου.

Δημοσίευση από alou » 12 Αύγ 2013 20:03

Κάτι έχεις μπερδέψει γιατί δεν βγαίνει νόημα με την περιγραφή σου, text & table buttons? Δείξε μας καλύτερα τον κώδικά σου και πες ποιο είναι το ζητούμενο.

Αν δηλώσεις ποσοστιαίο πλάτος ή ύψος σε κάποιο στοιχείο, θα αντίστοιχεί στο ποσοστό του γονικού του στοιχείου, εφόσον είναι block element (πχ div) με ορισμένο πλάτος / ύψος. Τα block elements, αν δεν δηλωθεί κάτι άλλο, θα καταλάβουν όλο το διαθέσιμπο πλάτος.

Υπάρχουν εξαιρέσεις αλλά μη σε μπερδέψω περισσότερο.

Άβαταρ μέλους
diti
Δημοσιεύσεις: 56
Εγγραφή: 09 Ιαν 2004 17:41
Τοποθεσία: ΘΕΣΣΑΛΟΝΙΚΗ
Επικοινωνία:

Αλλαγή μεγέθους σε div - αλλαγή του περιεχομένου.

Δημοσίευση από diti » 16 Αύγ 2013 20:37

alou έγραψε:Κάτι έχεις μπερδέψει γιατί δεν βγαίνει νόημα με την περιγραφή σου, text & table buttons? Δείξε μας καλύτερα τον κώδικά σου και πες ποιο είναι το ζητούμενο.

Αν δηλώσεις ποσοστιαίο πλάτος ή ύψος σε κάποιο στοιχείο, θα αντίστοιχεί στο ποσοστό του γονικού του στοιχείου, εφόσον είναι block element (πχ div) με ορισμένο πλάτος / ύψος. Τα block elements, αν δεν δηλωθεί κάτι άλλο, θα καταλάβουν όλο το διαθέσιμπο πλάτος.

Υπάρχουν εξαιρέσεις αλλά μη σε μπερδέψω περισσότερο.
Καλησπέρα.

Δεν έγραψα text & table buttons αλλά 2 buttons, 1 text, 1 table. Για να μην υπάρχει μπέρδεμα δίνω το κώδικα html (θα προσθέσω αργότερα javascript).
Αυτό που θέλω είναι όταν μικραίνω/μεγαλώνω το μέγεθος του αρχικού div να μικραίνουν/μεγαλώνουν όλα τα αντικείμενα του div. Ενώ κάτι γίνεται με το width του text και των buttons δεν ξέρω πώς θα αυξομειώνεται το μέγεθος της γραμματοσειράς.
Και όταν μικραίνω αρκετά το div δεν μικραίνει όσο πρέπει το table.

Ευχαριστώ για το ενδιαφέρον.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1253" />
<title>Calendar</title>
<style type="text/css">
<!--
body, input &#123;
	color&#58;#006380;
	font-size&#58;14px;
	font-weight&#58; bold;
	text-align&#58;center;
&#125;
#div1  &#123;
width&#58;200px;
height&#58;150px;
margin&#58;auto;
margin-top&#58;10%;
border&#58;1px solid;
border-radius&#58;15px;
-moz-border-radius&#58;15px;
-webkit-border-radius&#58;15px;
&#125;
#div1, #div2  &#123;
background-color&#58; #99CC00;
&#125;
table  &#123;
text-align&#58;center;
&#125;
th  &#123;
border&#58;1px solid;
border-radius&#58;4px;
-moz-border-radius&#58;4px;
-webkit-border-radius&#58;4px;
&#125;
td  &#123;
border-radius&#58;4px;
-moz-border-radius&#58;4px;
-webkit-border-radius&#58;4px;
&#125;
-->
 </style>
 
</head>

<body>
<p>&nbsp;</p>

<div  id="div1"  align="center" >
	<div id="div2" align="center" style="width&#58; 95%; height&#58;95%  overflow&#58;inherit">
		<br><input name="but_prev_month" type="button" id="but_prev_month" value="<" style="width&#58; 15%;"/> 
		<input name="cur_month" type="text" disabled="disabled" id="cur_month"  style="width&#58; 60%; text-align&#58;center" />
		<input name="but_next_month" type="button" id="but_next_month" value=">" style="width&#58; 15%;"/>
		
      	<table width="100%" height="90%" border="0" id="tmonthdays" >
        <tr  bgcolor="#BAE60E" >
         <th>A</th>
         <th>B</th>
         <th>C</th>
         <th>D</th>
         <th>E</th>
         <th>F</th>
         <th>G</th>
        </tr>
	    <tr >
         <td>1</td>
         <td>2</td>
         <td>3</td>
         <td>4</td>
         <td>5</td>
         <td>6</td>
         <td>7</td>
        </tr>
        <tr>
         <td>8</td>
         <td>9</td>
         <td>10</td>
         <td>11</td>
         <td>12</td>
         <td>13</td>
         <td>14</td>
        </tr>
        <tr>
         <td>15</td>
         <td>16</td>
         <td>17</td>
         <td>18</td>
         <td>19</td>
         <td>20</td>
         <td>21</td>
        </tr>
      	</table>
	</div>
</div>    


</body>
</html>

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Αλλαγή μεγέθους σε div - αλλαγή του περιεχομένου.

Δημοσίευση από alou » 17 Αύγ 2013 13:07

Καλησπέρα, διάβασε τι είπες αρχικά και θα δεις ότι ήταν λίγο μπερδεμένο.

Μια ερώτηση: οι αυξομειώσεις του αρχικού div έχουν να κάνουν με το μέγεθος της οθόνης / browser / συσκευής (οπότε θα πρέπει να χρησιμοποιήσεις media queries), ή είναι για κάποιον άλλο λόγο?

Πάντως, θα προτιμούσα μια τέτοια λύση:

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

<style>
body &#123;text-align&#58;center;margin&#58;0;padding&#58;0;&#125;
#calendar &#123;width&#58;100%;margin&#58;0;background&#58;#dadada;border&#58;1px solid #d3d3d3;padding&#58;0;&#125;
#calendar span.day, #calendar span.wday &#123;width&#58;13%;display&#58;inline-block;padding&#58;3px 0;overflow&#58;hidden;text-align&#58;center;&#125;
#calendar span.wday &#123;color&#58;red;&#125;
</style>
</head>

<body>
<div id="calendar">
<span class="wday">kyr</span>
<span class="wday">deu</span>
<span class="wday">tri</span>
<span class="wday">tet</span>
<span class="wday">pem</span>
<span class="wday">par</span>
<span class="wday">sav</span>

<span class="day">1</span>
<span class="day">2</span>
<span class="day">3</span>
<span class="day">4</span>
<span class="day">5</span>
<span class="day">6</span>
<span class="day">7</span>
</div>


Άβαταρ μέλους
diti
Δημοσιεύσεις: 56
Εγγραφή: 09 Ιαν 2004 17:41
Τοποθεσία: ΘΕΣΣΑΛΟΝΙΚΗ
Επικοινωνία:

Αλλαγή μεγέθους σε div - αλλαγή του περιεχομένου.

Δημοσίευση από diti » 17 Αύγ 2013 19:57

Καλησπέρα.

Ευχαριστώ για την απάντηση.
Θέλω να δίνει ο χρήστης τα width, height για το αρχικό div (δηλ. παραμετρικό) και να αυξομειώνεται το μέγεθός του. π.χ. αν μειώσω αρκετά το width να μειωθούν όλα μέσα στο div για να μη γίνεται π.χ. αναδίπλωση του κειμένου.

Ευχαριστώ.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Αλλαγή μεγέθους σε div - αλλαγή του περιεχομένου.

Δημοσίευση από alou » 17 Αύγ 2013 20:07

Δοκίμασε έτσι όπως σου είπα, ορίζοντας με τον τρόπο που θες το #calendar

Άβαταρ μέλους
diti
Δημοσιεύσεις: 56
Εγγραφή: 09 Ιαν 2004 17:41
Τοποθεσία: ΘΕΣΣΑΛΟΝΙΚΗ
Επικοινωνία:

Αλλαγή μεγέθους σε div - αλλαγή του περιεχομένου.

Δημοσίευση από diti » 17 Αύγ 2013 20:20

Το δοκίμασα. Μείωσα π.χ. το width σε 20% και γίνεται αναδίπλωση του κειμένου. Δεν μικραίνει το μέγεθος του κειμένου για να φαίνεται όπως πριν.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Αλλαγή μεγέθους σε div - αλλαγή του περιεχομένου.

Δημοσίευση από alou » 17 Αύγ 2013 20:55

Ναι ξέχασα να σου πω για αυτό, υπάρχει μόνο η λύση του vw (καμμία σχέση με φολκσβάγκεν :P )
http://www.w3.org/TR/2013/CR-css3-value ... ve-lengths

αλλά θα το χρησιμοποιούσα μόνο με fallback γιατί είναι css3 module και δεν ξέρω σε τι εύρος υποστηρίζεται.

Άβαταρ μέλους
diti
Δημοσιεύσεις: 56
Εγγραφή: 09 Ιαν 2004 17:41
Τοποθεσία: ΘΕΣΣΑΛΟΝΙΚΗ
Επικοινωνία:

Αλλαγή μεγέθους σε div - αλλαγή του περιεχομένου.

Δημοσίευση από diti » 17 Αύγ 2013 21:13

Ευχαριστώ. Θα το δοκιμάσω.

Απάντηση

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

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

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