Anastasis 48 Report post Posted November 10, 2016 Στο βοήθημα αυτό θα δημιουργήσουμε την περιοχή Footer του template Στο css αρχείο γράφουμε το παρακάτω κώδικας: #footer_wrap { width:100%; height:100px; background:url(images/footer.jpg) repeat-x; float:left; } #footer { width:960px; height:100px; margin:0 auto; padding:20px 0 0 0; } #footer_left { width:550px; height:50px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:11px; margin-top:5px; line-height:25px; } #footer_right { width:350px; height:50px; float:right; } #footer ul{ width:100%; margin:0;padding:0;list-style-type:none;float:left;} #footer ul li{float:left;margin:0 0px;} #footer ul li a{display:block;float:left;color:#fff;text-decoration:none;padding:0 12px 0 0;line-height:25px;} #footer ul li a:hover, #footer ul li a.current{color:#fff; text-decoration:underline;} #footer_wrap: Είναι το div που θα περικλείει όλόκληρο το footer. Παρατηρούμε ότι το μήκος του είναι 100% ώστε να επεκτείνετε σε όλο το πλάτος της οθόνης ανεξάρτητα από την ανάλυση της#footer: Είναι η περιοχή που θα τοποθετηθεί το περιεχόμενο#footer_left: Είναι η αριστερή πλευρά του Footer#footer_right: Είναι η δεξιά πλευρά του Footer Οι υπόλοιπες ρυθμίσεις αφορούν το μενού με τα links που βρίσκεται στο Footer Στο html αρχείο μας και κάτω από όλα τα divs και πάνω από το </body> γράφουμε το παρακάτω: κώδικας: <div id="footer_wrap"></div> LIVE DEMO Στη συνέχεια μέσα στο div footer_wrap γράφουμε το παρακάτω: κώδικας: <div id="footer"> <div id="footer_left"> <p>Copyright © 2010 SmashingDzine | Privacy Policy</p> <ul> <li><a href="#">Home</a></li> <li><a href="#">About SmashingDzine </a></li> <li><a href="#">Our Services </a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> Αυτό εισάγει την αριστερή πλευρά του footer μαζί με το μενού.LIVE DEMO Στη συνέχεια μέσα στο div footer_wrap και κάτω από το σημείο που κλείνει το div footer_left γράφουμε το παρακάτω: κώδικας: <div id="footer_right"> <form action="vars.php" method="post"> <label for="textinput">Enter your email to subscribe for our RSS Updates:</label> <br /> <input type="text" name="textinput" maxlength="25" /> <input type="submit" value="Submit" /> </form> </div> Αυτό εισάγει την δεξιά πλευρά του footer μαζί με τη φόρμα.LIVE DEMO Άρα μέχρι στιγμής το div footer_wrap έχει την παρακάτω μορφή: κώδικας: <div id="footer_wrap"> <div id="footer"> <div id="footer_left"> <p>Copyright © 2010 SmashingDzine | Privacy Policy</p> <ul> <li><a href="#">Home</a></li> <li><a href="#">About SmashingDzine </a></li> <li><a href="#">Our Services </a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <div id="footer_right"> <form action="vars.php" method="post"> <label for="textinput">Enter your email to subscribe for our RSS Updates:</label> <br /> <input type="text" name="textinput" maxlength="25" /> <input type="submit" value="Submit" /> </form> </div> </div> </div> Και ολόκληρος ο κώδικας της σελίδας μέσα στο <body></body>: κώδικας: <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"> <p class="title"><span class="color">About</span> SmashingDzine</p> <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulumvel vitae risus.</p> <p class="more"><a href="#">Read More</a></p> </div> <div id="box_middle"> <p class="title"><span class="color">Our</span> Services</p> <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulum vel vitae risus.</p> <p class="more"><a href="#">Read More</a></p> </div> <div id="box_right"> <p class="title"><span class="color">Our</span> Portfolio</p> <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulum vel vitae risus.</p> <p class="more"><a href="#">Read More</a></p> </div> </div> </div> <div id="footer_wrap"> <div id="footer"> <div id="footer_left"> <p>Copyright © 2010 SmashingDzine | Privacy Policy</p> <ul> <li><a href="#">Home</a></li> <li><a href="#">About SmashingDzine </a></li> <li><a href="#">Our Services </a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <div id="footer_right"> <form action="vars.php" method="post"> <label for="textinput">Enter your email to subscribe for our RSS Updates:</label> <br /> <input type="text" name="textinput" maxlength="25" /> <input type="submit" value="Submit" /> </form> </div> </div> </div> </body> LIVE DEMO Quote Share this post Link to post Share on other sites
