problème positionement des div


Er0r_Oo Membre 6 messages
Baby Forumeur‚
Posté(e)

bonjour à tous 

voila mon problème j'essaye pour la prmière fois de réaliser un design extensible en trois collones (navigation,contenu,news), donc avec des valeur en %, mais seulement les div ne s'alignent pas, les marges sont bien respecter ainsi que les largeurs des div seulement les element bloc se place les un en dessous des autre sa me forme donc un espèce d'escalier

PS: j'ai essayer dec hanger les % en px mais le résultat est le même

voici le code xhtml :

<?xml version="1.0" encoding="UTF-8"?>
<!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"
lang="fr">

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


<body>
<div id="menu">
<ul>
    	<li><a href="index.html">Accueil</a></li>
 	   <li><a href="#">Travaux</a></li>
 	   <li><a href="#">A popos</a></li>
 	   <li><a href="#">Contact</a></li>
 	<li><a href="#">Quete</a></li>
 	   <li><a href="#">Forum</a></li>
    </ul>
</div>

<div id="bann">
<img src="images/bann.jpg" alt="bannière" />
</div>

<div id="navigation">
<div class="element">
    <h3>Menu</h3>
<ul>
    	<li><a href="#">Accueil</a></li>
 	   <li><a href="#">Travaux</a></li>
 	   <li><a href="#">A popos</a></li>
 	   <li><a href="#">Contact</a></li>
 	<li><a href="#">Quete</a></li>
 	   <li><a href="#">Forum</a></li>
    </ul>
 </div>
</div>

<div id="contenu">
<h1>Bienvenue</h1>
   <h3>Une grande quête vous attend</h3>
   <p>Ccg est un pays imaginaire constitué de plusieurs îles.

   Mais une vieille  légende raconte qu'un trésor d'une valeur inestimable serait caché sur une île ("voir Histoire de couincouin gang"). C'est à partir de cette légende que vous décidez de partir à la recherche de se trésor légendaire et de suivre les traces de B.E.Cythebalois, le grand navigateur partit pour trouver ce trésor mais jamais revenu sur son ile... </p>
<p>
Votre quête commence ici, à vous de percer les secrets de ce monde et de résoudre les différents indices pour peut être trouvé ce mystérieux trésor... Pour commencer la quête, vous devez allez dans "Menu des quêtes".

PS: pour connaitre exactement le principe du site je vous invite à visiter cette page:
<a href="#" title="principe du site">C'est ici</a>
</p>

<h4>Pour infos</h4>
<p>Des mini quête s’ajouterons au fur et à mesure (toutes disponible gratuitement)<br/>
pour plus d'informations dirigez vous sur "défis mini-quête"... Si vous avez un problème sur le site ou sur la quête, veuillez vous adresser à un administrateur du "Forum". Vous pouvez vous inscrire dès maintenant sur le forum...</p>
 <p>Toute l’équipe de ccg vous souhaite une bonne visite sur notre site.</p>
</div>

<div id="news">
<h1>News</h1>
   <h3>Une grande quête vous attend</h3>
   <p>Ccg est un pays imaginaire constitué de plusieurs îles.

   Mais une vieille  légende raconte qu'un trésor d'une valeur inestimable serait caché sur une île ("voir Histoire de couincouin gang"). C'est à partir de cette légende que vous décidez de partir à la recherche de se trésor légendaire et de suivre les traces de B.E.Cythebalois, le grand navigateur partit pour trouver ce trésor mais jamais revenu sur son ile... </p>
<p>
Votre quête commence ici, à vous de percer les secrets de ce monde et de résoudre les différents indices pour peut être trouvé ce mystérieux trésor... Pour commencer la quête, vous devez allez dans "Menu des quêtes".

PS: pour connaitre exactement le principe du site je vous invite à visiter cette page:
<a href="#" title="principe du site">C'est ici</a>
</p>
</div>

<div id="bas">

</div>
</body>

</html>

et le css : 

