Sujet Précédent Sujet Suivant

Soucis d'affichage

Fermé
SopalinBlanc Messages postés 22 Date d'inscription jeudi 21 avril 2011 Statut Membre Dernière intervention 3 juillet 2011 - 21 avril 2011 à 09:14
SopalinBlanc Messages postés 22 Date d'inscription jeudi 21 avril 2011 Statut Membre Dernière intervention 3 juillet 2011 - 21 avril 2011 à 10:43
Bonjour,

Je suis une grande débutante et je crée actuellement un site sur Dreamweaver

J'ai commencé a placer quelque éléments mais quand j'affiche ma page sur internet (quelque soit le navigateur) ça devient n'importe alors que sur Dreamweaver c'est nickel.

Peut-être cela vient-il de mon code..?


_________________________________________________________________________
Voici mon HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Olivier Lathoumetie sculpteur</title>
<style type="text/css">
<!--
-->
</style>
<link href="style-site.css" rel="stylesheet" type="text/css" media="screen"/>
</head>







<body>
<div id="conteneur">


<img src="images/N1.jpg" />



<div id="Nom">Olivier Lathoumetie sculpteur</div>

<div id="chemin">Présentation</div>

<div id="menu">
<ul>
<li>Présentation</li>
<li>Galerie</li>
<li>Exposition</li>
<li>Atelier</li>
<li>Article</li>
<li>Contact</li>
</ul>
</div>

</div>


</body>
</html>

_________________________________________________________________________

ET MON CSS

#image {
float: left;
width: 95px;
height: 562px;
padding: 0px;
background-repeat: no-repeat;
margin-top: 14px;
margin-right: 0px;
margin-bottom: 24px;
margin-left: 9px;
position: relative;
background-color: #0F6;
}
#Nom {
font-family: Arial, Helvetica, sans-serif;
font-size: 44px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -30px;
float: left;
position: absolute;
width: 720px;
}
#menu ul li {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
list-style-type: none;
padding: 0px;
height: 0px;
margin: 0px;
float: none;
letter-spacing: 0pt;
word-spacing: 0pt;
line-height: 32px;
}
#menu {
margin-top: 200px;
width: 0px;
margin-left: -55px;
float: none;
position: absolute;
clear: both;
}
#chemin {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
float: left;
margin-top: 100px;
margin-left: -25px;
position: absolute;
}
#conteneur {
width: 800px;
}

________________________________________________________________________


VOILA
Si vous voyez un truc qui cloche dites moi!

Merci d'avance pour votre aide


10 réponses

Réponse 1 / 10
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
21 avril 2011 à 09:24
Salut,
Je pense que ton CSS à vraiment à revoir.
Pour ta div nom tu fais : 
#Nom {
font-family: Arial, Helvetica, sans-serif;
font-size: 44px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -30px;
float: left;
position: absolute;
width: 720px;
}

Tu met un : 
margin-left: -30px;

Alors normal que le "O" d'Olivier soit mordu.
pareil pour ton menu avec : 
margin-left: -55px;

après ce qui est de l'empilement de tes menus vires le height qui te sert strictement à rien : 
#menu ul li {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
list-style-type: none;
padding: 0px;
margin: 0px;
float: none;
letter-spacing: 0pt;
word-spacing: 0pt;
line-height: 32px;
}
0
Réponse 2 / 10
SopalinBlanc Messages postés 22 Date d'inscription jeudi 21 avril 2011 Statut Membre Dernière intervention 3 juillet 2011
21 avril 2011 à 09:27
En fait si tu veux j'ai mon image à gauche et je veux que mon nom passe par dessus pour qu'il soit un peu dans l'arrondis tu vois donc c'est le seul moyen que j'ai trouvé pr reussir a faire ça.

J'aimerais te montrer ce a quoi je veux aboutir, comment on poste des images?
0
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
21 avril 2011 à 09:28
Euh malheureusement tu ne peux pas, le site est en ligne ? ou pas encore ?
0
Réponse 3 / 10
SopalinBlanc Messages postés 22 Date d'inscription jeudi 21 avril 2011 Statut Membre Dernière intervention 3 juillet 2011
21 avril 2011 à 09:32
mince... non il n'est pas en ligne...

En fait pour essayer d'expliquer

J'ai mon bloc image a gauche
Et le NOM et le MENU doivent passer par dessus, je veux qu'il s'integre bien a l'image tu vois ce que je veux dire?

