Bonjour,

je débute en css et je déteste ça, mais je n'ai pas le choix, il faut bien en faire.
Et je crois qu'il y a quelque chose que je n'ai pas compris.

Voici en gros comment j'ai fait le site.
Pour la page index, j'ai mis une image en bordure à gauche, contre laquelle je pose mon menu, puis à droite du menu le site.
j'ai donc fait ce code-ci :

<div id="bordure">
ici il y a une image en bordeure
   <p id="menu">
   ici j'écris mon menu
   </p>
   <p>
   ici mes pages
   </p>
</div>

Ensuite j'ai fait le css avec les balises flottante et pleins de propriété et tout fonctionne bien sous firefox.
Par contre sous IE et opera, toutes les propriétés de l'id "menu" ne sont pas prises en compte. Si je remplace <p> par <div>, tout fonctionne bien avec les 3 navigateurs.

Dans le meme principe, j'ai un tableau donc j'ai voulu définir la largeur des colonnes manuellement, j'ai donc fait ceci

<table>
   <tr>
      <th class="col1">le texte</th>
      <th class="col2">le texte aussi</th>
      etc
   </tr>
</table>

Et donc là aussi sous firefox la largeur des colonnes fixées dans le css est prise en compte, mais pas sous ie ni opera.

Je croyais que le standard autorisait de mettre des propriétés dans n'importe quel balise ?
C'est moi qui n'est rien compris ?

Alors pour ce qui est de ta mise en page menu/contenu dus ite, c'est un comportement normal qu'on les autres navigateur, c'est firefox qui fait preuve de laxisme ici...
En fait par défaut, la balise <p> est de type "en-ligne", tu ne puex donc pas lui appliquer des positionnements flottant, etc...
Pour ce faire, soit tu utilises des balises de type block (tu as vu l'effet en mettant des <div> à la place des <p>) soit on spécifie dans le css:et la balise aura alors un comportement de type block...
Pour ton tableau, il nous faut plus d'éléments pour pouvoir conclure, surtout le css
Donc donne tout le code, explique clairement ce que tu ne comprends, pas, ce qui semble ne pas marcher à tes yeux, et ce que tu souhaites obtenir, et on tâchera de t'expliquer ce qu'il te manque

...
En fait par défaut, la balise <p> est de type "en-ligne"...

http://www.alsacreations.com/tuto/lire/ ... ligne.html

Article interressant AB, merci, mais ça ne répond pas à ma question pour autant.

Ben mis à part la petite erreur de jojolapine concernant la nature de la balise p (de type bloc) pour le reste ses propos sont tout à fait justifiés :

Pour ton tableau, il nous faut plus d'éléments pour pouvoir conclure, surtout le css
Donc donne tout le code, explique clairement ce que tu ne comprends, pas, ce qui semble ne pas marcher à tes yeux, et ce que tu souhaites obtenir, et on tâchera de t'expliquer ce qu'il te manque

Sinon si tu veux te familiariser d'une manière générale avec les css, je t'ai donné une très bonne adresse avec http://www.alsacreations.com/ . Regardes les tutos, c'est quasiment la référence en ce domaine

ok, je n'avais pas mis tout le code pour ne pas charger pour rien, en espérant que mes explications seraient assez clair.

EDIT : pour le tableau c'est résolu, une malencontreuse tabulation qui s'était glissée avant la fermeture d'une guillemet.
Reste le problème du menu, la balise <p> étant de type block, je suis bien censé pouvoir la mettre en flottant ?

Voici le code pour le menu :

<div id="menu_poutre">
		<p id="menu">
	<?php
			$bouton1 = "info_joueur_fonce"; //par défaut tous les boutons sont foncés. s'il y a une page, ce bouton est en clair
			$bouton2 = "arme_fonce";
			$bouton3 = "troupe_fonce";
			$bouton4 = "siege_fonce";
			$bouton5 = "autre_fonce";
			if (isset($_GET['nompage']))
			{
				if ($_GET['nompage'] == "info_joueur")
				{
					$bouton1 = "info_joueur_clair";
				}
				elseif (($_GET['nompage'] == "arme") OR ($_GET['nompage'] == "arme_modif_nb_actuel") OR ($_GET['nompage'] == "arme_modif_nb_obj") OR ($_GET['nompage'] == "arme_modif_cout_obj") OR ($_GET['nompage'] == "arme_modif_gain_att_obj") OR ($_GET['nompage'] == "arme_modif_gain_def_obj"))
				{
					$bouton2 = "arme_clair";
				}
				elseif ($_GET['nompage'] == "troupe")
				{
					$bouton3 = "troupe_clair";
				}
				elseif ($_GET['nompage'] == "siege")
				{
					$bouton4 = "siege_clair";
				}
				elseif ($_GET['nompage'] == "autre")
				{
					$bouton5 = "autre_clair";
				}
			}
			
			else // seul la page d'accueil peut etre ici
			{
			}
			echo '<a href="index.php?nompage=info_joueur"><div class="'.$bouton1.'"></div></a><br />';
			echo '<a href="index.php?nompage=arme"><div class="'.$bouton2.'"></div></a><br />';
			echo '<a href="index.php?nompage=troupe"><div class="'.$bouton3.'"></div></a><br />';
			echo '<a href="index.php?nompage=siege"><div class="'.$bouton4.'"></div></a><br />';
			echo '<a href="index.php?nompage=autre"><div class="'.$bouton5.'"></div></a><br />';
	}

	?>		
		</p>
	
	
	<?php
		if(!empty($_GET['nompage']))
			{
				if(file_exists('pages/' . $_GET['nompage'] . '-page.php') AND !preg_match("/(\.|config|inc)/iU", $_GET['nompage']))
				{
					$nompage = $_GET['nompage'];
					// On inclue la page, et si le fichier existe le .inc qui va avec
					require_once 'pages/' . $nompage . '-page.php';
				}
				else
				{
					require_once "pages/accueil-page.php";
				}
			}
			else
			{
				require_once "pages/accueil-page.php";
			}
	
	?>
		<br /><img src="http://i21.servimg.com/u/f21/11/20/21/73/artis211.jpg" />
	</div> 

