Anastasis 48 Report post Posted November 10, 2016 Στην περιοχή του slideshow θα δημιουργήσουμε μόνο τη θέση και θα τοποθετήσουμε μία εικόνα. Στην πορεία των βοηθημάτων θα το κάνουμε και ενεργό. Στο css αρχείο μας γράφουμε το παρακάτω. κώδικας: #slide { width:630px; height:340px; float:left; background:url(images/slide.jpg); } Την εικόνα του slideshow την τοποθετούμε ως background αλλά θα μπορούσαμε να την έχουμε εισάγει μέσα στο αρχείο HTML. Μέσα στο html αρχείο και μέσα στο div middle_inside γράφουμε το παρακάτω: κώδικας: <div id="slide"></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> </div> </div> </body> LIVE DEMOΔημιουργία της περιοχής της φόρμας Μέσα στο css αρχείο μας γράφουμε το παρακάτω κώδικας: #quick_note { width:280px; height:330px; float:left; background:url(images/quick.jpg) repeat-x; margin-left:10px; padding:10px 0 0 20px; } Το width είναι το πλάτος της περιοχής της φόρμας και το height το ύψος της. To float:left δηλώνει ότι το div πάντα θα κολλάει στην αριστερή πλευρά. Έχουμε ορίσει σαν background-image την εικόνα quick η οποία θα αναπαράγεται ώς προς τον άξονα Χ δηλαδή προς τα δεξιά. Στα εξωτερικά περιθώρια (margin) έχουμε ορίσει να απέχει 10px από την πάνω πλευρά. Με τo padding αφήνουμε εσωτερικά περιθώρια 10px από πάνω και 20px από τα αριστερά. Τα padding όπως και τα margin όταν τα ορίζουμε σε μία δήλωση πάνε με την εξής σειρά: Πάνω, δεξιά, κάτω, αριστερά. Στο html αρχείο γράφουμε μέσα στο div middle_inside και κάτω από το div slide το παρακάτω: κώδικας: <div id="quick_note"></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"></div> </div> </div> </div> </body> LIVE DEMO Μέσα στο css αρχείο μας γράφουμε το παρακάτω κώδικας: #quick_note h2{ font-family:Georgia, "Times New Roman", Times, serif; margin-bottom:10px; } Με αυτή τη δήλωση ορίζουμε τις ιδιότητες που θα έχει η επικεφαλίδα <h2> μέσα στο div quick_note Στο html αρχείο μας και μέσα στο div quick_note γράφουμε το παρακάτω κώδικας: <h2>Quick Note</h2> LIVE DEMO Μέσα στο css αρχείο μας γράφουμε τα παρακάτω κώδικας: input, textarea { font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#900; } label { color:#fff; padding-left:2px; line-height:25px; font-family:Verdana, Geneva, sans-serif; font-size:11px; font-weight:bold; } .textinput{ width:255px; height:25px; background:url(images/input.png) no-repeat left top; border:none; padding:10px 0 0 5px; } .textarea { width:255px; height:70px; background:url(images/textarea.png) no-repeat left top; border:none; padding:5px 0 0 5px; } .buttonSubmit { width:80px; height:35px; color:#FFF; font-weight:bold; background:url(images/button.png) no-repeat left top; cursor:pointer; border:none; } input, textarea: Εδώ ορίζουμε γενικές ιδιότητες που θα έχουν όλα τα πλαίσια κειμένου που θα χρησιμοποιήσουμε για τη φόρμα μαςlabel: Εδώ ορίζουμε γενικές ιδιότητες που θα έχουν όλες οι ετικέτες (labels) των στοιχείων της φόρμαςtextinput: Κλάση η οποία θα εφαρμοστεί στα textfields της φόρμαςtextarea: Κλάση η οποία θα εφαρμοστεί στα textarea της φόρμαςbuttonSubmit: Κλάση η οποία θα εφαρμοστεί στο κουμπί (button) της φόρμας Όλες οι ιδιότητες που υπάρχουν εδώ είναι ήδη γνωστές. Στο Html αρχείο μας και κάτω από την επικεφαλίδα <h2> μέσα στο div quick_note γράφουμε το παρακάτω κώδικας: <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> Άρα έχουμε συνολικά το παρακάτω κώδικας: <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> </body> LIVE DEMO Quote Share this post Link to post Share on other sites
