Problème htlm ou CSS

[Fermé]
Signaler
Messages postés
3
Date d'inscription
jeudi 6 décembre 2012
Statut
Membre
Dernière intervention
6 décembre 2012
-
Messages postés
3
Date d'inscription
jeudi 6 décembre 2012
Statut
Membre
Dernière intervention
6 décembre 2012
-
Bonjour,

Bonjour,
Alors je débute totalement dans la programmation, à la base je suis plus graphiste. Dans le cadre de mes cours, j'ai dû lancer dans la création d'un site web et de sa programmation, jusque là, ca allait à peu près mais et là je rencontre un problème que je n'arrive pas à résoudre. C'est pour ma page contact, quand j'intègre de nouveaux éléments, dans des balises div, ca bouge d'autres éléments et je n'arrive pas à les placer comme je le souhaite. Une bonne âme pourrait elle m'aider svp...

PS : mardi, j'ai un examen et toute une partie sera la dessus :/ ... je suis censée présenter un site qui marche et là c'est pas vraiment le cas... pitié :D


4 réponses

Messages postés
2105
Date d'inscription
samedi 28 juin 2008
Statut
Membre
Dernière intervention
26 mars 2020
574
Il est difficile de t'aider car on ne connait pas ton code... ni ce qui arrive par rapport à ce que tu veux exactement.

Copie-nous ton code ici, et dis-nous comment tu aimerais que le tout s'affiche.
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42674 internautes nous ont dit merci ce mois-ci

Messages postés
3
Date d'inscription
jeudi 6 décembre 2012
Statut
Membre
Dernière intervention
6 décembre 2012

ok alors voici le code html

</head>

<body>

<div id="banniere">
<img src="images/banniere.png"/>
</div>

<div id="MenuTexte">
<ul>
<li> Le schéma cyclable </li>
<li> La pratique du vélo </li>
<li> L'offre cyclable </li>
<li> Contact </li>
</ul>
</div>



<div id="fondblanc2">
<img src="images/fond-menu.jpg"/>
</div>

<div id="introduction">
<p> Pour nous contacter, remplissez le formulaire ci-dessous. </p>
</div>


<div id="fond-menu2">
</div>


<div class="formulaire2" id="formulaire">
<table cellspacing="0" cellpadding="0" border="0"><tr><td><iframe width="400" height="450" marginheight="25" marginwidth="12" frameborder="0" src="http://fr.foxyform.com/form.php?id=112041&sec_hash=267422cd0cf"></iframe></td></tr><tr><td align="center"><a style="font:8px Arial;color:#5C5C5C;"</a></td></tr></table>
</div>




<div id="pied-de-page3">
<p> SIAC - Syndicat Intercommunal d'Aménagement du Chablais - 04 50 04 24 24 </p>
</div>

</body>
</html>

</body>
</html>



et voici le code CSS


body {
background-image:url(images/fond.jpg);
background-repeat:no-repeat;
width:1024px;
height:768px;

}

a {
text-decoration:none
}

#banniere {
width:700px;
height:121px;
margin-left:197px;
margin-top:20px;
}

#imagespage1 {
margin-left:222px;
margin-top:-172px;
}

#page1-2image1 {
width:562px;
height:447px;
margin-left:520px;
margin-top:-175px;
}

#page1-2image2 {
width:561px;
height:226px;
margin-left:222px;
margin-top:-220px;
}

#page1-3image1 {
width:263px;
height:153px;
margin-left:520px;
margin-top:-175px;
}

#page1-3image2 {
width:561px;
height:273px;
margin-left:222px;
margin-top:25px;
}

#page2-1image1 {
width:262px;
height:143px;
margin-left:520px;
margin-top:-70px;
}

#page2-1image2 {
width:561px;
height:276px;
margin-left:222px;
margin-top:30px;
}

#page2-2image1 {
width:263px;
height:124px;
margin-left:520px;
margin-top:-70px;
}

#page2-2image2 {
width:561px;
height:297px;
margin-left:222px;
margin-top:25px;
}

#page2-3image1 {
width:264px;
height:113px;
margin-left:520px;
margin-top:-70px;
}

#page2-3image2 {
width:562px;
height:311px;
margin-left:222px;
margin-top:25px;
}

#page2-4image {
width:562px;
height:321px;
margin-left:222px;
margin-top:165px;
}