body{
width: 100%;
background: url("images/fond4.jpg") no-repeat top left;
}
#menu{
background-image: url("images/menu.jpg");
width: 100%;
margin-left: 0px;
height: 45px;
margin-top: 110px;
}
#menu a{
display:block; /*Pour que le "bloc" soit un vrai bloc*/
float:left; /*Pour que les blocs soient alignés horizontalement (essayez de l'enlever pour voir)*/
width: 15%;
height:45px; /*La même hauteur que notre menu*/
border:none; /*On enlève les bordures (enfin, on ne les met pas, même s'il n'y en avait pas)*/
text-align:center; /*Pour que les liens soient centrés par rapport à l'horizontale*/
line-height: 41px;
color: white;
font-size: 20px;
text-decoration: none;
list-style-type: none;
}
#bann{
text-align: center;
background-repeat: no-repeat;
}
#navigation {
background: url("images/h.jpg") top repeat-x;
width: 20%;
}
#navigation h3{
color: white;
font-size: 26px;
font-weight: bold;
text-align: center;
line-height: 40px;
}
.element a{
text-decoration: none;
}
#contenu{
background: url("images/h.jpg") repeat-x top;
margin-left: 2%;
width: 50%;
}
#contenu h1{
color: white;
font-size: 26px;
font-weight: bold;
line-height: 41px;
text-align: center;
}
#news{
background: url("images/h2.jpg") repeat-x top;
width: 20%;
float: right;
margin-right: 2%;
}
#news h1{
color: white;
font-size: 26px;
font-weight: bold;
line-height: 40px;
text-align: center;
}

ce que je comprend pas c'est que normalement en faisant :

div1{

width: 150px;

float: left;

div2{

margin-left: 160px;

width: 300px;

}

div3{

float: right;

}

cela devrait marcher (pareil avec des %), et je vois pas mon erreur dans mon code

voila merci de vos réponses

Partager ce message


Lien à poster
Partager sur d’autres sites
Annonces
Maintenant

Messages recommandés

Lapinkiller Membre 10 109 messages
Le Dieu Lapin‚ 29ans
Posté(e)

Bonjour

tu teste avec le navigateur firefox en premier j'espère ?

(bas toi sur firefox, et une fois que ca marchera sous fifi, tu fera les bidouille pour que ca marche sous IE...).

bon je suis aps un expert en CSS? moi j'essaye différents truc jusqu'a ce que ca marche lol

essaye en rajoutant pour chacun des div : position:absolute;

Partager ce message


Lien à poster
Partager sur d’autres sites
Adenora Membre 5 400 messages
Admiratrice de Scrat‚ 29ans
Posté(e)

Il faut que tu englobes tes div dans un seul div.

Tu mets <div> après <body> et </div> avant </body>.

Partager ce message


Lien à poster
Partager sur d’autres sites
Er0r_Oo Membre 6 messages
Baby Forumeur‚
Posté(e)

donc voila j'ai testé avec position absolute, mais sa me donne un résultat encore pire

pour l'instant je teste sa avec trois naviguateur : IE, firefox et operaet tout trois me donne le même resultat a l'exception de IE par rapport au titre h3

mais en faite les 2 premier blocs sont aligné seul le troisième reste en bas

de plus j'ai tout à fait compris ta methode de div avant le body, a quoi cela servirait il ?

merci de vos réponses

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité Kuolema Kristukselle
Invité Kuolema Kristukselle Invités 0 message
Posté(e)

hs moi :/

Modifié par Kuolema Kristukselle

Partager ce message


Lien à poster
Partager sur d’autres sites
Adenora Membre 5 400 messages
Admiratrice de Scrat‚ 29ans
Posté(e)

Et si tu rajoutes (comme le dit Lapinkiller), position absolute, mais que dans le div contenu :

#contenu{
background: url("images/h.jpg") repeat-x top;
margin-left: 2%;
width: 50%;
position : absolute;
}

Modifié par Adenora

Partager ce message


Lien à poster
Partager sur d’autres sites
Er0r_Oo Membre 6 messages
Baby Forumeur‚
Posté(e)