Le O du NOM doit arriver sous le bras
et le MENU est presque coller à la "hanche"

Mon code est mal fait?

Y'avait plus simple? lol
0
Réponse 4 / 10
SopalinBlanc Messages postés 22 Date d'inscription jeudi 21 avril 2011 Statut Membre Dernière intervention 3 juillet 2011
21 avril 2011 à 09:38
Voila l'image

[URL=http://imageshack.com/f/nfimage1dnp][IMG]http://img843.imageshack.us/img843/7768/image1dn.png[/IMG][/URL]

Uploaded with [URL=https://imageshack.com/]ImageShack.us[/URL]
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
SopalinBlanc Messages postés 22 Date d'inscription jeudi 21 avril 2011 Statut Membre Dernière intervention 3 juillet 2011
21 avril 2011 à 09:38
http://imageshack.com/f/nfimage1dnp
0
Réponse 6 / 10
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
21 avril 2011 à 09:46
Essayes déjà de mettre en place ce que je t'ai mis plus haut.
Et ensuite je pense que tu devras jouer sur les margin-left(déplacé élément vers la gauche) et le margin-top (déplacé élément verticalement)
je te donne un lien pour essayes de comprendre :
http://www.aidenet.com/css/css40a.htm
0
Réponse 7 / 10
SopalinBlanc Messages postés 22 Date d'inscription jeudi 21 avril 2011 Statut Membre Dernière intervention 3 juillet 2011
21 avril 2011 à 09:56
J'ai enlevé le height ça c'est ok

Mais ce que je voudrais savoir c'est si j'ai eu raison de proceder comme ca:

de mettre mon image en relatif

et le nom et le menu en absolu et du coup utiliser des margin-left négatif pour que le nom et le menu viennent bouffer sur l'image
0
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
21 avril 2011 à 10:05
Je pense que tes absolutes sont nécessaires mais pas tes margin-left négatif.
Si tu fais par exemple un margin-left (de ton menu) d'environ 200px, il sera proche de l'image, mais bien evidemment tu dois mettre un z-index sur ton texte
le z-index permet la position d'empilement (qui est devant qui en gros :D)
donc si tu dis que ton texte doit être au dessus de ton image ca devrait passer (si ton image est détourée)
0
Réponse 8 / 10
SopalinBlanc Messages postés 22 Date d'inscription jeudi 21 avril 2011 Statut Membre Dernière intervention 3 juillet 2011
21 avril 2011 à 10:16
Ah voila c'est ça qu'il me faut!

Le z-index ça s'utilise comment?

et je vais mettre mon image en PNG oui
0
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
21 avril 2011 à 10:20
Alors plus ton z-index sera élévé plus l'élément sera positionner au premier plan
exemple :
si tu as une image et que par dessus tu as du texte, tu mettras ton image en z-index:0 et ton texte en z-index:1
Attention, les z-index ne s'utilise que quand tu as défini une position(relative ou absolute)
je te donne un lien au cas ou :
https://www.zonecss.fr/proprietes-css/z-index-css.html
0
Réponse 9 / 10
SopalinBlanc Messages postés 22 Date d'inscription jeudi 21 avril 2011 Statut Membre Dernière intervention 3 juillet 2011
21 avril 2011 à 10:30
Ok j'ai pigé

Merci beaucoup c'était exactement ce qu'il me fallait!

Bonne journée a toi
0
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
21 avril 2011 à 10:32
Reviens me voir quand tu auras fini tout sa, je suis pressée de voir le résultat ;)
Bonne continuation et bonne journée
0
Réponse 10 / 10
SopalinBlanc Messages postés 22 Date d'inscription jeudi 21 avril 2011 Statut Membre Dernière intervention 3 juillet 2011
21 avril 2011 à 10:43
Pas de soucis!

Merci
0

Discussions similaires

adele
marine carnet-pantier -
irongege -

2 réponses
Agrandir la taille d'affichage de toute l'interface OUTLOOK 2010
bm6969 -
glg29 -

1 réponse
impossible de voir les photos et videos sur une conversation messenger
cortomaltese83 -
Oceii -

4 réponses
Les images ne s'affichent plus
papyrus95 -
melle -

15 réponses
Leboncoin : j'ai un problème d'affichage
maria1508 -
msi123 -

5 réponses