Soucis d'affichage
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
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
-
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; } -
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? -
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 -
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] -
http://imageshack.com/f/nfimage1dnp
-
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 -
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-
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)
-
-
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-
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
-
-
Ok j'ai pigé
Merci beaucoup c'était exactement ce qu'il me fallait!
Bonne journée a toi -
Pas de soucis!
Merci
