Bonjour,
Je me lance depuis hier dans le codage de mon design de la version 4 de mon site, cepandant je me heurte à un certains nombres de petits problèmes d'affichage différents sur les navigateurs.
Sur ie, tous va bien (presque), mais sur ff peux de chosses ne vont !
Je ne peux pas vous fournir le design pour l'instant, mais voici comment est composé ma page:
Block fauche (header haut, en dessous le contenu) + Block droit (menus)
Footer (que je n'arrive pas à mettre après 1 heure d'essai)
Voici mon code source
(est il déjà correcte, car il y a des différence entre les navigateurs ?)
Donc si je place le footer <div id="footer"></div> en fin de page après le div de fermeture de la partis droite, le footer ce possitionne tout au dessus de la page, je voudrais qu'il soit automatiquement, en dessous, dessous les blocks du hauts.
Voilà merci d'avance de m'écclairer, je ne comprend pas mon problème, et pourtant, je ne compte plus combien de fois j'ai lu la faq et relus mon code source !
de plus, sous ff l'image de fond du contenu s'arrète juste après le texte (ce qui n'est pas le cas sous ie, le fond s'arrète au niveau du block de droite (menu) qui dans mon cas est plus long que le block de contenu.
Je me lance depuis hier dans le codage de mon design de la version 4 de mon site, cepandant je me heurte à un certains nombres de petits problèmes d'affichage différents sur les navigateurs.
Sur ie, tous va bien (presque), mais sur ff peux de chosses ne vont !
Je ne peux pas vous fournir le design pour l'instant, mais voici comment est composé ma page:
Block fauche (header haut, en dessous le contenu) + Block droit (menus)
Footer (que je n'arrive pas à mettre après 1 heure d'essai)
Voici mon code source
(est il déjà correcte, car il y a des différence entre les navigateurs ?)
Index >
<div id="site">
<div id="left">
<div id="header"></div>
<div id="container">
<div id="navigation">Vous êtes ici: Graphiques-Kits > Index</div>
<div id="title">Bienvenue sur Graphiques-Kits !</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla massa. Nullam vestibulum eleifend neque.
Duis est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi facilisis magna et est. Suspendisse
at justo vel ligula ornare lacinia. Nunc sed nisl. Duis eu dui. Vivamus eget metus sed nibh fermentum scelerisque.
Fusce congue, sapien ullamcorper condimentum volutpat, risus risus ultrices dui, at tincidunt nisi ipsum ac elit.</div>
</div>
</div>
<div id="right">
<div id="right_top"></div>
<div id="menu_top">
<div id="right_accueil"></div>
<div id="right_kits"></div>
<div id="right_articles"></div>
<div id="right_contact"></div>
</div>
<br />
<table class="info+" cellspacing="0" cellpadding="0"><tr>
<td class="date">Nous sommes le<br /><script type="text/javascript">document.write(messageDate);</script></td></tr>
</table>
<br />
<br />
<div id="menu_haut"></div>
<div id="menu">
<div id="navcontainer">
<ul id="navlist">
<li><a href="#"> Item one</a></li>
<li><a href="#"> Item two</a></li>
<li><a href="#"> Item three</a></li>
<li><a href="#"> Item four</a></li>
<li><a href="#"> Item five</a></li>
<li><a href="#"> Item six</a></li>
</ul>
</div>
</div>
<div id="menu_bas"></div>
<br />
<div id="menu_haut"></div>
<div id="menu">
<div id="navcontainer">
<ul id="navlist">
<li><a href="#"> Item one</a></li>
<li><a href="#"> Item two</a></li>
<li><a href="#"> Item three</a></li>
<li><a href="#"> Item one</a></li>
<li><a href="#"> Item two</a></li>
</ul>
</div>
</div>
<div id="menu_bas"></div>
</div>
</div>
style.css
body {
margin: 0px 0px 0px 0px; /* -20px du haut */
background: #E8E8E8 url(images/fond.png) repeat-x;
font-family: verdana;
font-size: 10px;
color: #000000;
}
a:link, a:visited {
color:#666666;
text-decoration:none;
}
a:hover {
color:#1A5185;
text-decoration:overline;
}
/* Majeur */
#site {
margin: 0 auto 0;
position: relative;
width: 713px;
background: url(images/site_fond.png) repeat-y;
}
#left {
float: left;
width: 515px;
background: url(images/left_fond.png) repeat-y;
}
#right {
float: right;
width: 198px;
background: url(images/right_fond.png) repeat-y;
}
#container {
position: relative;
left: 30px;
width: 490px;
}
#menu_top {
position: relative;
left: 0px;
}
#menu {
position: relative;
padding-left: 25px;
padding-bottom: 1px;
background: url(images/right_menu_fond.png) repeat-y;
}
#menu p {
margin: 0px 0px 0px 0px;
text-align : left;
}
#menu_haut {
height: 15px;
position: relative;
background: url(images/right_menu_haut.png) repeat-y;
}
#menu_bas {
height: 16px;
position: relative;
background: url(images/right_menu_bas.png) repeat-y;
}
#left_footer {
width: 515px;
height: 66px;
background: url(images/left_footer.png) no-repeat;
}
#right_footer {
width: 198px;
height: 123px;
position: relative;
background: url(images/right_footer.png) no-repeat;
}
#header {
height: 184px;
background: url(images/left_header.png) no-repeat;
}
#footer {
background: url(images/footer.png) no-repeat;
position: relative;
height: 123px;
}
#right_top {
height: 65px;
background: url(images/right_top.png) no-repeat;
}
#right_accueil {
height: 29px;
background: url(images/right_accueil.png) no-repeat;
}
#right_kits {
height: 29px;
background: url(images/right_kits.png) no-repeat;
}
#right_articles {
height: 30px;
background: url(images/right_articles.png) no-repeat;
}
#right_contact {
height: 31px;
background: url(images/right_contact.png) no-repeat;
}
/* Mineur */
td.date {
text-align: left;
padding-left: 30px;
}
#navigation {
width: 480px;
padding: 4px;
padding-top: 5px;
padding-left: 25px;
color: #F27109;
text-align: left;
margin-bottom: 25px;
}
#title {
width: 475px;
padding: 3px;
border-bottom:1px solid #CCC;
font-size:13px;
margin-bottom:10px;
}
#navcontainer ul {
margin-left: 0;
margin-top: 0;
padding-top: 5px;
padding-left: 0;
list-style-type: none;
}
Donc si je place le footer <div id="footer"></div> en fin de page après le div de fermeture de la partis droite, le footer ce possitionne tout au dessus de la page, je voudrais qu'il soit automatiquement, en dessous, dessous les blocks du hauts.
Voilà merci d'avance de m'écclairer, je ne comprend pas mon problème, et pourtant, je ne compte plus combien de fois j'ai lu la faq et relus mon code source !
de plus, sous ff l'image de fond du contenu s'arrète juste après le texte (ce qui n'est pas le cas sous ie, le fond s'arrète au niveau du block de droite (menu) qui dans mon cas est plus long que le block de contenu.
