Problème pour faire mon template

Wapaca
Les bases HTML/CSS

Bonjour je suis actuellement en train de faire un template pour faire le site de ma guilde mais malheureusement je bloque sur 2/3 truc car ça fait plus d'un an que je n'ai plus fais de css :s

Voici le code html :

<html >
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="design/default/style.css" />
</head>

    <body>
       <div id="top_bar">
            <div id="recherche">
                <form action="#" method="post">
                    <input type="text" name="recherche" id="recherche"/>
                </form>
            </div>

       </div>
        <div id="conteneur">
            <div id="header">
                <div id="panneaux"></div>
            </div>
            <div id="corps">
                <div id="menu">
                    <p>
                    dkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhj
                    </p>
                </div>
                <div id="contenu">
                    <p>
                    gdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhjdkfmghjkhfg
                    djhkjmfklg
                    hgjkgfjkhgkljhkljhjghlkjfgklhjfgjhklfgjhj
                    </p>
                </div>
            </div>
            <div id="footer">
            </div>
        </div>
    </body>

</html>

Le code css : 

body{
    background-color:#ECEB9B;
    width:1000px;
    margin:auto;
}
#conteneur{
-moz-box-shadow: 0px 0px 90px#000;
-webkit-box-shadow: 0px 0px 90px#000;
box-shadow-left: 0px 0px 90px#000;
margin-top:38px;
}
#top_bar {
    width:1000px;
    height:38px;
    background-color:#663403;
    color:#F5D799;
    font-size:11px;
    position:fixed;
    top:0px;
}
#recherche form{
    position:relative;
    top:8px;
    left:6px;
    border: 1px solid #BA9E5F;
    border-radius:50px;
    background-color:#ECEB9B;
    margin:0;
    padding:0;
    height:20px;
    width:167px;
}
#recherche input{
   padding-left:35px; paddin-right:20px;
   border-radius:50px;
   border:none;
   height:20px;
   width:167px;
   outline:none;
   background:url("image/button_recherche.png");
   background-repeat:no-repeat;
   position:relative;
   right:1px;
   color:#817F4E;
   text-shadow:1px 0px 0px #B9B875;
}
#recherche input:focus{
   width:217px;
   background-color:#F7F7D5;
   box-shadow:inset 0px 1px 1px #7A6234;
   color:#817F4E;
   height:22px;
   bottom:1px;
   text-shadow:1px 0px 0px #B9B875;
   transition:0.5s;
   -moz-transition:1s;
}
#header{
    background-color:#A7BC07;
    background-image:url("image/header.jpg");
    background-repeat:no-repeat;
    height:245px;
}
#panneaux{
    height:245px;
    width:385px;
    float:right;
    background-image:url("image/header_right.png");
    background-repeat:no-repeat;
}
#corps{
    padding-top:10px;
    background-color:white;
    width:100%;
    height:100%;
}
#menu{
    float:left;
    width:230px;
    margin-left:20px;
    border:1px solid green;
    padding:0;
    padding-right:1px;
    padding-top:10px;
    padding-bottom: 10px;
    height:100%; 
}
#contenu{
    display:block;
    margin-right:20px;
    float:right;
    border:1px solid red;
    width:690px;
    padding:0;
    padding-top:10px;
    padding-bottom: 10px;
    height:100%; 
}

Alors voici les problèmes actuelle :

  • Le bouton de recherche se décale de 1px vers le haut lorsque je focus le champs de recherche (c'est logique car en focus je décale de 1px vers le haut le champs mais du coup il me faudrait un moyen pour remettre l'image 1px en bas pour équilibrer).
  • Le background du corps ne descends pas jusqu'au bout du contenu et du menu
  • Le texte dépasse du menu.

Si quelqu'un à un ftp ou un truc pour archiver des fichiers gratuitement je peux foutre le .zip de ce que j'ai.

Merci d'avance pour vos réponses,
Wapaca.

13 réponses

slyvaan
Réponse acceptée

Bah c'est normal que ta div blanche ne descende pas, tu utilises des float: left et right, mais tu ne clear à aucun endroit ces float. Du coup, c'est mal interprété.
Tu as pour ca 2 solutions :

Soit tu fais une div comme ca : <div class="clear"></div> avec comme css : .clear { clear:both; } et tu la place après tes float.

Soit faut que tu clear avec la propriété after du container qui contient les floats.
Dans ton cas le container c'est #corps
Donc il faut que tu ajoutes le css suivant :

#corps:after {
    display:table;
    content:'';
    clear:both;
}

Et les float seront clear correctement. La seconde solution est à privilégier. Le display:table et content:'' sont importants à mettre, même si ça peut paraître bizarre, pour que le code soit interprété correctement par certains navigateurs.

