Δημιουργία XHTML σελίδας με δύο στήλες και HEADER με CSS



Στο παρακάτω άρθρο θα δούμε πως δημιουργούμε με xthml/css μια σελίδα με HEADER, δύο στήλες και Footer. 

H τελική μορφή της σελίδας μας θα είναι της μορφής: 

Ξεκινάμε δημιουργώντας το html αρχείο μας.  Ας το ονομάσουμε index.html

Επειδή δουλέυουμε με XHTML θα επιλέξουμε XHTML strict οπότε το HEAD της σελίδας μας θα είναι της μορφής:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="/style.css" rel="stylesheet" type="text/css"></link>

Για να πετύχουμε το παραπάνω θα χρειαστούμε ένα div το οπίο θα περικλείει όλα τα παραπάνω. Το div αυτό θα το ονομάσουμε wrapper. Μέσα σε αυτό θα τοποθετήσουμε ένα div που θα είναι κεντραρισμένο στο κέντρο. Το ονομάζουμε main_div.

Το πλάτος αυτού του div θα το κάνουμε να είναι 1000pixel. Ο λόγος είναι ότι οι περισσότερες οθόνες χρησιμοποιούν ανάλυση 1024 και μεγαλύτερη οπότε δεν θα δημιουργηθεί στο κάτω μέρος την οθόνης του browser, Μπάρα με την οποίο ο χρήστης θα μετακινεί την σελίδα δεξιά ή αριστερά. Εάν κάποιος έχει ανάλυση πχ 800χ600 η σελίδα μας αυτή δεν θα χωράει στην οθόνη και θα δημιουργηθεί αυτόματα μια μπάρα κύλισης. Επειδή όμως η ανάλυση αυτή είναι πλέον σπάνια δεν της δίνουμε σημασία και δουλεύουμε απευθείας για αναλύσεις 1024 και πάνω. Προσοχή, δεν βάζουμε πλάτος 1024 αλλά 100 γιατί 20px τρώει η κάθετη μπάρα κύλισης στα δεξιά.

Μέσα στο main_div τώρα θα τοποθετήσουμε τα div που σχηματίζουνε τα Header, Menu, Content και Footer. 
O Κώδικας της σελίδας θα είναι της μορφής:

<div id="wrapper">
<div id="main_div">
<div id="header"></div>
<div id="container">
<div id="menu"></div>
<div id="content"></div>
<div class="clear"></div>  
</div>
<div id="footer"></div>
</div>
</div>

και το αρχείο style.css  που θα χρησιμοποιήσουμε θα περιέχει τα εξής

#wrapper {width:100%;
float:left;
text-align:center;}

#main_div {width:1000px;
float:none;
margin-left:auto;
margin-right:auto;}

Τα δύο αυτά div με unique ΙD wrapper και main_div εξασφαλίζουν ότι το main_div θα παραμείνει στο κέντρο της σελίδας με πλάτος 1000px σε κάθε browser. Γενικά η στοίχηση γίνεται με τα margin αλλά για δουλέψει αυτό και σε IE χρησιμοποιούμε αναγκαστικά το text-align.

Στην συνέχεια στο style.css πρεοσθέτουμε

#header, #footer {float:left;
width:100%;}

#container {float:left;
width:100%;}

Μέσα στο div container θα τοποθετήσουμε τα δυο div που θα περιέχουν  το μενού και το περιεχόμενο.  Τα styles τους θα είναι τα εξής

#menu {width:250px;
float:left;}

#content {width:750px;
float:left;}

Στην ουσία εδώ είναι που χρησιμοποιούμε το float για να στοιχήσουμε τα δύο div δεξιά και αριστερά. Kάθε φορά που κάνουμε float με αυτόν τον τρόπο τοποθετούμε και ένα κενο div απο κάτω για να εξασφαλίσουμε ότι θα δουλέψει σωστά σε IE. To class του div θα είναι

.clear {clear:both;}

 

 



4
Μέσος Όρος: 4 (2 votes)
Η βαθμολογία σας: Κανένα




    RSS Feeds  |  Δημιουργία Ιστοσελίδας