#page3-1image1 {
width:263px;
height:136px;
margin-left:520px;
margin-top:-80px;
}

#page3-1image2 {
width:562px;
height:292px;
margin-left:222px;
margin-top:30px;
}

#page3-2image1 {
width:265px;
height:162px;
margin-left:520px;
margin-top:-70px;
}

#page3-2image2 {
width:562px;
height:265px;
margin-left:-297px;
margin-top:20px;
}

#page3-3image1 {
width:265px;
height:116px;
margin-left:520px;
margin-top:-70px;
}

#page3-3image2 {
width:562px;
height:309px;
margin-left:-297px;
margin-top:20px;
}

#fond-menu {
width:263px;
height:201px;
margin-left:300px;
}




#MenuTexte{
margin-left:156px;
}

#fondBlanc{
background-image:url(images/fond-menu.jpg);
background-repeat:no-repeat;
}



#fondblanc2 {
background-image:url(images/fond-menu.jpg);
background-repeat:no-repeat;
margin-top:-50px;
margin-left:197px;
}


#MenuTexte ul li {
background-image:url(images/bouton-menu2.png);
background-repeat:no-repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
list-style-type:none;
display:inline-block;
text-align:center;
padding-left:0px;
padding-top:13px;
height:44px;
width:146px;
color:#ffffff;
margin-left:1px;
}

#sous-menu {
margin-left:167px;
margin-top:-560px;
margin-bottom:200px;

}



#sous-menu ul li {
background-color:#1b4c67;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
list-style-type:none;
display:inline-block;
margin-left:-10px;
color:#ffffff;
padding-top:8px;
padding-bottom:8px;
padding-right:26px;
padding-left:27px;
}

#sous-menupage2 {
margin-left:176px;
margin-top:-560px;
margin-bottom:100px;

}

#sous-menupage2 ul li {
background-color:#1b4c67;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
list-style-type:none;
display:inline-block;
margin-left:-20px;
color:#ffffff;
padding-top:8px;
padding-bottom:8px;
padding-right:22px;
padding-left:23px;
}

#sous-menupage3 {
margin-left:176px;
margin-top:-560px;
margin-bottom:100px;

}

#sous-menupage3 ul li {
background-color:#1b4c67;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
list-style-type:none;
display:inline-block;
margin-left:-20px;
color:#ffffff;
padding-top:8px;
padding-bottom:8px;
padding-right:54px;
padding-left:55px;
}




#introduction {
background-color:#1b4c67;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
list-style-type:none;
display:inline-block;
margin-top:300px;
margin-left:-10px;
color:#ffffff;
padding-top:8px;
padding-bottom:8px;
padding-right:26px;
padding-left:27px;
}



#contenu {
font-family:Arial, Helvetica, sans-serif;
color:#1b4c67;
font-size:12px;
width:280px;
height:333px;
text-align:justify;
margin-top:-670px;
margin-left:220px;
white-space:inherit;
}


#contenu1-2 {
font-family:Arial, Helvetica, sans-serif;
color:#1b4c67;
font-size:12px;
width:280px;
height:333px;
text-align:justify;
margin-top:-665px;
margin-left:220px;
white-space:inherit;
}

#contenu1-3 {
font-family:Arial, Helvetica, sans-serif;
color:#1b4c67;
font-size:12px;
width:280px;
height:333px;
text-align:justify;
margin-top:-660px;
margin-left:220px;
white-space:inherit;
}

#contenu2-1 {
font-family:Arial, Helvetica, sans-serif;
color:#1b4c67;
font-size:12px;
width:280px;
height:333px;
text-align:justify;
margin-top:-670px;
margin-left:220px;
white-space:inherit;
}

#contenu2-2 {
font-family:Arial, Helvetica, sans-serif;
color:#1b4c67;
font-size:12px;
width:280px;
height:333px;
text-align:justify;
margin-top:-665px;
margin-left:220px;
white-space:inherit;
}

#contenu2-3 {
font-family:Arial, Helvetica, sans-serif;
color:#1b4c67;
font-size:12px;
width:280px;
height:333px;
text-align:justify;
margin-top:-660px;
margin-left:0px;
white-space:inherit;
}

