DIV layout problem!!

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

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

Απάντηση
thundergr
Δημοσιεύσεις: 49
Εγγραφή: 09 Μαρ 2009 14:39

DIV layout problem!!

Δημοσίευση από thundergr » 10 Μαρ 2009 15:34

Γεια χαρά σε όλους :D

Έχω ορίσει το εξής css:

body {
margin: 0;
background-image:url(texture1.jpg);
background-repeat:repeat;
}
#container {
margin: 0 auto;
padding: 0px;
width: 781px;
height:600px;
background-color: #FFFFFF;
}
#header {
background-image:url(logo3.gif);
background-repeat: no-repeat;
background-color: #CBFE9A;
width: 780px;
height: 110px;
margin: 0;
padding: 0;
}
#navigation {
background-color: #CBFE9A;
width: 780px;
height: 20px;
padding-top:9px;
}
#main_content {
background:none;
width: 741px;
height:600px;
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
}
#footer {
float:left;
background-color: #CBFE9B;
width: 781px;
height: 24px;
padding-top:10px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
position: relative;
}

To html είναι ως εξής:

<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="main_content"></div>
<div id="footer"></div>
</div>

Για κάποιο λόγο που δεν μπορώ να καταλάβω το footer αφήνει ένα κενό με το main_content.. κάτι που δεν θέλω... η μόνη "λύση" που βρήκα μέχρι στιγμής είναι να προσθέσω το margin-top: -190px ! important; στο footer. Μπορεί κανείς να με βοηθήσει?
Ευχαριστώ :wink:

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

DIV layout problem!!

Δημοσίευση από manolism » 10 Μαρ 2009 15:48

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

body &#123; 
margin&#58; 0; 
background-image&#58;url&#40;texture1.jpg&#41;; 
background-repeat&#58;repeat; 
&#125; 
#container &#123; 
margin&#58; 0 auto; 
padding&#58; 0px; 
width&#58; 781px; 
height&#58;764px; 
background-color&#58; #FFFFFF; 
&#125; 
#header &#123; 
background-image&#58;url&#40;logo3.gif&#41;; 
background-repeat&#58; no-repeat; 
background-color&#58; #CBFE9A; 
width&#58; 780px; 
height&#58; 110px; 
margin&#58; 0; 
padding&#58; 0; 
&#125; 
#navigation &#123; 
background-color&#58; #CBFE9A; 
width&#58; 780px; 
height&#58; 20px; 
padding-top&#58;9px; 
&#125; 
#main_content &#123; 
background&#58;none; 
width&#58; 741px; 
height&#58;560px; 
padding-top&#58;20px; 
padding-bottom&#58;20px; 
padding-left&#58;20px; 
padding-right&#58;20px;
float&#58;left;
background-color&#58;#06F;
&#125; 
#footer &#123; 
float&#58;left; 
background-color&#58; #CBFE9B; 
width&#58; 781px; 
height&#58; 24px; 
padding-top&#58;10px; 
text-align&#58;center; 
font-family&#58;Verdana, Arial, Helvetica, sans-serif; 
font-size&#58;11px; 
color&#58;#000000; 
position&#58; relative; 
&#125;
Έκανα μερικές αλλαγές στα ύψη που είχες δώσει.

thundergr
Δημοσιεύσεις: 49
Εγγραφή: 09 Μαρ 2009 14:39

DIV layout problem!!

Δημοσίευση από thundergr » 10 Μαρ 2009 19:25

α μάλιστα! δεν είχα κάνει την πρόσθεση :-?
Ευχαριστώ πολύ για την βοήθεια!

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

DIV layout problem!!

Δημοσίευση από patriot » 11 Μαρ 2009 02:47

thundergr έγραψε:#main_content {....}
Δεν συνιστάται η κάτω παύλα στα css. Βάλε κανονική παύλα.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Απάντηση

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

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

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