#menu_poutre
{
	background: url("images/bordure_verticale.png");
	background-repeat : repeat-y;
	margin-top : -20px;
}
#menu
{
	float: left;
	width : 169px;
	margin-top : 90px;
	
}
#menu img
{
	margin-left : 0px;
	border : none;
	/*margin-top : -2px;
	margin-bottom : -2px;*/
}
#menu img:hover
{
	margin-left : 29px;
}

/*--------------------------------Partie pour les boutons du menu--------------------------------------------------------*/
.info_joueur_fonce
{
	background: url("images/info_joueur_fonce.png");
	background-repeat : no-repeat;
	height : 130px;
	width : 130px;
	margin-top : -20px;
}
.info_joueur_fonce:hover
{
	background: url("images/info_joueur_clair.png");
	margin-left : 29px;
}
.info_joueur_clair
{
	background: url("images/info_joueur_clair.png");
	margin-left : 29px;
	background-repeat : no-repeat;
	height : 130px;
	width : 130px;
	margin-top : -20px;
}

.arme_fonce
{
	background: url("images/arme_fonce.png");
	background-repeat : no-repeat;
	height : 130px;
	width : 130px;
	margin-top : -20px;
}
.arme_fonce:hover
{
	background: url("images/arme_clair.png");
	margin-left : 29px;
}
.arme_clair
{
	background: url("images/arme_clair.png");
	margin-left : 29px;
	background-repeat : no-repeat;
	height : 130px;
	width : 130px;
	margin-top : -20px;
}

