Div inside div

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

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

Απάντηση
mazoulini
Δημοσιεύσεις: 144
Εγγραφή: 22 Φεβ 2008 23:40
Τοποθεσία: Crete
Επικοινωνία:

Div inside div

Δημοσίευση από mazoulini » 22 Ιουν 2010 22:28

Γεια σας...
λοιπόν, πάω κατευθείαν στο ψητό!
Έχω
body {
margin: 0;
background-color: #FFF;
}

#container{
background-color: #000;
margin: 0 auto;
padding: 0px;
width: 900px;
height:auto;
}

#header{
width: 900px;
height: 90px;
margin: 0;
margin-bottom:5px;
padding: 0;
}
<body><div id="container">
<div id="header"></div>
<div id="mainpage"></div>
</div></body>
Γιατί ανάμεσα στα div header και mainpage δεν έχει το background του container???
μ εμφανίζει το Background του body....
Είναι φυσιολογικό; Επίσης όταν βάλω οτι το height του Container = 1000px δουλεύει μια χαρά αλλα εγώ θέλω auto height...ανάλογα δηλαδή το Height της mainpage...
Τι γίνεται λαθος;

Ευχαριστώ πολύ!

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Div inside div

Δημοσίευση από Sermac » 23 Ιουν 2010 01:02

Το div#mainpage έχει ύψος 0px (αφού είναι άδειο από περιεχόμενο), γι' αυτό και δεν εμφανίζεται κανένα background. Το div#header, αντίθετα, έχει ύψος 30px από το style, γι' αυτό φαίνεται το background.

Tip 1: Πρόσθεσε λίγο κείμενο μέσα στα div ή καλύτερα όρισε min-height.
Tip 2: Κάνε inspect σε πραγματικό χρόνο με το Firebug.
Εικόνα

mazoulini
Δημοσιεύσεις: 144
Εγγραφή: 22 Φεβ 2008 23:40
Τοποθεσία: Crete
Επικοινωνία:

Div inside div

Δημοσίευση από mazoulini » 24 Ιουν 2010 22:03

Sermak, μόλις είδα την απάντηση σου.
Θα το κάνω μέσα στο σαββατοκύριακο και θα γράψω αποτελέσματα.
Ευχαριστώ πολύ.

mazoulini
Δημοσιεύσεις: 144
Εγγραφή: 22 Φεβ 2008 23:40
Τοποθεσία: Crete
Επικοινωνία:

Div inside div

Δημοσίευση από mazoulini » 27 Ιουν 2010 01:07

Καλησπέρα,
Μόλις βρήκα χρόνο και έκατσα στο pc...Λοιπόν...όχι.. :cry:
Αυτό που κάνω εγώ είναι...
Έχω ενα div #Container με λευκό background. Ένα άλλο div #Mainpage με κόκκινο background...
<div id="Container">
<div id="Mainpage"> (MPLA MPLA MPLA) </div>
</div>
To (MPLA MPLA....) μας πιάνει πολλά pixels και είναι δυναμικό...δηλαδή μια είναι 40px την άλλη ειναι 2000px...το θέμα είναι οτι δεν μεγαλώνει αυτόματα το Container ώστε να φαίνεται το λευκό bg αλλα μεγαλώνει το mainpage και φαίνετε το κόκκινο bg και απο πίσω το bg του body.....
Τίποτα άλλο...;Καμιά ιδεούλα...;

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Div inside div

Δημοσίευση από Sermac » 27 Ιουν 2010 01:34

mazoulini έγραψε:Καμιά ιδεούλα...;
Δοκίμασε να βάλεις ακριβώς πριν το κλείσιμο του container αυτό:

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

<div style="clear&#58;both;"><div>
Εικόνα

mazoulini
Δημοσιεύσεις: 144
Εγγραφή: 22 Φεβ 2008 23:40
Τοποθεσία: Crete
Επικοινωνία:

Div inside div

