Anastasis 48 Report post Posted November 10, 2016 Στο css αρχείο μας γράφουμε το παρακάτω. κώδικας: #middle { width:960px; height:440px; float:left; } Το div middle είναι αυτό που θα δεχθεί όλο το περιεχόμενο της περιοχής αυτής. Μέσα στο html αρχείο και κάτω από το σημείο που κλείνει το div header γράφουμε το παρακάτω: κώδικας: <div id="middle"></div> Οπότε έχουμε το παρακάτω: κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"> <p class="btext">+971 55 7457383</p> <p>If you have any query, feel free to call us</p> </div> <div class="corner"> <div id="smashnav"> <ul> <li><a href="#" title="" class="current"><span>HOME</span></a></li> <li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li> <li><a href="#" title=""><span>OUR SERVICES</span></a></li> <li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li> <li><a href="#" title=""><span>BLOG</span></a></li> <li><a href="#" title=""><span>CONTACT US</span></a></li> </ul> </div> </div> </div> <div id="middle"></div> </div> </body> Εδώ δεν έχουμε καμμία επίδραση στο template αφού δεν έχουμε εισάγει ακόμα περιεχόμενο. Στη συνέχεια θα δημιουργήσουμε την λευκή περιοχή. Στο css αρχείο γράφουμε το παρακάτω: κώδικας: #middle_inside { width:950px; height:340px; float:left; background-color:#fff; margin:40px 0 0 0; padding:10px 0 10px 10px; } Το width είναι το πλάτος της λευκής περιοχής και το height το ύψος της. To float:left δηλώνει ότι το div πάντα θα κολλάει στην αριστερή πλευρά. Έχουμε ορίσει σαν background-color το λευκό. Στα εξωτερικά περιθώρια (margin) έχουμε ορίσει να απέχει 40px από την περιοχή του Header. Με τo padding αφήνουμε εσωτερικά περιθώρια 10px σε όλες τις πλευρές εκτός από την δεξιά. Τα padding όπως και τα margin όταν τα ορίζουμε σε μία δήλωση πάνε με την εξής σειρά: Πάνω, δεξιά, κάτω, αριστερά. Στο html αρχείο γράφουμε μέσα στο div middle το παρακάτω: κώδικας: <div id="middle_inside"></div> Οπότε έχουμε το παρακάτω: κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"> <p class="btext">+971 55 7457383</p> <p>If you have any query, feel free to call us</p> </div> <div class="corner"> <div id="smashnav"> <ul> <li><a href="#" title="" class="current"><span>HOME</span></a></li> <li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li> <li><a href="#" title=""><span>OUR SERVICES</span></a></li> <li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li> <li><a href="#" title=""><span>BLOG</span></a></li> <li><a href="#" title=""><span>CONTACT US</span></a></li> </ul> </div> </div> </div> <div id="middle"> <div id="middle_inside"></div> </div> </div> </body> LIVE DEMO Quote Share this post Link to post Share on other sites
