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

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

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

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

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

Δημοσίευση από manolism » 12 Μάιος 2010 15:38

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

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

Στο βοήθημα αυτό θα δημιουργήσουμε την περιοχή Footer του template

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

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

#footer_wrap {
	width:100%;
	height:100px;
	background:url(images/footer.jpg) repeat-x;
	float:left;
}
#footer {
	width:960px;
	height:100px;
	margin:0 auto;
	padding:20px 0 0 0;
}
#footer_left {
	width:550px;
	height:50px;
	float:left;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	margin-top:5px;
	line-height:25px;
	}
#footer_right {
	width:350px;
	height:50px;
	float:right;
}
#footer ul{ width:100%; margin:0;padding:0;list-style-type:none;float:left;}
#footer ul li{float:left;margin:0 0px;}
#footer ul li a{display:block;float:left;color:#fff;text-decoration:none;padding:0 12px 0 0;line-height:25px;}
#footer ul li a:hover, #footer ul li a.current{color:#fff; text-decoration:underline;}
#footer_wrap: Είναι το div που θα περικλείει όλόκληρο το footer. Παρατηρούμε ότι το μήκος του είναι 100% ώστε να επεκτείνετε σε όλο το πλάτος της οθόνης ανεξάρτητα από την ανάλυση της
#footer: Είναι η περιοχή που θα τοποθετηθεί το περιεχόμενο
#footer_left: Είναι η αριστερή πλευρά του Footer
#footer_right: Είναι η δεξιά πλευρά του Footer

Οι υπόλοιπες ρυθμίσεις αφορούν το μενού με τα links που βρίσκεται στο Footer

Στο html αρχείο μας και κάτω από όλα τα divs και πάνω από το </body> γράφουμε το παρακάτω:

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

<div id="footer_wrap"></div>
LIVE DEMO

Στη συνέχεια μέσα στο div footer_wrap γράφουμε το παρακάτω:

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

<div id="footer">
<div id="footer_left">
  <p>Copyright © 2010 SmashingDzine  |  Privacy Policy</p>
  <ul>
  		<li><a href="#">Home</a></li>  
   		<li><a href="#">About SmashingDzine </a></li>
    	<li><a href="#">Our Services </a></li>    
      	<li><a href="#">Portfolio</a></li> 
       	<li><a href="#">Blog</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
</div>
</div>
Αυτό εισάγει την αριστερή πλευρά του footer μαζί με το μενού.

LIVE DEMO

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

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

<div id="footer_right">
        <form action="vars.php" method="post">
  <label for="textinput">Enter your email to subscribe for our RSS Updates&#58;</label>
  <br />
	<input type="text"  name="textinput" maxlength="25" />
	
	<input type="submit" value="Submit" />
</form>
</div>
Αυτό εισάγει την δεξιά πλευρά του footer μαζί με τη φόρμα.

LIVE DEMO

Άρα μέχρι στιγμής το div footer_wrap έχει την παρακάτω μορφή:

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

<div id="footer_wrap">
<div id="footer">
<div id="footer_left">
  <p>Copyright © 2010 SmashingDzine  |  Privacy Policy</p>
  <ul>
  		<li><a href="#">Home</a></li>  
   		<li><a href="#">About SmashingDzine </a></li>
    	<li><a href="#">Our Services </a></li>    
      	<li><a href="#">Portfolio</a></li> 
       	<li><a href="#">Blog</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
</div>
<div id="footer_right">
        <form action="vars.php" method="post">
  <label for="textinput">Enter your email to subscribe for our RSS Updates&#58;</label>
  <br />
	<input type="text"  name="textinput" maxlength="25" />
	
	<input type="submit" value="Submit" />
</form>
</div>
</div>
</div>
Και ολόκληρος ο κώδικας της σελίδας μέσα στο <body></body>:

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

<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> 
<div id="footer_wrap">
<div id="footer">
<div id="footer_left">
  <p>Copyright © 2010 SmashingDzine  |  Privacy Policy</p>
  <ul>
  		<li><a href="#">Home</a></li>  
   		<li><a href="#">About SmashingDzine </a></li>
    	<li><a href="#">Our Services </a></li>    
      	<li><a href="#">Portfolio</a></li> 
       	<li><a href="#">Blog</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
</div>
<div id="footer_right">
        <form action="vars.php" method="post">
  <label for="textinput">Enter your email to subscribe for our RSS Updates&#58;</label>
  <br />
	<input type="text"  name="textinput" maxlength="25" />
	<input type="submit" value="Submit" />
</form>
</div>
</div>
</div>

</body>
LIVE DEMO

Απάντηση

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

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

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