[ HTML-CSS] pb de positionnement
pb de positionnement [ HTML-CSS] - HTML/CSS - Programmation
Marsh Posté le 19-02-2007 à 11:23:16
Ca serait 50 fois mieux de poster un lien vers la page, parce que là c'est impossible de voir d'où peut provenir le problème juste avec le code 
Marsh Posté le 19-02-2007 à 18:15:00
| FlorentG a écrit : Ca serait 50 fois mieux de poster un lien vers la page, parce que là c'est impossible de voir d'où peut provenir le problème juste avec le code |
Donc, Comme indiqué dans le poste :
| Citation : Pour mettre en pratique les leçons du livre j'ai aspiré un site web, détruit tout le code de manière a ne garder que les images et je tente de le reconstruire "à ma sauce" (pour un usage privé et en local je ne compte pas le mettre en ligne!) |
Je ne la mettrais donc pas en ligne puisque ça serait illégal. Par contre je peux en fournir une image (très petite) mais qui a le mérite de montrer la marge de droite qui se positionne mal.
Je sais que c'est vraiment petit je poste donc deux schéma pour mieux expliquer le code (ou plutot ce que je voulais faire avec ce code 
)
Voici la structure de la page avec toute les DIV ID qui existent (en gris se sont les divc qui apparaissent à l'écran, les autres n'étant que des conteneurs):
et voici maintenant comment toutes ces div devraient être placées si cela fonctionnait parfaitement:
J'espère que c'est plus clair pour vous.... je ne peux pas faire beaucoup mieux que ça 
Sujets relatifs:
- [HTML]Création d'un site par un noob
- User Javascript et CSS
- Google Map + Ancre html
- CSS qq questions
- [html] mailto + modification adresse mail [Résolu]
- [CSS] (Résolu) Pourriez-vous tester mon site avec IE6?
- problème d'alignement menu/page(html)
- il y a t il un lien entre C++ et html
- [HTML/CSS] Positionnement de 3 div
- Positionnement HTML/CSS + Mise en forme des cadres
Marsh Posté le 19-02-2007 à 04:07:00
Bonjour à tous,
Je viens de m'acheter un bouquin pour apprendre le HTML "Réussir son site web avec XHTML et CSS" édité chez Eyrolles. j'en suis très content et je m'éclate bien dessus.
Pour mettre en pratique les leçons du livre j'ai aspiré un site web, détruit tout le code de manière a ne garder que les images et je tente de le reconstruire "à ma sauce" (pour un usage privé et en local je ne compte pas le mettre en ligne!)
La structutre graphique de site est assez simple puisqu'elle tient en 5 images (pas compliqué pour un début). Seulement voilà j'ai un gros soucis avec le positionnement de la marge de droite qui refuse de se mettre au même niveau que les autres (impossible de la mettre au top du body)
J'ai parcouru bon nombre de sites, me suis détruit les yeux à relire 1( fois mon bouquin mais rien n'y fait: j'ai dû louper quelque chose, et je ne vois pas ce que c'est.
Je vous poste donc mon code HTML suivi du CSS au cas où quelqu'un aurait moins de m**** que moi dans les yeux.
Je m'en excuse à l'avance pour la longueur du poste...
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>Mes premiers pas en HTML</title>
<link rel="stylesheet" media="screen" type="text/css" title="design" href="style.css" />
<meta name="title" content="essai HTML" />
<meta name="description" content="Ceci est un page d'appentissage." />
<meta http-equiv="Content-Language" content="French" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<map name="theme_map">
<area shape="rect" alt="eq2_map" coords="0,0,200,80" href="index.htm" />
<area shape="rect" coords="74,0,102,28" href="#" />
<area shape="rect" coords="37,0,65,28" href="#" />
<area shape="rect" coords="0,0,28,28" href="#" />
</map>
<div id="marge_gauche"> </div>
<div id="conteneur">
<div id="ensemble">
<div id="sous_conteneur">
<div id="navig"><div class="nav"> <p>...:::: <a href="#" target="cadre1">Accueil</a> I <a href="#">les articles</a> I <a href="#">le forum</a> I <a href="#">La galerie</a> I <a href="#">Le livre d'or</a> I <a href="#">Les liens</a> ::::...<p></div></div>
<div id="page"><img src="../images/logo_parchemin.png" usemap="theme_map"name="eq2_map" width="204" height="83" /> </div>
<div id="pied"> </div>
</div>
</div>
<div id="marge_droite"> </div>
</div>
</body>
</html>
CSS:
body
{
width: 974px;
height: 875px;
margin: 0;
padding: 0;
color: #000000;
background-color: #000000;
}
#marge_gauche
{
float: left;
background:url(../images/mg.jpg) no-repeat top;
width:212px;
height:875px;
}
#marge_droite
{
float: right;
margin-top: 0;
background:url(../images/md.jpg) no-repeat top;
width:212px;
height:875px;
}
#navig
{
margin-top: 0px;
background:url(../images/nav_barre.jpg) no-repeat top;
width:550px;
height:61px;
padding: 0;
}
#page
{
background:url(../images/page.jpg) no-repeat top;
width:550px;
height:640px;
}
#pied
{
background:url(../images/pied.jpg) no-repeat top;
width:550px;
height:174px;
}
#conteneur
{
float: right;
width:762px;
padding: 0;
margin: 0;
}
#sous_conteneur
{
float: left;
width:550px;
height: 875px;
padding: 0;
margin: 0;
}
#ensemble
{
position: relative;
width:762px;
height: 875px;
padding: 0;
margin: 0;
}
.nav
{
padding-top:1px;
padding-left:25px;
font-size:14px;
font-weight: bold;
}
Vous pourrez constater que le code est assez scolaire, mais vu que je débute j'essaie de bien retranscrire les indications du guide.
Merci à l'avance pour votre aide éventuelle.