Sujet Précédent Sujet Suivant

Problème htlm ou CSS

Fermé
Mamzelle K Messages postés 3 Date d'inscription jeudi 6 décembre 2012 Statut Membre Dernière intervention 6 décembre 2012 - Modifié par irongege le 6/12/2012 à 19:06
Mamzelle K Messages postés 3 Date d'inscription jeudi 6 décembre 2012 Statut Membre Dernière intervention 6 décembre 2012 - 6 déc. 2012 à 19:37
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

Réponse 1 / 4
GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 591
Modifié par GrifOli le 6/12/2012 à 02:29
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
Réponse 2 / 4
Mamzelle K Messages postés 3 Date d'inscription jeudi 6 décembre 2012 Statut Membre Dernière intervention 6 décembre 2012
6 déc. 2012 à 18:47
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
0
Réponse 3 / 4
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
Modifié par @lobotomix:~# rm -rf * le 6/12/2012 à 19:06
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
0
Réponse 4 / 4
Mamzelle K Messages postés 3 Date d'inscription jeudi 6 décembre 2012 Statut Membre Dernière intervention 6 décembre 2012
6 déc. 2012 à 19:37
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
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Comment ouvrir un fichier au format HTLM
Patrice -
bestaxel1999 -

16 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses