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

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

Recommended Posts

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


 

κώδικας:
#middle {
   width:960px;
   height:440px;
   float:left;
}



Το div middle είναι αυτό που θα δεχθεί όλο το περιεχόμενο της περιοχής αυτής.

Μέσα στο html αρχείο και κάτω από το σημείο που κλείνει το div header γράφουμε το παρακάτω:

 

κώδικας:
<div id="middle"></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>
</div>
</body>



Εδώ δεν έχουμε καμμία επίδραση στο template αφού δεν έχουμε εισάγει ακόμα περιεχόμενο.

Στη συνέχεια θα δημιουργήσουμε την λευκή περιοχή. Στο css αρχείο γράφουμε το παρακάτω:

 

κώδικας:
#middle_inside {
   width:950px;
   height:340px;
   float:left;
   background-color:#fff;
   margin:40px 0 0 0;
   padding:10px 0 10px 10px;
}



Το width είναι το πλάτος της λευκής περιοχής και το height το ύψος της. To float:left δηλώνει ότι το div πάντα θα κολλάει στην αριστερή πλευρά. Έχουμε ορίσει σαν background-color το λευκό. Στα εξωτερικά περιθώρια (margin) έχουμε ορίσει να απέχει 40px από την περιοχή του Header. Με τo padding αφήνουμε εσωτερικά περιθώρια 10px σε όλες τις πλευρές εκτός από την δεξιά. Τα padding όπως και τα margin όταν τα ορίζουμε σε μία δήλωση πάνε με την εξής σειρά: Πάνω, δεξιά, κάτω, αριστερά.

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

 

κώδικας:
<div id="middle_inside"></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>
</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  

×