Forums d'entraide informatique - Les forums de PCW

Forums d'entraide informatique - Les forums de PCW > Forum Informatique > Internet - Navigation -Programmation - Scripts - Developpement > Html/CSS
Version complète : Html/CSS
Vous consultez actuellement la version basse qualité d'un document. Voir la version complète avec le bon formatage.

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 ?

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-....html

)
Forums d'entraide informatique - Les forums de PCW > Forum Informatique > Internet - Navigation -Programmation - Scripts - Developpement > Html/CSS
URLs de référence