Espace entre les div...

Hello,

J'ai un souci d'espace entre les DIV. Je voulais refaire un css tout seul en partant d'un gabarit alsa et rien à faire, j'ai des soucis. J'ai cherché sur le web, essayer plein de choses avec les paddings, margins et je n'y arrive pas. Donc mon pied mon menu et mon contenu sont séparés.

Voila mes questions :
- Comment supprimer cet espace entre les div ?
- Comment je peux aligné à gauche le menu aussi ?

Merci pour les réponses et surtout les explications parceque ça m'énerve de ne pas comprendre !

html {
	font-size: 100%;
	height: 100%;
}
body {
	height: 100%;
	margin: 0;
	padding: 10px 20px;
	font-family: Georgia, "Times New Roman", Times, serif;
	line-height: 1.50;
	color: black;
	background: #c6c6c6;
}
h1 {
	color: black;
}
a img {
	border: none;
}
em {
	font-style: italic;
}
strong {
	font-weight: bold;
}

#site {
	min-height: 100%;
	width: 750px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}
/* #entete {
	padding: 0px 0px 0px 0px;
} */
#menu {
	text-align: left;
}
#menu a {
	text-decoration: none;
	color: black;
}
#menu ul {
	list-style: none;
}
#menu li {
	display: inline;
	padding: 0.3em;
	margin: 0;
	font-weight: bold;
	background: #c6c6c6;
	border: thin solid;
	border-color: 406480;
}
#photo {
	padding-left: 0.5em;
	padding-bottom: 0.5em;
	float: right;
	display: block;
}
#contenu {
	background: #c6c6c6;
	border: thin solid;
	border-color: 406480;
	padding-left: 20px;
	padding-right: 20px;
	border-bottom: 0;
}
#pied {
	background: #c6c6c6;
	border: thin solid;
	border-color: 406480;
	text-align: center;
	font-size: 0.75em;
	border-top: 0;
}

Modifié par Gimx (31 Mar 2009 - 04:20)

Pour le menu, cela vient surement de la balise <ul> qui a un margin et un padding par defaut.
Ici il faut que tu les mettent à 0.

je vois aussi une petite erreur au niveau du border-color. Il manque le # de la notation hexa à plusieurs reprise.

Hello Gimx et bienvenue,

benj a écrit :
Ici il faut que tu les mettent à 0.

Disons plutôt qu'il faut systématiquement les renseigner (comme expliqué dans cette astuce).

Sinon, du code css sans le code html n'est pas suffisant ! L'idéal étant une page en ligne...

benj a écrit :
je vois aussi une petite erreur au niveau du border-color. Il manque le # de la notation hexa à plusieurs reprise.

Bien vu, merci
Mais en fait c'est un test là, un genre de modéle que j'essaye de faire, après ça ne sera pas grisatre comme ça

Pour le menu, c'est ok sur l'alignement gauche (hier ça ne fonctionnait pas...) sinon il y a toujours ce $@?!% d'espace entre les div


La page : http://gimx.alwaysdata.net/

Le CSS :

html {
	font-size: 100%;
	height: 100%;
}
body {
	height: 100%;
	margin: 0;
	padding: 10px 20px;
	font-family: Georgia, "Times New Roman", Times, serif;
	line-height: 1.50;
	color: black;
	background: #c6c6c6;
}
h1 {
	color: black;
}
a img {
	border: none;
}
ul, ol {
	margin: 1em 0 1em 24px;
	padding: 0;
}
em {
	font-style: italic;
}
strong {
	font-weight: bold;
}
#site {
	min-height: 100%;
	width: 750px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}
/* #entete {
	padding: 0px 0px 0px 0px;
} */
#menu {
	text-align: left;
	margin-bottom: 0.3em;
}
#menu a {
	text-decoration: none;
	color: black;
}
#menu ul {
	list-style: none;
	margin: 0 0 0 0;
}
#menu li {
	display: inline;
	padding: 0.3em 0.3em 0.3em 0.3em;
	margin-right: 1em;
	font-weight: bold;
	background: #c6c6c6;
	border: thin solid;
	border-color: #406480;
}
#photo {
	padding-left: 0.5em;
	padding-bottom: 0.5em;
	float: right;
	display: block;
}
#contenu {
	background: #c6c6c6;
	border: thin solid;
	border-color: #406480;
	padding-left: 20px;
	padding-right: 20px;
}
#pied {
	background: #c6c6c6;
	border: thin solid;
	border-color: #406480;
	text-align: center;
	font-size: 0.75em;
}

Modifié par Gimx (31 Mar 2009 - 14:37)

Ton problème vient du line-height dans le body.

Utilise tu un outils tel que firebug ? C'est très pratique pour repérer les bugs css.

Oui j'ai Firebug

Sinon merci c'est ça, les bordures se "collent" mais il y a toujours une espéce de rendu comme si ça faisait une double bordure où elles se touchent.

Là je me relis les tutos alsa et je pense que je vais refaire le truc un peu mieux organisé et pensé parceque je suis parti un peu n'importe comment au feeling sans poser tout ça sur une feuille

Merci

Gimx a écrit :
Sinon merci c'est ça, les bordures se "collent" mais il y a toujours une espéce de rendu comme si ça faisait une double bordure où elles se touchent.

Au niveau du footer, c'est bien cela.

#pied {
	background: #c6c6c6;
	border: thin solid;
	border-color: #406480;
             [b]border-top: 0 none;[/b]
	text-align: center;
	font-size: 0.75em;
}

Merci, je vais me le refaire de toute façon pour que ça rentre, ça va faire un bon exercice et ça m'évitera de venir vous prendre la tête tous les 5 mins