28220 sujets

CSS et mise en forme, CSS3

Encadré plusieurs blocs dans un seul et même bloc

Bonjour et Joyeuse Année,

Je pense que le titre est plus ou moins explicite, j'ajoute juste que les blocs que je voudrais "encapsuler" dans un seul et même bloc sont en position absolute et que vous pouvez avoir un exemple de ce que ça donne ici :Test

Je ne peux pas enlever les positions absolute car le menu déroulant fonctionne avec ce principe, il est tiré directement d'un tutoriel trouvé sur ce site.

Merci par avance.
La question est :

Est-il possible d'encadrer plusieurs blocs en position absolute avec un seul bloc afin de mettre un background blanc (par ex.)
Le problème c'est que j'ai déjà fait des tests en mettant le bloc qui contiendrait tous les blocs en position absolute et ça ne change absolument rien.

je vais mettre le code css ce sera plus simple :

	body {
		position: absolute;
		background: #EEE;
		left: 50%;
		margin-left: -350px;
		font-family: Tahoma;
		margin-top: 5px;
		z-index: 100;
		font-size:80%;
	}
	
	#main {
		width: 710px;
		/*height: 600px;*/
		position: absolute;
		z-index: 99;
		background: #FFF;
		border: 1px #000000 solid;
		padding: 5px;
	}
	
	#banniere {
		/*background: #000000;*/
		height: 120px;
		width: 700px;
		position: absolute;
		z-index: 98;
		background-image: url('../topbanner2.gif');
	}
	
	#banniere img {
		border: 1px solid #000000;
		/*width: 700px;*/
	}
	
	#connexion {
		position: absolute;
		z-index: 97;
		width: 270px;
		height: 100px;
		border: 1px solid #000000;
		/*text-align: center;*/
		top: 4px;
		left: 414px;
		padding: 5px;
		/*background: #FFF;*/
		
	}
	
	#connexion input{
		/*margin: 5px;*/
		/*background: #FFF;*/
		/*float: left;*/
		/*width: 100px;*/
	}
	
	#connexion td{
		margin-top:5px;
	}
	
	#contenu {
		top: 165px;
		position: absolute;
		z-index: 96;
		/*background: #FFF;*/
	}
		
	#affichage {
		width: 678px;		
		height: auto;
		min-height: 400px;
		background: #FFFFFF;
		border: 1px #000000 solid;
		padding: 10px 10px 10px 10px;
		color: #000000;
		/*margin-left: 30px;*/
		_height: 400px; // underscore hack uniquement interprété par IE Win
		
	}
	
	#affichage #client {
		width: 150px;
		height: 150px;
		border: solid 1px black;
		background: #CCC;
	}
	
	#affichage h1 {
		font-size: 100%;
		border: 2px solid #000000;
		background: #FAA42D;
		padding: 5px;
		margin-top: 12px;
		color: #000000;
	}
	
	#affichage p {
		border: 1px solid #000000;
		padding: 5px;
		font-size: 80%;
		margin-top: 0px;
		color: #000000;
	}
	
	#footer {
		width: 678px;
		border: solid 1px #000;
		top: 590px;
		padding: 10px;
		margin-top: 5px;
		background: #FFF;
	}
	
	#footer img {
		border: 1px solid #FFFF00;
	}
	
	a:link {color: #FFFF00; text-decoration: none;}   
	a:visited {color: #FFFF00; text-decoration: none;} 
	a:hover {color: #FFFF00; text-decoration: underline;}   
	a:active {color: #FFFF00; text-decoration: underline;}  
	
	
	dl, dt, dd, ul, li {
		margin: 0px;
		padding: 0px;
		list-style-type: none;
	}
	#menu {
		position: absolute; /* placement du menu, à modifier selon vos besoins */
		top: 129px;
		left: 75px;
		z-index:100;
		width: 100%; /* correction pour Opera */
	}
	#menu dl {
		float: left;
		width: 135px;
		margin: 0px;
	}
	#menu dt {
		cursor: pointer;
		text-align: center;
		font-weight: bold;
		/*background: #6EC5FF;*/
		/*border: 1px solid gray;*/
		margin: 0px;
	}
	#menu img {
		border: 1px solid black;
	}
	#menu dd {
		display: none;
		border: 1px solid gray;
	}
	#menu li {
		text-align: center;
		background: #339DFF;
	}
	#menu li a, #menu dt a {
		color: #000;
		text-decoration: none;
		display: block;
		height: 100%;
		border: 0 none;
	}
	#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
		background: #6EC5FF;
	}


et le code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>  
  <title>Eurinfi : Financement de matétiel informatique</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <link rel="stylesheet" type="text/css" href="css/eurinfistyle.css" />
  <script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

</head>
<body>
<div id="main">
		
		<div id="banniere">
			<div id="connexion">
				<br/>
				<center>
				<table cellpadding="0" cellspacing="1" width="270">
					<tr>
						<td align="center"><input class="case" type="text" name="Login" value="" size="15" /></td>
						<td align="center"><input class="case" type="password" name="Pwd" value="" size="15"/></td>
					</tr>
					<tr>
						<td colspan="2" align="left"><input type="checkbox" name="sesouviendre" value="CASE 1"> se souvenir</td>
					</tr>
					<tr>
						<td colspan="2" align="right"><a href=""><img src="seconnecter.gif" alt="connexion"/></a></td>
					</tr>
				</table>
				</center>
			</div>	
		</div>
		
		<div id="menu">
			<dl>			
				<dt onmouseover="javascript:montre('smenu1');"><img src="images/clientbutton.gif" alt="Espace Client"/></dt>
					<dd id="smenu1">
						<ul>
							<li><a href="#">Sous-Menu 1.1</a></li>
							<li><a href="#">Sous-Menu 1.2</a></li>
							<li><a href="#">Sous-Menu 1.3</a></li>
							<li><a href="#">Sous-Menu 1.4</a></li>
							<li><a href="#">Sous-Menu 1.5</a></li>
							<li><a href="#">Sous-Menu 1.6</a></li>
						</ul>
		
					</dd>
			</dl>
			
			
			<dl>	
				<dt onmouseover="javascript:montre();"><img src="images/partenairebutton.gif" alt="Espace Partenaire"/></dt>
			</dl>
		
			
			<dl>	
				<dt onmouseover="javascript:montre('smenu3');"><img src="images/infosbutton.gif" alt="Infos"/></dt>
					<dd id="smenu3">
						<ul>
							<li><a href="#">Sous-Menu 3.1</a></li>
							<li><a href="#">Sous-Menu 3.2</a></li>
							<li><a href="#">Sous-Menu 3.3</a></li>
							<li><a href="#">Sous-Menu 3.4</a></li>
							<li><a href="#">Sous-Menu 3.5</a></li>
						</ul>
					</dd>
			</dl>
			
			<dl>	
				<dt onmouseover="javascript:montre('smenu4');"><img src="images/contactbutton.gif" alt="Contact"/></dt>
		
					<dd id="smenu4">
						<ul>
							<li><a href="#">Sous-Menu 4.1</a></li>
							<li><a href="#">Sous-Menu 4.2</a></li>
							<li><a href="#">Sous-Menu 4.3</a></li>
						</ul>
					</dd>
			</dl>
			
		</div>

		<div id="contenu">
		
			<div id="affichage">
				<div id="client">
				</div>
				Pouet
			</div>
			<div id="footer">
				Pouet
			</div>
			
		</div>
</div>
</body>
</html>
Sujet clos
Aller à