Sondage :

Publicité




Partenaires




Jmax-Hardware

mxdev.net

feedburner
donate.gif


171 visiteur(s) en ligne
Forums d'entraide informatique - Les forums de PCW
[Résolu] Html/CSS - Version imprimable

+- Forums d'entraide informatique - Les forums de PCW (http://forum.pcinfo-web.com)
+-- Forum : Forum Informatique (/forumdisplay.php?fid=39)
+--- Forum : Internet - Navigation -Programmation - Scripts - Developpement (/forumdisplay.php?fid=8)
+--- Discussion : [Résolu] Html/CSS (/showthread.php?tid=1380)

Html/CSS [Résolu] - Ludo - 20-06-2007 17:38 PM

Bonsoir

J'ai créer un site ( qui n'est pour le moment pas en ligne) et j'ai un souci

La première image de chacune de mes pages est décalé vers le bas (mais ce uniquement sur IE)

voici mon code HTML

=======


Sélectionner - Agrandir / Réduire


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

</html>

<!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">

<head>

<title>Titre du site</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" media="screen" type="text/css" title="Paysage" href="Accueil.css" />

</head>

<body>

 

 

 <!-- Cadre correspondant à un sous-menu -->

        [url=Acueil.html] Accueil

 </p>[/url] [url=Cuisine.html] Le Séjour cuisine</p> [/url]  [url=chambres.html] Les Chambres </p> [/url] [url=Salledebain.html] Les Salles de bains</p>[/url] [url=Terrasse.html]Les Terrasses </p>[/url] [url=Tarif.html]Les tarifs </p> [url=maison.html] Les plans </p> [/url] [url=Paysage.html] La faune  et  la flore   </p> [/url][/url][url=chastel.html]Chastel-Arnaud</p>[/url][url=3becs.html] Les 3 Becs</p>[/url]<ul><li class="liste">les loisirs <ul>[url=monument.html]le patrimoine</p>[/url][url=sport.html]le sport</p>[/url][url=culture.html]Les spectacles</p>[/url]</ul></li>[url=mailto:ludo2802@hotmail.fr] contactez nous </p>[/url]

   

<p class="intro"> Une fois installés dans le gîte "L'appel des trois Becs" vous pourrez découvrir la flore, la faune, et les lumières multiples où se mélangent la Provence les Alpes et le Vercors 

 </p>



<p class="intro"> Vous pouvez revenir au gîte "L'appel des trois Becs" à differentes saisons voir d'autres couleurs faire d'autre pas au fil d'une des dernières rivière sauvage d'europe,admirer la fragilité et la beauté de la nature.  </p>

 

   </body>

</html>



=======

et voici mon code CSS:

=======


Sélectionner - Agrandir / Réduire


body

{

   width: 1000px;

   margin: auto;

   margin-top: 20px;

   margin-bottom: 20px;    

   background-color: green;

behavior: url("a.htc");

}

#anim

{

	margin-top: 25px;

	background-image: url("sport.gif");

	width: 700px;

   height: 280px;

background-repeat: no-repeat;

background-position: 300px -10px;

}



.test

{

	text-align: center;

	color: white;

	font-family: arial;

}



.presentation

   {

   	text-align:center;

   	color: silver;

   }

.liste

{

color: #CCCC00;

}

#bis

{

	background-image: url("3bec_soleil.jpg");

	width: 1100px;

   height: 280px;

background-repeat: no-repeat;

}

.eau

{

	color: 3399CC;

	text-align: center;

	front-size: 14px;

}

#en_tete

{

   width: 1100px;

   height: 155px;

   background-image: url("animj.gif");

   background-repeat: no-repeat;

   margin-bottom: 5px;

}



.retour

{

	color: white;

	text-align: center;

}

ul

{

	color: #339966;

	front-size: 14px;



}

.bienvenue

{

	front-size: 12px;

	font-family: Arial;

	font-weight: lighter;

	color: blue;

	text-align: center;

	text-decoration: blink;

}

	a

	{ color: #CCCC00;

	}

	

#menu

{

	 width: 60Opx;

   height: 900px;

   float: left; /* Le menu flottera à gauche */

   width: 185px; /* Très important : donner une taille au menu */

   background-image: url("menu.jpg");

   background-repeat: repeat-x;

  margin-right: 30px;

   margin-bottom: 20px;

   

   margin-bottom: 70px; /* Pour éviter que les éléments du menu ne soient trop collés */

}

#bande

{

	 width: 60Opx;

   height: 900px;

  float: right; /* Le menu flottera à gauche */

   width: 172px; /* Très important : donner une taille au menu */

   background-image: url("gite.jpg");

   background-repeat: repeat-x;

  margin-right: 30px;

   margin-bottom: 20px;

   

   margin-bottom: 70px; /* Pour éviter que les éléments du menu ne soient trop collés */

}

.liste

{

color: #CCCC00;

}

#menu ul li ul {

  display:none;

}