Δημοσίευση από mazoulini » 29 Ιουν 2010 00:04

Μπα...Δε κάνει τίποτα... Λοιπόν επισυνάπτω μια εικόνα να δείτε τι θέλω να κάνω... Όσο μεγαλώνει (Αφού μεγαλώνει δυναμικά) το Mainpage τόσο θέλω να μεγαλώνει και το Container...
Συνημμένα
freestuff.jpg

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Div inside div

Δημοσίευση από sibas » 29 Ιουν 2010 13:15

κάτι τέτοιο :)

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

body &#123;
margin&#58; 0;
background-color&#58;#FFF;
color&#58;#000;
text-align&#58;center
&#125;

#container&#123;
position&#58;relative;
background-color&#58;#FFFF00;
color&#58;#000000;
margin&#58;0 auto;
padding&#58;0 0 30px 0;
width&#58;900px;
text-align&#58;left
&#125;

#header&#123;
width&#58;900px;
height&#58;90px;
padding&#58;0;
background-color&#58;#CC0000;
color&#58;#FFFFFF
&#125; 

#mainpage&#123;
width&#58;800px;
margin&#58;0 auto;
background-color&#58;#CC0000;
padding&#58;0 0 5px 0;
&#125;

h1, h2&#123;
padding&#58;10px;
margin&#58;0;
&#125;

p&#123;
padding&#58;10px;
color&#58;#CCCCCC
&#125;



<div id="container">
<div id="header"><h1>header</h1></div>
<h2>container</h2>
<div id="mainpage">
<h2>main page</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis, elit ac accumsan tempor, lacus purus tempor odio, eu feugiat turpis nibh a metus. Nunc condimentum ullamcorper dui, sit amet blandit massa pharetra at. Integer molestie odio at ligula dapibus faucibus quis et nibh. Morbi eu nisi orci, nec porttitor justo. Nam quis diam nibh. Quisque iaculis pulvinar commodo. Proin sed lacinia diam. Etiam ut massa sapien, sit amet volutpat eros. Vivamus sed libero neque. Etiam nulla velit, eleifend in pulvinar sed, pretium a sapien. Nunc enim felis, accumsan at tempus vel, convallis ut libero. Phasellus commodo porttitor arcu ac adipiscing. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ligula justo, posuere ac pretium vel, vehicula id ante. Nunc molestie, orci eget fringilla ornare, mauris dolor tempor purus, at fermentum orci nulla in est. In hac habitasse platea dictumst. Sed blandit dapibus blandit. 
</p></div>
</div>

mazoulini
Δημοσιεύσεις: 144
Εγγραφή: 22 Φεβ 2008 23:40
Τοποθεσία: Crete
Επικοινωνία:

Div inside div

Δημοσίευση από mazoulini » 29 Ιουν 2010 20:16

Ναι... Πές μου όμως τι δεν εχω σωστά;

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Div inside div

Δημοσίευση από sibas » 30 Ιουν 2010 17:23

δεν γνωρίζω, βάλε όλο το css και html που έχεις για να σου πούμε :)

mazoulini
Δημοσιεύσεις: 144
Εγγραφή: 22 Φεβ 2008 23:40
Τοποθεσία: Crete
Επικοινωνία:

Div inside div

Δημοσίευση από mazoulini » 07 Ιούλ 2010 01:49

Όλο το html??? έχει και php και είναι 500 γραμμές!

Το Css είναι
body {
margin: 0;
background-image: url(background.jpg);

}

#container{
background-color:#FFF;
margin: 0 auto;
padding: 0px;
width: 1000px;
position:relative;
}

#header{
width: 1000px;
height: 110px;
margin: 0;
margin-bottom:25px;
padding: 0;
}

#footer{
width:1000px;
height:90px;
vertical-align:bottom;
background-color:#00F;
}

