Anastasis 48 Report post Posted November 10, 2016 Στο css αρχείο γράφουμε το παρακάτω κώδικας: #boxes { width:960px; height:215px; float:left; padding-top:40px; } Το div boxes είναι το κεντρικό div που θα δεχθεί τα 3 boxes στη συνέχεια. Μέσα στο html αρχείο μας και κάτω από το σημείο που κλείνει το div middle γράφουμε το παρακάτω κώδικας: <div id="boxes"></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 id="slide"></div> <div id="quick_note"> <h2>Quick Note</h2> <form action="vars.php" method="post"> <label for="textinput">Your Full Name:</label> <br /> <input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" /><br /> <label for="passwordinput">Email Address:</label> <br /> <input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" /><br /> <label for="textareainput">What Are You Looking For::</label><br /> <textarea id="textareainput" name="textareainput" class="textarea" rows="" cols=""></textarea><br /> <br /> <input type="submit" value="Submit" class="buttonSubmit" /> <div id="stylesheetTest"></div> </form> </div> </div> </div> <div id="boxes"></div> </div> </body> Δεν υπάρχει καμμία επίδραση στο template αφού το div boxes δεν έχει περιεχόμενο. Στη συνέχεια γράφουμε στο css αρχείο μας τις ιδιότητες του αριστερού box κώδικας: #box_left{ width:258px; height:133px; border:1px solid #d8d8d8; background:url(images/box_back.jpg) repeat-x; float:left; padding:20px; } Το width είναι το πλάτος του box και το height το ύψος του. Το border δηλώνει ότι θα έχει περίγραμμα και στις 4 πλευρές πάχους 1px το solid ότι θα είναι κανονική γραμμή και το #d8d8d8 θα είναι το χρώμα του περιγράμματος. Έχουμε ορίσει σαν background-image την εικόνα box_back η οποία θα αναπαράγεται ώς προς τον άξονα Χ δηλαδή προς τα δεξιά.To float:left δηλώνει ότι το div πάντα θα κολλάει στην αριστερή πλευρά. Με τo padding αφήνουμε εσωτερικά περιθώρια 20px από όλες τις πλευρές. Τα padding όταν τα ορίζουμε σε μία δήλωση πάνε με την εξής σειρά: Πάνω, δεξιά, κάτω, αριστερά. Στο html αρχείο μας και μέσα στο dive boxes γράφουμε το παρακάτω κώδικας: <div id="box_left"></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 id="slide"></div> <div id="quick_note"> <h2>Quick Note</h2> <form action="vars.php" method="post"> <label for="textinput">Your Full Name:</label> <br /> <input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" /><br /> <label for="passwordinput">Email Address:</label> <br /> <input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" /><br /> <label for="textareainput">What Are You Looking For::</label><br /> <textarea id="textareainput" name="textareainput" class="textarea" rows="" cols=""></textarea><br /> <br /> <input type="submit" value="Submit" class="buttonSubmit" /> <div id="stylesheetTest"></div> </form> </div> </div> </div> <div id="boxes"> <div id="box_left"></div> </div> </div> </body> LIVE DEMO Οι ιδιότητες του μεσαίου και του δεξιού box είναι οι ίδιες. Στο css αρχείο μας γράφουμε το παρακάτω κώδικας: #box_middle{ width:258px; height:133px; border:1px solid #d8d8d8; background:url(images/box_back.jpg) repeat-x; float:left; margin-left:30px; padding:20px; } #box_right{ width:258px; height:133px; border:1px solid #d8d8d8; background:url(images/box_back.jpg) repeat-x; float:left; margin-left:30px; padding:20px; } Η διαφορά που έχουν με το αριστερό box είναι ότι έχουν εξωτερικό αριστερό περιθώριο (margin-left) 30px. Στο html αρχείο μας μέσα στο div boxes και κάτω από το div box_left γράφουμε το παρακάτω κώδικας: <div id="box_middle"></div> <div id="box_right"></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 id="slide"></div> <div id="quick_note"> <h2>Quick Note</h2> <form action="vars.php" method="post"> <label for="textinput">Your Full Name:</label> <br /> <input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" /><br /> <label for="passwordinput">Email Address:</label> <br /> <input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" /><br /> <label for="textareainput">What Are You Looking For::</label><br /> <textarea id="textareainput" name="textareainput" class="textarea" rows="" cols=""></textarea><br /> <br /> <input type="submit" value="Submit" class="buttonSubmit" /> <div id="stylesheetTest"></div> </form> </div> </div> </div> <div id="boxes"> <div id="box_left"></div> <div id="box_middle"></div> <div id="box_right"></div> </div> </div> </body> LIVE DEMO Quote Share this post Link to post Share on other sites
