CSS | Δημιουργία του slideshow και της φόρμας

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

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

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

CSS | Δημιουργία του slideshow και της φόρμας

Δημοσίευση από manolism » 02 Απρ 2010 14:05

Προηγούμενα βοηθήματα

Βοήθημα 1ο. Προετοιμασία για την ανάπτυξη της σελίδας
Βοήθημα 2ο. Δημιουργία της περιοχής Header
Βοήθημα 3ο. Δημιουργία του μενού
Βοήθημα 4ο. Δημιουργία της μεσαίας περιοχής

Δημιουργία της περιοχής του Slideshow

Στην περιοχή του 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 &#123;
	width&#58;280px;
	height&#58;330px;
	float&#58;left;
	background&#58;url&#40;images/quick.jpg&#41; repeat-x;
	margin-left&#58;10px;
	padding&#58;10px 0 0 20px;
&#125;
Το 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&#123;
	font-family&#58;Georgia, "Times New Roman", Times, serif;
	margin-bottom&#58;10px;
	&#125;
Με αυτή τη δήλωση ορίζουμε τις ιδιότητες που θα έχει η επικεφαλίδα <h2> μέσα στο div quick_note

Στο html αρχείο μας και μέσα στο div quick_note γράφουμε το παρακάτω

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

<h2>Quick Note</h2>
LIVE DEMO

Μέσα στο css αρχείο μας γράφουμε τα παρακάτω

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

input, textarea &#123;
	font-family&#58;Verdana, Geneva, sans-serif;
	font-size&#58;12px;
	color&#58;#900;
&#125;

label &#123;
	color&#58;#fff;
	padding-left&#58;2px;
	line-height&#58;25px;
	font-family&#58;Verdana, Geneva, sans-serif;
	font-size&#58;11px;
	font-weight&#58;bold;
&#125;
.textinput&#123;
	width&#58;255px;
	height&#58;25px;
	background&#58;url&#40;images/input.png&#41; no-repeat left top;
	border&#58;none;
	padding&#58;10px 0 0 5px;
&#125;

.textarea &#123;
	width&#58;255px;
	height&#58;70px;
	background&#58;url&#40;images/textarea.png&#41; no-repeat left top;
	border&#58;none;
	padding&#58;5px 0 0 5px;
&#125;

.buttonSubmit &#123;
	width&#58;80px;
	height&#58;35px;
	color&#58;#FFF;
	font-weight&#58;bold;
	background&#58;url&#40;images/button.png&#41; no-repeat left top;
	cursor&#58;pointer;
	border&#58;none;
&#125;
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&#58;</label>
  <br />
	<input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" /><br />
	<label for="passwordinput">Email Address&#58;</label>
	<br />
	<input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" /><br />
	<label for="textareainput">What Are You Looking For&#58;&#58;</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&#58;</label>
  <br />
	<input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" /><br />
	<label for="passwordinput">Email Address&#58;</label>
	<br />
	<input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" /><br />
	<label for="textareainput">What Are You Looking For&#58;&#58;</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

Άβαταρ μέλους
telas
Honorary Member
Δημοσιεύσεις: 1594
Εγγραφή: 12 Μαρ 2004 12:54
Τοποθεσία: Kastoria
Επικοινωνία:

CSS | Δημιουργία του slideshow και της φόρμας

Δημοσίευση από telas » 02 Απρ 2010 15:22

thumb up! πολύ ωραίο, keep 'em comming :)
Web Design - Δημιουργία Ιστοσελίδας - http://www.computerman.gr/
My Photography - http://www.tilaveridis.com/
Τεχνολογικά προιόντα - http://www.bigbox.gr/

Άβαταρ μέλους
tsiger
Honorary Member
Δημοσιεύσεις: 1431
Εγγραφή: 11 Νοέμ 2002 13:40
Τοποθεσία: Thessaloniki Observation Center
Επικοινωνία:

CSS | Δημιουργία του slideshow και της φόρμας

Δημοσίευση από tsiger » 02 Απρ 2010 16:00

Good stuff.

Για να αποφύγεις τη χρήση <br> tag μέσα στη φόρμα και για να έχεις μεγαλύτερο έλεγχο στις απόστάσεις των σετ label - input απλά βάλε κάθε label/input μέσα σε <fieldset> tags και μορφοποίησε τα καταλλήλως.

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

CSS | Δημιουργία του slideshow και της φόρμας

Δημοσίευση από dimsis » 02 Απρ 2010 16:29

... ή με τίποτε
#quick_note form label { margin-bottom:1em }
ή και με wrap ένα div με class γύρω από τα <label> και <input> και το αντίστοιχο στυλ π.χ.
<div class="frmrow">
<label for="textinput">Your Full Name:</label>
<input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" />
</div>

το wrapping με το div μπορεί να βοηθήσει σε διάφορες καταστάσεις έπειτα.

Όπως και να'χει συνολικά ο κώδικας του Μανώλη είναι από τους πιο καθαρογραμμένους και μακάρι να φτιάχναμε / είχαμε / παίρναμε πάντα τόσο καλό xhtml markup σε όλες μας τις δουλειές.

edit τώρα που το δοκίμασα και χωρίς τα <br /> στη φόρμα ίδιο αποτέλεσμα παίρνεις σε last versions FX και IE.

Άβαταρ μέλους
tsiger
Honorary Member
Δημοσιεύσεις: 1431
Εγγραφή: 11 Νοέμ 2002 13:40
Τοποθεσία: Thessaloniki Observation Center
Επικοινωνία:

CSS | Δημιουργία του slideshow και της φόρμας

Δημοσίευση από tsiger » 02 Απρ 2010 17:40

Φυσικά. Απλά εγώ είπα για το fieldset tag μιας και αυτό είναι block element όπως το div και είναι λίγο πιο σωστό σημειολογικά. Κατά τ΄ άλλα καλά :D

kontopro
Δημοσιεύσεις: 1
Εγγραφή: 13 Απρ 2010 00:25

CSS | Δημιουργία του slideshow και της φόρμας

Δημοσίευση από kontopro » 15 Απρ 2010 23:54

Συγχαρητήρια για το post, πολύ πολύ καλό!

Υπάρχει περίπτωση να ασχοληθείς στο επόμενο "μάθημα" με το slideshow?
Και όταν το κάνεις αυτό, θα το πραγματοποιήσεις με javascript ?

Όπως και να έχει τα παραπάνω posts είναι απίστευτο βοήθημα...

creation1
Δημοσιεύσεις: 19
Εγγραφή: 08 Ιαν 2015 08:28
Τοποθεσία: Ελλάδα
Επικοινωνία:

CSS | Δημιουργία του slideshow και της φόρμας

Δημοσίευση από creation1 » 10 Φεβ 2015 14:02

Γεια manolism.
9 μαθήματα σας είναι πολύ χρήσιμη για μένα. σας ευχαριστώ

Μαθήματα Web design&#8206;

Απάντηση

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

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

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