Calage de div aléatoire ?

bonjour a tous

c'est décidé, les <table> ce sera désormais le moins souvent possible !!!je me mets au css !!!

Donc je me suis dis que le mieux, c'était de me faire un site fictif pour affronter les problemes les uns apres les autres. Eh bien les soucis n'ont pas tardés...

Voici le résultat que je souhaite obtenir visuellement



Et voici le lien de la page que j'ai commencé a faire (si possible, voyez la avec ie ET ff: http://interface38.free.fr/fullCSS/pageType.html

J'ai pour l'instant 3 div les uns au dessous des autres.

1 >>> ma tetiere -> pas de souci apparement

2 >>>un div vide (peut être est ce une erreur...) qui est une barre jaune de 2 pix avec une border top et border bottom blanc de 2 pix -> là, j'ai des gros soucis d'affichages avec ie ou ff

3>>> mon futur menu -> il n'est pas fini mais je ne comprends pas pourquoi le div ne colle pas au div du dessus...

Bref, il y a quelque chose qui m'échappe.

Sans doute ai je fais des erreurs, c'est pour cela que vos conseils me seront précieux.

Merci pour votre aide !

ci dessous mon css

@charset "utf-8";
/* CSS Document */



body
{
	
margin: 0px 0;
padding: 0;
text-align= left;


}

div#conteneur
{
width: 900px;
margin: 0 auto;

}

div#tetiere
{
	height: 116px;
	background-image: url(../imgs/banniere.jpg);
}

#barreJaune

{
	background-color:#FCBB38;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-top-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	height: 2px;
	width: 900px;
	display: block;
	border-top-style: solid;
	border-bottom-style: solid;
	}



div#menu
{
	height: 15px;
	margin: 0;
	width: 900px;
	background-color: #1E2455;
}

Modifié par ze.bassman (08 Sep 2007 - 03:22)

Bonjour,

C'est assez simple.
Les <ul> sont définis par défaut avec des margin et padding.
Il te suffit des les mettre à 0.

Cependant, comme tu débutes, il serait préférable que tu prennes tout de suite de bonnes habitudes.

Le XHTML est assez exigeant.
Par exemple

<LINK rel="stylesheet" type="text/css" href="styles.css">

Les balises doivent être en minuscules et se ferment par “espace/>”.
Et pas seulement les balises (“background-color:#FCBB38;”).

Et puis

text-align= left;

n'est pas correct. Le séparateur est “ : ”.

Il existe aussi des raccourcis

	border-top-width: 2px;
	border-top-color: #FFFFFF;
	border-top-style: solid;

peut s'écrire avantageusement

	border-top : 2px solid #fff;

Et dans ce forum, ils aiment bien que les images ne prennent pas trop de place.
Lors de l'insertion, tu as la possibilité de demander un aperçu

    
Modifié par Gihef (03 Sep 2007 - 22:18)

Un grand merci pour ton aide et tes conseils. Et désolé a tous pour la taille de l'image, je le saurai pour la prochaine fois...

encore une question : il y a, juste en dessous de la banniere une barre jaune (div vide) qui est un div de 2 pix avec des top et bottom blancs de 2 pix.

Cependant, ie m'affiche une barre d'au moins 25 px de haut, alors que FF m'affiche ça correctement.

Y a t il une façon de procéder pour afficher cela correctement dans IE ?

merci

ze.bassman a écrit :
encore une question : il y a, juste en dessous de la banniere une barre jaune (div vide) qui est un div de 2 pix avec des top et bottom blancs de 2 pix.

Cependant, ie m'affiche une barre d'au moins 25 px de haut, alors que FF m'affiche ça correctement.

Déjà, il me semblerait plus logique d'utiliser des marges plutôt que des border. Mais bon, pourquoi pas.
Ensuite, IE attribue aux éléments de type bloc, même vides, la hauteur d'une ligne de texte. Et comme IE6 interprète mal la propriété height (qu'il gère comme un min-height...), ça fait un bloc trop haut.

Une solution:

#barreJaune {
	/* Code corrigé */
	margin: 2px 0;
	background:#FCBB38;
	height: 2px;
	overflow: hidden;

	/* Instructions inutiles, à supprimer */
	display: block; /* l'élément div a déjà un rendu de type bloc par défaut */
	width: 900px; /* les éléments ayant un rendu de type bloc prennent par défaut 100% de la largeur disponible dans leur conteneur... soit ici 900px */
}

Pour le bloc du menu, tu as des items de liste vides. Firefox ne les affiche pas, et IE6 les affiche avec une hauteur correspondant à une hauteur de ligne.

Un grand merci pour votre aide avisée. Rien ne vaut la parole de celui qui sait et qui accepte de partager ses connaissances.

J'avance donc petit à petit (un peu a tatons) dans le joyeux monde du css et il semblerait que les navigateurs soient facétieux...

Un exemple avec le menu horizontal de ma page :
http://interface38.free.fr/fullCSS/pageType2.html

j'ai fait un div bleu vide de 15 px de haut sur lequel je veux mettre un mes liens (qui seront bleu mais je les ai mis en rouge pour l'instant pour voir ce que je fais).
Si FF semble m'afficher cela a peut pres correctement, IE, lui, a tendance a épaissir le div bleu du fond et a m'aligner mon menu sur le bas de ce même div...

Je sais pas pourquoi, mais je trouve que ça sent le marging a plein nez, mais seulement... je n'arrive pas a trouver OU !!!!!

voici le code correspondant a la partie menu :

[code]div#menu	{
	
	
	margin: 0px 0;
	padding:0px 0;
	height: 15px;
	background-color: #1E2455;
}

#navigation {
	margin: 0 ;
	padding: 0px 0px ;
	list-style: none ;
	text-align: center ;
	}


#navigation li {
	display: inline;
	vertical-align: top;
	}
	
#navigation li a {
	padding: 0px 35px;
	background: #c00;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-family: "Arial", Trebuchet MS, sans-serif;
	font-size: 11px;
	}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
	background: #900 ;
	text-decoration: none ;
	}

Je vous remercie par avance de vos lumières

Bonjour ze.bassman et bienvenue parmi nous,

Ton premier post comporte une image très large, pouvant gêner la lisibilité du topic.
Je t'invite à l'éditer et à user de l'option "Générer un aperçu" lors de l'insertion de l'image.

Pour en revenir à ton problème, je ne peux pas faire de tests sous IE, mais l'emploi de la propriété "padding" peut s'avérer périlleux :

Mon bloc n'a pas la même taille sur Internet Explorer que sur les autres navigateurs. Pourquoi ?

Merci pour ce lien, je vais lire tout ça avec application !

Désolé pour l'image trop grande j'ai corrigé cela....