18073 sujets

Questions générales et questions de débutants

Souci d'affichage avec le tuto "Réalisation d'un design"

Bonjour à tous !

Tous d'abord félicitation pour votre site et votre travail, quand on est débutant en "css et autres subtilitées" comme moi, ça aide énormement !

Je rencontre un souci d'affichage avec IE lorsque je visualise ce que j'ai fait, en suivant le tutorial "Réalisation d'un design complet (XHTML / CSS) en 5 étapes".
En effet, sous Firefox tout fonctionne très bien, aucun souci. Par contre si je regarde ma page avec IE, le menu horizontal est décallé. Le dernier bouton n'apparait pas correctement.

Ca sera plus simple avec des images :
Sous Firefox
On voit les 5 boutons qui apparaissent sans soucis (j'ai flouté les textes car c'est un site web d'entreprise).

Sous IE
On voit bien que le 5eme bouton apparait en dessous des autres au lieu de s'aligner à coté Smiley decu

Voici le code utilisé pour les boutons

ul#menu
		{
			height: 34px ;
			margin: 0 ;
			padding: 0 ;
			background: url(images/Bouton_1.gif) repeat-x 0 -0px ;
			list-style-type: none ;
		}
				
ul#menu li
		{
			float: left ;
			text-align: center ;
		}
		
ul#menu li a
		{
			width: 200px ;
			line-height: 38px ;
			font-size: 1.2em ;
			font-weight: bold ;
			letter-spacing: 2px ;
			color: #fff ;
			display: block ;
			text-decoration: none ;			
		}
		
ul#menu li a:hover
		{
			background: url(images/Bouton_2.gif) repeat-x 0 0 ;
		}


Etant vraiment débutant avec le CSS je ne sais pas trop si c'est moi qui ai fait une erreur, ou si j'ai simplement oublié quelque chose Smiley confus

D'avance merci pour votre aide !
Modifié par Gottferdom (03 Apr 2006 - 14:17)
Salut,

Visiblement, il n'y a plus assez de place pour ton dernier li avec IE (à cause éventuellement des marges ou des largeurs trop importantes) et donc il passe à la ligne. En rectifiant tes espacement et / ou largeurs (au besoin avec des commentaires conditionnels) tout devrait rentrer dans l'ordre. Smiley cligne
Modifié par Jihel (03 Apr 2006 - 15:36)
Tout d'abord merci de ta réponse.

Donc d'après toi le soucis vient de la largeur des boutons que j'ai défini ? (200 px). Le problème c'est que si je les diminues (car c'est vrai que je n'ai pas besoin d'un bouton aussi grand), après j'ai un espace "non cliquable" à droite de ma barre jaune, et du coup les boutons ne sont plus centrés sur la barre (je sais pas si tu vois ce que je veux dire). Par contre ça résoud le problème en effet.

Voici ce que ça donne sous IE (idem sous Firefox)
image

Par contre pendant que j'y suis, comment je fais pour virer le blanc entre la barre jaune des boutons et l'image suivante ? ça n'apparait pas sous FF ça Smiley confus
Pour la largeur de tes boutons, il va falloir expérimenter et trouver la taille qui va bien pour éviter l'espace non cliquable. A priori, en fonction de ton code, il faudra une mesure pour les navigateurs Gecko et une autre pour IE (voire les versions d'IE).
Je ne te cache pas qu'un lien vers ton site nous permettrait de mieux t'aider : les causes de ton espace blanc peuvent être multiples. Au pire, une copie du code HTML et CSS...
Aye je n'avais pas pensé aux autres explorateurs que IE et FF.. c'est la deche de faire un site web Smiley lol

Pour la page, je bosse en local donc je ne peux pas donner de liens. Par contre pour le code no-soucis, le voilà :