Grafikart

Tu as un exemple online ?

Wapaca
Auteur

Salut,

Désolé pour le temps de réponse, j'étais occupé avec ma famille ces derniers jours.

Non je n'ai pas d'exemple online et je n'ai pas non plus d'hébergement actuellement pour pouvoir le mettre online mais je peux mettre l'archive du template en ligne si tu connais un hébergeur de fichier pas trop mal ou alors te l'envoyer sur skype ;)

Fiox91

Upload sa sur un ftp gratuit ^^

ps: petit conseil pour tes div, coupe les en trois partie, haut, millieu, bas ;)

du style:
<div id='haut'></div>
<div id='millieu'>
Ta zone texte
</div>
<div id='bas'></div>

(Pour le css c'est pareil que ton ancienne div je pense mais en 3x)

Comme sa si t'écris plus que la box normal sa l’agrandit ;)

Wapaca
Auteur

Ben le truc c'est que là je n'ai pas besoin d'avoir des fonds différents que pour le milieu, le fond du corps (menu + contenu) sera blanc, après pour le footer pareil je peux tricher en mettant un fond statique vu que je ne pense pas le modifier.

Mais de toute façon logiquement si je fais <div style="background:black;color:white;">Texte</div> logiquement le fond noir sera de la même hauteur que celle que prend le texte non ?

Fiox91

C'est une question de propreté après tu fais comme bon te le semble ;)

Leny

Fiox91 > s'il n'en a pas l'utilité, ajouté deux div, inutiles et vides de surcroit, c'est pas une "question de propreté", c'est juste l'inverse.
Un document HTML, c'est avant tout un contenu, structuré en balises.
Et, autant que faire se peut, il faut éviter d'ajouter des balises qui n'ont pas de rapport avec le contenu.
Les css ont assez évoluer ces dernières années pour ne plus avoir à recourir systématiquement à l'ajout de balises juste pour pouvoir s'en tirer au niveau des styles.

Eviter les balises vides et/ou inutiles dans l'HTML, c'est non seulement un gain de performance (c'est toujours ça de moins à charger et interpréter), et aussi un gain de temps à la relecture : si tu dois repasser sur ton code dans x mois pour une correction ou une nouvelle fonctionnalité, au plus ton code est simple (et bien commenté), au plus vite tu seras de retour "dans le bain" de ton projet.

Wapaca > On pourra beaucoup plus t'aider si tu peux mettre ton code en ligne sur un hébergeur, ce sera bien plus facile pour débugger. Mais pour répondre à ta petite question, oui, le fond noir sera de la même hauteur que le texte de ta div (en admettant que tu n'aies pas encore réglé de padding ou autres choses).

Wapaca
Auteur

OK ben je vais essayer de trouver un hébergeur d'ici ce soir ;) j'ai des contacts sur skype qui font des vendent des hébergements donc je pense qu'ils pourront m'en donner un pour héberger une page statique.

EDIT : Voici : http://dev.kokaelkiwi.eu/design_template/template.html

Wapaca
Auteur

up ça fait quand même 4 jours donc je pense que mon edit est passé inaperçu :s

xenos92

Voila le html :

<html >
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="design/default/style.css" />
</head>

    <body>
       <div id="top_bar">
            <div id="recherche">
                <form action="#" method="post">
                    <input type="text" name="recherche" id="recherche"/>
                </form>
            </div>

       </div>
        <div id="conteneur">
            <div id="header">
                <div id="panneaux"></div>
            </div>
            <div id="corps">
                <div id="menu">
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa sem, vehicula nec semper a, porttitor vitae nibh. Suspendisse tempor aliquam mi sit amet adipiscing. Maecenas gravida vehicula nisl ultricies laoreet. Morbi at purus in nulla volutpat fermentum. Vestibulum ligula enim, feugiat vitae molestie id, vulputate ac lectus. Phasellus aliquam mi a tellus ullamcorper sed egestas magna posuere. Curabitur sed enim nec neque aliquam semper. Nullam tincidunt tellus eget nibh accumsan consectetur a in lacus. Ut leo orci, fermentum non hendrerit vitae, rutrum quis tortor. Donec dapibus urna non enim pulvinar auctor. Mauris non dignissim turpis.
Duis id neque sagittis mauris commodo cursus. Nulla tincidunt, arcu et tincidunt interdum, ipsum elit rutrum quam, a consectetur massa justo sit amet magna. Quisque non tellus felis, at auctor enim. Nunc vitae ante et magna rutrum tincidunt at ut mi. Suspendisse laoreet posuere felis ac ultrices. Nulla nec fringilla ante. Praesent interdum faucibus enim, in euismod ante mollis sed. In metus nibh, luctus nec sodales sed, ultrices id ipsum. Suspendisse sed pretium nibh. Quisque ut lectus dolor, et semper enim. Curabitur dignissim rutrum mauris vitae bibendum.
Phasellus condimentum sollicitudin lacus. Curabitur ut imperdiet enim. Morbi dui elit, condimentum a placerat at, commodo in nunc. Aenean malesuada malesuada porta. Nulla massa nibh, pellentesque vitae hendrerit vitae, ullamcorper eget augue. Donec tristique molestie eros, in tempor sem imperdiet ac. Nulla congue vehicula mauris, a porta velit sollicitudin eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur ultrices quam et turpis iaculis malesuada. Vestibulum laoreet, ligula ac ultricies blandit, odio tellus egestas diam, vel pharetra nulla tortor eu leo. Duis et erat magna, nec lacinia neque. Duis eu neque nulla, vel malesuada ante. Integer non ligula sed nibh blandit malesuada nec sed felis.
Donec semper mauris sed ipsum accumsan eget mattis nisi blandit. Maecenas hendrerit turpis id diam feugiat ut fringilla quam semper. Donec commodo bibendum arcu, ut vulputate ligula auctor a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consequat odio in felis feugiat dapibus. Nulla a metus ligula. Vivamus est eros, tincidunt nec mollis eu, viverra id quam. Integer imperdiet laoreet tortor, at euismod odio sodales ut. In ut odio tortor. Proin elit massa, adipiscing nec dapibus vel, euismod nec ante. Maecenas sodales, dolor vitae vulputate convallis, ligula nisl porta eros, eu blandit leo quam ac nunc. Aliquam consequat scelerisque metus, eget interdum dui elementum eget. Aenean sit amet nisi nulla. Integer placerat erat vitae libero vehicula lobortis. Suspendisse sed mi arcu, eget mollis magna.
Pellentesque molestie rhoncus magna non ultrices. Ut dictum egestas ultricies. Aliquam blandit, justo eu dictum bibendum, purus felis fermentum enim, non tincidunt odio sapien vitae ipsum. Morbi a libero neque, vitae rhoncus dolor. Morbi sit amet lectus sapien, eget pulvinar velit. Integer at volutpat risus. Maecenas quis ipsum id erat sollicitudin feugiat. Nul </p>
                </div>
                <div id="contenu">
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa sem, vehicula nec semper a, porttitor vitae nibh. Suspendisse tempor aliquam mi sit amet adipiscing. Maecenas gravida vehicula nisl ultricies laoreet. Morbi at purus in nulla volutpat fermentum. Vestibulum ligula enim, feugiat vitae molestie id, vulputate ac lectus. Phasellus aliquam mi a tellus ullamcorper sed egestas magna posuere. Curabitur sed enim nec neque aliquam semper. Nullam tincidunt tellus eget nibh accumsan consectetur a in lacus. Ut leo orci, fermentum non hendrerit vitae, rutrum quis tortor. Donec dapibus urna non enim pulvinar auctor. Mauris non dignissim turpis.
Duis id neque sagittis mauris commodo cursus. Nulla tincidunt, arcu et tincidunt interdum, ipsum elit rutrum quam, a consectetur massa justo sit amet magna. Quisque non tellus felis, at auctor enim. Nunc vitae ante et magna rutrum tincidunt at ut mi. Suspendisse laoreet posuere felis ac ultrices. Nulla nec fringilla ante. Praesent interdum faucibus enim, in euismod ante mollis sed. In metus nibh, luctus nec sodales sed, ultrices id ipsum. Suspendisse sed pretium nibh. Quisque ut lectus dolor, et semper enim. Curabitur dignissim rutrum mauris vitae bibendum.
Phasellus condimentum sollicitudin lacus. Curabitur ut imperdiet enim. Morbi dui elit, condimentum a placerat at, commodo in nunc. Aenean malesuada malesuada porta. Nulla massa nibh, pellentesque vitae hendrerit vitae, ullamcorper eget augue. Donec tristique molestie eros, in tempor sem imperdiet ac. Nulla congue vehicula mauris, a porta velit sollicitudin eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur ultrices quam et turpis iaculis malesuada. Vestibulum laoreet, ligula ac ultricies blandit, odio tellus egestas diam, vel pharetra nulla tortor eu leo. Duis et erat magna, nec lacinia neque. Duis eu neque nulla, vel malesuada ante. Integer non ligula sed nibh blandit malesuada nec sed felis.
Donec semper mauris sed ipsum accumsan eget mattis nisi blandit. Maecenas hendrerit turpis id diam feugiat ut fringilla quam semper. Donec commodo bibendum arcu, ut vulputate ligula auctor a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consequat odio in felis feugiat dapibus. Nulla a metus ligula. Vivamus est eros, tincidunt nec mollis eu, viverra id quam. Integer imperdiet laoreet tortor, at euismod odio sodales ut. In ut odio tortor. Proin elit massa, adipiscing nec dapibus vel, euismod nec ante. Maecenas sodales, dolor vitae vulputate convallis, ligula nisl porta eros, eu blandit leo quam ac nunc. Aliquam consequat scelerisque metus, eget interdum dui elementum eget. Aenean sit amet nisi nulla. Integer placerat erat vitae libero vehicula lobortis. Suspendisse sed mi arcu, eget mollis magna.
Pellentesque molestie rhoncus magna non ultrices. Ut dictum egestas ultricies. Aliquam blandit, justo eu dictum bibendum, purus felis fermentum enim, non tincidunt odio sapien vitae ipsum. Morbi a libero neque, vitae rhoncus dolor. Morbi sit amet lectus sapien, eget pulvinar velit. Integer at volutpat risus. Maecenas quis ipsum id erat sollicitudin feugiat. Nul </p>
                </div>
            </div>
            <div id="footer">
            </div>
        </div>
    </body>

</html>

Voila le css : 

body{
    background-color:#ECEB9B;
    width:1000px;
    margin:auto;
}

#conteneur{
-moz-box-shadow: 0px 0px 90px#000;
-webkit-box-shadow: 0px 0px 90px#000;
box-shadow-left: 0px 0px 90px#000;
margin-top:38px;
}

