28172 sujets

CSS et mise en forme, CSS3

[Résolu] Blocs div imbriqués, superposition des fonds

Bonjour à tous,
premier message sur alsaCréations ! Smiley biggrin

Je rencontre un problème que je ne parviens pas à résoudre : j'ai des div imbriqués ; au div parent (#main) j'applique un background, j'en applique également un au div enfant (#content). Je voudrais que la taille du div parent (et donc son background) s'étire en hauteur quand la quantité de contenu augmente dans le div enfant. Actuellement le div parent a une hauteur ridicule (70px) et je suis obligé de le forcer avec un min-height ; l'ennui c'est que si mon div enfant dépasse le min-height, le div parent ne suis pas.
Voici mon code:


<div id="main">
	<div id="menuOnglets">
	</div>
			
	<hr />
				
	<div id="content">
		<div class="text">
		</div>
		
		<div class="logo">
		</div>
	</div>	
</div>




#main{
background-color: #434037;
min-height: 500px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px 10px 10px 10px;
}

#content{
clear: both;
min-height: 355px;
width: 940px;
margin : auto;
margin-left: 15px;
padding-bottom: 20px;
padding-top: 20px;
margin-top: -22px;
background: #929493;
position: absolute;
z-index: 2;
border-radius: 0px 10px 10px 10px;
-moz-border-radius: 0px 10px 10px 10px;
-webkit-border-radius: 0px 10px 10px 10px;
-khtml-border-radius: 0px 10px 10px 10px;
}


merci d'avance
Modifié par Pixys (14 Feb 2010 - 13:16)
Salut,

Pour qu'il y ait une solution à ton problème, encore faut-il qu'il y ait un problème clairement exposé, ce qui n'est pas le cas de ton sujet. Il serait en effet bon que tu mettes toutes les chances de ton côté pour que nous comprenions ton problème, et que nous puissions t'y apporter une ou plusieurs solutions.

Dans l'ordre de priorité, tu peux nous fournir :
1. un descriptif très précis de ton problème, impératif pour focaliser notre recherche dans le bons sens.
2. un lien vers une page en ligne, qui permet de constater ce problème par nous même, ne nécessitant parfois pas d'autres informations.
3. l'intégralité du code html et css produit dans le navigateur (et pas seulement des extraits, car le problème se situe parfois ailleurs dans le code).
4. des schémas ou captures d'écran.

La rapidité d'obtention de la réponse dépendra de la qualité les informations que tu nous fourniras.

Bonne chance à toi. Smiley cligne
La vache, j'ai rarement vu un modérateur aussi rapide Smiley smile

Je ne peux malheureusement pas vous fournir de liens mais voici une capture de ce que je voudrais obtenir : upload/27035-capture1.png

Le contenu de l'onglet "accueil du site" est susceptible de varier, donc de s'allonger en hauteur.
Je voudrais que le fond noir s'allonge en même temps que "accueil du site"

Voici tout le code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
	<head>
	</head>

	<body>
		<div id="header">
			<div id="headerContent">
				<a href="http://www.ibconsultingservice.fr"><img src="squelettes/images.jpg" alt="Inseec Business Consulting Service" title="IBCS" /></a> 	
			</div>		   	
		</div>
		<div id="main">
			<div id="menuOnglets">
				<ul>
					<li id="actif"><h2><span>accueil du site</span></h2></li>
					<li><a href="spip.php?rubrique7"><span>Présentation</span></a></li>
					<li><a href="spip.php?rubrique8"><span>Les Prestations</span></a></li>
					<li><a href="spip.php?rubrique9"><span>Nos Atouts</span></a></li>
					<li><a href="spip.php?article1"><span>Contact</span></a></li>
				</ul>
			</div>
			<hr />
			<div id="content">
				<div class="text">
					<h3><a href="spip.php?article3" rel="bookmark">Édito</a></h3>
					<span class="published" title="2010-02-12T11:16:27Z">12 février 2010</span>
					<p>* Lorem ipsum dolor sit amet, consectetur adipiscing elit. * Aliquam viverra adipiscing erat, 
					quis tristique mauris consectetur id. * Maecenas eleifend rhoncus ipsum, in semper nulla posuere vitae. 
					* Etiam fringilla commodo mauris, nec semper tortor commodo a. * Morbi scelerisque metus ac nisi viverra 
					ut adipiscing ipsum adipiscing. * Donec commodo dolor ac mi hendrerit sed pretium leo lobortis.
					* Donec eget lacus in risus facilisis pharetra. * Donec eleifend turpis sit amet velit (...)</p>
				</div>
				<div class="logo">
				</div>														
			</div>		
		</div>
	</body>