<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
				<title>Création d'un design étape par étape - Etape n°4&nbsp;: Le titre et le menu</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />

		<style type="text/css">
		body
		{
			margin: 10px 0 ;
			padding: 0 ;
			text-align: center ;
			font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
			background: #EFE466 ;
		}
		
		div#conteneur
		{
			width: 1000px ;
			margin: 0 auto ;
			text-align: left ;
			border: 2px solid #FFFFFF ;
			background: #fff ;
		}
		
		h1#header
		{
			height: 80px ;
			margin: 0 ;			
			padding: 0 ;
			/*background: url(images/Header.jpg) no-repeat left top ;*/
		}
		h1#header_2
		{
			height: 70px ;
			margin: 0 ;
			padding: 0 ;
			background: url(images/Info.gif) no-repeat left top ;
		}
		h1#header_3
		{
			height: 34px ;
			margin: 0 ;
			padding: 0 ;
			background: url(images/Bouton_1.gif) repeat-x 0 -0px ;
		}

		
		ul#menu
		{
			height: 34px ;
			margin: 0 ;
			padding: 0 ;
			background: url(images/Bouton_1.gif) repeat-x 0 -0px ;
			list-style-type: none ;
		}
				
		ul#menu li
		{
			float: left ;
			text-align: center ;
		}
		
		ul#menu li a
		{
			width: 190px ;
			line-height: 38px ;
			font-size: 1.2em ;
			font-weight: bold ;
			letter-spacing: 2px ;
			color: #fff ;
			display: block ;
			text-decoration: none ;			
		}
		
		ul#menu li a:hover
		{
			background: url(images/Bouton_2.gif) repeat-x 0 0 ;
			color: #001ABC ;
		}
		
		div#contenu
		{
			padding: 0 25px 0 70px ;
			background: url(images/Gauche.gif) no-repeat 15px 15px ;
		}
		
		div#contenu h2
		{
			padding-left: 25px ;
			line-height: 25px ;
			font-size: 1.4em ;
			background: url(images/Puce.gif) no-repeat left center ;
			color: #0500AB ;
			border-bottom: 1px solid #0500AB ; ;
		}
		
		div#contenu h3
		{
			margin-left: 15px ;
			padding-left: 5px ;
			border-bottom: 1px solid #0500AB ;
			border-left: 3px solid #0500AB ;
			color: #0500AB ;
		}
		
		div#contenu p
		{
			text-align: justify ;
			text-indent: 2em ;
			line-height: 1.7em ;
		}
		
		div#contenu a
		{
			color: #8a0 ;
		}
		
		div#contenu a:hover
		{
			color: #9b2 ;
		}
		
		p#footer
		{
			margin: 0 ;
			padding-right: 10px ;
			line-height: 34px ;
			text-align: center ;
			font-size: 1em ;
			font-weight: bold ;
			letter-spacing: 1px ;
			color: #0500AB ;
			height: 35px ;
			margin: 0 ;
			background: url(images/Bouton_1.gif)
		}
		
		pre
		{
			overflow: auto ;
			background: #dea ;
			border: 2px solid #9b2 ;
			padding: 5px 0 0 5px ;
			font-size: 1.2em ;
		}
		
		* html pre
		{
			width: 636px ;
		}
		
		pre span
		{
			color: #560 ;
		}
		
		pre span.comment
		{
			color: #b30000 ;
		}
		
		#header_flash {
			width: 20em;
			height: 15em;
		}
		</style>
	</head>
	
	<body>
	
<div id="conteneur"> 
  <h1 id="header">
    <object id="header_flash" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="1000" height="80">
      <param name="movie" value="images/Header.swf" />
      <param name="quality" value="high" />
      <embed src="images/Header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1000" height="80"></embed>
	</object>
  </h1>

		<ul id="menu">
			<li><a href="etape1.html">Bouton 1</a></li>
			<li><a href="etape2.html">Bouton 2</a></li>
			<li><a href="etape3.html">Bouton 3</a></li>
			<li><a href="etape4.html">Bouton 4</a></li>
			<li><a href="etape5.html">Bouton 5</a></li>
		</ul>
		<h1 id="header_2"></h1>
		<h1 id="header_3"></h1>
		<div id="contenu">
			<h2>Titre</h2>				
	</body>
</html>



Merci pour ton aide précieuse !
Je verrai ca en rentrant ce soir, en détails.
D'amblée, il me semble qu'il manque une fermeture de balise. Il est également possible, si tu intègres du Flash, de le faire plus proprement.
Plus de détails au courant de la soirée Smiley cligne .
Salut,
@Gottferdom :
Attention au prologue XML

<?xml version="1.0" encoding="utf-8"?>


