Bonjour à tous,
Sous ce titre peu clair se cache un problème, pourtant simple j'en suis sûr, que je n'arrive pas à résoudre.
Je suis en train de mettre au point la page d'accueil d'un site à venir, certains ont peut-être déjà lu mes précédents topics, en faisant les choses aussi proprement que je le peux. www.maxime-viry.com/asi
Mon soucis du moment concerne les images qui précédent ou suivent les derniers articles et actus. Celles-ci apparaissent actuellement dans mon code html, bien que que n'apportant rien au contenu mais plutôt à la forme. C'est pourquoi je souhaiterais les incorporer à mon css, tout en conservant une mise en page similaire.
Je sais qu'il faut mêler div et background-image etc... Mais ça ne fonctionne pas
Je joints .css et .htm
Merci de votre aide.
Modifié par Maxime VIRY (06 Feb 2008 - 00:28)
Sous ce titre peu clair se cache un problème, pourtant simple j'en suis sûr, que je n'arrive pas à résoudre.
Je suis en train de mettre au point la page d'accueil d'un site à venir, certains ont peut-être déjà lu mes précédents topics, en faisant les choses aussi proprement que je le peux. www.maxime-viry.com/asi
Mon soucis du moment concerne les images qui précédent ou suivent les derniers articles et actus. Celles-ci apparaissent actuellement dans mon code html, bien que que n'apportant rien au contenu mais plutôt à la forme. C'est pourquoi je souhaiterais les incorporer à mon css, tout en conservant une mise en page similaire.
Je sais qu'il faut mêler div et background-image etc... Mais ça ne fonctionne pas
Je joints .css et .htm
Merci de votre aide.
/* -------------------------------------------------- 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;
margin-bottom: 10px;
}
.centre_index_contenu {
background-color: #ffffff;
float: left;
left: 0;
width: 749px;
margin-top: 10px;
}
#droite {
float: right;
right: 0;
width: 189px;
margin-top: 10px;
background-color: #ffffff;
}
#footer {
width: 950px;
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;
padding-left: 15px;
}
.evitlist a {
color: #0065b3;
text-decoration: none;
}
.evitlist a:hover {
font-size: 1.2em;
color: #ffffff;
background-color: #ff0000;
}
/* -------------------------------------------------- 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{
border-left: 1px solid #fff;
}
.menu_principal li {
display: inline;
}
.menu_principal a {
padding: 0 1em;
color: White;
font-size: 1.3em;
text-decoration: none;
border-right: 1px solid #ffffff;
}
.menu_principal a:hover {
text-decoration: underline;
font-weight: bold;
}
/* -------------------------------------------------- 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 {
list-style-type: none;
list-style-position: inside;
margin: 0 0 0 20px;
padding: 0;
}
.menu_last_add li {
margin-bottom: 3px;
font-size: 0.7em;
}
.menu_last_add a {
color: #ff7700;
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: #0091ff;
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: 730px;
margin: 0 0 0 10px;
text-align: justify;
font-size: 0.9em;
color: #262626;
}
p.contenu_index_actu img {
float: right;
padding: 0 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: 0 15px 0 15px;
}
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_actu a {
float: left;
font-size: 0.8em;
font-style: italic;
color: #0091ff;
margin: 0 0 5px 15px;
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: #0091ff;
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;
}
/* -------------------------------------------------- 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;
}<!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 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">
<img src="new_actu.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.
</p>
<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">
<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>
<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">
<img src="new_actu.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.
</p>
<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">
<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.
</p>
<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">pied de page</div>
</div>
<!-- fin du document : fermer div conteneur, body, html -->
</body>
</html>
Modifié par Maxime VIRY (06 Feb 2008 - 00:28)
