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

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

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

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

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

Δημοσίευση από manolism » 15 Μαρ 2010 13:28

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

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

Συνεχίζουμε σήμερα δημιουργώντας την περιοχή όπου θα μπει αργότερα ένα slideshow και η φόρμα γρήγορης επικοινωνίας.

Στο 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 &#123;
	width&#58;950px;
	height&#58;340px;
	float&#58;left;
	background-color&#58;#fff;
	margin&#58;40px 0 0 0;
	padding&#58;10px 0 10px 10px;
&#125; 
Το 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

Απάντηση

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

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

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