28220 sujets

CSS et mise en forme, CSS3

Bonjour a tous, j'ai un probleme de compatibilité avec mon site : http://xav93.free.fr . Avec firefox aucun probleme(en 1400x1050) mais avec IE et une resolution differente, probleme!
Je suppose que le sujet à déja été discuté dans ce forum, et que c'est une des bases du css, mais je ne suis pas vraiment un expert dans la création de site.
Merci de votre aide.
Bonjour et bienvenue,
Avant de lire ma réponse. Je te suggère d"aller lire les règles : http://forum.alsacreations.com/help.php.


a écrit :
<h1 style="text-align: right;" id="header"><a href="http://xav93.free.fr/index.html" title="Ldap, Samba, Postfix ..."><span><br>

</span></a></h1>


Tu dois enlever le style="text-align: right;" pour que ton background s'affiche ou il faut sous IE.
<span><br></span> ne sert à rien et pollue le code
Si tu veux mettre plus d'espace sous ton titre tu dois déclarer un margin-bottom.

H1 veut dire header1 ou heading1 c'est ce qu'on appelle du balisage sémantique eyt tu n'en a qu'un donc tu n'as pas besoin id=header
Il te faut déclarer dans ta css
h1 {tes styles}

Modifié par Hermann (04 Mar 2006 - 16:24)
Pas tout à fait, tu dois exposer ton problème précesemment et donner le code
css et html de ta page.
oups, autre probleme, le menu n'est pas centré sur IE...
un rapport avec le text-align center ds navcontainer?


body {
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #9DA0C9 ;
}

#navcontainer
{
	font-family: Arial,Sans-Serif;
	margin: 0 auto;
	width: 100%;
	border-bottom: 1px solid #7C67E2 ;
}

#navlist
{
	width: 60%;
	text-align: center;
	margin: 0 auto;
	padding: 0;
	text-indent: 0;
	list-style-type: none;	
}

#navlist li
{
	padding: 0;
	margin: 0;
	text-indent: 0;
	display: inline;
}

#navlist li a
{
	letter-spacing: -1px;
	text-decoration: none;
	color: #ccc;
	font-size: 1em;
	padding: 0 2px;
	border-top: .5em solid #fff;
}

#navlist li a:hover,#navlist a#current
{
	color: #6050AF;
	border-top: none;
	font-size: 2.0em;
}

#navlist a#current { color: #63657F ; }
div#conteneur
{
	width: 770px ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #7C67E2 ;
	background: #fff ;
}



<body>

<div id="conteneur">

    <h1><a href="/index.html" title="Ldap, Samba, Postfix ..."></a></h1>

<div id="navcontainer">
<ul id="navlist">

  <li><a href="/index.html" id="current">Présentation</a></li>

  <li><a href="/installation">Installation</a></li>

  <li><a href="/configuration">Configuration</a></li>

  <li><a href="/utilisation">Utilisation</a></li>

</ul>
Hermann a écrit :
Pas tout à fait, tu dois exposer ton problème précesemment et donner le code
css et html de ta page.

D'accord pour le premier point, mais le deuxième est discutable.

Le lien vers la page posant un problème suffit à accéder relativement facilement au code HTML et CSS. Ensuite, tout dépend des outils que l'on utilise, mais je ne trouve pas bien plus dur de faire afficher le code source lorsque la page en question est chargée que se taper le code directement dans le sujet.
De plus, pour les utilisateurs de la barre d'outils webdevelopper, c'est royal Smiley cligne

Pour le premier point : effectivement, les messages du type « au secours mon site il est cassé dans IE » sont pas super. S'il y a 15 trucs qui peuvent apparaître comme "cassés", quel est celui qui pose problème dans l'esprit du demandeur ?
d'accord sur le titre, c'est pas terrible... Mais il faut me comprendre, je ne connais pas du tout l'edition web, et à vrai dire, je fais plutot ca par necessité que par envie. Cela dit, je suis qd meme content de rendre un site propre, et cela je le dois quasi-entierement à Alsacréation, et les tres bon tutoriels et codes sources de ce site, sans oublié l'entre-aide des developpeurs. Smiley cligne
Une petite remarque au passage,

Si avec les marges latérales mises en auto le centrage d'un élément dimensionné ne se fait pas automatiquement avec IE c'est :
. soit que la version utilisée de ce navigateur est inférieure à la 6.
. Soit, si tu testes avec IE6, que l'absence de Déclaration de Type de Document fait passer celui ci en mode quirck.
Comme tu te présentes comme débutant, je préfère t'informer de ce point.

Sinon, a priori et sans tester je pense qu'il faudrait mettre le text-align sur l'élément #navcontainer pour que #navlist soit centré (IE oldschool Smiley lol )
Si c'est #navcontainer qui doit être centré alors c'est impossible tant qu'il a un width:100%;