5568 sujets

Sémantique web et HTML

[resolu] XHTML Strict / Transitional : inline

Bonjour à tous,
je passe tous mes sites actuellement en XHTML Strict 1.0 avec CSS et la je tombe sur un os.
J'ai sous Firefox, Opéra (entre autre) une différence d'affichage entre les deux modes XHTML cités.
Sans rien chnager au code, juste le doctype,
le 4x4 affiché est coiupé en 2
la feuille de style reste la meme

voici le XHTML strict :
http://www.artechnology-ruggeri.com/template.php
transtional :
http://www.artechnology-ruggeri.com/template2.php

si quelqu'un avait une idée, merci d'avance
Modifié par wrozan (23 May 2006 - 20:12)
c'est parce que c'etaitt relativement long, je me suis dit que vous alliez faire afficher la source, mais aussitot demandé, aussitot fait Smiley lol

la page en elle meme


<!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" lang="fr" xml:lang="fr">
<head>
<title>Artechnology-Ruggeri</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="Boitier additionnel RUGGERI d'augmentation de puissance pour voiture diesel"/>
<meta name="keywords" content="Artechnology,arttechnology,artechnologie,arttechnologie,ruggeri,ruggieri,ruggeritechnology,ruggeritechnologie,diesel,turbodiesel,turbo,preparationmoteur,preparationturbodiesel,dieselprepare,boitier,boitieradditionnel,boitierelectroniqueturbodiesel,boitierelectroniqueadditionnel,pompemecanique,kit,kitlda,4x4,puissance4x4,puissancediesel,pressiondesuralimentation,chevaux,couple,plusdepuissance,plusdecouple,commonrail,injecteurspompes,injecteurpompe,tdi,hdi,jtd,d4d,vdi,crdi,tds,dti,td,dt,did,cdi,td5,td4,economiecarburant,consommationdiesel,,agrementdeconduite,souplessemoteur,performance,chrono,eprom,chipstuning,tuningbox,tuningdiesel,chiptuning,,connecteurscontructeurs,powersystem,ptronic,boost,maxituning,autooption,gtimag,bosch,siemens,delphi,magasineauto,sportsystem,gti,addx,campingcar,autoverte,4x4magazine,landcruiser,land,sorento,ml,x5,hdj,defender,galloper,patrol,pickup,rangerover,landrover,autoplus,dieselmag,peugeot,renault,citroen,alfa,hyundai"/>
<meta name="subject" content="100 caractere maximum, ts les mots des activite du site"/>
<meta name="revisit-after" content="6 days"/>
<meta name="language" content="fr"/>
<meta name="identifier-url" content="  www.artechnology-ruggeri.com"/>
 
<meta name="robots" content="all"/>
<meta name="expires" content="never"/>

<link href="feuille.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<div class="conteneur">
	
		<div class="header">
			<object type="application/x-shockwave-flash" data="img/haut.swf" width="760" height="172">
			<param name="movie" value="http://www.artechnology-ruggeri.com/img/haut.swf" />
			<param name="quality" value="high"/>
			<param name="wmode" value="transparent"/>
			</object>
		</div>
		
		
		<div class="gauche">
				<div class="conteneurmenu">
					<div class="menu"><a href="http://www.artechnology-ruggeri.com/" class="vertical">Accueil</a></div>
					<div class="menu"><a href="http://www.artechnology-ruggeri.com/produits.php?marque=ALFA" class="vertical">Produits</a></div>
					<div class="menu"><a href="http://www.artechnology-ruggeri.com/distributeurs.php?n_dep=01" class="vertical">Distributeurs</a></div>
					<div class="menu"><a href="http://www.artechnology-ruggeri.com/questions.php" class="vertical">Des questions ?</a></div>
					<div class="menu"><a href="http://www.artechnology-ruggeri.com/montage.php" class="vertical">Montage</a></div>
					<div class="menu"><a href="http://www.artechnology-ruggeri.com/presse.php" class="vertical">Presse</a></div>
					<div class="menu"><a href="http://www.artechnology-ruggeri.com/partenaires.php" class="vertical">Partenaires</a></div>
					<div class="menu"><a href="http://www.artechnology-ruggeri.com/conditions.php" class="vertical">Conditions</a></div>
					<div class="menu"><a href="http://www.artechnology-ruggeri.com/detente.php" class="vertical">Detente</a></div>
					<div class="menu2"><a href="http://www.artechnology-ruggeri.com/contact.php" class="vertical">Contact</a></div>
				</div>
				
				
				<img src="http://www.artechnology-ruggeri.com/img/bas_menu.jpg" alt="bas menu"/><br/>
				<object type="application/x-shockwave-flash" data="img/307.swf" width="168" height="250">
				<param name="movie" value="img/307.swf" />
				<param name="quality" value="high"/>
				<param name="wmode" value="transparent"/>
				</object>
		</div>
			
		<div class="droite">
			<div class="bas4x4">
				<img src="http://www.artechnology-ruggeri.com/img/fond.jpg" alt="4x4"/>
			</div>
			<div class="tableaumarques">
				<div class="marques">
					<div class="marquesgauche">
						ALFA ROMEO<br/>
						ARO<br/>
						AUDI<br/>
						AUVERLAND<br/>
						BMW<br/>
						CHRYSLER<br/>
						CITRO&Euml;N<br/>
						FIAT<br/>
						FORD<br/>
						HYUNDAI<br/>
						JAGUAR<br/>
						KIA<br/>
						LANCIA<br/>
						LAND ROVER<br/>
						MAZDA<br/>
					</div>
					<div class="marquesdroite">
						MERCEDES<br/>
						MINI<br/>
						MITSUBISHI<br/>
						NISSAN<br/>
						OPEL<br/>
						PEUGEOT<br/>
						RENAULT<br/>
						ROVER<br/>
						SAAB<br/>
						SEAT<br/>
						SKODA<br/>
						SUZUKI<br/>
						TOYOTA<br/>
						VOLKSWAGEN<br/>
						VOLVO
					</div>
				</div>
				<img src="http://www.artechnology-ruggeri.com/img/img_accueil.jpg" width="217" height="249" alt="img_accueil"/>
			</div>
		</div>
			
		<div class="footer">
			<div class="bas">
				38 L avenue cl&eacute;ment Ader - ZI Ponroy<br/>
				94220 PLESSIS TREVISE<br/>
				T&eacute;l : 01 56 31 27 87 - Fax : 01 56 31 27 97
			</div>
		</div>
			
	</div>
