Suivez les fils RSS
 

Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • CSS2
  • PHP5 avanc�
  • Memento MySQL
  • Memento CSS 3
  • Memento XHTML
  • WordPress 3 100% pratique
  • jQuery et jQuery UI
Rechercher dans le sujet :
Forum
» CSS et mise en forme, CSS3
» [Résolu] Problème entre le contenu qui ne contient pas le contenant :s
Auteur
Ashraam
#
Citer
40 Posts
 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)
http://romain.bertolucci.free.fr/ 
^
Ashraam
#
Citer
40 Posts
 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
http://romain.bertolucci.free.fr/ 
^
fvsch
#
Citer
20100 Posts
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).
http://fvsch.com 
^
Ashraam
#
Citer
40 Posts
 merci ca marche nickel =)
http://romain.bertolucci.free.fr/ 
^
Heyoan
#
Citer
Modérateur
8101 Posts
Ashraam a écrit :
merci ca marche nickel =)
Tu considères que ce sujet est [Résolu] ? cligne
Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
Le sujet est clos.
Aller à