28221 sujets

CSS et mise en forme, CSS3

Positionnement image en background sur FF (RESOLU)

Bonjour,
A petits pas, les choses se précisent pour mon site : http://users.skynet.be/terminusterezin/ pour lequel j'ai déjà posé des questions ici.
Il reste un petit problème à régler : celui de la position de l'image en background du texte principal : ok sur IE, décalée vers le bas sur FF et Netscape (div main)
Voici le code CSS : 
/* CSS Document */

body {
	background-color: #A8B4C1;
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	margin: 0px;
	padding: 0px;

}

div#outer {
	width: 900px;
	padding: 0px;
	border: medium solid #000000;
	margin: 25px auto 10px;

}

div#header {
	padding: 0px;
	margin: 0px;
	text-align: center;
	background:  url(images/banniere900x180.jpg) no-repeat center center;
	height: 180px;
	border-bottom: thick solid #8192A6;
	width: 900px;

}
div#nav {
	height: 30px;
	width: 100%;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	background-color: #A8B4C1;
	text-align: center;
}
div#nav
 ul {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	color: #FFF;
	line-height: 30px;
	white-space: nowrap;
	font-weight: bold;
}
div#nav li {
    list-style-type: none;
    display: inline;
}
div#nav li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #FFF;
}
div#nav li a:link {
    color: #FFF;
}
div#nav li a:visited {
    color: #FFF;
}
div#nav li a:hover {
    font-weight: bold;
    color: #FFF;
    background-color: #72869C;
}
div#main {
	width: 100%;
	padding: 0px;
	margin-top: 0px;
	height: 400px;
	background:  url(images/camptt40.jpg) no-repeat 0px 0px;
	color: #000066;
	margin-right: 0px;

}

div#footer {
	padding: 5px;
	margin: 0px;
	border-top: thin solid #000000;
	height: 30px;
	clear: both;
	text-align: center;
	vertical-align: middle;

}
p {
	text-align: justify;
}
blockquote {
	margin: 10px;
	padding: 0px;
}
.liens {
	font-size: 10px;
	color: #000066;
	text-decoration: none;
}
.textefoot {
	font-size: 10px;
	text-transform: uppercase;
}

Il y a sans doute une erreur quelque part. Merci de m'aider à la corriger.
Bizarre, a moins que je ne vois pas ce que tu veux dire, mais sinon, avec mon FF 1, je ne vois pas une image déclaée vers le bas.dans l'id main. As tu reparé tout seul ?
vivi a écrit :
petit problème à régler : celui de la position de l'image en background du texte principal : ok sur IE, décalée vers le bas sur FF et Netscape (div main)
Ton image en background est parfaitement bien positionnée par rapport à main.

En fait IE ne respecte pas le standard notamment sur la règle de fusion des marges. Ta page sous IE est donc incorrecte au regard de la norme.

L'espace (tout à fait justifié par CSS2) entre #nav et #main est la marge fusionnée entre #main et blockquote.

Pour résoudre ton pb immédiatement tu peux réduire la marge de blockquote à 0. Sinon il faut briser la fusion des marges, et utiliser sur #main au choix :
- un padding non nul
- une bordure
- la propriété float
- {overflow:auto}
Bonjour Xavier,
Merci pour les astuces ; je viens d'essayer l'ajout d'une bordure et cela fonctionne parfaitement. C'est génial !
Par curiosité, je vais aussi essayer les 3 autres formules. Je n'ai pas vraiment compris la raison ni ce que veut dire :
a écrit :
IE ne respecte pas le standard notamment sur la règle de fusion des marges
.
C'est quoi, la règle de fusion des marges ? J'ai cherché sur le web, mais sans piger vraiment.
En tout cas, mon problème a disparu : merci encore !
Smiley coucou Smiley youpi
Smiley merci Xavier.
Je vais imprimer ce document, le lire et l'analyser à mon aise.
Même si je ne comprends pas tout immédiatement, il en restera toujours quelque chose.
J'ai découvert les CSS tout récemment, ça me passionne. Au début, je n'y comprenais rien; maintenant j'en ai saisi les grands principes en tout cas et ça devient un jeu très amusant.
Smiley ravi
Très bien, très bien.

En passant 2 petites remarques sur ton CSS :

1/ il me semble conceptuellement plus logique de mettre un padding-top sur #main, et de supprimer la marge de blockquote ainsi que la bordure-top de #main.

2/ je vois que tu traînes beaucoup de margin:0 et padding:0. Pourquoi ne pas envisager en haut de ta feuille de style : 
* {margin:0;padding:0}
Tu pourras ainsi retirer les nombreuses lignes où tu annules les marges et les padding. Attention tout de même, tu devras aussi définir explicitement les marges des 2 éléments <p> et <h4>

Bon courage.
Encore une petite question :
a écrit :
je vois que tu traînes beaucoup de margin:0 et padding:0. Pourquoi ne pas envisager en haut de ta feuille de style : * {margin:0;padding:0}
.
Est-ce cela que l'on appelle "sélecteur universel" ? (j'ai lu ça quelque part sur Alsa)

Est-ce ainsi qu'il faut l'indiquer (juste avant le body?) :
{margin:0;padding:0}
body {
	background-color: #A8B4C1;
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	
	text-align: center;

}

Bonne journée.
Le sélecteur universel (*) associé au propriétés padding: 0; et margin: 0; se place effectivement tout en haut de la feuille de style Smiley cligne
Bonjour,
Indication "résolu"
Je n'ai pas pu ajouter cette mention : il semble que l'icone d'édition du message ait disparu. Je ne vois plus que l'icone "citer".
Suis-je myope ? Smiley lol

Maintenant, je la vois ! Smiley confused
Modifié le 12 Feb 2005 - 08:33
Sujet clos
Aller à