#left {
float:left;
width: 196px;
height:auto;
margin-top:10px;
padding-top:10px;
padding-left:10px;
padding-right:5px;
}
#main_content {
float:right;
width: 720px;
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
padding-right:10px;
margin-top:10px;
vertical-align:top;
background-color: #FFF;
}

body {
margin: 0;
background-image: url(background.jpg);

}

#container{
background-color:#FFF;
margin: 0 auto;
padding: 0px;
width: 1000px;
position:relative;
}

#header{
width: 1000px;
height: 110px;
margin: 0;
margin-bottom:25px;
padding: 0;
}

#footer{
width:1000px;
height:90px;
vertical-align:bottom;
background-color:#00F;
}

#left {
float:left;
width: 196px;
height:auto;
margin-top:10px;
padding-top:10px;
padding-left:10px;
padding-right:5px;
}
#main_content {
float:right;
width: 720px;
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
padding-right:10px;
margin-top:10px;
vertical-align:top;
background-color: #FFF;
}




Και το html (έβγαλα πολύ πράμα!)
<body>
<div id="container">

<div id="header">
<table width="100%" border="0">
<tr>
<td width="1%" height="10px">&nbsp;</td>
<td width="98%"><hr /></td>
<td width="1%">&nbsp;</td>
</tr>
<tr>
<td height="80px" width="%">&nbsp;</td>
<td height="80px"><div class="logocolor"><img src="Logo.png"/></div></td><td></td>
<td height="80px">&nbsp;</td>
</tr>
<tr>
<td width="1%" height="10px">&nbsp;</td>
<td width="98%" height="10px"><hr /></td>
<td width="1%" height="10px">&nbsp;</td>
</tr>
</table>

</div>

<div id="left">
<p id="date2"></p>

<form name="develop" id="develop" method="get" action=" <?php echo $_SERVER['PHP_SELF']; ?> " >


Η ΦΟΡΜΑ ΜΟΥ ΜΕΣΑ ΣΕ TABLE

</form>

</div>


<div id="main_content">

ΔΥΝΑΜΙΚΟ ΓΕΜΙΣΜΑ ΑΠΟ ΒΑΣΗ ΔΕΔΟΜΕΝΩΝ
</div>

</div>



</body>









Πείτε μου σας παρακαλώ, βλέπετε κάτι λάθος;

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

Div inside div

Δημοσίευση από alou » 07 Ιούλ 2010 15:34

Ναι, υπάρχει το id container 2 φορές. Πιθανώς να μην είναι μόνο αυτό το πρόβλημα.

nbc
Honorary Member
Δημοσιεύσεις: 526
Εγγραφή: 05 Σεπ 2009 20:12
Επικοινωνία:

Div inside div

Δημοσίευση από nbc » 07 Ιούλ 2010 15:44

Που είναι 2 φορές - στο css?

Αυτό δεν είναι λάθος. Μπορεί να υπάρχει 100 φορές. Περιττό, στη συγκεκριμένη περίπτωση, ναι - λάθος όχι.

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

Div inside div

Δημοσίευση από alou » 08 Ιούλ 2010 18:45

OK δεν είναι λάθος, όταν κάνεις αλλαγές κάνοντας τα πειράματά σου, κάνεις τις ίδιες αλλαγές και στα 2; και το λέω γιατί και στις 2 περιπτώσεις ορίζονται τα ίδια ακριβώς attributes.

mazoulini
Δημοσιεύσεις: 144
Εγγραφή: 22 Φεβ 2008 23:40
Τοποθεσία: Crete
Επικοινωνία:

Div inside div

Δημοσίευση από mazoulini » 09 Ιούλ 2010 20:46

Παιδιά δεν είναι λάθος, απλά έχω κάνει 2 φορές copy-paste το css Κατα λάθος! :o

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

Div inside div

Δημοσίευση από alou » 09 Ιούλ 2010 22:21

No problem, έπεσε πάνω το μάτι μου και το είπα, βρήκες άκρη;

Απάντηση

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

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

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