non le 15% c'est la taille des liens c'est pour le menu, mais c'est pas sa le problème, et d'ailleur javais bien fait attention 20+2+50+2+20 = 94 javais bien laisser une marge, et c'est pour cela que je ne comprend pas pourquoi j'ai ce problème 

édit : en effet le position absolute a bien aligner les trois collones mais seulement sur firefox et opera, IE lui me crée un joyeux bordel si quelqu'un connait un hack pour IE ou un autre procedé afin d'obtenir le même résultat sur les 3 naviguateurs faite le moi parvenir

et de plus j'aimerais tout de même savoir ou plutôt comprendre la fonction de ce position : absolute;

merci de vos réponses

Modifié par Er0r_Oo

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité Kuolema Kristukselle
Invité Kuolema Kristukselle Invités 0 message
Posté(e)

ouais j'ai vu, mais apres, d'ou mon edit'. desole

Partager ce message


Lien à poster
Partager sur d’autres sites
guillaume_genet Membre 57 messages
Forumeur en herbe‚ 29ans
Posté(e)

Salut,

J' ai regardé ton code, j'ai vu 2 problèmes, déjà tu n'as pas mis de float à ta div navigation donc c'est normal que ton contenu s'affiche en dessous. Ensuite tu as inversé avec le float.

le float s'applique aux balises situées après.

exemple :

<img class="float_right"/> une image flottante à doite

<p>contenu</p>

→ l'image va se situer à droite de contenu

mais si tu fais

<p> contenu</p>

<img class="float_right"/>

->ça va faire l'effet escalier comme tu l'appelles

dans ton code tu as juste à mettre ta div='news'(avec le float) avant la div='contenu'

Modifié par guillaume_genet

Partager ce message


Lien à poster
Partager sur d’autres sites
Er0r_Oo Membre 6 messages
Baby Forumeur‚
Posté(e)

merci de ta réponse j'ai testé ta solution et ceci marche impec à l'exeption d'une petite chose les titre h3 de chaques blocs ne se placent plus veritablement dans l'image de fond, sauf pour le h3 du contenu... bizare (pour firefox et opera), par contre les titres sont bien placé sur IE

alors on me dira que j'ai juste a changé les line-height mais seulement si je les changent il y aura toujour un écart entre les différent navigateur

quelqu'un aurait t'il la solution ?

merci de vos réponses 

Partager ce message


Lien à poster
Partager sur d’autres sites
guillaume_genet Membre 57 messages
Forumeur en herbe‚ 29ans
Posté(e)
les titre h3 de chaques blocs ne se placent plus veritablement dans l'image de fond

J'ai pas vraiment compris...

envoit tes images avec ça par exemple et donne les liens.

Partager ce message


Lien à poster
Partager sur d’autres sites
Adenora Membre 5 400 messages
Admiratrice de Scrat‚ 29ans
Posté(e)

Pareil, j'ai pas compris. :smile2:

Partager ce message


Lien à poster
Partager sur d’autres sites
Er0r_Oo Membre 6 messages
Baby Forumeur‚
Posté(e)

désolé javou que c'était pas vraiment clair donc j'ai fais deux screen

voici le résultat sur opera et firefox:

operaetfirefox.gif

et sur IE :

70516458.gif

et je ne sais pas comment mettre les titres bien centré comme sur IE  sachant que si je change les line-height il y aura toujour un décalage entre les différents navigateurs

voila j'espère que c'est plus comprehensible comme sa 

merci de vos réponses

Partager ce message


Lien à poster
Partager sur d’autres sites
Er0r_Oo Membre 6 messages
Baby Forumeur‚
Posté(e)

personne a une solution à ce problème ???

Partager ce message


Lien à poster
Partager sur d’autres sites
Adenora Membre 5 400 messages
Admiratrice de Scrat‚ 29ans
Posté(e)

Si c'était mon design, je ferai une feuille de style pour Mozilla et une feuille de style pour IE.

Je mettrai dans celle pour Mozilla :

margin-top : ... px;

Et dans IE, je ne toucherai à rien.

Partager ce message


Lien à poster
Partager sur d’autres sites
Annonces
Maintenant

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant