28172 sujets

CSS et mise en forme, CSS3

Div contenante passant au-dessus d'une div contenue

Salut tout le monde, j'ai un gros soucis avec mon site (pourtant tout simple en apparence).

Voici le problème en image :

Firefox :
http://imagesup.org/miniatures11/1379241742-bugs.png
Opera :
http://imagesup.org/miniatures11/1379241854-bugs-o.png


J'ai donc dans l'ordre 2 problèmes + 1 lié intiment aux deux autres:
Le premier est un soucis de compatibilité. Sous opéra, je n'ai aucun problème avec le footer, sous firefox, j'ai la div à fond rouge (.container) qui vient passer au-dessus et empêcher l'affichage du fond de mon footer. Si je mets cette div en transparence, le footer apparaît correctement.

Le second soucis, vient de body qui apparaît en bas. Mon objectif est que le footer soit en BAS de la page, pas en bas -50 px...

Le troisième soucis dérive des deux autres, est manifestement un problème d'enchaînement de div. La div à fond rouge c'est donc .container. Elle vient s'insérer entre header et .content, là où j'ai l'ombre. Si je la mets en transparence, c'est la couleur body qui se met, si je la mets en couleur .content (ce qui fait le plus joli), c'est le footer qui n'apparaît plus sous firefox (voir bug 1).



Le code simplifié :


<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Accueil</title>
<link href="css/polices.css" rel="stylesheet" type="text/css">
<link href="css/global.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
 <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
</head>

<body>

<div class="container">
  <header>
  	<h1>Adeline Duterre</h1>
    <h2>Programmation / Illustration / Conception de jeux</h2>
  </header>
  <div class="content">
 	<div id='navigation'>
                  <img id='rosace' src='images/logo-site.png' alt='Logo' usemap="#map" />
                  <nav id='prog'><span class='interRosace' id='nav-1'>Programmation</span></nav>
                  <nav id='illus'><span class='interRosace' id='nav-2'>Illustration</span></nav>
                  <nav id='jeux'><span class='interRosace' id='nav-3'>Les Jeux de Lothi</span></nav>
                  <nav id='pres'><span class='interRosace' id='nav-4'>Qui suis-je ?</span></nav>
                  <nav id='contact'><span class='interRosace' id='nav-5'>Contactez-moi</span></nav>
                   <nav id='devis'><span class='interRosace' id='nav-6'>Devis</span></nav>
                           <map name="map"> <!--detail imagemap-->
                           </map>
 	</div>
  </div>
  <footer>
    <section id='f_contact'>
    	<h1>Contact</h1>
        <p>Adeline Duterre<br />
			Rue de Grimohaye 70/2<br />
			B-1300 Limal<br />
			Tel : 0032 10 603 240<br />
			aduterre@gmail.com</p>
    </section>
    <section id='f_mentions' role='contentinfo'>
    	<h1>Mentions légales</h1>
        <p>Adeline Duterre<br />
			TVA 0537.440.376<br />
			Rue de Grimohaye, 70/2 B-1300 Limal<br />
			ING - BE52 3770 3734 2209 <br />
			BIC : BBRUEBEBB</p>
    </section>
    <section id='f_sitemap'>
    	<h1>Sitemap</h1>
        <p><a href='programmation.php'>Programmation</a><br />
        <a href='illustration.php'>Illustration</a><br />
        <a href='presentation.php'>Pr&eacute;sentation</a><br />
        <a href='contacts.php'>Contact</a></p>
    </section>
  </footer>
</div>
</body>
	<script type='text/javascript' src='javascript/jquery.min.js'></script>
	<script type='text/javascript' src='javascript/accueil.js'></script>
</html>



Les codes css qui nous intéressent :


html {
  height: 100%;
}
body {
	font: 90%/1.4 "Linux", Arial, sans-serif;
	background-color: #0f0;
	margin: 0;
	padding: 0;
	color: #0f0;
	min-height:100%;
}
.container {
	width: 100%;
	min-width: 600px;
	background-color: #F00;
	height:100%;
	min-height:600px;
}
header {
	min-height:20%;
	background-color:#161c22;
	text-align:center;
	color:#95e6f0;
	box-shadow: 0px 4px 12px #6e858c;
}
.content {
	padding: 10px 0;
	width:100%;
	min-height:60%;
	text-align:center;
	background-color:#d4f9ff;
	color:#273034;
}
footer {
	background-color: #09111a;
	min-height:20%;
	color:#b9dee4;
	clear:both;
}
footer section
{
	height:100%;
	min-height:100%;
	float:left;
	width:32%;
	padding-left:10px;
	padding-top:10px;
}



Merci d'avance pour toute piste ^^
Modifié par Lothindil (15 Sep 2013 - 17:07)
Sujet clos
Aller à