#top_bar {
    width:1000px;
    height:38px;
    background-color:#663403;
    color:#F5D799;
    font-size:11px;
    position:fixed;
    top:0px;
}

#recherche form{
    position:relative;
    top:8px;
    left:6px;
    border: 1px solid #BA9E5F;
    border-radius:50px;
    background-color:#ECEB9B;
    margin:0;
    padding:0;
    height:20px;
    width:167px;
}

#recherche input{
   padding-left:35px; paddin-right:20px;
   border-radius:50px;
   border:none;
   height:20px;
   width:167px;
   outline:none;
   background:url("image/button_recherche.png");
   background-repeat:no-repeat;
   position:relative;
   right:1px;
   color:#817F4E;
   text-shadow:1px 0px 0px #B9B875;
}

#recherche input:focus{
   width:217px;
   background-color:#F7F7D5;
   box-shadow:inset 0px 1px 1px #7A6234;
   color:#817F4E;
   height:22px;
   bottom:1px;
   text-shadow:1px 0px 0px #B9B875;
   transition:0.5s;
   -moz-transition:1s;
}

#header{
    background-color:#A7BC07;
    background-image:url("image/header.jpg");
    background-repeat:no-repeat;
    height:245px;
}
#panneaux{
    height:245px;
    width:385px;
    float:right;
    background-image:url("image/header_right.png");
    background-repeat:no-repeat;
}

