Ignorer le texte ?

[Hells_Dark]

Voilà, j'ai un menu en float avec une taille de 20% et dès que je réduis la taille de ma fenêtre et que le texte devient trop gros pour le menu, celui-ci se retrouve sous le reste du site...

Pas très clair tout ça...

En fait je veux un peu ignorer le texte pour que le float continue à se réduire sans avoir de problème quand le texte est plus large que le menu

J'avoue que j'ai du mal à expliquer ça...

[ElMoustiko]

Tu peux utiliser overflow: hidden; pour ton texte mais on finira par ne plus voir ton texte du tout... ou bien utiliser min-width (gecko et opera) pour ne pas avoir une largeur inférieure à telle valeur. ou.... ???

[LaurentDenis]

Voilà, j'ai un menu en float avec une taille de 20% et dès que je réduis la taille de ma fenêtre et que le texte devient trop gros pour le menu, celui-ci se retrouve sous le reste du site...

C'est normal: float est fait pour ça.

En fait je veux un peu ignorer le texte pour que le float continue à se réduire sans avoir de problème quand le texte est plus large que le menu 

Un float dimensionné en % résoudra le problème, tant qu'il ne sera pas réduit en-dessous de la largeur du mot le plus long qu'il contient (mais c'est illisible longtemps avant).

[Hells_Dark]

Merci pour ces quelques explications...

Je dois avoir un autre problème alors... Mon menu passe en dessous bien avant que sa largeur n'atteigne la longueur du mot le plus long ! Les ensembles de mots du menu ne se divisent même pas ! ça passe direct en desous !

Voici ma feuille de style :

/********************************************************************************
****/
/******************************** CAPOEIRA STYLE CSS *********************************/
/********************************************************************************
****/

body {
font-family:"Trebuchet MS", verdana, sans-serif;
margin:0em;
margin-top:0.5em;
margin-bottom:0.5em;
font-size : 0.75em;
background : #DCE0DD;
}
.spacer {
border:0em;
clear:both;
margin:0em;
padding:0em;
width:0em;
}

/********************************************************************************
****/
/*************************************** LIENS ***************************************/
/********************************************************************************
****/



/********************************************************************************
****/
/************************************** STRUCTURE ************************************/
/********************************************************************************
****/

div#structure{
width : 95%;
border : 1px solid #CDCDCD;
margin :auto;
padding : 0em;
background : #FFF;
}

div#conteneur{
margin : 0em;
}

/********************************************************************************
****/
/************************************** CONTENU **************************************/
/********************************************************************************
****/

div#contenu {
float : left;
width : 55%;
padding : 0.5em 1.5em;
background : #FFF;
border-left : 1px dotted #DEDEDE;
border-right : 1px dotted #DEDEDE;
text-align : justify;
}
div#contenu ul{
list-style-type:circle;
padding-left : 1em;
}
div#contenu li{
margin-top : 0.5em; 
list-style-type:circle;
margin-top:0em;
margin-bottom:0em;
padding-top:0.2em;
padding-bottom:0.2em;
padding-left : 1em;
}
div#contenu li:hover{
background : #DEE;
}
div#contenu a{
color : #000;
text-decoration : none;
}
div#contenu a:hover{
color : #056;
}
div#contenu h1 {
font-size : 1.3em;
color : #E0611C;
}
div#contenu h2 { 
font-size : 1em;
color : #006688;
}

/********************************************************************************
****/
/*************************************** HEADER **************************************/
/********************************************************************************
****/

div#header {
height : 100px;
border-bottom : 1px solid #DEDEDE;
background : #FFF;
}

div#header img{
display : block;
background : url('./images/header.gif') repeat;
}

/********************************************************************************
****/
/************************************** FOOTER ***************************************/
/********************************************************************************
****/

div#footer {
border-top : 1px solid #DEDEDE;
background : #FFF;
font-size : 0.8em;
font-weight : bold;
padding-left : 1em;
padding-right : 1em;
}


/********************************************************************************
****/
/*************************************** MENUS ***************************************/
/********************************************************************************
****/

div#menu-gauche {
float: left;
width :20%;
margin : 0em;
padding : 0em;
text-align : left;
}
div#menu-gauche h1 { 
font-size : 1em;
}
div#menu-gauche ul{
margin : 0em;
}
div#menu-gauche li{
list-style-type:circle;
margin-top:0em;
margin-bottom:0em;
padding-top:0.2em;
padding-bottom:0.2em;
padding-left : 1em;
}
div#menu-gauche li:hover{
background : #DEE;
}
div#menu-gauche li a {
text-decoration : none;
color : #000;
}
div#menu-gauche li a:hover{
color : #056;
}
div#menu-gauche h1{
padding-left : 1em;
}

div#menu-droite {
float: left;
width : 20%;
margin : 0em;
padding : 0em;
text-align : left;
}
div#menu-droite h1 { 
font-size : 1em;
}
div#menu-droite ul{
margin : 0em;
}
div#menu-droite li{
list-style-type:circle;
margin-top:0em;
margin-bottom:0em;
padding-top:0.2em;
padding-bottom:0.2em;
padding-left : 1em;
}
div#menu-droite li:hover{
background : #DEE;
}
div#menu-droite li a {
text-decoration : none;
color : #000;
}
div#menu-droite li a:hover{
color : #056;
}
div#menu-droite h1{
padding-left : 1em;
}

/********************************************************************************
****/
/********************************************************************************
****/
/********************************************************************************
****/