Bonjour à tous et toutes. Cela fait maintenant 4 semaines que j’ai décidé de recoder entièrement mon site. Je n’en suis qu’à la première étape — le changement de présentation — que déjà je galère.
Le problème actuel est le collage du pied-de-page en bas de page quelles que soient les circonstances. 1ère technique de cette page.
Sauf que j’y arrive pas avec la structure souhaitée.
Je vous colle mon CSS et mon source HTML. Si vous voulez un truc en ligne, demandez.
Structure HTML
Code CSS
Le problème actuel est le collage du pied-de-page en bas de page quelles que soient les circonstances. 1ère technique de cette page.
Sauf que j’y arrive pas avec la structure souhaitée.
Je vous colle mon CSS et mon source HTML. Si vous voulez un truc en ligne, demandez.
Structure HTML
<!DOCTYPE HTML>
<html>
<head>
<title>[Home Page]</title>
<link rel="stylesheet" type="text/css" href="main4.css">
<link rel="icon" type="image/png" href="img/glider.png">
<meta charset="utf-8">
<meta name="description" content="165c. uniques">
</head>
<body>
<div id="page">
<header id="haut_de_page">=[There's no place like 127.0.0.1]=</header>
<div id="main">
<!-- Ouverture du panneau du menu -->
<aside id="colonne_menu">
<div id="logo"><img src="img/logo.png" alt="Logo" title="Logo" /></div>
<nav role="navigation" id="menu">
<ul>
<li id="home"><a href="." title="Accueil">Accueil</a></li>
<li id="didacticiels">Didacticiels
<ul class="submenus">
<li id="origami"><a href="">Origami</a></li>
<li id="linux"><a href="">Linux</a></li>
</ul>
</li>
<li id="galerie"><a href="?p=gal" title="Galeries">Galeries</a></li>
<li id="scripts">Scripts
<ul class="submenus">
<li id="bash"><a href="">Bash</a></li>
<li id="python"><a href="">Python</a></li>
</ul>
</li>
<li id="traductions"><a href="?p=trsl" title="Traductions">Traductions</a></li>
<li id="blog"><a href="blog/" title="Blog">Blog</a></li>
<li id="mailer"><a href="?p=mail" title="Me contacter">Cont@ct</a></li>
<li id="about">A propos
<ul class="submenus">
<li id="site"><a href="">Site</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
<!-- Fermeture du panneau du menu -->
<!-- Ouverture du panneau gadgets -->
<aside id="colonne_gadgets">
<div id="style_changer">
<form action="" method="post">
<select name="style">
<option value="" selected="selected" />[Style changer]</option>
<option value="black_and_white.css_OLD" />Black And White</option>
<option value="black_and_white.css" />Black And White</option>
</select>
<input type="submit" name="send_style" class="form_button" value="OK" />
</form>
</div>
<div id="lang_changer">
<form action="" method="post">
<select name="language">
<option value="fr" selected="selected" />[Language]</option>
<option value="fr" />Français</option>
<option value="en" />English</option>
</select>
<input type="submit" name="send_lang" class="form_button" value="OK" />
</form>
</div>
<div id="add">
<a href="http://french-64605005507.spampoison.com" title="SpamPoison"><img src="http://pics3.inxhost.com/images/sticker.gif" width="80" height="15" alt="SpamPoison" /></a>
</div>
</aside>
<!-- Fermeture du panneau gadgets -->
<!-- Ouverture du contenu -->
<article id="contenu">
<header>
<h1>Titre du header de l'article: h1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam sit amet orci ante, sed sollicitudin nis
</p>
</header>
<section>
<h2>Titre de cette section: h2</h2>
<p>
Sed ultricies tortor nec nunc aliquam hendrerit.
Donec tempor scelerisque bibendum. Fusce accumsan convallis fringilla.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
Nullam augue sapien, tincidunt ut mattis in, posuere non nisi.
Ut auctor venenatis ipsum sed blandit. Nunc elementum,
lectus vitae sagittis commodo, sem diam interdum ligula,
sed feugiat mauris libero ornare neque.
</p>
</section>
<footer>
<h3>Titre du footer de l'article: h3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fermentum, velit in lobortis fermentum, dolor lacus faucibus tortor, at tristique lacus ante nec arcu. Donec magna nulla, condimentum eget ultricies ut, dictum in metus. Ut ullamcorper, tellus a pharetra blandit, lorem est molestie leo, a dapibus lacus dui et nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eu feugiat sem. Duis at quam nisl. Quisque vulputate eros quis diam facilisis nec pretium sapien tincidunt. Nullam ut massa eget eros posuere venenatis quis a turpis. Integer fringilla nisi id diam mollis sed pulvinar elit auctor.
Quisque eget ipsum lacus. Suspendisse rutrum tempus quam vel luctus. Proin mattis, nisi sed fringilla cursus, justo dui euismod mauris, a porttitor nunc enim id mauris. Fusce ut lectus vel tortor volutpat pellentesque a a dolor. Donec id molestie neque. Vivamus turpis nunc, lacinia non vulputate quis, ornare id ligula. Integer ac mauris ut diam dapibus vestibulum in id velit.
Sed consequat eleifend leo vel volutpat. Mauris eleifend, arcu id posuere imperdiet, orci risus blandit libero, non ultrices est metus in nulla. Vestibulum tempor venenatis tempor. Ut scelerisque, diam ut rutrum pellentesque, erat elit commodo felis, id tincidunt eros sem id dolor. Vestibulum ut velit mauris. Curabitur elit urna, blandit eget ullamcorper a, sodales eget lectus. Vivamus at quam vel urna feugiat faucibus. Mauris non nulla ut elit facilisis vehicula. Nullam et augue massa. Suspendisse bibendum diam quis tortor porttitor auctor. Donec sit amet neque nec odio suscipit adipiscing id nec eros. Nam lacinia cursus felis, at placerat diam interdum in. Suspendisse convallis tortor ac nibh luctus at blandit metus commodo. Fusce tortor arcu, semper id fringilla et, luctus viverra mauris. Curabitur feugiat, nisi quis venenatis accumsan, orci ante rutrum lectus, eu consectetur ligula orci vel justo. Nam bibendum augue vel diam feugiat vestibulum.
Curabitur condimentum elementum diam, nec ultricies nibh pellentesque posuere. Curabitur rutrum tincidunt nibh a ultricies. Etiam viverra rhoncus nulla. Donec faucibus sem et mi pretium in venenatis turpis rhoncus. Curabitur in viverra purus. Donec a augue metus, quis sodales purus. Mauris quis felis metus. Vivamus ultrices elementum nibh, in tempor lorem vehicula sit amet. Donec congue accumsan dignissim. Praesent sit amet dictum sapien.
Vestibulum quis consectetur ante. Quisque malesuada felis eget magna sollicitudin nec sagittis enim tempus. Fusce semper, arcu eget pharetra feugiat, nisi nisi ultricies erat, vel hendrerit magna nisl eu ipsum. Cras euismod fermentum sapien quis ornare. In non volutpat nulla. Mauris id tempus quam. Curabitur facilisis, tellus a auctor blandit, nisi urna cursus mi, quis blandit ligula libero facilisis erat. Nam pretium, tortor non pretium pellentesque, sem turpis pharetra nisl, convallis lacinia ante metus non justo. Vivamus viverra magna sed tortor gravida porta quis vitae arcu. Duis congue ligula a felis interdum et aliquam tortor placerat. Nunc pellentesque convallis eros, et volutpat purus facilisis in.
que eget erat. Maecenas tincidunt justo id elit bibendum feugiat. Fusce eget justo a nibh pellentesque mollis elementum id dolor. Maecenas vulputate est id dui suscipit lacinia.
<!--Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fermentum, velit in lobortis fermentum, dolor lacus faucibus tortor, at tristique lacus ante nec arcu. Donec magna nulla, condimentum eget ultricies ut, dictum in metus. Ut ullamcorper, tellus a pharetra blandit, lorem est molestie leo, a dapibus lacus dui et nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eu feugiat sem. Duis at quam nisl. Quisque vulputate eros quis diam facilisis nec pretium sapien tincidunt. Nullam ut massa eget eros posuere venenatis quis a turpis. Integer fringilla nisi id diam mollis sed pulvinar elit auctor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fermentum, velit in lobortis fermentum, dolor lacus faucibus tortor, at tristique lacus ante nec arcu. Donec magna nulla, condimentum eget ultricies ut, dictum in metus. Ut ullamcorper, tellus a pharetra blandit, lorem est molestie leo, a dapibus lacus dui et nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eu feugiat sem. Duis at quam nisl. Quisque vulputate eros quis diam facilisis nec pretium sapien tincidunt. Nullam ut massa eget eros posuere venenatis quis a turpis. Integer fringilla nisi id diam mollis sed pulvinar elit auctor.
Quisque eget ipsum lacus. Suspendisse rutrum tempus quam vel luctus. Proin mattis, nisi sed fringilla cursus, justo dui euismod mauris, a porttitor nunc enim id mauris. Fusce ut lectus vel tortor volutpat pellentesque a a dolor. Donec id molestie neque. Vivamus turpis nunc, lacinia non vulputate quis, ornare id ligula. Integer ac mauris ut diam dapibus vestibulum in id velit.
Sed consequat eleifend leo vel volutpat. Mauris eleifend, arcu id posuere imperdiet, orci risus blandit libero, non ultrices est metus in nulla. Vestibulum tempor venenatis tempor. Ut scelerisque, diam ut rutrum pellentesque, erat elit commodo felis, id tincidunt eros sem id dolor. Vestibulum ut velit mauris. Curabitur elit urna, blandit eget ullamcorper a, sodales eget lectus. Vivamus at quam vel urna feugiat faucibus. Mauris non nulla ut elit facilisis vehicula. Nullam et augue massa. Suspendisse bibendum diam quis tortor porttitor auctor. Donec sit amet neque nec odio suscipit adipiscing id nec eros. Nam lacinia cursus felis, at placerat diam interdum in. Suspendisse convallis tortor ac nibh luctus at blandit metus commodo. Fusce tortor arcu, semper id fringilla et, luctus viverra mauris. Curabitur feugiat, nisi quis venenatis accumsan, orci ante rutrum lectus, eu consectetur ligula orci vel justo. Nam bibendum augue vel diam feugiat vestibulum.
Curabitur condimentum elementum diam, nec ultricies nibh pellentesque posuere. Curabitur rutrum tincidunt nibh a ultricies. Etiam viverra rhoncus nulla. Donec faucibus sem et mi pretium in venenatis turpis rhoncus. Curabitur in viverra purus. Donec a augue metus, quis sodales purus. Mauris quis felis metus. Vivamus ultrices elementum nibh, in tempor lorem vehicula sit amet. Donec congue accumsan dignissim. Praesent sit amet dictum sapien.
Vestibulum quis consectetur ante. Quisque malesuada felis eget magna sollicitudin nec sagittis enim tempus. Fusce semper, arcu eget pharetra feugiat, nisi nisi ultricies erat, vel hendrerit magna nisl eu ipsum. Cras euismod fermentum sapien quis ornare. In non volutpat nulla. Mauris id tempus quam. Curabitur facilisis, tellus a auctor blandit, nisi urna cursus mi, quis blandit ligula libero facilisis erat. Nam pretium, tortor non pretium pellentesque, sem turpis pharetra nisl, convallis lacinia ante metus non justo. Vivamus viverra magna sed tortor gravida porta quis vitae arcu. Duis congue ligula a felis interdum et aliquam tortor placerat. Nunc pellentesque convallis eros, et volutpat purus facilisis in.
que eget erat. Maecenas tincidunt justo id elit bibendum feugiat. Fusce eget justo a nibh pellentesque mollis elementum id dolor. Maecenas vulputate est id dui suscipit lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fermentum, velit in lobortis fermentum, dolor lacus faucibus tortor, at tristique lacus ante nec arcu. Donec magna nulla, condimentum eget ultricies ut, dictum in metus. Ut ullamcorper, tellus a pharetra blandit, lorem est molestie leo, a dapibus lacus dui et nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eu feugiat sem. Duis at quam nisl. Quisque vulputate eros quis diam facilisis nec pretium sapien tincidunt. Nullam ut massa eget eros posuere venenatis quis a turpis. Integer fringilla nisi id diam mollis sed pulvinar elit auctor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fermentum, velit in lobortis fermentum, dolor lacus faucibus tortor, at tristique lacus ante nec arcu. Donec magna nulla, condimentum eget ultricies ut, dictum in metus. Ut ullamcorper, tellus a pharetra blandit, lorem est molestie leo, a dapibus lacus dui et nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eu feugiat sem. Duis at quam nisl. Quisque vulputate eros quis diam facilisis nec pretium sapien tincidunt. Nullam ut massa eget eros posuere venenatis quis a turpis. Integer fringilla nisi id diam mollis sed pulvinar elit auctor.
Quisque eget ipsum lacus. Suspendisse rutrum tempus quam vel luctus. Proin mattis, nisi sed fringilla cursus, justo dui euismod mauris, a porttitor nunc enim id mauris. Fusce ut lectus vel tortor volutpat pellentesque a a dolor. Donec id molestie neque. Vivamus turpis nunc, lacinia non vulputate quis, ornare id ligula. Integer ac mauris ut diam dapibus vestibulum in id velit.
Sed consequat eleifend leo vel volutpat. Mauris eleifend, arcu id posuere imperdiet, orci risus blandit libero, non ultrices est metus in nulla. Vestibulum tempor venenatis tempor. Ut scelerisque, diam ut rutrum pellentesque, erat elit commodo felis, id tincidunt eros sem id dolor. Vestibulum ut velit mauris. Curabitur elit urna, blandit eget ullamcorper a, sodales eget lectus. Vivamus at quam vel urna feugiat faucibus. Mauris non nulla ut elit facilisis vehicula. Nullam et augue massa. Suspendisse bibendum diam quis tortor porttitor auctor. Donec sit amet neque nec odio suscipit adipiscing id nec eros. Nam lacinia cursus felis, at placerat diam interdum in. Suspendisse convallis tortor ac nibh luctus at blandit metus commodo. Fusce tortor arcu, semper id fringilla et, luctus viverra mauris. Curabitur feugiat, nisi quis venenatis accumsan, orci ante rutrum lectus, eu consectetur ligula orci vel justo. Nam bibendum augue vel diam feugiat vestibulum.
Curabitur condimentum elementum diam, nec ultricies nibh pellentesque posuere. Curabitur rutrum tincidunt nibh a ultricies. Etiam viverra rhoncus nulla. Donec faucibus sem et mi pretium in venenatis turpis rhoncus. Curabitur in viverra purus. Donec a augue metus, quis sodales purus. Mauris quis felis metus. Vivamus ultrices elementum nibh, in tempor lorem vehicula sit amet. Donec congue accumsan dignissim. Praesent sit amet dictum sapien.
Vestibulum quis consectetur ante. Quisque malesuada felis eget magna sollicitudin nec sagittis enim tempus. Fusce semper, arcu eget pharetra feugiat, nisi nisi ultricies erat, vel hendrerit magna nisl eu ipsum. Cras euismod fermentum sapien quis ornare. In non volutpat nulla. Mauris id tempus quam. Curabitur facilisis, tellus a auctor blandit, nisi urna cursus mi, quis blandit ligula libero facilisis erat. Nam pretium, tortor non pretium pellentesque, sem turpis pharetra nisl, convallis lacinia ante metus non justo. Vivamus viverra magna sed tortor gravida porta quis vitae arcu. Duis congue ligula a felis interdum et aliquam tortor placerat. Nunc pellentesque convallis eros, et volutpat purus facilisis in.
que eget erat. Maecenas tincidunt justo id elit bibendum feugiat. Fusce eget justo a nibh pellentesque mollis elementum id dolor. Maecenas vulputate est id dui suscipit lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fermentum, velit in lobortis fermentum, dolor lacus faucibus tortor, at tristique lacus ante nec arcu. Donec magna nulla, condimentum eget ultricies ut, dictum in metus. Ut ullamcorper, tellus a pharetra blandit, lorem est molestie leo, a dapibus lacus dui et nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eu feugiat sem. Duis at quam nisl. Quisque vulputate eros quis diam facilisis nec pretium sapien tincidunt. Nullam ut massa eget eros posuere venenatis quis a turpis. Integer fringilla nisi id diam mollis sed pulvinar elit auctor.-->
</footer>
</article>
<!-- Fermeture du contenu -->
</div><!-- Fermeture de Main -->
<footer id="pied_de_page">
<span id="powered_left">Powered by</span>
<span id="powered_right">Ishido</span>
</footer>
</div><!-- Fermeture de Page -->
</body>
</html>
Code CSS
/* Definition des 5 parties de la page */
/* Apparence souhaitee de la page */
/*
+----------------------------------------------------------------------------------+
| haut_de_page |
+--------------+-------------------------------------------------+-----------------+
| colonne_menu | | colonne_gadgets |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | contenu | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
+--------------+-------------------------------------------------+-----------------+
| pied_de_page |
+----------------------------------------------------------------------------------+
*/
*, html, body
{
margin: 0;
padding: 0;
font-size: 100%;
}
html, body
{
width: 100%;
height: 100%;
}
#page
{
position : relative;
left : 0;
top : 0;
height : 100%;
padding-bottom : 5%;
}
/* ---------------------------------------------------- [ HAUT DE PAGE ] ---------------------------------------------------- */
#haut_de_page
{
color : #fff;
background-color : purple;
text-align : center;
font-weight : bold;
font-size : 2em;
height : 5%;
}
#main
{
position: relative;
min-height: 100%;
padding-bottom : 5%;
}
/* ---------------------------------------------------- [ COLONNE MENU ] ---------------------------------------------------- */
#colonne_menu
{
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: #fbb;
height: 100%;
background-color : #0ff;
}
#logo
{
text-align : center;
}
/* ---------------------------------------------------- [ CONTENU ] ---------------------------------------------------- */
#contenu
{
position: absolute;
margin: 0 200px 0 200px;
background: #efe;
height: 100%;
background-color : #00f;
}
/* ---------------------------------------------------- [ COLONNE GADGETS ] ---------------------------------------------------- */
#colonne_gadgets
{
position: absolute;
top: 0px;
right: 0px;
width: 200px;
background-color : #f00;
height: 100%;
}
/* ---------------------------------------------------- [ PIED DE PAGE ] ---------------------------------------------------- */
#pied_de_page
{
position : absolute;
height : 5%;
text-align : center;
bottom : 0;
font-size : 1.5em;
background-color : #0f0;
}
/*
#powered_left
{
color : #000;
border : 2px solid #000;
border-width : 4px 2px 4px 4px;
font-weight : bold;
padding : 2px 2px 2px 2px;
margin : -4px;
}
#powered_right
{
color : #000;
border : 2px solid #000;
border-width : 4px 4px 4px 2px;
font-weight : bold;
padding : 2px 2px 2px 2px;
margin : -4px;
}
*/
