28221 sujets

CSS et mise en forme, CSS3

Marche sous IE mais pas sous Firefox -_-

Bonjour à tous :)

Voici la page en question:

http://www2.serveur4u.com/ours/BP/

En principe les deux div vert et violet (bloc1 et bloc2) devraient "pousser" le div "corps" vers le bas. Mais ça ne marche que sous IE Smiley hum !!

Apparemment tout va très bien jusqu'à ce que j'ajoute "float: left;" pour que bloc1 et bloc2 soient côte à côte.

Voici les codes:

XHTML


<!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=iso-8859-1" />
<title>Page</title>
<link href="style2.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#000000">

<div class="page">

<!-- EN-TETE -->
<div class="tete">

<div class="head"></div>
<div class="liens"></div>
<div class="headbarre"></div>

</div>


<!-- CORPS -->
<div class="corps">
<div class="bloc1">Hello</div>
<div class="bloc2">Hello</div>

<div />

<div class="bas"></div>
</div>

</body>
</html>


CSS

/* CSS Document */

.page { /*Page centrée*/
	width:790px;
	margin-left: auto;
	margin-right: auto;
}

.tete { /*contient tout les éléments de l'en tête*/
	width: 790px;
	height: 152px;
	margin-top: 0px;
}

.head {
	width: 790px;
	height: 114px;
	margin-left: 0px;
	margin-top: 0px;
	background-image: url(images/Head.jpg);
}

.liens {
	width: 790px;
	height: 19px;
	margin-left: 0px;
	margin-top: 0px;
	background-image: url(images/Liens.jpg);
}

.headbarre {
	width: 790px;
	height: 30px;
	margin-left: 0px;
	margin-top: 0px;
	background-image: url(images/Barrehead.jpg);
}


.corps {
	width: 790px;
	height: auto;
	margin-top: 0px;
	background-image: url(images/Fond.jpg);
}

.bloc1 {
	width: 200px;
	height:200px;
	margin-left: 30px;
	background-color:#66FF00;
	float: left;
	
}

.bloc2 {
	width: 300px;
	height:300px;
	background-color: #CC3399;
	margin-left: 10px;
	float: left;
}

.bas {
	width: 790px;
	height: 32px;
	margin-top: 0px;
	background-image: url(images/Bas.jpg);
}


Merci d'avance Smiley cligne
Effectivement, c'est nettement mieux :)

J'ai fait ça:

XHTML

<div class="corps"> <!-- float container -->

  <div class="bloc1"><p>Some content</p></div>

  <p>Text not inside the float</p>

<hr />

</div>


CSS

hr {
  clear: both ;
  visibility: hidden ;
}


Cependant, il reste deux bandes noires en haut et en bas... Elles sortent d'où??? Smiley fache

http://www2.serveur4u.com/ours/BP/index3.html
Certainement des marges.

Retire les marges des paragraphes et tests d'autres éléments au cas ou... (pas les divs, elles n'en ont pas par défaut).
Effectivement c'est toi le champion :p

Les <p> et le <hr /> avaient des marges...

Encore merci :)
Sujet clos
Aller à