Bonjour a tous,
Je suis en phase final de developpement de la nouvelle version du site de l'ong pour la laquelle je bosse, mais je rencontre un soucis lors des tests sur les moteurs webkit (Safari & Chrome)
en gros: FF:Ie6/Ie7/Opéra ça s'affiche comme je veux
Chrome/Safari j'ai une div qui se ballade un peu n'importe où...
Je suis pas vraiment une brute en html/css mais c'est pas mon premier site, et la je ne trouve pas la solution!
donc primo, un screenshot: à voir ici
ensuite la structure (html, j'ai virer les trucs les plus inutiles, et c'est pas super orthodoxe je pense) du site:
et quelques partie de mon css:
j'ai un peu coupé les parties non interessante (enfin pas trop quand meme on sait jamais!
donc si un css killa a la gentillesse et le temps de me dire ce qui peux bien deconner la dedans, je lui en serais très reconnaissant!
je suis conscient que c'est un peu codé à la pelle et de manière très empirique (surtout au niveau des heritages je pense) donc si par la meme occasion, on peux me donner des conseilles sur ce que je dois travailler...
enfin merci à ceux qui prendrons le temps de jeter un coup d'oeil,
bien à vous,
Jeremie
Modifié par dudesqsue (05 Apr 2009 - 21:12)
Je suis en phase final de developpement de la nouvelle version du site de l'ong pour la laquelle je bosse, mais je rencontre un soucis lors des tests sur les moteurs webkit (Safari & Chrome)
en gros: FF:Ie6/Ie7/Opéra ça s'affiche comme je veux
Chrome/Safari j'ai une div qui se ballade un peu n'importe où...
Je suis pas vraiment une brute en html/css mais c'est pas mon premier site, et la je ne trouve pas la solution!
donc primo, un screenshot: à voir ici
ensuite la structure (html, j'ai virer les trucs les plus inutiles, et c'est pas super orthodoxe je pense) du site:
<!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>
<!--plein de blabla--!>
</head>
<body>
<div id="fondblanchaut"></div>
<div id="header">
<div id="logo"><a href="/drupal/" title="Accueil"><img src="/drupal/sites/default/files/logo_bleu.png" alt="Accueil" /></a></div>
<div id="bannier"> <!--banniere flash--!></div>
<div id="menustop"> <!--les menus deroulants--!></div>
<div id="content">
<div id="menusleft">
<div id="titre"><h1>Accueil</h1></div>
<div id="submenu"><!--sous menu--!></div>
<!--Debut du bloc qui deconne--!>
<div id="quick_link">
<div id="quick_link_but"><a href="presse"><h1>> PRESSE</h1><p></p></a></div>
<div id="quick_link_but"><a href="publications"><h1>> RAPPORT D'ACTIVITÉS</h1><p></p></a></div>
<div id="quick_link_don"><a href="/drupal/dons"><img src="/drupal/themes/EMDH_Fixed/faire_un_don.png" alt="Faites un Don" /></a></div>
</div>
<!--fin du bloc qui deconne--!>
</div>
<div id="main">
<div id="menusright">
<!--plein de blabla--!>
</div>
<div class="maintexte">
<div class="a_la_une"><div id="a_la_une"><!--balblalbal--!></div></div>
</div>
<div class="video_une"><div id="video_une"></div></div>
<div class="carte_une"><div id="carte_une"><a href="missions"><img src="/drupal/themes/EMDH_Fixed/nos_missions.png" /></a></div>
</div>
</div>
<div id="actuline"><span id="title1">EMDH <br/></span><span id="title2">Actualités > </span><span id="actus"></span></div>
<div id="prefooter"><ul class="menu"><li class="leaf first"><a href="/drupal/sitemap" title="">Plan du site</a></li>
<li class="leaf"><a href="/drupal/nouscontacter" title="">Nous contacter</a></li>
<li class="leaf last"><a href="/drupal/rejoindre_nos_equipes" title="">Rejoindre nos équipes</a></li>
</ul></div>
<div id="fondblancbas2"></div>
<!--plein de blabla--!>
</body>
</html>
et quelques partie de mon css:
/* $Id: style.css,v 1.23 2007/12/17 15:05:09 goba Exp $ */
/*
** HTML elements
*/
body {
font-family: Arial,"Arial Black";
margin:auto;
width:924px;
}
/*
** Page layout blocks / IDs
*/
#header{
display:block;
margin:auto;
position:fixed;
top:2px;
margin-bottom:150px;
border:0px;
width: 911px;
height: 123px;
z-index:100;
}
#logo {
display:block;
position:absolute;
top:2px;
padding:0px;
margin:0px;
border:0px;
}
#main {
/* padding in px not ex because IE messes up 100% width tables otherwise */
position: absolute;
float:left;
top:123px;
width:711px;
margin-left:200px;
padding-bottom:10%;
font-size:11px;
}
/*
** Added region for the theme
**
*/
/*******************************************************************************************************************************/
/*Header*/
#fondblanchaut{
position:fixed;
display:block;
margin:auto;
left:200px;
top:0px;
width:911px;
height:123px;
z-index:5;
}
#bannier{
position:absolute;
padding:0px;
right:0px;
z-index:100;
}
#menustop{
position:relative;
margin:0 auto;
padding-left:200px;
top:98px;
font-size:11px;
width:711px;
z-index:900;
text-align:center;
}
/*******************************************************************************************************************************/
/*menu de gauche*/
/*******************************************************************************************************************************/
#menusleft{
position: fixed;
display:block;
top:100px;
width: 200px;
height:100%;
z-index:80;
}
/*titre dans menu gauche*/
#titre {
position:absolute;
top:5px;
z-index:120;
}
/*pour avoir des mots de differentes tailles et couleurs*/
#titre h1{
padding-left:10px;
margin-bottom:0px;
}
#titre h1:first-line{
}
/*position du sous menu dans le menu de gauche*/
#submenu{
position:absolute;
font-size:95%;
top:35px;
}
/*****************************************************
partie qui deconne!
*****************************************************/
/*Bas de menu de gauche (presse|RA|Faire un don)*/
#menusleft #quick_link{
position:fixed;
bottom:80px;
}
#menusleft #quick_link_but{
font-family: Arial;
margin:0px 5px;
font-size:8px;
width:190px;
margin-top:0px;
margin-bottom:0px;
}
#menusleft #quick_link_but a{
display:block;
width:100%;
height:100%;
text-decoration:none;
}
#menusleft #quick_link_but a:hover {
text-decoration:none;
}
#menusleft #quick_link_but h1{
background-color:#4A4944;
padding-bottom:3px;
padding-top:3px;
padding-left:5px;
color:white;
margin-top:0px;
margin-bottom:0px;
}
#menusleft #quick_link_but p{
margin-top:1px;
margin-bottom:1px;
}
#menusleft #quick_link_don{
margin:0px 5px;
width:190px;
margin-top:5px;
margin-bottom:5px;
}
/*****************************************************
fin de la partie qui deconne!
*****************************************************/
j'ai un peu coupé les parties non interessante (enfin pas trop quand meme on sait jamais!
donc si un css killa a la gentillesse et le temps de me dire ce qui peux bien deconner la dedans, je lui en serais très reconnaissant!
je suis conscient que c'est un peu codé à la pelle et de manière très empirique (surtout au niveau des heritages je pense) donc si par la meme occasion, on peux me donner des conseilles sur ce que je dois travailler...
enfin merci à ceux qui prendrons le temps de jeter un coup d'oeil,
bien à vous,
Jeremie
Modifié par dudesqsue (05 Apr 2009 - 21:12)