CSS | Τοποθετώντας περιεχόμενο στα 3 boxes

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

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

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

CSS | Τοποθετώντας περιεχόμενο στα 3 boxes

Δημοσίευση από manolism » 25 Απρ 2010 22:32

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

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

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

Στο css αρχείο γράφουμε το παρακάτω

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

.text{
	width:150px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	margin-top:20px;
	color:#767676;
	float:left;
}

.title{
	color:#000;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:24px;
}

.color{
	color:#b47825;
}

.image{
	float:right;
	margin-top:20px;
	}
	
.more a{
	float:left;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	margin-top:10px;
	color:#000;
	}
	
.more a:hover{
	text-decoration:none;
	}
Η κλάσση .text ορίζει τις παραμέτρους για το κυρίως κείμενο.
Η κλάσση .title ορίζει τις παραμέτρους για τον τίτλο.
Η κλάσση .color ορίζει τις παραμέτρους για τον μισό τίτλο.
Η κλάσση .image ορίζει τις παραμέτρους για την εικόνα.
Η κλάσση .more a ορίζει τις παραμέτρους για το σύνδεσμο Read more.
Η κλάσση .more a:hover ορίζει τις παραμέτρους για το hover του συνδέσμου Read
more

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

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

<p class="title">About SmashingDzine</p>
LIVE DEMO

Μορφοποιώντας τον τίτλο αυτό και εφαρμόζοντας την κλάσση .color τον κάνουμε όπως το παρακάτω:

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

<p class="title"><span class="color">About</span> SmashingDzine</p>
LIVE DEMO

Κάτω ακριβώς από τον τίτλο τοποθετούμε την εικόνα γράφοντας το παρακάτω:

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

<img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" />
LIVE DEMO

Παρατηρούμε ότι η εικόνα πάει δεξιά επειδή έχουμε ορίσει float:right

Κάτω από την εικόνα εισάγουμε το κυρίως κείμενό μας γράφοντας το παρακάτω:

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

<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulum vel vitae risus.</p>
LIVE DEMO

Και τέλος κάτω από το κείμενο βάζουμε το σύνδεσμο Read more γράφοντας το παρακάτω:

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

<p class="more"><a href="#">Read More</a></p>
LIVE DEMO

Άρα μέχρι στιγμής ο κώδικας μέσα στο αριστερό box είναι ο παρακάτω:

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

<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>
Με τον ίδιο τρόπο γεμίζουμε όλα τα κουτιά και ο τελικός κώδικας όλης της σελίδας είναι ο παρακάτω:

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

<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">
<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> 
</body>
LIVE DEMO

Απάντηση

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

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

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