28182 sujets

CSS et mise en forme, CSS3

[Résolu] Problème entre le contenu qui ne contient pas le contenant :s

Bonjour tout le monde je fais un site et la mise en page est en css, mais je rencontre un problème dont je ne trouve pas la solution.

J'ai un cadre en image, donc en gros l'image pour le haut du cadre, l'image du centre qui doit se répéter en fonction du contenu et l'image du bas pour fermer le cadre.

Le problème en images

Ce que j'aimerai obtenir

A l'intérieur du centre, donc au centre, j'ai un lecteur flash, mais le centre reste tel quel, que faire ?

Pour info avec ce code ca marche bien sur IE mais pas Firefox ;(

Voici les sources :

index.php

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
	<div id="img_head">
		<div id="actualite"></div>
		<div id="entreprise"></div>
		<div id="institution"></div>
		<div id="apprenti"></div>
		<div id="logo"></div>
	</div>
</div>
<div id="centre_top"></div>
<div id="centre_center">
	<div id="conteneur">
		
		test<br /><br /><br />test<br /><br /><br />test
		
	</div>
</div>
<div id="centre_bottom"></div>	
</body>
</html>




style.css


body {
	margin-top:20px;
	margin-left: 0;
	margin-right: 0;
	font-family: verdana,sans-serif;
	font-size: 13px;
	word-spacing: 0pt;
	line-height: 1.5;
	background-color: #525866;
	color: #FFFFFF;
}

#header {
	width: 100%;
	height: 153px;
	background: url('image/fond_header.jpg');
}

#img_head {
	position: relative;
	width: 778px;
	height: 153px;
	margin-top: 0px;
	left: 50%;
	margin-left: -410px;
}

#actualite {
	position: relative;
	background: url('image/actualite.png');
	width: 113px;
	height: 153px;
	float: left;
	margin-right: 20px;
}

#entreprise {
	position: relative;
	background: url('image/entreprise.png');
	width: 113px;
	height: 153px;
	float: left;
	margin-right: 20px;
}

#institution {
	position: relative;
	background: url('image/institution.png');
	width: 113px;
	height: 153px;
	float: left;
	margin-right: 20px;
}

#apprenti {
	position: relative;
	background: url('image/apprenti.png');
	width: 113px;
	height: 153px;
	float: left;
	margin-right: 20px;
}

#logo {
	position: relative;
	background: url('image/logo.png');
	width: 167px;
	height: 153px;
	float: left;
	margin-left: 70px;
}

#centre_top {
	position: relative;
	left: 50%;
	width: 957px;
	margin-left: -478px;
	margin-top: 20px;
	height: 16px;
	background: url('image/centre_top.png');
}
#centre_center {
	position: relative;
	left: 50%;
	width: 957px;
	margin-left: -478px;
	margin-top: 0px;
	background: url('image/centre_center.png');
}
#centre_bottom {
	position: relative;
	left: 50%;
	width: 957px;
	margin-left: -478px;
	margin-top: 0px;
	height: 16px;
	background: url('image/centre_bottom.png');
}

#conteneur {
	width: 940px;
	margin-left: 7px;
}

#navig {
	width: 100%;
}

#video {	
	float : left;
	clear: both;
	width: 640px;
}

#divers {
	float:left;
	width: 210px;
}

#description {
	position: relative;
	width: 98%;
	margin: 0px 5px 0px 5px;
	text-align:justify;
}

Modifié par Ashraam (17 Aug 2008 - 14:29)
Ok finalement j'ai trouvé il fallait mettre un overflow: auto mais maintenant j'ai une scrollbar horizontale que sur Firefox alors que les cadre rendre normalement :s
Ashraam a écrit :
Ok finalement j'ai trouvé il fallait mettre un overflow: auto mais maintenant j'ai une scrollbar horizontale que sur Firefox alors que les cadre rendre normalement :s

Utilises overflow: hidden plutôt que overflow: auto pour empêcher le dépassement des flottants.

Et au passage, tu peux simplifier un peu la construction de ton cadre. En appliquant ce principe par exemple:
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
(Avec trois blocs imbriqués, ou bien un bloc global ayant l'image centrale en repeat-y, et deux blocs vides au début et à la fin. Dans ce dernier cas, le overflow: hidden ne devrait pas être nécessaire, il te suffira d'un clear: both sur le dernier bloc vide.)

(Et ne pas utiliser cette technique de centrage à base de positionnement relatif, left: 50% et marge négative, qui est un horreur. Utiliser les marges automatiques à la place).
Sujet clos
Aller à