Bonjour à tous,
Par ce samedi ensoleillé je m'arrache les cheveux sur un gros problème que me pose IE6.
Plutôt que de détailler mon soucis voici un screen très parlant
(edit par Igor: merci d'éviter d'afficher des illustrations gigantesques qui déforment le forum sur les tailles d'écran habituelles. Cocher le bouton "vignette" si vous transférez vos images sur le forum)
je ne trouve pas le hic
html & css:
A noter que la page tourne bien sur FF, IE7 et qu'elle est valide.
Une idée ?
Modifié par Igor (16 Feb 2008 - 12:26)
Par ce samedi ensoleillé je m'arrache les cheveux sur un gros problème que me pose IE6.
Plutôt que de détailler mon soucis voici un screen très parlant
(edit par Igor: merci d'éviter d'afficher des illustrations gigantesques qui déforment le forum sur les tailles d'écran habituelles. Cocher le bouton "vignette" si vous transférez vos images sur le forum)
je ne trouve pas le hic
html & css:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><!-- /doctype -->
<!-- head -->
<head>
<title>Amyotrophie spinale : Actualité et articles en bref. Page d'accueil. Avancées thérapeutiques, recherche scientifique, génétique neuromusculaire...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- type de caractères -->
<!-- css --><link rel="stylesheet" type="text/css" href="index.css" /><!-- /css -->
</head>
<!-- body -->
<body>
<div id="directgo"> <!-- liens d'évitement -->
<ul class="evitlist">
<li><a href="">Accéder au menu</a></li>
<li><a href="">Accéder au Contenu</a></li>
<li><a href="">Politique d'accessibilité du site</a></li>
<li><a href="">Plan du site</a></li>
<li><a href="">Contacts</a></li>
</ul>
</div>
<div id="conteneur"> <!-- boite principale -->
<!-- bannière -->
<div id="header">
<h1 class="logo">
<a href="/" title="Accueil">
<img class="logo" src="logo.gif" alt="Amyotrophie Spinale. S'informer, échanger, lutter (logo du site)" title="Accueil"/>
</a>
</h1>
</div>
<!-- recherche -->
<div id="recherche">
</div>
<!-- menu général -->
<div id="menu_principal">
<ul class="menu_principal">
<li id="active"><a href="">Accueil</a></li>
<li><a href="">Actualité</a></li>
<li><a href="">Articles</a></li>
<li><a href="">Forum</a></li>
<li><a href="">E-Group</a></li>
<li><a href="">Blogs</a></li>
<li><a href="">Membres</a></li>
<li><a href="">Liens</a></li>
<li><a href="">Contacts</a></li>
</ul>
</div>
<!-- menu de droite -->
<div id="droite">
<h2 class="titre_menu_droite_actu">Dernières news :</h2>
<ul class="menu_last_add">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
</ul>
<a class="archives_last_add" href="deux.html">(Toute l'actualité)</a>
<h2 class="titre_menu_droite_article">Derniers articles :</h2>
<ul class="menu_last_add">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
</ul>
<a class="archives_last_add" href="deux.html">(Tous les articles)</a>
</div>
<!-- contenu -->
<div class="centre_index_conteneur bordure_entre_contenu_index_et_menu_droite">
<div class="centre_index_contenu">
<h3 class="titre_contenu_index_actu">Alea jacta est</h3>
<p class="contenu_index_actu">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer dapibus urna quis justo. Donec ultrices rutrum tortor.
Nulla accumsan. Ut dictum, libero quis auctor pellentesque, diam quam hendrerit nulla, eget suscipit nisl ipsum at pede.
Integer suscipit, est a adipiscing feugiat, augue magna pharetra dui, ac commodo nunc enim quis augue. Quisque consectetuer
ante vel velit. Ut ut mi. Sed in magna eget metus euismod iaculis. Nulla ullamcorper ultricies dui.
</p>
<div class="image_actu"></div>
<div class="lien_suite_contenu_index_actu"><a href="deux.html">(Lire la suite de l'article)</a></div>
</div>
<div class="centre_index_contenu">
<h3 class="titre_contenu_index_article">Alea jacta est</h3>
<p class="contenu_index_article">
Nunc dui. Etiam massa elit, dictum ac, scelerisque ac, lobortis non, libero. Sed dapibus blandit odio. Integer lectus
massa, venenatis at, posuere in, auctor ac, libero. Maecenas mi. Mauris at orci nec urna imperdiet rutrum. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus et lacus ut dolor semper mattis. Sed
condimentum rhoncus purus. Integer sagittis, quam vel aliquet feugiat, neque purus euismod sapien.
</p>
<div class="image_article"></div>
<div class="lien_suite_contenu_index_article"><a href="deux.html">(Lire la suite de l'article)</a></div>
</div>
<div class="centre_index_contenu">
<h3 class="titre_contenu_index_actu">Alea jacta est</h3>
<p class="contenu_index_actu">
Maecenas fringilla, enim mollis imperdiet porta, ipsum pede ultricies elit, nec placerat orci dolor sit amet purus.
Suspendisse potenti. Suspendisse volutpat. Nam at dui. Nullam vel ipsum. Maecenas vel risus. Nam urna risus, pulvinar
sollicitudin, auctor eu, semper eget, nibh. Aenean tristique ante volutpat ligula. Aenean nec nunc et nulla congue mollis.
Quisque tincidunt placerat elit. In at nisl vitae odio sagittis scelerisque. Fusce purus augue, molestie ac, mollis eget,
tempor.
</p>
<div class="image_actu"></div>
<div class="lien_suite_contenu_index_actu"><a href="deux.html">(Lire la suite de l'article)</a></div>
</div>
<div class="centre_index_contenu">
<h3 class="titre_contenu_index_article">Alea jacta est</h3>
<p class="contenu_index_article">
Fusce id elit. Mauris eget nisi eu metus viverra tincidunt. Nulla in est vitae sem tempor tincidunt. Duis pulvinar egestas lorem.
Nulla et augue eu ante tincidunt interdum. Sed nunc erat, faucibus ac, hendrerit sit amet, scelerisque nec, neque. Nulla facilisi.
Suspendisse consectetuer urna non diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur accumsan iaculis dui. Nunc fermentum ligula vitae ante semper lacinia.
</p>
<div class="image_article"></div>
<div class="lien_suite_contenu_index_article"><a href="deux.html">(Lire la suite de l'article)</a></div>
</div>
</div>
<!-- pied de page -->
<div id="footer">
<p class="footer">Abonnez-vous aux flux rss</p>
</div>
</div>
<!-- fin du document : fermer div conteneur, body, html -->
</body>
</html>/* -------------------------------------------------- body */
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #ffffff;
background-image: url(bg.gif);
}
/* -------------------------------------------------- boite de contenu */
#directgo{
width: 950px;
margin: 0 auto;
position: relative;
height: 15px;
background-image: url(bg.gif);
}
#conteneur {
width: 950px;
margin: 0 auto;
margin-bottom: 10px;
position: relative;
background-color: #fffff7;
}
#header {
height: 120px;
background-image: url(bg_header.gif);
}
#recherche {
height: 30px;
background-color: #e8e8e8;
}
#menu_principal {
height: 25px;
background-image: url(bg_menu_principal.gif);
}
.centre_index_conteneur {
background-color: #fffff7;
float: left;
left: 0;
width: 749px;
margin-top: 10px;
margin-bottom: 10px;
}
.centre_index_contenu {
float: left;
left: 0;
width: 749px;
margin-top: 10px;
margin-bottom: 5px;
}
#droite {
float: right;
right: 0;
width: 189px;
margin-top: 10px;
background-color: #fffff7;
}
#footer {
width: 950px;
height: 40px;
background-image: url(bg_footer.gif);
clear: both;
}
/* -------------------------------------------------- liens d'évitement */
.evitlist {
margin: 0;
text-align: right;
font-size: 0.8em;
list-style-type: none;
}
.evitlist li
{
vertical-align: middle;
display: inline;
padding-left: 15px;
}
.evitlist a {
color: #0065b3;
text-decoration: none;
}
.evitlist a:hover {
color: #ffffff;
background-color: #ff7700;
}
/* -------------------------------------------------- menu principal */
.menu_principal {
padding: 2px 0 2px 0;
margin: 0 auto;
color: White;
text-align: center;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#active a { /* -------------- bordure verticale en guise de séparateur avant le premier élement de la liste -------------- */
border-left: 1px solid #fff;
}
.menu_principal li {
display: inline;
}
.menu_principal a {
padding: 0 1em;
color: #9000a3;
font-size: 1.3em;
text-decoration: none;
border-right: 1px solid #ffffff;
}
.menu_principal a:hover {
text-decoration: underline;
}
/* -------------------------------------------------- menu de droite */
h2.titre_menu_droite_actu {
margin: 10px 0 5px 10px;
padding: 0;
color: #ff0000;
font-size: 1em;
font-weight: normal;
text-decoration: underline;
}
h2.titre_menu_droite_article {
margin: 30px 0 5px 10px;
padding: 0;
color: #ff0000;
font-size: 1em;
font-weight: normal;
text-decoration: underline;
}
.menu_last_add {
list-style-type: none;
list-style-position: inside;
margin: 0;
padding: 0;
}
.menu_last_add li {
font-size: 0.7em;
}
.menu_last_add a {
color: #9000a3;
text-decoration: none;
}
.menu_last_add a:hover {
font-size: 1.1em;
text-decoration: underline;
}
a.archives_last_add {
margin: 3px 0 0 50px;
font-style: italic;
font-size: 0.7em;
color: #ff7700;
text-decoration: none;
}
a:hover.archives_last_add {
text-decoration: underline;
}
/* -------------------------------------------------- dernières actualités et articles (index) */
p.contenu_index_actu {
float: left;
width: 600px;
margin: 0 0 0 25px;
text-align: justify;
font-size: 0.9em;
word-spacing: 0.1em;
line-height: 1.4em;
color: #000000;
}
div.image_actu {
background-image: url(new_actu.gif);
background-repeat: no-repeat;
float: right;
padding: 55px;
}
p.contenu_index_article {
float: right;
width: 600px;
margin: 0 20px 0 0;
text-align: justify;
font-size: 0.9em;
word-spacing: 0.1em;
line-height: 1.4em;
color: #000000;
}
div.image_article {
background-image: url(new_article.gif);
background-repeat: no-repeat;
float: left;
padding: 40px;
margin-left: 25px;
}
h3.titre_contenu_index_actu {
color: #ff0000;
margin: 0 10px 3px 35px;
font-size: 1.2em;
font-weight: normal;
text-decoration: underline;
}
h3.titre_contenu_index_article {
color: #ff0000;
margin: 0 10px 3px 145px;
font-size: 1.2em;
font-weight: normal;
text-decoration: underline;
}
.lien_suite_contenu_index_actu a {
float: left;
font-size: 0.8em;
font-style: italic;
color: #ff7700;
margin: 0 0 5px 35px;
padding: 3px 0 0 0;
text-decoration: none;
}
.lien_suite_contenu_index_actu a:hover {
text-decoration: underline;
}
.lien_suite_contenu_index_article a {
float: left;
font-size: 0.8em;
font-style: italic;
color: #ff7700;
margin: 0 0 5px 135px;
padding: 3px 0 0 0;
text-decoration: none;
}
.lien_suite_contenu_index_article a:hover {
text-decoration: underline;
}
.bordure_entre_contenu_index_et_menu_droite {
border-right: 1px solid #0091ff;
}
/* --------------------------------------- pied de page */
p.footer {
color: #9000a3;
text-align: center;
margin-top: 0;
padding-top: 5px;
font-size: 0.8em;
}
/* -------------------------------------------------- logo (border = lien & image) */
.logo {
border: 0;
margin: 0;
}A noter que la page tourne bien sur FF, IE7 et qu'elle est valide.
Une idée ?
Modifié par Igor (16 Feb 2008 - 12:26)