#menu ul li:hover ul {

  display:block;

  position:relative;

  top:-4px;

  left:40px;

  color:  #CCCC00;

  background-color: green

  ;

}

.sous_menu

{ color: #CCCC00;

}



#element_menu

{

	position: relative;

   top: 90px; 

   left:12px;

   margin-top: 1px;

  front-size: 8px; 

}



  

h1

{	front-size: 12px;

	font-family: "Verdana";

	font-weight: lighter;

	color: #33CC66;

	text-align: center;

	text-decoration: none;

	}

	#copyright

	{

		front-size: 16px;

	font-family: Verdana;

	color: red;

	text-position: center;

	}	

	

.menu_liste

{

	front-size: 4px;

	font-family: Arial;

	color: #CCCC00;

}

	a

	{

		color:  #CCCC00;

	}

	.haut_menu

	{

	front-size: 4px;

	font-family: Arial;

	color: white;

	text-decoration: none;

	}

	a

	{

		front-size: 4px;

	font-family: Arial;

	color: blue;

	text-decoration: none;

	

}

.contact 

{

	front-size: 16px;

	font-family: Verdana;

	color: red;

text-decoration: none;

}

.intro

{

	front-size 14px

	front-family: Verdana;

	color: #99CC66;

	text-align: center;

}

.lien_gîte de france

{

	front-size 14px

	front-family: Verdana

	color: white;

}

#pied_de_page

{

	backgroud-image:url("copyright.jpg");

	width: 1200px;

   height: 800px;	

}

#image_1

{

   width: 2300px;

   height: 540px;

   background-image: url("Dos.jpg");

   background-repeat: no-repeat;

   background-position: 200px -10px;

   margin-bottom: 2px;



}	



#image_2

{

    width: 2300px;

   height: 540px;

   background-image: url("cote.jpg");

   background-repeat: no-repeat;

   background-position: 200px -10px;

   margin-bottom: 2px;

   margin-right: 1px;

   }	

#image_3

{

	 width: 2300px;

   height: 540px;

   background-image: url("cote_2.jpg");

   background-repeat: no-repeat;

   background-position: 200px -10px;

   margin-bottom: 2px;

}

#image_4

{

   width: 2300px;

   height: 540px;

   background-image: url("Dos2.jpg");

   background-repeat: no-repeat;

   background-position: 290px -10px;

   margin-bottom: 2px;



}

#image_1s

{

   width: 300px;

   height: 140px;

   background-image: url("cayak2jpg");

   background-repeat: no-repeat;

   background-position: 550px -10px;

   margin-bottom: 2px;



}	



#image_2s

{

    width:430px;

   height: 340px;

   background-image: url("poney2.JPG");

   background-repeat: no-repeat;

   background-position: 290px -10px;

   margin-bottom: 2px;

   margin-right: 1px;

   }	

#image_3s

{

	 width: 800px;

   height: 150px;

   background-image: url("cheval.jpg");

   background-repeat: no-repeat;

   background-position: 550px -10px;

   margin-bottom: 2px;

}

#image_4s

{

   width: 300px;

   height: 140px;

   background-image: url("marche.jpg");

   background-repeat: no-repeat;

   background-position: 290px -10px;

   margin-bottom: 2px;



}

#image_5s

{

	 width: 800px;

   height: 150px;

   background-image: url("baignade.jpg");

   background-repeat: no-repeat;

   background-position: 550px -10px;

   margin-bottom: 2px;

}

#image_6s

{

   width: 300px;

   height: 140px;

   background-image: url("cayak1.jpg");

   background-repeat: no-repeat;

   background-position: 290px -10px;

   margin-bottom: 2px;



}

#image_7s

{

   width: 400px;

   height: 240px;

   background-image: url("velo.jpg");

   background-repeat: no-repeat;

   background-position: 550px -10px;

   margin-bottom: 2px;

}

#image_8s

{

   width:300px;

   height: 140px;

   background-image: url("ulm.jpg");

   background-repeat: no-repeat;

   background-position: 290px -10px;

   margin-bottom: 2px;

}

#image_9s

{

   width: 300px;

   height: 140px;

   background-image: url("chaval2.jpg");

   background-repeat: no-repeat;

   background-position: 450px -10px;

   margin-bottom: 2px;

}

.ancre

{

	color: white;

	text-align: center;

	text-decoration: underline;

}



#image_1p

{

   width: 300px;

   height: 140px;

   background-image: url("chamois_couche.jpg");

   background-repeat: no-repeat;

   background-position: 550px -10px;

   margin-bottom: 2px;



}	



#image_2p

{

    width: 230px;

   height: 140px;

   background-image: url("chamois_de_profile.jpg");

   background-repeat: no-repeat;

   background-position: 290px -10px;

   margin-bottom: 2px;

   margin-right: 1px;

   }	

#image_3p

{

	 width: 800px;

   height: 300px;

   background-image: url("animaux.gif");

   background-repeat: no-repeat;

   background-position: 250px -10px;

   margin-bottom: 2px;

}

