css problèmes avec parent et enfant, le contenu de fond mise en page correctement

Question

Je construis la section de contenu de mon site web, et je voulais faire un test pour m'assurer de pouvoir mettre les choses côte à côte en utilisant float: gauche, droite etc ... Sur mon site Web, j'ai pu obtenir deux boîtes l'une à côté de l'autre, mais le conteneur d'arrière-plan dans lequel les boîtes sont centrées sur 1000px et remplir tout l'arrière-plan du contenu. Une fois que vous regarderez mon site, vous comprendrez ... Je sais que le problème est dans mon css, s'il vous plaît aidez-moi. Le reste de mon site contenait un fond de 100% puis à l'intérieur j'ai fait des conteneurs de 1000px. Je ne sais pas pourquoi cela ne fonctionne pas maintenant parce que cela fonctionnait avec la bannière supérieure et la barre de menu. MERCI COMME TOUJOURS!

site:

http://www.nestudiosonline.com/test.php

html:

<div id="contentbackground"> 
    <div id="content"> 
    <div id="flashbanner"></div><div id="test"></div> 
    </div> 
    </div> 

css:

@charset "utf-8"; 

#contentbackground 
{ 
width:100%; 
height:auto; 
margin-top:0px; 
margin-left:0px; 
margin-bottom:0px; 
margin-right:0px; 
padding-top:0px; 
padding-left:0px; 
padding-bottom:0px; 
padding-right:0px; 
border:0 
} 

#content 
{ 
background-color:#FFF; 
/* for IE */ 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
filter:alpha(opacity=80); 
/* CSS3 standard */ 
opacity:.8; 
width:1000px; 
height:auto; 
margin-top:0px; 
margin-left:auto; 
margin-bottom:0px; 
margin-right:auto; 
padding-top:10px; 
padding-left:5px; 
padding-bottom:5px; 
padding-right:5px; 
border:solid; 
border-width:1px 
} 

#flashbanner 
{ 
float:left; 
display:inline; 
width:500px; 
height:200px; 
margin:0px; 
padding:0px; 
border:solid; 
border-width:1px 
} 

#test 
{ 
float:right; 
width:400px; 
height:200px; 
margin:0px; 
padding:0px; 
border:solid; 
border-width:1px 
} 

Answer 1

Je ne sais pas si je comprends bien, mais mettre overflow: hidden sur votre #content devrait faire tout est cool. EDIT: et aussi clear: both sur le même élément.

EDIT: J'ai appliqué ces modifications dans Firebug et cela semble fonctionner correctement.

Answer 2

D'abord ajouter overflow:hidden; pour #linksbackground et #content. Ensuite, vous devez comprendre que vous avez défini l'arrière-plan sur votre corps, donc ce comportement est logique. Pour réaliser ce que vous voulez, vous devez créer une div wrapper, sous la balise body, et la fermer avant la </body>. Donner une id #wrapper pour cette div et ajoutez les propriétés suivantes

#wrapper { 
    background: url("../images/olddkeshant3.jpg") no-repeat scroll 0 0 transparent; 
    margin: 0 auto; 
    width: 1000px; 
} 

puis retirer l'arrière-plan de la #bodybackground.

Pour positionner l'arrière-plan dans une position spécifique, vous pouvez modifier les valeurs 0 0 ci-dessus dans la propriété d'arrière-plan pour tout ce qui correspond à vos besoins.

Un pourcentage X aligne le% Point de X à travers (pour horizontal) ou vers le bas (pour vertical) de l'image avec le point X% à travers (pour horizontal) ou vers le bas (pour vertical) padding de l'élément boîte. Par exemple, avec une paire de valeurs de '0% 0%', le coin supérieur gauche de l'image est aligné sur le coin supérieur gauche de la zone de remplissage. Une paire de valeurs de '100% 100%' place le coin inférieur droit de l'image dans le coin inférieur droit de la zone de remplissage. Avec une paire de valeur de '14% 84% ', le point 14% à travers et 84% vers le bas de l'image doit être placé au point 14% et 84% le long de la boîte de rembourrage.

source: http://www.w3.org/TR/CSS2/colors.html#propdef-background-position