</html>




html{
background-color: #cae0f7;
}

#main{
width: 970px;
margin: auto;
}

#header{
height: 60px;
}

#main{
background-color: #434037;
min-height: 500px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px 10px 10px 10px;
}

/*
### Menu a onglets ###
*/
#menuOnglets {
overflow: hidden;
margin-left: 14px;
}

#menuOnglets ul {
float: left;
margin-top: 16px;
margin-right: 16px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
list-style: none;
}
#menuOnglets ul li {
float: left;
text-align: center;
margin-left: 1px;
}
#menuOnglets ul li a {
float: left;
text-decoration: none;
font-family: Helvetica;
font-size: 100%;
letter-spacing: 1px;
padding-left: 10px;
background-image: url("../images/leftCorner.png");
background-position: 0% 0%;
background-repeat: no-repeat;
}
#menuOnglets ul li#actif {
float: left;
text-decoration: none;
font-family: Helvetica;
font-size: 100%;
letter-spacing: 1px;
padding-left: 10px;
background-image: url("../images/leftCorner.png");
background-position: 0% -250px;
background-repeat: no-repeat;
}
#menuOnglets ul li a span {
float: left;
width: 160px;
padding-top: 12px;
padding-right: 10px;
padding-bottom: 16px;
padding-left: 0px;
background-image: url("../images/rightCorner.png");
background-position: 100% 0%;
background-repeat: no-repeat;
color: #434037;
}
#menuOnglets ul li#actif span {
float: left;
width: 160px;
padding-top: 12px;
padding-right: 10px;
padding-bottom: 16px;
padding-left: 0px;
background-image: url("../images/rightCorner.png");
background-position: 100% -250px;
background-repeat: no-repeat;
color: #cae0f7;
}

#menuOnglets ul li a:hover span {
text-decoration: underline;
}

hr{
clear: both;
visibility: hidden;
}

#content{
clear: both;
min-height: 355px;
width: 940px;
margin : auto;
margin-left: 15px;
padding-bottom: 20px;
padding-top: 20px;
margin-top: -22px;
background: #929493;
position: absolute;
z-index: 2;
border-radius: 0px 10px 10px 10px;
-moz-border-radius: 0px 10px 10px 10px;
-webkit-border-radius: 0px 10px 10px 10px;
-khtml-border-radius: 0px 10px 10px 10px;
}

#content .text{
float: left;
width: 54%;
padding: 20px 0 0 0;
margin: 0 0 0 20px;
text-align: justify;
}

#content .logo{
float: right;
width: 40%;
background: url("../images/logoIBCS-v2.png") no-repeat left;
min-height: 365px;
}


Merci pour votre aide.
Modifié par Pixys (14 Feb 2010 - 12:50)
Hello Pixys et bienvenue,

ça ne peut pas fonctionner avec un positionnement absolu de #content qui sort l'élément du flux. D'ailleurs ce positionnement est inutile ici de même que le HR qui oblige ensuite le margin-top négatif ou le z-index.

En supprimant ce positionnement et en rajoutant un overflow:hidden sur DIV .text pour éviter le dépassement des flottants il ne devrait plus rester grand chose à faire pour que ça fonctionne tout seul.

(Re)lire le Guide de survie du positionnement CSS.
Merci, merci, merci !
ça fonctionne parfaitement, je n'ai plus que quelques ajustements à faire.
je vais relire le guide du positionnement.

Bon dimanche à tous.
Sujet clos
Aller à