18041 sujets

Questions générales et questions de débutants

[Résolu] Div en largeur 100%

bonjour à tous,

je travail à partir d'un template, et il y a un problème avec le header qui est en 100% de largeur.
Quand j'affiche la page, pas de problème il prend bien toute la largeur, par contre si la page affiche un scroll bar horizontal et que je vais vers la droite de la page, la couleur de fond du header ne s'affiche pas sur la droite de la page..il prend uniquement la largeur de la page affichée au départ...

Je ne sais pas si je ne suis pas bien reveillée, ou bien si c'est courant et qu'il y a une astuce...

J'espère avoir été claire, et ne pas avoir posé une question trop bête Smiley ohwell
a écrit :
si la page affiche un scroll bar horizontal


Il faut vraiment éviter que cela n'arrive autant que faire se peut.
Alors le scroll barre n est pas dans la page web, elle apparaît en fonction de la taille de la fenêtre du navigateur..donc je ne peux pas gérer cet aspect..
magali_infographiste a écrit :
je ne peux pas gérer cet aspect..

Amis du support papier bienvenue dans le monde web.

Tu peux quand-même appliquer à l’élément qui dépasse un max-width:100% (un peu sioux sur ie6) ou à la yvan le terrible html{overflow-x:hidden}
de toute façon sans un lien pour avoir le code sous les yeux c’est un peu comme si je te demandais où j’ai pommé mes clés ce matin.
Voici une partie du HTML :
<!-- HEADER -->
	<div id="header-fond">
    	<div id="header">
        	<a href="index.html"><img class="logo-h" src="img/logo_header.png" alt="logo" /></a>
            <div id="rappel-gratuit">
                <p class="rappel">Rappel gratuit</p>
                <form class="form-rappel">
                	<table>
                        <tr><td> <input type="text" name="nom" class="champs" value="Votre nom"
                	onFocus="if(this.value=='Votre nom')this.value=''" 
                	onBlur="if(this.value=='')this.value='Votre nom'"/></td>
                        
                       
                        <td>   <input type="text" name="numéro" class="champs" value="Votre numéro de téléphone"
                	onFocus="if(this.value=='Votre numéro de téléphone')this.value=''" 
                	onBlur="if(this.value=='')this.value='Votre numéro de téléphone'"/></td>
                        
                      <td><input type="submit" class="bouton" value="" /></td></tr>
                    </table>
                </form>
             </div>
          <img class="tel" src="img/telephone.png" alt="Téléphone" />
        </div>    	
    </div>


et le CSS :


body {
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	color:#FFFFFF;
	width: 100%;
}
#global {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align:left;
	font-size:1.2em;
}

global #header-fond{

	height:140px;
	width:100%;
	background-color:#e3dcda;
	
}

#header{
	width:955px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
}


et un aperçu du problème : upload/42755-Capturedec.png
Salut Smiley smile
Sur ta div #header-fond rajoute une ligne du genre:
min-width:960px

À toi d'adapter en fonction de la largeur minimale que tu veux appliquer à ton site.

Après si tu veux vraiment quelque chose qui s'adapte à toutes les tailles de fenêtres il faut aller voir du coté du responsive.
en fait je souhaite que le fond s'adapte à la largeur de l'écran mais pas la zone d'information, je me plongerais dans le responsive complet une autre fois Smiley smile

est ce que la sémantique de ce code comme base est bonne :

<body>
<div id="header_fond">
    <div class="global">
    	<div id="logo"></div>
    </div>
</div>
<div id="slider_fond">
    <div class="global">
    	<div id="slider"></div>
    </div>
    
<div id="footer_fond">
    <div class="global">
    	<div id="contenu_footer"></div>
    </div>


</body>


* {
	margin: 0; /*aucune marge par défaut*/
	padding: 0; /*aucune marge intérieur par défaut*/
	border: 0; /*aucun contour par défaut*/
	outline: 0; /*pas de pointillés sur les liens*/
}
body {
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	color: #3F0;
	background-color:#0F0;
}

#header_fond {
	height: 140px;
	background-color:#60C;
}

#slider_fond {
	height: 310px;
	background-color: #F06;
}

.global {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	text-align:left;
	font-size:1.2em;
}


ainsi les div parentes sont de largeur de base en 100%, et la class global me permet d'avoir une meme largeur pour tout mes contenus... Smiley sweatdrop
Effectivement avec min-width:960px il n'y a plus le problème...je comprends pas trop pourquoi il faut rajouter une largeur minimal, enfin si peut être...mais ce n'est pas grave Smiley ohwell

Merci beaucoup !
Content que ton problème soit solutionné. Smiley cligne

Dans ton code html, au lieu d'écrire:

<div class="global">
     <div id="contenu_footer"></div>
</div>

Tu peux écrire:
<div id="contenu_footer" class="global"></div>


Ça t'enlèves plusieurs ligne et ça fait le même travail. Smiley smile
Sujet clos
Aller à