.troupe_fonce
{
	background: url("images/troupe_fonce.png");
	background-repeat : no-repeat;
	height : 130px;
	width : 130px;
	margin-top : -20px;
}
.troupe_fonce:hover
{
	background: url("images/troupe_clair.png");
	margin-left : 29px;
}
.troupe_clair
{
	background: url("images/troupe_clair.png");
	margin-left : 29px;
	background-repeat : no-repeat;
	height : 130px;
	width : 130px;
	margin-top : -20px;
}

.siege_fonce
{
	background: url("images/siege_fonce.png");
	background-repeat : no-repeat;
	height : 130px;
	width : 130px;
	margin-top : -20px;
}
.siege_fonce:hover
{
	background: url("images/siege_clair.png");
	margin-left : 29px;
}
.siege_clair
{
	background: url("images/siege_clair.png");
	margin-left : 29px;
	background-repeat : no-repeat;
	height : 130px;
	width : 130px;
	margin-top : -20px;
}

.autre_fonce
{
	background: url("images/autre_fonce.png");
	background-repeat : no-repeat;
	height : 130px;
	width : 130px;
	margin-top : -20px;
}
.autre_fonce:hover
{
	background: url("images/autre_clair.png");
	margin-left : 29px;
}
.autre_clair
{
	background: url("images/autre_clair.png");
	margin-left : 29px;
	background-repeat : no-repeat;
	height : 130px;
	width : 130px;
	margin-top : -20px;
}

Ce qui sous firefox fonctionne très bien, tandis que sous ie7 et opera, les propriétés de #menu ne sont pas prises en compte et les pages sont en dessous du menu et non à coté.
Si au début du html je remplace <p id="menu"> par <div id="menu"> cela fonctionne bien aussi sous ie7 et opera.

Ce sont pour l'instant les 2 seuls conflits que j'ai trouvé entre les 3 navigateurs.
Ai-je fait quelque chose de mal ?

Salut et/ou Re les autres,

[...]
Ce qui sous firefox fonctionne très bien, tandis que sous ie7 et opera, les propriétés de #menu ne sont pas prises en compte et les pages sont en dessous du menu et non à coté.
Si au début du html je remplace <p id="menu"> par <div id="menu"> cela fonctionne bien aussi sous ie7 et opera.
Ce sont pour l'instant les 2 seuls conflits que j'ai trouvé entre les 3 navigateurs.
Ai-je fait quelque chose de mal ?

pour ton tag P le css devrait intégrer ceci:

p { margin:0px; padding:0px; }

Plusieur fois je me suis heurté à ce problème. P, d'office, intègre des marges (je sais jamais
si elles sont pour le padding ou margin ([*]et la flème de chercher). Aussi, je mets tout à zéro ou
directement avec de nouvelles valeurs.

[*] Je sais, c'est pas bien lol

@+

EDIT: Hésite pas à utiliser clear:both quand tu utilises les floats, c'est "vachement utile"...
En même temps: je parle, je parle mais je dis rien hein

Plusieur fois je me suis heurté à ce problème. P, d'office, intègre des marges (je sais jamais
si elles sont pour le padding ou margin ([*]et la flème de chercher). Aussi, je mets tout à zéro ou
directement avec de nouvelles valeurs.

[*] Je sais, c'est pas bien lol

++
Je commence souvent ma css commune à tout le site de cette façon : qui sont les balises que j'utilise souvent et qui intègrent des valeurs d'espacement par défaut différentes suivant les navigateurs.

Ensuite si besoin je les redéfini.

Je commence souvent ma css commune à tout le site de cette façon :

Code : Tout sélectionner

body, p, form, textarea, input, option, checkbox, select, hr, ul, li, h1, h2, h3 { margin:0; padding:0; }

Il y a même encore plus simple en matière de reset CSS :

Il y a même encore plus simple en matière de reset CSS :

Code : Tout sélectionner