</body>
</html>



la feuille de style


body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background: url(http://www.artechnology-ruggeri.com/img/fondcarbon.jpg);
}

div.conteneur{
	width:760px;
	border: 1px solid #FFFFFF;
	margin:auto;
	background-image: url(http://www.artechnology-ruggeri.com/img/gd_fond.jpg);
}

div.header{
	background-image: url(http://www.artechnology-ruggeri.com/img/haut.jpg);
}



div.gauche{
	width:168px;
	background-image: url(http://www.artechnology-ruggeri.com/img/gd_fond.jpg);
	float:left;
}

div.droite{
	min-height:480px;
}

div.conteneurmenu{
	width:100%;
	background: url(http://www.artechnology-ruggeri.com/img/fond_menu.jpg);	
}

div.menu{
	width:154px;
	margin-left:2px;
	margin-bottom:2px;
}

div.menu2{
	width:154px;
	margin-left:2px;
}

div.tableaumarques{
	width:574px;
	margin-left:168px;
	background:#778B96;
	border: 1px solid #FFFFFF;
}

div.marques{
	width:57%;
	float:left;
	margin: auto;
}

div.marquesgauche{
	float:left;
	width:100px;
	margin-top:20px;
	margin-left:50px;
}
div.marquesdroite{
	margin-left:160px;
	margin-top:20px;
}

div.footer{
	background:url(http://www.artechnology-ruggeri.com/img/bas.jpg);
	text-align:center;
	height:84px;
}

div.bas{
	height:84px;
	padding-top:42px;
	color: #666666;
	font-weight: bold;
}

A.vertical {
	DISPLAY: block;
	FONT-WEIGHT: bold;
	FONT-SIZE: 11px;
	COLOR: #FFFFFF;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	TEXT-DECORATION: none;
	padding: 0px 0px 0px 3px;
	width: auto;
	height: 16px;
	background-color: #8B8B8B;
}
A.vertical:hover {
	COLOR: #666666;
	BACKGROUND-COLOR: #DEDEDC;
}
Smiley biggrin
Bonjour Wrozan,

Une image (<img>) se place par défaut sur la base de la ligne de texte (ce qui peut se modifier via l'alignement vertical). En dessous de cette ligne, il y a un espace pour les lettres ou caractère dont une partie est "plongeante" (j,g,p,q etc). C'est cet espace qu'il y a sous tes images avec le DOCTYPE Strict.

La plupart des navigateurs ont trois modes de rendu : mode standard (ou "strict" ou encore "conforme"), quasi-standard et quirks.

En mode quirks ou quasi-standard, il n'y a pas de ligne de texte sans texte. si on insère une ou plusieurs images dans un élément tel que P, DIV, TD etc etc., mais sans texte, alors il n'y a plus de ligne... et donc plus d'espace sous l'image.

En mode strict, même s'il n'y a pas de texte, il suffit d'un élément inline (dont fait partie <img>) pour qu'il y ait cette ligne. Cela donne la possibilité d'avoir une hauteur de ligne, de jouer sur le vertical-align... Mais il y a aussi cet espace sous la ligne.

La solution serait alors de passer l'image en block (img {display:block;} ), ou de jouer sur l'alignement vertical (img {vertical-align: bottom;} et éventuellement sur le line-height si l'image est petite.)

Mais, si les images sont décoratives, il faut mieux tout simplement utiliser des images de fond. Cf : Balise <img> ou feuille de style ?

Avec un Doctype transitional (que ce soit HTML ou XHTML), Opera, Firefox ou Safari seront dans ce mode quasi-standard.
Modifié par Alan (23 May 2006 - 14:29)
merci pour votre explication, mais ce qui me gene dans mon cas c'est que mon image est deja en arriere plan afin de pouvoir mettre "par dessus" l'animation en flash.

j'ai bien voulu tester de reduite l'animation mais on voit la difference, le fait que les bouts ne soient non joints.
Je n'avais pas tellement regardé le code et je n'avais pas vu que ça concernait l'animation (enfin object).
Le problème est le même puisque <object> est de type inline comme <img>, d'où l'espace pour les raisons données ci dessus.
Essayer par exemple : 
.header object {display: block;}

ou 
.header object {vertical-align: bottom}

Modifié par Alan (23 May 2006 - 20:06)
excellent merci pour l'astuce, je prends note ca pourra toujours servir, j'edite le titre Smiley resolu 


.header object {display: block;}
Sujet clos
Aller à