div largeur doit être égale à la largeur du corps

J'ai un problème avec mon code CSS. Je veux le div .top & .header égal à la largeur du corps mais il limite à la largeur du conteneur. Je veux qu'il reste à l'intérieur de la classe des conteneurs.div largeur doit être égale à la largeur du corps

Merci,

body { 
    margin: 0; 
    padding: 0; 
    background: #000; 
    position: relative; 
} 
.container { 
    position: relative; 
    width: 910px; 
    height: 800px; 
    border: 1px solid #fff; 
    background: url(images/bg_home.jpg) no-repeat right; 
    margin: 0 auto; 
    z-index: 0; 
} 
.top { 
    background: #00112b; 
    width: 100%; 
    position: relative; 
    height: 49px; 
    z-index: 2; 
    opacity: 0.50; 
    filter: alpha(opacity=50); 
} 
.header { 
    position: relative; 
    left: 0; 
    opacity: 0.50; 
    filter: alpha(opacity=50); 
    background: #012e46; 
    width: 100%; 
    height: 99px; 
    z-index: 2; 
} 
.header .login { 
    background: red; 
    opacity: 100; 
    filter: alpha(opacity=100); 
    float: right; 
} 
.logo { 
    position: absolute; 
    top: 15px; 
    left: 0; 
    z-index: 3; 
}

html

<body> 
<div class="container"> 
<div class="top">&nbsp;</div> 
<div class="header"> 
    <table class="login"> 
      <tr> 
      <td>-- Schedule an appointment --</td> 
     </tr> 
     </table> 
</div> 
<div class="logo"><img src="images/logo.gif" width="204" height="120"/></div> 
</div> 
</body>

Source

2013-10-17 smz

Veuillez également partager votre HTML – Sachin

La largeur d'un élément peut être plus large que son contenu, mais il ne sera pas visible. Sauf si vous êtes satisfait d'une barre de défilement. – melancia

pouvez-vous http://jsfiddle.net/ s'il vous plaît? – yossico

Bien que vous ayez donné .top et .header une largeur de 100% - ils sont assis à l'intérieur du conteneur div qui a une largeur de 910px. Par conséquent, en disant .top largeur 100%, vous dites essentiellement .top largeur 910px parce que c'est un enfant de conteneur donc il va prendre sur ces styles.

Pourquoi le .top et .header doivent-ils s'asseoir à l'intérieur du conteneur? Si vous voulez qu'ils soient 100%, c'est-à-dire remplissez toute la fenêtre du navigateur, alors vous devriez les prendre à l'extérieur du conteneur div.

Bonne chance

Source

2013-10-17 08:10:41 user2889540

Vous aimez cette

s'il vous plaît removewidth:100%; pour below selector:

css

.top { 
    background: #00112b; 

    position: relative; 
    height: 49px; 
    z-index: 2; 
    opacity: 0.50; 
    filter: alpha(opacity=50); 
} 
.header { 
    position: relative; 
    left: 0; 
    opacity: 0.50; 
    filter: alpha(opacity=50); 
    background: #012e46; 

    height: 99px; 
    z-index: 2; 
}

Source

2013-10-17 08:11:21 falguni

Votre question contient aussi la réponse.

Je veux la div .top & .header égale à la largeur du corps

Cela pourrait se faire en ayant un attribut/propriété de width: 100%;

mais il limite à la largeur du conteneur

Ceci est dû au fait que le conteneur est le parent du chi. élément ld. Ce qui signifie que la largeur maximale de l'élément enfant est la largeur du parent.

Je veux qu'il reste à l'intérieur de la classe de conteneur.

Cela signifie que vous devrez attribuer au conteneur la propriété width: 100%.

Vous pouvez également résoudre ce problème en utilisant la propriété overflow, mais je suppose que ce n'est pas ce que vous voulez. http://www.w3schools.com/cssref/pr_pos_overflow.asp

Ce qui signifie ofcourse:

.container { 
    position: relative; 
    width: 100%; 
    height: 800px; 
    border: 1px solid #fff; 
    background: url(images/bg_home.jpg) no-repeat right; 
    margin: 0 auto; 
    z-index: 0; 
}

En outre, non lié à votre question, mais à votre CSS, vous avez une propriété de background qui charge une image et ne pas répéter.

Est-ce ce que vous voulez ou est-ce un motif? Dans le dernier cas, considérez le fait de faire une petite image pour répéter sur toute la page, ceci réduit le temps de chargement de la page Web.

Si la question était au sujet de votre background ne répondant pas à la largeur de la body, pensez à ajouter à la balise body au lieu de la balise container.

Source

2013-10-17 08:12:08 larssy1

div largeur doit être égale à la largeur du corps

Répondre

Questions connexes