CSS | Δημιουργία της περιοχής των τριών boxes

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

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

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

CSS | Δημιουργία της περιοχής των τριών boxes

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

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

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

Στο βοήθημα αυτό θα φτιάξουμε τα 3 boxes που βρίσκονται κάτω από την περιοχή του slideshow και της φόρμας.

Στο 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&#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 id="boxes"></div>
</div> 
</body>
Δεν υπάρχει καμμία επίδραση στο template αφού το div boxes δεν έχει περιεχόμενο.

Στη συνέχεια γράφουμε στο css αρχείο μας τις ιδιότητες του αριστερού box

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

#box_left&#123;
	width&#58;258px;
	height&#58;133px;
	border&#58;1px solid #d8d8d8;
	background&#58;url&#40;images/box_back.jpg&#41; repeat-x;
	float&#58;left;
	padding&#58;20px;
&#125;
Το 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&#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 id="boxes">
<div id="box_left"></div>
</div>
</div> 
</body>
LIVE DEMO

Οι ιδιότητες του μεσαίου και του δεξιού box είναι οι ίδιες. Στο css αρχείο μας γράφουμε το παρακάτω

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

#box_middle&#123;
	width&#58;258px;
	height&#58;133px;
	border&#58;1px solid #d8d8d8;
	background&#58;url&#40;images/box_back.jpg&#41; repeat-x;
	float&#58;left;
	margin-left&#58;30px;
	padding&#58;20px;
&#125;

#box_right&#123;
	width&#58;258px;
	height&#58;133px;
	border&#58;1px solid #d8d8d8;
	background&#58;url&#40;images/box_back.jpg&#41; repeat-x;
	float&#58;left;
	margin-left&#58;30px;
	padding&#58;20px;
&#125;
Η διαφορά που έχουν με το αριστερό 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&#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 id="boxes">
<div id="box_left"></div>
<div id="box_middle"></div>
<div id="box_right"></div>
</div>
</div> 
</body>
LIVE DEMO

Στο επόμενο βοήθημα θα βάλουμε περιεχόμενο μέσα στα 3 boxes

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

CSS | Δημιουργία της περιοχής των τριών boxes

Δημοσίευση από tsiger » 03 Απρ 2010 12:34

Keep it coming! :D

Παρατήρηση:
Βλέπουμε ότι οι δηλώσεις box_left, box_middle και box_right έχουν πολλές κοινά styles οπότε ο παρακάτω κώδικας σου:

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

#box_left&#123;
   width&#58;258px;
   height&#58;133px;
   border&#58;1px solid #d8d8d8;
   background&#58;url&#40;images/box_back.jpg&#41; repeat-x;
   float&#58;left;
   padding&#58;20px;
&#125;

#box_middle&#123;
   width&#58;258px;
   height&#58;133px;
   border&#58;1px solid #d8d8d8;
   background&#58;url&#40;images/box_back.jpg&#41; repeat-x;
   float&#58;left;
   margin-left&#58;30px;
   padding&#58;20px;
&#125;

#box_right&#123;
   width&#58;258px;
   height&#58;133px;
   border&#58;1px solid #d8d8d8;
   background&#58;url&#40;images/box_back.jpg&#41; repeat-x;
   float&#58;left;
   margin-left&#58;30px;
   padding&#58;20px;
&#125;
Θα μπορούσε να μειωθεί και να γίνει ως εξής:

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

.box &#123;
   width&#58;258px;
   height&#58;133px;
   border&#58;1px solid #d8d8d8;
   background&#58;url&#40;images/box_back.jpg&#41; repeat-x;
   float&#58;left;
   margin-left&#58;30px;
   padding&#58;20px;
&#125;

.first &#123;
 margin-left&#58;0;
&#125;
Και η markup

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

<div class="box first">
 first box
</div>

<div class="box">
 second box
</div>

<div class="box">
 third box
</div>


Άβαταρ μέλους
Yiannistaos
Δημοσιεύσεις: 140
Εγγραφή: 10 Οκτ 2007 21:01
Τοποθεσία: Λεμεσός
Επικοινωνία:

CSS | Δημιουργία της περιοχής των τριών boxes

Δημοσίευση από Yiannistaos » 06 Απρ 2010 16:11

Όμορφο, ευχαριστούμε!
web357.eu - Free & Premium Joomla! Extensions

arNeN
Δημοσιεύσεις: 8
Εγγραφή: 07 Δεκ 2010 14:46

CSS | Δημιουργία της περιοχής των τριών boxes

Δημοσίευση από arNeN » 07 Δεκ 2010 14:50

Αν θέλουμε να βάλουμε και ένα τέταρτο box,κάτω απο τα άλλα, με τα ίδια χαρακτηριστικά εκτός από το πλάτος που θα ισούται με το πλάτος και των τριών άλλων boxes μαζί,πώς θα το κάνουμε?? :)

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

CSS | Δημιουργία της περιοχής των τριών boxes

Δημοσίευση από manolism » 07 Δεκ 2010 15:03

Λογικά αυτό θα δουλέψει:

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

#box_down&#123; 
   width&#58;918px; 
   height&#58;133px; 
   border&#58;1px solid #d8d8d8; 
   background&#58;url&#40;images/box_back.jpg&#41; repeat-x; 
   float&#58;left; 
   padding&#58;20px; 
&#125;

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

<div id="boxes"> 
<div id="box_left"></div> 
<div id="box_middle"></div> 
<div id="box_right"></div> 
<div id="box_down"></div> 
</div>

arNeN
Δημοσιεύσεις: 8
Εγγραφή: 07 Δεκ 2010 14:46

CSS | Δημιουργία της περιοχής των τριών boxes

Δημοσίευση από arNeN » 07 Δεκ 2010 15:24

:o Ευχαριστώ πολύ για την άμεση απάντηση σου!!!Αυτό ακριβώς σκεφτόμουν..το θέμα είναι ότι κολλάει τέρμα αριστερά της σελίδας,δηλαδή δεν είναι στα όρια που οριζουν το left και το right box...φταίει ο browser??Το δοκίμασα με firefox και explorer..

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

CSS | Δημιουργία της περιοχής των τριών boxes

Δημοσίευση από manolism » 07 Δεκ 2010 16:15

Κάνε τις παρακάτω αλλαγές και θα δουλέψει:

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

#boxes &#123;
	width&#58;960px;
	height&#58;100%;
	float&#58;left;
	padding-top&#58;40px;
	margin-bottom&#58;40px;
&#125;

#box_down&#123; 
   width&#58;918px; 
   height&#58;133px; 
   border&#58;1px solid #d8d8d8; 
   background&#58;url&#40;images/box_back.jpg&#41; repeat-x; 
   float&#58;left; 
   padding&#58;20px;
   margin-top&#58;20px;
&#125;

arNeN
Δημοσιεύσεις: 8
Εγγραφή: 07 Δεκ 2010 14:46

CSS | Δημιουργία της περιοχής των τριών boxes

Δημοσίευση από arNeN » 08 Δεκ 2010 09:11

Ευχαριστώ πολύ!!Να 'σαι καλά!! :D

Απάντηση

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

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

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