28173 sujets

CSS et mise en forme, CSS3

Pb pour forcer un div à re-rentrer dans le le fux courant

Bonjour à tous

je suis en train de faire un site en div/css/ et sans tableaux et j'ai un pb inssoluble pour l'instant : je ne sais pas comment faire re-rentrer une div dans le flux courant de l'html.
Comme ça ne veut pas dire grand chose comme ça je vais une copie d'écran que je mets en pièce jointe avec le code de ma page et de la feuille de style.

Le pb est que ma div #pardessus (en rouge) devrait pouvoir être par dessus (en chevauchement) ses congénères #content1 et #content2 mais qu'elle ne le fait pas vraiment (en fait, la boite chevauche bien mais le contenu (texte de la boite pas du tout et je n'arrive pas à comprendre pourquoi. upload/6939-Image1.png

Si quelqu'un a une idée, grand merci d'avance


Code de la page :
------------------------

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans titre</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">

	<div id="blocknavhaut">blocknavhaut</div>
    <div id="blocknavleft">#blocknavleft</div>
    <div id="blockcontent">
    	<div id="breadcrumb">breadcrumb</div>
    	<div id="content1">content1</div>
        <div id="content2">content2</div>
        <div id="pardessus">pardessus</div>
   	</div><!-- fin content-->


</div><!-- fin conrtainer-->
<div id="footer">footer</div>


</body>
</html>




et le code de la css:


@charset "UTF-8";

body {
	padding:0px;
	margin:0px;
}

#container {
	background-color: #CCCCCC;
	height: 600px;
	width: 955px;
	border: 1px solid #666666;
	margin-top: 30px;
	margin-right: auto;
	margin-bottom: 00px;
	margin-left: auto;
	
}

#blocknavhaut {
	width:935px;
	height:120px;
	background-color:#acabab;
	margin:10px;
	/*border:1px solid #333333;*/
/*	padding:10px;*/

}

#blocknavleft {
	width:190px;
	height:450px;
	background-color:#acbbab;
	/*border:1px solid #333333;*/
	display:inline;
	float:left;
	margin: 0px 10px 10px 10px;
	
}

#blockcontent {
	width:735px;
	height:450px;
	background-color:#bcbbab;
	/*border:1px solid #333333;*/
	display:inline;
	float:left;
	margin: 0px 0px 10px 0px;
	
}

#breadcrumb {
	width: 717px;
	height: 30px;
	display:block;
	margin: 3px 10px 3px 10px;
	clear:both;
	background-color:#FF9900;
}

#content1 {
	width:255px;
	height:405px;
	background-color:#663300;
	display:inline;
	float:left;
	margin:10px 0px 0px 10px;
	
}

#content2 {
	width:255px;
	height:405px;
	background-color:#665500;
	display:inline;
	float:left;
	margin:10px 0px 0px 10px;
	clear:right;
	
}

#pardessus{
	width:150px;
	height:65px;
	display:block;
	z-index:6;
	position:relative;
	margin-left:50px;
	margin-top:150px;
	background-color:#FF0000;
	
	

}


#footer{
	width:955px;
	height: 33px;
	margin: 5px auto 5px auto;
	text-align:center;
	background-color:#999999;
	display:block;

}

Modifié par jvitre (14 Dec 2007 - 10:05)
Bonjour et bienvenue parmi nous,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour Hermann

vraiment désolé pour le code.
J'avais lu les recommandations pour les débutants mais j'ai complètement oublié de cliquer sur code pour la partie code.
Au temps pour moi !

Bon ceci dit j'ai fait un recherche avant pour voir si quelqu'un avait posté quelque chose de similaire mais apparemment pas.
Donc je suis toujours preneur d'un peu d'aide sur mon sujet...

Merci d'avance
Et bien, en mettant en absolute la div pardessus ton texte se colle bien dedans. Mais si tu teste sur ie6 tu verras que de toute façon ta <div> rouge est située à droite de tes deux contents.

Je te conseille donc de revoir un petit peu ceci.

Rude

EDIT : si je met ta <div> rouge à l'interieur de la boite Content 1 (en laissant la div rouge en relative), le boite est bien à l'interieur avec le texte dedans (sur opéra,FF et ie)
Modifié par ffwrude (14 Dec 2007 - 10:15)
Merci ffwrude !

j'avais trouvé cette solution entre temps.
Merci quand même.

Julien
Modifié par jvitre (14 Dec 2007 - 15:01)
jvitre a écrit :
Merci ffwrude !

j'avais trouvé cette solution entre temps.
Merci quand même.

Julien

J'en déduis que ton sujet est donc à considérer comme [Résolu] ? Smiley murf

Ceci dit, n'hésite pas à poster la réponse.
Ca pourra toujours servir à quelqu'un d'autre, sait-on jamais ! Smiley cligne
Sujet clos
Aller à