525 visiteur(s) en ligne
Date actuelle : 15-11-2024, 08:56 AM Bienvenue, Visiteur ! ( Identification S'enregistrer )







 
[Résolu] Html/CSS
 
Note de cette discussion :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
Auteur Message
Ludo Hors ligne
Newbie
*

Messages : 42
Inscription : Jun 2007
Réputation : 0
Message : #1
Html/CSS [Résolu]
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

=======



<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:

=======



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

20-06-2007 17:38 PM
Envoyer un email à cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Teclis Hors ligne
Informaticien débutant
**

Messages : 93
Inscription : Jun 2007
Réputation : 0
Message : #2
 
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

[url=xxxd]Accueil[/url]



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

Teclis

21-06-2007 06:41 AM
Envoyer un email à cet utilisateur Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Tony Hors ligne
Newbie
*

Messages : 36
Inscription : Jun 2007
Réputation : 0
Message : #3
 
De plus,



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


Image: 2328.png
21-06-2007 07:04 AM
Envoyer un email à cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Teclis Hors ligne
Informaticien débutant
**

Messages : 93
Inscription : Jun 2007
Réputation : 0
Message : #4
 
De plus, on ne code pas avec des classe permettant d'afficher des images, on code avec un truc du style :


&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 />

21-06-2007 07:57 AM
Envoyer un email à cet utilisateur Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Ludo Hors ligne
Newbie
*

Messages : 42
Inscription : Jun 2007
Réputation : 0
Message : #5
 
ok merci
21-06-2007 08:02 AM
Envoyer un email à cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Teclis Hors ligne
Informaticien débutant
**

Messages : 93
Inscription : Jun 2007
Réputation : 0
Message : #6
 
Tu n'as plus de problèmes ?
21-06-2007 11:14 AM
Envoyer un email à cet utilisateur Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Zarnergun Hors ligne
Petit Branleur Heureux :)
******

Messages : 4 196
Inscription : Feb 2007
Réputation : 12
Message : #7
Html/CSS [Résolu]
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

)

Légèrement en vacances (bcp en fait)
Bux
22-06-2007 16:50 PM
Envoyer un email à cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse




Discussions apparemment similaires...
Discussion : Auteur Réponses : Affichages : Dernier message
  Aide pour formulaire html Greg-au-spa 7 6 494 12-04-2013 19:56 PM
Dernier message: Troll
  page html vers page php zorlig 5 4 940 29-08-2008 16:42 PM
Dernier message: Zarnergun
  [HTML] Problème de position N!GhT 6 3 303 07-08-2006 20:09 PM
Dernier message: N!GhT

Aller à :


Utilisateur(s) parcourant cette discussion : 1 visiteur(s)