#contenu2-4 {
font-family:Arial, Helvetica, sans-serif;
color:#1b4c67;
font-size:12px;
width:280px;
height:333px;
text-align:justify;
margin-top:-680px;
margin-left:0px;
white-space:inherit;
}

#contenu3-1 {
font-family:Arial, Helvetica, sans-serif;
color:#1b4c67;
font-size:12px;
width:280px;
height:333px;
text-align:justify;
margin-top:-675px;
margin-left:0px;
white-space:inherit;
}

#contenu3-2 {
font-family:Arial, Helvetica, sans-serif;
color:#1b4c67;
font-size:12px;
width:280px;
height:333px;
text-align:justify;
margin-top:-670px;
margin-left:0px;
white-space:inherit;
}

#contenu3-3 {
font-family:Arial, Helvetica, sans-serif;
color:#1b4c67;
font-size:12px;
width:280px;
height:333px;
text-align:justify;
margin-top:-660px;
margin-left:0px;
white-space:inherit;
}

#pied-de-page1 {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
width:511px;
height:8px;
font-size:9px;
margin-top:148px;
margin-left:345px;
}

#pied-de-page2 {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
width:511px;
height:8px;
font-size:9px;
margin-top:144px;
margin-left:345px;

}

#pied-de-page3 {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
width:511px;
height:8px;
font-size:9px;
margin-top:138px;
margin-left:345px;

}

#pied-de-page4 {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
width:511px;
height:8px;
font-size:9px;
margin-top:145px;
margin-left:345px;

}

#pied-de-page5 {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
width:511px;
height:8px;
font-size:9px;
margin-top:143px;
margin-left:345px;

}

#pied-de-page6 {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
width:511px;
height:8px;
font-size:9px;
margin-top:135px;
margin-left:145px;

}

#pied-de-page7 {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
width:511px;
height:8px;
font-size:9px;
margin-top:148px;
margin-left:145px;

}

#pied-de-page8 {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
width:511px;
height:8px;
font-size:9px;
margin-top:150px;
margin-left:145px;

}

#pied-de-page9 {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
width:511px;
height:8px;
font-size:9px;
margin-top:147px;
margin-left:145px;

}

#pied-de-page10 {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
width:511px;
height:8px;
font-size:9px;
margin-top:139px;
margin-left:145px;
}




.formulaire2 {
width:400px;
height:450px;
margin-left:300px;
margin-top:378px;

}




je vous remercie pour votre aide. Peux ton poster des photos ? si oui si je vous montre le résultat, peut être que vous y verriez plus claire
Messages postés
1390
Date d'inscription
dimanche 1 juillet 2012
Statut
Membre
Dernière intervention
14 décembre 2012
205
Bonjour, je fais un DEUST webmaster et je suis aussi en train de faire un site a rendre a la fin de la semaine...j'ai cru que tu était une collègue mais non car nous le sujet est imposé
Pour placer tes élément tu as la position relative ,
pour la photo tu as imagehack

Dans linux il y a le noyau et dans Windows les pépins
Messages postés
3
Date d'inscription
jeudi 6 décembre 2012
Statut
Membre
Dernière intervention
6 décembre 2012

Non là j'arrive à la fin d'une formation professionnelle arts graphiques, et il y a une partie sur le web.

Alors vous pouvez voir ma maquette photoshop ici :
http://imageshack.com/f/mspage4jwj

Et en fait en bidouillant un peu j'ai trouvé une solution. Le bandeau bleu ou il y a marqué "si vous souhaitez nous contacter...", sur les autres pages c'est un sous-menu, du coup pour cette page, j'ai aussi fait un sous-menu.

Mais j'aimerais bien savoir pourquoi j'ai pas réussis autrement, car là j'ai pris un moyen détourné, j'ai un peu tricher finalement et ça m'embête... alors si vous voyez des erreurs, n'hésitez pas à ma le dire.

Sinon maintenant que j'ai toutes mes pages, il va falloir que je fasse les liens dessus, du coup je voulais savoir :
- comment changer la couleur du lien et mettre en forme le texte
- là mes onglets de menu sont bleu, et j'aimerais que l'onglet actif soit blanc pour que ca permette de s'y retrouver, et là je ne sais pas du tout comment faire.

Merci d'avance pour votre aide.

Si vous avez besoin d'autre chose, d'autres images, ou du nouveau code, n'hésitez pas à me le dire