Aller au contenu

problème positionement des div


Er0r_Oo

Messages recommandés

Membre, Posté(e)
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

Lien à poster
Partager sur d’autres sites

Annonces
Maintenant
Membre, Le Dieu Lapin, 35ans Posté(e)
Lapinkiller Membre 10 149 messages
35ans‚ Le Dieu Lapin,
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;

Lien à poster
Partager sur d’autres sites

Membre, Admiratrice de Scrat, 35ans Posté(e)
Adenora Membre 5 400 messages
35ans‚ Admiratrice de Scrat,
Posté(e)

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

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

Lien à poster
Partager sur d’autres sites

Membre, Posté(e)
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

Lien à poster
Partager sur d’autres sites

Invité Kuolema Kristukselle
Invités, Posté(e)
Invité Kuolema Kristukselle
Invité Kuolema Kristukselle Invités 0 message
Posté(e)

hs moi :/

Lien à poster
Partager sur d’autres sites

Membre, Admiratrice de Scrat, 35ans Posté(e)
Adenora Membre 5 400 messages
35ans‚ Admiratrice de Scrat,
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;
}

Lien à poster
Partager sur d’autres sites

Membre, Posté(e)
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

Lien à poster
Partager sur d’autres sites

Invité Kuolema Kristukselle
Invités, Posté(e)
Invité Kuolema Kristukselle
Invité Kuolema Kristukselle Invités 0 message
Posté(e)

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

Lien à poster
Partager sur d’autres sites

Membre, 36ans Posté(e)
guillaume_genet Membre 57 messages
Baby Forumeur‚ 36ans‚
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'

Lien à poster
Partager sur d’autres sites

Membre, Posté(e)
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 

Lien à poster
Partager sur d’autres sites

Membre, 36ans Posté(e)
guillaume_genet Membre 57 messages
Baby Forumeur‚ 36ans‚
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.

Lien à poster
Partager sur d’autres sites

Membre, Admiratrice de Scrat, 35ans Posté(e)
Adenora Membre 5 400 messages
35ans‚ Admiratrice de Scrat,
Posté(e)

Pareil, j'ai pas compris. :smile2:

Lien à poster
Partager sur d’autres sites

Membre, Posté(e)
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

Lien à poster
Partager sur d’autres sites

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

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

Lien à poster
Partager sur d’autres sites

Membre, Admiratrice de Scrat, 35ans Posté(e)
Adenora Membre 5 400 messages
35ans‚ Admiratrice de Scrat,
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.

Lien à poster
Partager sur d’autres sites

Annonces
Maintenant

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

×