28172 sujets

CSS et mise en forme, CSS3

Probleme avec width

Bonjour,

je dispose d'un menu latéral à gauche, d'un menu supérieur et d'une section de texte à droite. Mon menu latéral est en float, et la section de texte, à côté de mon menu latéral, a une largeur définie avec width, si je simule une résolution d'écran à 1024*768, eh bien ... ma section de texte passe en dessous de mon menu latéral.

Par contre en retirant mon menu supérieur, c'est bon, la section de texte reste bien à côté du menu latéral, quelque soit la résolution.

Avez vous une idée ?

voici mon code :
<body>
<div class="container">
<nav class="menu-superieur">
     
</nav>
 
   <nav class="menu-lateral">
 
    </nav>
   
    <section class="presentation">
        <p>Exemple de texte, Exemple de texte,Exemple de texte,Exemple de texte,Exemple de texte,Exemple de texte<br/>
        Exemple de texte,Exemple de texte,Exemple de texte,Exemple de texte,Exemple de texte,Exemple de texte,Exemple de texte<br/>
Exemple de texte,Exemple de texte,Exemple de texte,Exemple de texte,Exemple de texte,Exemple de texte,Exemple de texte,Exemple de texte,Exemple de texte     
        </p>
    </section>
</div>
     
</body>


et le css :
.container {
   margin: auto;
max-width: 1233px;
}
.menu-lateral
{
float:left;
background-color: #f3cccc;
height: 1000px;
width: 232px;
}
.presentation
{
margin-left: 281px;
text-align: justify;
overflow:auto;
width:800px;
}
 
.menu-superieur
{
background: #f3cccc;
height: 40px;
width: 1233px;
}
Hello !
Ta section.presentation et sa marge plus la largeur de ton .menu-lateral (800+281px + 232px = 1313px) sont supérieur à la largeur de leur parent .container (1233px) c'est pour cela que ton .presentation passe en dessous.
Si tu réduit ou enlève la margin-left il sera bien à coté du menu latéral.
Par ailleurs ton .container perd le flux à cause au menu latéral flottant, tu devrais donc appliquer un clearfix ou un overflow:hidden.
Voici une proposition, en espérant que ça te donne une piste sur ton problème :

.container {
   	margin: auto;
	max-width: 1233px;
	overflow: hidden;
}
.menu-lateral {
	float:left;
	background-color: #f3cccc;
	height: 1000px;
	width: 232px;
}
.presentation {
	text-align: justify;
	overflow:auto;
	width:800px;
	float: right; /* à droite du coup tu ne t'occupe pas de la marge */
}
 
.menu-superieur {
	background: #f3cccc;
	height: 40px;
	width: 1233px;
}

Modifié par pik_at (06 Jun 2014 - 11:30)
merci de ta réponse pik_at mais j'ai toujours le même souci malheureusement quand je passe par exemple en 1024*768 ...
Hello,
En effet je n'avais pas compris que tu voulais que ton site soit compatible sur mobile d'où ton max-width.
Du coup il y a plusieurs approches possibles,
Soit de partir sur des dimensions en % par exemple :

.container {
   	margin: auto;
	max-width: 1233px;
        min-width: 700px; /* par exemple */
        width: 100%;
	overflow: hidden;
}
.menu-lateral {
	float:left;
	background-color: #f3cccc;
	height: 1000px;
	width: 30%;
}
.presentation {
	text-align: justify;
	overflow:auto;
	width:70%;
	float: right; /* à droite du coup tu ne t'occupe pas de la marge */
}
 
.menu-superieur {
	background: #f3cccc;
	height: 40px;
	width: 100%;
}

Ça rentrera pour tes dimensions (iPad Smiley biggol ) l'inconvénient pourrait d'avoir justement les tailles en % alors que tu voudrais que le menu latérale garde une taille fixe par exemple.
Il faudra alors pencher vers les media-queries et adopter ton style pour que ton site soit responsive et d'adapter au cas par cas selon la largeur de ton navigateur, un plus d'infos cocernant les Media Queries en css : http://www.alsacreations.com/article/lire/930-css3-media-queries.html
Sujet clos
Aller à