#corps{
    padding-top:10px;
    background-color:white;
    width:100%;
    height:100%;
    padding-bottom : 50px;
}
#menu{
    float:left;
    display:block;
    margin-left:20px;
    width:230px;
    border:1px solid green;
    padding:10px 10px 10px 10px;
    height:100%; 
}
#contenu{
    float:right;
    display:block;
    margin-right:20px;
    border:1px solid red;
    width:670px;
    padding:10px 10px 10px 10px;
    height : 100%;

}

Quand tu veux tester du contenu mets du lorem ipsum ou un paragraphe quelconque parce que toi tu mettais des chaines de caractères sans espaces ce qui fait qu'il interprète ça comme un mot et donc il ne peux pas le couper quand ça dépasse du contenu ...
et j'ai fais deux trois modifs dans le css ;)

Wapaca
Auteur

Ok merci je ne me souvenais plus du début "lorem ipsum" en faite du coup je ne trouvais plus le site pour faire des paragraphes.

Sinon merci ça a bien résolu le problème du texte qui dépasse mais malheureusement je n'arrive toujours pas à faire descendre le fond blanc jusqu'en bas du menu/contenu :/

Wapaca
Auteur

Hier soir j'ai fait quelques modifs et j'ai fais comme sur sdz avec

vertical-align:top;
display:inline-block;

Mais je vais quand même tester ta technique dès que je rentre de soirée comme ça je saurai comment réagissent des floats :)

slyvaan

Bizarre d'utiliser le inline-block pour utiliser avec des float, j'avais jamais utilisé cette technique, je testerai pour voir la différence.