Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Sign in to follow this  
Anastasis

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

Recommended Posts

Στο βοήθημα αυτό θα βάλουμε περιεχόμενο στα 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:</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>
</body>



LIVE DEMO

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×