28172 sujets

CSS et mise en forme, CSS3

Espace entre les balises

Bonsoir à tous,

Je me permet de poster un message pour vous demander un petit conseil. Voilà, j'ai créer ma feuille CSS et HTML, mais voici mon problème. Je souhaite créer 3 blocs (1 en haut, 2 en bas), mais je n'arrive qu'à un bloc. Voici une image pour montrer ce que je souhaite :

http://i80.servimg.com/u/f80/11/00/80/43/exempl10.png

Voici également mon fichier HTML est CSS :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tomahawk</title>
<link rel="stylesheet" media="screen" type="text/css" href="style.css">
</head>
<body>
<div id="head"></div>
<div id="team">
<img src="images/kurd.png">
<img src="images/nova.png">
<img src="images/nova.png">
<img src="images/sisqo.png">
<div id="espace"></div>
<div id="match"></div>
<div id="communaute"></div>
</div>
</body>
</html>


body {
  width: 522px;
  margin: auto;
  background-color:#222;}
#head {
  margin: auto;
  width: 550px;
  height: 120px;
  background-image: url("images/banniere.png");
  margin-top: 30px;
  margin-bottom: 10px;}
#corps {
  padding: 5 0 0;
  text-align: center;
  background-color: #FFF;}
#espace {
  margin-top: 20px;}
#team {
  padding: 5 0 0;
  text-align: center;
  background-color: #FFF;}
#match {
  margin: left;
  width: 250px;
  height: 250px;
  text-align: center;
  background-color: #FFF;}
#communaute {
  margin: left;
  width: 250px;
  height: 250px;
  text-align: center;
  background-image: url("images/communaute.png");
  background-color: #FFF;}


Merci d'avance pour votre aide.
Modifié par nova313 (02 Apr 2009 - 23:50)
Salut,

Plusieurs remarques :
- Utilise un DOCTYPE complet, ton DOCTYPE actuel fait passer les navigateurs en mode Quirks et le rendu sera alors différents selon les navigateurs (notamment IE qui utilise le modèle de boite Microsoft au lieu du modèle de boite W3C) :
http://www.w3.org/QA/2002/04/valid-dtd-list.html
- Les valeurs de taille en CSS prennent obligatoirement une unité (sauf le zéro évidemment), donc rajoute des unités à tes padding.
- Tu utilises les margin-left de la mauvaise manière, margin:left au lieu de margin-left:valeur.
Bonjour,

Alors premières erreurs dans ton code :
* ton #header est plus large que ton body (d'ailleurs donner une largeur au body, c'est assez inabituel).
* les valeur différentes de 0 doivent avoir une unité de mesure : 
#team {
  padding: 5 0 0;
  text-align: center;
  background-color: #FFF;}

De plus tu donne 3 valeurs à ton padding, il faut choisir, c'est soit 2 (top-bottom left-right) soit 4 (top right bottom left), sinon comment le navigateur est-il sencé savoir à quel côté attribuer le padding ?

Sinon pour ton problème, peut-être devrais-tu fermer le div #team avant le div #espace.
Laurie-Anne a écrit :
De plus tu donne 3 valeurs à ton padding, il faut choisir, c'est soit 2 (top-bottom left-right) soit 4 (top right bottom left), sinon comment le navigateur est-il sencé savoir à quel côté attribuer le padding ?

Salut,

Le padding, comme le margin peut prendre une, deux, trois, ou quatre valeurs.
Dans le cas de trois valeurs, c'est réparti comme top|left+right|bottom.
http://www.w3.org/TR/CSS21/box.html#padding-properties
Merci Laurie-Anne pour ta correction margin : float, je m'étais un peu mélangé les pinceaux.

Agylus, merci pour les liens, ça me sera utile.
Sujet clos
Aller à