Si la page n'est pas servie en XML, il ne sert à rien et il fait basculer certains navigateurs en mode "brouillon" et crée des résultats assez surprenants. Voir la FAQ du forum.
Modifié par papyjo (03 Apr 2006 - 17:45)
Jihel a écrit :
Je verrai ca en rentrant ce soir, en détails.
D'amblée, il me semble qu'il manque une fermeture de balise. Il est également possible, si tu intègres du Flash, de le faire plus proprement.
Plus de détails au courant de la soirée Smiley cligne .


Pour la balise manquante, si tu parles d'un div en fin de page, je l'ai enlevé sans faire gaffe quand j'ai copié le code (j'ai viré la suite, ça ne nous interrese pas).
Pour le flash je regarde de suite la différence. En tout cas merci de ton aide !


papyjo a écrit :
Salut,
@Gottferdom :
Attention au prologue XML

Pour le XML en fait j'ai betement suivi le tutorial (à la lettre), la seule chose que j'ai modifié c'est le flash. Je l'enlève de suite Smiley confused
Je précise que si je laisse mon "flash" ou mon header normal comme dans le tuto (une simple image) le résultat est le même au niveau du blanc entre l'image et les boutons.

Merci !!
Bonsoir,
En fait, ca vient de là :

ul#menu
{
[b]height: 34px ;[/b]
margin: 0 ;
padding: 0 ;
background: url(images/Bouton_1.gif) repeat-x 0 -0px ;
list-style-type: none ;
}
ul#menu li a
{
width: 190px ;
[b]line-height: 38px ;[/b]
font-size: 1.2em ;
font-weight: bold ;
letter-spacing: 2px ;
color: #fff ;
display: block ;
text-decoration: none ;			
}

Si tu réduis ton line-height à 34, tout devrait rentrer dans l'ordre.

Pour le reste, en plus du prologue xml déjà signalé par Papyjo, on peut noter un conflit entre tes styles pour header_flash et les dimensions indiquées dans la balise object.
Voilà.
Administrateur
Gottferdom a écrit :

Pour le XML en fait j'ai betement suivi le tutorial (à la lettre), la seule chose que j'ai modifié c'est le flash. Je l'enlève de suite Smiley confused

A propos du prologue :
http://forum.alsacreations.com/faq/#item71 Smiley cligne

(Il n'y a pas le prologue dans le tutoriel que tu indiques. A moins que tu ne confondes le prologue XML avec le DOCTYPE qui, lui, est obligatoire)
Modifié par Raphael (03 Apr 2006 - 21:19)
Tout d'abord merci à vous deux !

Pour le prologue, je croyais que ça venait du tuto, mais non.. je sais pas d'ou j'ai sorti ça Smiley biggol
Je l'ai enlevé, maintenant je sais à quoi ça sert, merci à voux.

Pour le problème du blanc je l'ai "résolu" grace à la modif de Jihel (je sais pas d'ou j'ai sorti ce 38 au lieu de 34 Smiley eek ). C'etait vraiment une erreur d'étourderie.. merci à toi !

Maintenant tout vas bien de ce coté. Le seul souci qu'il reste c'est un blanc entre l'image Flash et la barre jaune, seulement sous IE (comme toujours). J'ai réussi à reproduire le bug sous Firefox. Pour celà il suffit de supprimer la ligne

			height: 80px ;

dans le code 
h1#header
		{
			height: 80px ;
			margin: 0 ;			
			padding: 0 ;
			/*background: url(images/Header.jpg) no-repeat left top ;*/
		}

Donc je sais pas, si jamais vous avez une idée d'ou peut venir le souci (j'ai essayer de modifier d'autres choses mais apparement ça n'influe pas dessus).
J'ai modifié la balise Flash pour qu'elle apparaisse comme dans le lien spécifié.. donc là je seche (une fois de plus).

En esperant ne pas abuser de votre patience Smiley cligne
Encore merci à vous.
Regarde du côté des dimensions indiquées dans :
- h1#header
- #header_flash
- ta balise object (si elle n'a pas changé Smiley rolleyes )

Il y a des conflits (notamment 80 px vs 15em). Si jamais ca ne résout pas le problème, peut être que définir les marges et paddings à 0 pour la balise object marchera Smiley ohwell .

Sinon je te suggère de reposter ton code actuel !
Modifié par Jihel (04 Apr 2006 - 09:21)
Sujet clos
Aller à