Bonjour à tous,
Je suis en train de développer à base de CSS et j'ai quelques soucis avec ma page d'accueil (la seule pour l'instant
)
la page : http://maxime-viry.com/asi/
J'ai fait l'erreur de ne tester la page qu'avec avec FF pendant le développement et maintenant je ne sais pas régler les bugs avec IE.
Pour info, la page est valide.
je vous joints mes codes HTML et CSS :
En gros :
- le document général n'est pas centré
- les séparateurs des listes n'apparaissent pas
- mon bloc contenu est décalé vers le bas
D'avance merci pour vos conseils
Modifié par Maxime VIRY (03 Feb 2008 - 22:12)
Je suis en train de développer à base de CSS et j'ai quelques soucis avec ma page d'accueil (la seule pour l'instant
)la page : http://maxime-viry.com/asi/
J'ai fait l'erreur de ne tester la page qu'avec avec FF pendant le développement et maintenant je ne sais pas régler les bugs avec IE.
Pour info, la page est valide.
je vous joints mes codes HTML et CSS :
<!-- Doctype --><!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- type de caractères -->
<title>Titre provisoire</title>
<!-- 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="">Menu</a></li>
<li><a href="">Contenu</a></li>
<li><a href="">Politique d'accessibilité</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="Retour à l'accueil">
<img class="logo" src="logo.gif" width="180" height="80" alt="Logo du site" title="Amyotrophie Spinale, le site"/>
</a>
</h1>
</div>
<!-- recherche -->
<div id="recherche">
</div>
<!-- menu général -->
<div id="menu_principal">
<ul class="menu_principal">
<li><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">
<img src="new_article.gif" alt="illustration actualité" />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. Praesent tempus elit
et metus. Nulla ut nisi a velit consequat consectetuer. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Etiam vitae velit in erat convallis aliquet. Nam tincidunt posuere nisl.
</p>
<a href="deux.html" class="lien_suite_contenu_index">(Lire la suite de l'article)</a>
</div>
<div class="centre_index_contenu">
<h3 class="titre_contenu_index_article">Alea jacta est</h3>
<p class="contenu_index_article">
<img src="new_article.gif" alt="illustration 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, ac porta sem urna ut neque.
Nam libero. Proin vitae felis vitae ante feugiat tempus. Sed metus. Vivamus nonummy eros ac ipsum.
</p>
<a href="deux.html" class="lien_suite_contenu_index">(Lire la suite de l'article)</a>
</div>
<div class="centre_index_contenu">
<h3 class="titre_contenu_index_actu">Alea jacta est</h3>
<p class="contenu_index_actu">
<img src="new_article.gif" alt="illustration actualité" />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 sit amet, libero. Vestibulum nunc tellus, varius ac, elementum at, bibendum ut, pede. Curabitur consectetuer.
Donec purus.
</p>
<a href="deux.html" class="lien_suite_contenu_index">(Lire la suite de l'article)</a>
</div>
<div class="centre_index_contenu">
<h3 class="titre_contenu_index_article">Alea jacta est</h3>
<p class="contenu_index_article">
<img src="new_article.gif" alt="illustration 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. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Proin a mi sed purus aliquet aliquet. In in odio vitae sapien porta malesuada.
</p>
<a href="deux.html" class="lien_suite_contenu_index">(Lire la suite de l'article)</a>
</div>
</div>
<!-- pied de page -->
<div id="footer">pied de page</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: #ffffff;
border-left: 2px solid #e8e8e8;
border-right: 2px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
}
#header {
height: 110px;
background-color: #ffffff;
}
#recherche {
height: 30px;
background-color: #e8e8e8;
border-bottom: 1px solid #ffffff
}
#menu_principal {
height: 25px;
background-color: #0091ff;
}
.centre_index_conteneur {
background-color: #ffffff;
float: left;
left: 0;
width: 749px;
margin-top: 10px;
}
.centre_index_contenu {
background-color: #ffffff;
float: left;
left: 0;
width: 749px;
margin: 0 0 10px 0;
}
#droite {
float: right;
right: 0;
width: 200px;
margin-top: 10px;
background-color: #ffffff;
}
#footer {
width: 950px;
margin: 0 auto;
height: 50px;
background-color: #0091ff;
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;
}
.evitlist li:first-child:before {
content: "";
}
.evitlist li:before {
content: "| ";
color: #000000;
}
.evitlist a {
color: #0065b3;
text-decoration: none;
}
.evitlist a:hover {
font-size: 1.2em;
color: #ffffff;
background-color: #ff0000;
}
/* -------------------------------------------------- menu du haut */
.menu_principal {
list-style-type: none;
font-size: 1.3em;
margin: 0;
padding: 0;
text-align: center;
}
.menu_principal li {
display: inline;
}
.menu_principal li:first-child:before {
content: "";
}
.menu_principal li:before {
content: "| ";
color: #ffffff;
}
.menu_principal a {
margin: 0 2px;
color: #ffffff;
text-decoration: none;
}
.menu_principal a:hover {
color: #ffffff;
background-color: #ff0000;
}
/* -------------------------------------------------- menu de droite */
h2.titre_menu_droite_actu {
margin: 10px 0 5px 10px;
padding: 0;
color: #9000a3;
font-size: 1em;
font-weight: normal;
}
h2.titre_menu_droite_article {
margin: 30px 0 5px 10px;
padding: 0;
color: #9000a3;
font-size: 1em;
font-weight: normal;
}
.menu_last_add {
font-size: 0.7em;
list-style-type: none;
list-style-position: inside;
margin: 0 0 0 20px;
padding: 0;
}
.menu_last_add li {
margin-bottom: 3px;
}
.menu_last_add a {
color: #ff7700;
text-decoration: none;
}
.menu_last_add a:hover {
text-decoration: none;
}
a.archives_last_add {
margin: 3px 0 0 50px;
font-style: italic;
font-size: 0.7em;
color: #0091ff;
text-decoration: none;
}
a:hover.archives_last_add {
color: #ffffff;
background-color: #ff0000;
}
/* -------------------------------------------------- dernières actualités et articles (index) */
p.contenu_index_actu {
float: left;
width: 730px;
margin: 0 0 0 10px;
text-align: justify;
font-size: 0.9em;
color: #262626;
}
p.contenu_index_actu img {
float: right;
padding: 10px 0 0 10px;
}
p.contenu_index_article {
float: right;
width: 730px;
margin: 0 10px 0 0;
text-align: justify;
font-size: 0.9em;
color: #262626;
}
p.contenu_index_article img {
float: left;
padding: 10px 0 0 20px;
}
h3.titre_contenu_index_actu {
color: #9000a3;
margin: 0 10px 10px 15px;
font-size: 1.3em;
font-weight: normal;
text-decoration: underline;
}
h3.titre_contenu_index_article {
color: #9000a3;
margin: 0 10px 10px 135px;
font-size: 1.3em;
font-weight: normal;
text-decoration: underline;
}
.lien_suite_contenu_index {
float: left;
font-size: 0.8em;
font-style: italic;
color: #0091ff;
margin: 0 0 15px 0;
padding: 3px 0 0 15px;
text-decoration: none;
}
.bordure_entre_contenu_index_et_menu_droite {
border-right: 1px solid #0091ff;
}
/* -------------------------------------------------- logo (border = lien & image) */
.logo {
border: 0;
margin: 0;
}
/* -------------------------------------------------- lettrine (concerne # centre) */
.contenu_index:first-letter {
font-size: 3em;
float: left;
margin-right: 2px;
color: #000000;
}En gros :
- le document général n'est pas centré
- les séparateurs des listes n'apparaissent pas
- mon bloc contenu est décalé vers le bas
D'avance merci pour vos conseils
Modifié par Maxime VIRY (03 Feb 2008 - 22:12)