/* Il suffit de recourir au sélecteur universel * (* = n'importe quel élément) */ * { padding: 0; margin: 0; border: none; /* En cas d'image lien */ }

A effectivement, je connaissais pas, c'est très pratique. Heu... juste une question au passage, ce sélecteur universel est reconnu depuis toujours, je veux dire même sur des vieilles versions de navigateurs ?

J'ai découvert ces reset de marge dans le lien donné par AB dans la deuxième réponse, et il est meme précisé que l'universel doit etre évité.

En tout cas j'ai essayé toutes vos propositions une par une sans résultat.
Et au passage j'ai aussi testé avec safari qui donne les meme résultats que opera, bien sur.

Autre problème, donc quand je remplace le <p> par un <div> sous iE7 le float est pris en compte aussi, mais les boutons du menu gauche ne fonctionne pas, il ne les reconnait pas comme des liens, il ne voit pas le passage de la souris par dessus. j'en ai marrrrrrrrrreeeeeeeeee.

Heu... juste une question au passage, ce sélecteur universel est reconnu depuis toujours, je veux dire même sur des vieilles versions de navigateurs ?

Depuis toujours, je n'en sais rien. En tout cas, de vieilles versions comme IE 4, IE 5, IE 5.5, IE 6, IE 7, Firefox 1, Firefox 1.5, Firefox 2 ou Safari 2 le reconnaissent.

Re,

Et merde, IE6 a planté juste avant de cliquer sur envoyer ;( tout à reprendre....

Ton problème, je pense peut-être résolu ainsi... Ou pas, essaie, on sait jamais.

Je te propose de modifier ton html comme ceci:

<div id="bordure">
   ici il y a une image en bordeure
   <p id="menu">
      ici j'écris mon menu
   </p>
   <hr class="cleared" />
   <p>
      ici mes pages
   </p>
</div>

Ton css ainsi: --- très vite:

Dans ton css tu mets img:hover et ca passe pas pour ie6,
Dans ton css toujours tu indiques une valeur négatives pour margin-top et la c'est hors norme W3C [*]

@+ bon code et désolé mais trop pressé pour être clair j'espere que t'auras quand même compris.

PS1: [*] A moins que ca ait changé mais... Bref, ...j'y go @+
PS2: Je sais je suis chiant lol

Dans ton css toujours tu indiques une valeur négatives pour margin-top et la c'est hors norme W3C [*]

PS1: [*] A moins que ca ait changé mais... Bref, ...j'y go @+

Les marges négatives sont autorisées en CSS (ce qui n'est pas le cas, en revanche, pour les paddings).

Ton css ainsi:

Code : Tout sélectionner

.cleared { height:0px; visibility:hidden; clear:both; }

J'ai testé ce que tu as mis (html et css) sans résultat, au contraire, ça met le tableau en dessous du menu sous firefox aussi. En plus, malgré le "visiblity: hidden", le trait est quand meme visible sous ie7.

Dans ton css tu mets img:hover et ca passe pas pour ie6,

m'en fous d'ie6, y'a plus que les nazes qui l'utilisent
Non mais trop peu de personne l'utilise encore pour que je me prive du bel effet qu'apporte cette fonctionnalité

@+ bon code et désolé mais trop pressé pour être clair j'espere que t'auras quand même compris.

Ca va, j'ai tout compris, dommage que ça ne fonctionne pas, merci quand meme d'avoir essayé.

Dans ton css toujours tu indiques une valeur négatives pour margin-top et la c'est hors norme W3C [*]

PS1: [*] A moins que ca ait changé mais... Bref, ...j'y go @+

Les marges négatives sont autorisées en CSS (ce qui n'est pas le cas, en revanche, pour les paddings).

ouf, tu me sauves, je ne me voyais pas laisser un vide au dessus de l'image.

Sinon je vais essayer de finir la page d'accueil dans la semaine pour que vous puissiez voir mon problème directement, si ça peut aider.