Bonjour. J'ai trouvé la réponse à mon problême dans le tuto : bloc de mêmes hauteurs. Le conteneur me permet donc d'avoir le menu qui semble s'étirer lorsque j'allonge le corps. Cependant, je voudrais que mon pied de page se retrouve sous le conteneur car je n'aime pas la présentation quand il reste dans le conteneur.
Dans le fichier html de ma page, j'exclue donc le pied de page du conteneur. Le problême qui apparait alors est que le pied de page se "cache" derriere le conteneur et refuse de se mettre en bas de la page.
Je rajoute ici mon code html et le CSS, par contre, rigolez pas, c'est qu'un essai, alors le design est assez moche mais c'est juste pour se faire la main
Je débute.
J'ai nommé le CSS : csskropage2.css ( vous l'avez surement deviné )
Merci ALex
Pour résumer, le conteneur doit s'arréter soit sous le Corps, soit sous le menu ( ici c'est le corps ) tout en laissant le pied de page s'afficher sous le conteneur. C'est possible ? Chez moi le pied disparait...
Et désolé
Fichier html
Fichier css
Merci
Je viens de rectifier un peu, ça me parait rentrer dans les regles, non ?
Modifié par AL3xKro3 (04 Oct 2005 - 23:50)
Dans le fichier html de ma page, j'exclue donc le pied de page du conteneur. Le problême qui apparait alors est que le pied de page se "cache" derriere le conteneur et refuse de se mettre en bas de la page.
Je rajoute ici mon code html et le CSS, par contre, rigolez pas, c'est qu'un essai, alors le design est assez moche mais c'est juste pour se faire la main
Je débute. J'ai nommé le CSS : csskropage2.css ( vous l'avez surement deviné
) Merci ALex
Pour résumer, le conteneur doit s'arréter soit sous le Corps, soit sous le menu ( ici c'est le corps ) tout en laissant le pied de page s'afficher sous le conteneur. C'est possible ? Chez moi le pied disparait...
Et désolé
Fichier html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>News !</title>
<link rel="stylesheet" media="screen" type="text/css" title="cssKro" href="csskropage2.css" />
</head>
<body>
<div id="banniere">
<!-- Bannière -->
</div>
<div id="header">
.:: <a href="krohtml.html">Accueil</a> ::. .:: <a href="page2.html">News</a> ::. .:: Forum ::.
</div>
<div id="conteneur">
<div id="menu"> <!-- Là c'est le menu à gauche en haut-->
<div class="element_menu">
<h4>Web indispensable</h4>
<ul>
<li><a href="http://www.macbidouille.com">MacBidouille</a></li>
<li><a href="http://www.xboxlive.fr">XboxLive France</a></li>
<li><a href="http://www.Nofrag.com">NoFrag</a></li>
<li><a href="http://zbom.free.fr">Zbom</a></li>
<li><a href="http://www.jofission.net">Jofission</a></li>
<li><a href="http://www.siteduzero.com">Site du Zéro</a></li>
<li><a href="http://www.s2mai-2005.tchatcheblog.com">Blog MAI par Grissom</a></li>
</ul>
</div>
<!-- Mise en place du second menu -->
<div class="element_menu">
<h4>Liens du monde</h4>
<ul>
<li><a href="http://www.nouvelobs.com">Infos en continu</a></li>
<li><a href="http://www.fbi.gov">FBI in the place</a></li>
<ul>
</div>
<!-- Mise en place troisième menu -->
<div class="element_menu">
<h4>Membres Officiels Kro</h4>
<ul>
<li>AL3xKro</li>
<li>Tosch</li>
<li>Poussin</li>
<li>Grissom</li>
<li>Philou</li>
<li>Brian Kiss</li>
<li>Kirikou</li>
<li>Babar</li>
<li>Lamine</li>
<li>Marie Lou ?</li>
</ul>
</div>
</div>
<div id="corps">
<div id="presentation_news">
<h3>News Kro !!</h3>
<h5>Cette page est censée vous appartenir pour que chacun puisse publier des infos, billets d'humeur ou anecdotes mais pour cela, il va falloir que je me mette au PHP.. Donc ça attendra. En attendant, je me ferai le relais et je choisirai ce qu'il y aura à publier.<br />
Et de toutes façons, c'est MON site ! [cligne]
</h5>
</div>
<div class="live">
<h4> :: News Xbox 360 ::</h4>
<p>Voila, pour se faire la main, je vais commencer par parler de choses que je connais.</p>
<p>La prochaine Xbox va lancer le bal des consoles de "nouvelles générations". Normalement à partir du 2 décembre on devrait pouvoir s'adonner à desz jeux dépassant tous les standards actuels.. Chose fortement possible à condition de disposer d'un budget très très large.. <br />
Je vous présente donc la Xbox 360. </p>
<p>La console sera proposée sous la forme de 2 packs bien différents au niveau contenu. A part si vous ne souhaitez par tirer parti à fond de votre console, je ne vais parler que du pack premium. Il coute 400 € et comporte la console, une manette wireless ( sans fil Greg [cligne] ) un casque, le disque dur, cable HD... Enfin, il est complet. </p>
</div>
<div class="web">
<h4>Jofission.net</h4>
Salut
<p>Je souhaite vous parler d'un site qui me tient assez à coeur parce qu'en plus d'être intéressant, j'ai la possibilité de poster ce que je veux. Ça intéresse peut être pas la "majorité" des lecteurs, vu qu'ils sont plutôt pro-pc mais au moins, ça parle dans les commentaires.
<br /><br />
Ce site est tenu par 2 mecs, Jofission & CoolRod, ma foi forts sympathiques, ainsi qu'une certaine Jaguar !! A vous de la trouver [cligne]<br />
Etant donné la pauvreté de mon site, je vous serai gré de ne pas dire comment vous vous êtes retrouvés chez eux, merci !! <br />
Ceci étant, je crois qu'ils ont trouvés leur créneau donc n'hésitez pas à passer les voir, ils en seront content. En plus, leurs soeurs sont plutôt jolies !! <br />See you AL3x
</div>
</div>
<div id="pied_de_page"><br />
<p>Copyright "Site officiel Labellisé - Kro & Associates." 2005, tous droits réservés</p>
</div>
</div>
Fichier css
body
{
width: 798px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/fondbody.png"); /* Insérer une image de fond, une image entiýre ou juste une "petite pour mosaýque" [cligne] */
}
#conteneur
{
position: absolute;
margin-top: 20px;
width: 100px;
}
/* Banniýre */
#banniere
{
width: 798;
height: 89px;
margin-repeat: no-repeat;
background-image: url("images/banniereprovisoire2.png");
background-repeat: no-repeat;
border: 1px solid black;
border-bottom: ;
}
/* L'en tete */
#header
{
height: 22px;
color: green;
background-color: white;
padding-top: 5px;
text-indent: 30px;
border: 1px solid black;
border-bottom:
}
#header a
{
color: red;
}
/* Le menu */
#menu
{
width: 139px;
float: left;
border: 1px solid black;
border-top: 0px;
border-bottom: 0;
background-color: #AAAABB;
position:absolute;
left: 0px;
}
.element_menu a
{
color: yellow;
}
.element_menu a:visited
{
color: maroon;
}
.element_menu h4
{
text-align: center;
}
.element_menu a:hover
{
color: green;
background-color: gray;
}
/* Le corps de la page */
#corps
{
margin-left: 140px;
border: 1px solid black;
border-top: 0;
padding: 10px;
}
#corps p
{
text-indent: 15px;
}
#presentation_news h5
{
text-indent: 20px;
}
#presentation_news h3
{
text-align: center;
}
.live h4
{
background-color: red;
text-align: center;
-moz-border-radius: 10px;
border-radius: 1em;
}
.web h4
{
background-color: orange;
text-align: center;
-moz-border-radius: 10px;
border-radius: 1em;
}
/* Le pied de page */
#pied_de_page
{
clear: both;
text-align: center;
}
a
{
text-decoration: none;
}
Merci
Je viens de rectifier un peu, ça me parait rentrer dans les regles, non ?
Modifié par AL3xKro3 (04 Oct 2005 - 23:50)