Bonjour,
Alors voilà j’ai un petit souci, j’ai ici une page, et je voudrais que ma baniére sur la gauche, descende automatiquement jusqu’à ma fin de page.
Autrement dit je voudrais avoir “plan du site” juste au dessus de ma partie “#endpage” et que toute la partie gauche qui forme un “trou” soit sur fond noir!!!
Voici le code html
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="global">
<div id="baner">
<h4>Menu</h4>
<p class="menu"><a href="Index.html">Acceuil</a></p>
<p class="menu"><a href="Historique.html">Historique</a></p>
<p class="menu"><a href="Essais.html">Les essais</a></p>
<p class="menu"><a href="Bombes.html">les diverses bombes</a></p>
<p class="E0"/>
<p class="menufin"><a href="Plan.html">Plan du site</a></p>
</div>
<div id="page">
<h1>L'arme Nucléaire</h1>
<h2>Présentation</h2>
<p class="text">L'arme nucléaire est une arme de destruction massive qui utilise l'énergie de l'atome, produite soit par la fission de noyaux atomiques lourds (uranium, plutonium dans le cas des bombes A), soit par la fusion de noyaux atomiques légers (hydrogène dans le cas des bombes H).</p>
<p class="text">Ses effets destructeurs, qui sont sans commune mesure avec ceux des « armes conventionnelles », sont non seulement dus au souffle et à l'augmentation de la température, comme pour les explosifs classiques, mais aussi aux rayonnements. L'énergie libérée par l'explosion s'exprime par équivalence avec celle dégagée par une tonne de TNT.</p>
<img src="Images/naga.gif"/ title="Nagasaki" alt="Image Nagasaki">
<p class="text">L'arme nucléaire a été utilisée opérationnellement deux fois durant la Seconde Guerre mondiale, par les États-Unis contre le Japon par les bombardements des villes d'Hiroshima et de Nagasaki (voir photo ci-jointe), entraînant plusieurs centaines de milliers de morts.</p>
<p class="text">En raison de sa puissance, l'arme nucléaire n'est généralement pas considérée comme une arme conventionnelle, mais comme une arme de dissuasion (politique de dissuasion nucléaire), visant à empêcher toute attaque majeure, qui serait sanctionnée par l'utilisation de cette arme. Inversement, l'impact psychologique potentiel d'une arme nucléaire en fait une cible de choix pour des mouvements ou états terroristes. Depuis que plusieurs pays se sont dotés plus ou moins rapidement de l'arme nucléaire, des accords internationaux visent à réduire l'arsenal nucléaire et à limiter la prolifération nucléaire.</p>
</div>
<div id="endpage">
<p class="E60"/>
</div>
</div>
</body>
</html>
et voici le code css:
/*Aspect General*/
body {
font-family:"Comic Sans MS";
background-image:url("../Images/Nuke raccords.jpg");
text-align:center;
margin:0;
padding:0;
}
a:link, a:visited {
text-decoration:none;
color:#FFCC00
}
a:hover {
text-decoration:underline;
color:#FF9900
}
#global {
width:960px;
position:relative;
padding:0;
margin:16px auto 0 auto;
background-color:#000000;
}
#baner {
width:111px;
position:relative;
float:left;
background-color:black;
border-top:#0000FF solid 8px;
border-left:#0000FF solid 8px;
border-right:#00CC00 solid 1px;
padding:16px 0 0 0;
min-height:100%
}
#page {
width:832px;
position:relative;
float:right;
background-color:black;
border-top:#0000FF solid 8px;
border-right:#0000FF solid 8px;
padding:16px 0 0 0;
}
#endpage {
width:944px;
background-color:black;
border-bottom:#0000FF solid 8px;
border-right:#0000FF solid 8px;
border-left:#0000FF solid 8px;
float:left;
}
/*Aspect texte*/
p,h1,h2,h3,h4,h5,h6 {
color:white;
margin:0;
padding:0;
}
h1,h2,h3,h4 {
margin-bottom:15px;
}
h1 {
text-decoration:underline;
color:#CC0000;
}
h3 {
text-align:left;
text-decoration:underline;
color:#6666CC;
margin:32px 0 16px 16px;
}
p.text:first-line{
font-variant:small-caps;
}
.menu {
margin-bottom:5px;
}
.menufin {
padding-bottom:8px
}
.text {
text-align:left;
margin-bottom:12px;
padding:0 8px 0 8px;
}
/*Images*/
img {
float:right;
margin:0 16px 0 16px;
}
/*Espacements*/
p.E60 {
margin-bottom:60px;
}
p.E600 {
}
Merci d’avance pour votre aide!!
Edité le 22/01/2008 à 14:21