#image_3pbis

{

	width: 1200px;

   height: 300px;

   background-image: url("fleur.gif");

   background-repeat: no-repeat;

   background-position: 600px -10px;

   margin-bottom: 2px;

}

#image_4p

{

   width:800px;

   height: 300px;

   background-image: url("3becs.gif");

   background-repeat: no-repeat;

   background-position: 360px -10px;

   margin-bottom: 2px;



}

#image_5p

{

	 width: 800px;

   height: 150px;

   background-image: url("mouton.gif");

   background-repeat: no-repeat;

   background-position: 550px -10px;

   margin-bottom: 2px;

}

#image_6p

{

   width: 800px;

   height: 150px;

   background-image: url("lézard.jpg");

   background-repeat: no-repeat;

   background-position: 290px -10px;

   margin-bottom: 2px;



}

#image_7p

{

   width: 300px;

   height: 140px;

   background-image: url("heron2.jpg");

   background-repeat: no-repeat;

   background-position: 550px -10px;

   margin-bottom: 2px;

}

#image_8p

{

   width:300px;

   height: 140px;

   background-image: url("fleur1.jpg");

   background-repeat: no-repeat;

   background-position: 290px -10px;

   margin-bottom: 2px;

}

#image_9p

{

   width: 300px;

   height: 140px;

   background-image: url("fleur2.jpg");

   background-repeat: no-repeat;

   background-position: 550px -10px;

   margin-bottom: 2px;

}

#image_10p

{

   width: 300px;

   height: 140px;

   background-image: url("fleur3.jpg");

   background-repeat: no-repeat;

   background-position: 290px -10px;

   margin-bottom: 2px;

}

#image_11p

{

   width: 400px;

   height: 340px;

   background-image: url("fleur4.jpg");

   background-repeat: no-repeat;

   background-position: 550px -10px;

   margin-bottom: 2px;

}

#image_12p

{

   width: 300px;

   height: 140px;

   background-image: url("fleur4.jpg");

   background-repeat: no-repeat;

   background-position: 290px -10px;

   margin-bottom: 2px;

}



======
avez vous une idée du problème ?

Merci d'avance. Big Grin

- Teclis - 21-06-2007 06:41 AM

J'ai édité ton code pour le rendre plus lisible Smile Euh sinon, pour ton problème, j'ai pas trop regardé, mais que viennent faire ces

Sélectionner - Agrandir / Réduire
[url=xxxd]Accueil[/url]



C'est pas du XHTML ça je crois ^^

Teclis

- Tony - 21-06-2007 07:04 AM

De plus,



Sélectionner - Agrandir / Réduire
 <!-- Cadre correspondant à un sous-menu -->

        [url=Acueil.html] Accueil

 </p>[/url] [url=Cuisine.html] Le Séjour cuisine</p> [/url]  [url=chambres.html] Les Chambres </p> [/url] [url=Salledebain.html] Les Salles de bains</p>[/url] [url=Terrasse.html]Les Terrasses </p>[/url] [url=Tarif.html]Les tarifs </p> [url=maison.html] Les plans </p> [/url] [url=Paysage.html] La faune  et  la flore   </p> [/url][/url][url=chastel.html]Chastel-Arnaud</p>[/url][url=3becs.html] Les 3 Becs</p>[/url]<ul><li class="liste">les loisirs <ul>[url=monument.html]le patrimoine</p>[/url][url=sport.html]le sport</p>[/url][url=culture.html]Les spectacles</p>[/url]</ul></li>[url=mailto:ludo2802@hotmail.fr] contactez nous </p>[/url]




Balise </p> seule, pas de <p>

De plus, je ne vois la présence d'aucune balise <img> ...

- Teclis - 21-06-2007 07:57 AM

De plus, on ne code pas avec des classe permettant d'afficher des images, on code avec un truc du style :

Sélectionner - Agrandir / Réduire


&amp;#60;img src="chemin_vers_l_image" alt="de&amp;#0115;cription" class="nom_de_la_classe" /&amp;#62;



et dans ta classe, tu ne définis pas de background, mais juste taille/position, etc.

@tony : c'est pour ça qu'il n'y a pas de balises <img />

- Ludo - 21-06-2007 08:02 AM

ok merci

- Teclis - 21-06-2007 11:14 AM

Tu n'as plus de problèmes ?

Html/CSS [Résolu] - Zarnergun - 22-06-2007 16:50 PM

salut, De plus je te conseille de structurer ton code

Sinon il se peut que tu es des problemes de positionnement avec le css sous IE car les dimensions ne sont pas calculés de la meme maniere (sous IE 6), probleme resolu sous Ie 7 !

les hacks et autre methodes (bien que critiqués sont la pour toi, meme si tu es pas vraiment pour je te conseille ce tuto :

http://www.siteduzero.com/tuto-3-2569-0-faire-un-site-compatible-ie-et-ff.html

)