Je me réponds tout seul, comme je comprenais pas, je suis reparti d'une structure CSS toute faite d'Alsa, que j'ai modifiée petit à petit, le résultat est le suivant:
<!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>
<title>Eoliennes 27: Accueil</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<LINK REL=STYLESHEET HREF="eco27.css" TYPE="Text/css">
</head>
<body>
<div id="global">
<div id="header"></div>
<div id="menu"><center><a href="accueil.htm" title="Accueil">Accueil</a> |
<a href="association.htm" title="L'Association">L'Association</a> |
<a href="agenda.htm" title="Agenda">Agenda</a> |
<a href="documents.htm" title="Documents">Documents</a> |
<a href="liens.htm" title="Liens">Liens</a> |
<a href="contacts.htm" title="Contacts">Contacts</a>
</center></div>
<div id="menu_bord_droit"></div>
<div id="menu_bord_gauche"></div>
<div id="main">
<!-- contenu principal -->
<span class="text">
<center><h2>Accueil</h2>
</center>
Bienvenue sur le site d'Ecologie 27, association de type loi 1901, créée à Grandcamp dans le but de faire entendre la voix des opposants au projet éolien de la commune.<br>
<br>
Pour plus d'informations sur l'Association Ecologie 27, <a href="association.htm" title="Accosication">cliquez ici!</a>
<br>
<br>
Pour consulter les derniers compte-rendus de réunion de l'Association, les courriers émis et les parutions médias à propos de nos actions ou autour du sujet éolien, <a href="compte-rendu.htm" title="Compte-rendus">cliquez ici!</a>
<br>
<br>
Pour de plus amples informations sur l'éolien, consultez les liens vers nos partenaires disponibles <a href="liens.htm" title="Liens">ici!</a>
<br>
<br>
Pour contacter l'Association, <a href="contacts.htm" title="Contacts">cliquez ici!</a>
<br>
<br>
</span>
</div>
<div id="footer"><center><span class="text"><font size="1">Mentions Légales - Réalisation: </font><a href="http://www.web2o.fr" title="Site Rélisé pour Ecologie27 par Web2o" target="_blank"><font size="1" color="#ffffff">www.web2o.fr</font></a></span></center></div>
</div>
</body>
</html>
Feuille de style:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #09460F;
}
#global {
width: 800px;
margin: 0 auto;
}
#header {
height: 156px;
background-color: #99CCCC;
background-image: url(img/bandeau.jpg);
}
#menu {
height: 36px;
line-height:36px;
background-color:#588E03;
background-image: url(img/fond_menu.jpg);
background-repeat: repeat-x;
}
#menu_bord_droit{
background-image: url(img/fond_menu_bord_droit.jpg);
float:right;
}
#menu_bord_gauche{
background-image: url(img/fond_menu_bord_gauche.jpg);
float:left;
}
#main {
background-color:#9CCE2E;
padding:10px;
}
#footer {
height: 14px;
line-height:14px;
background-color: #588E03;
}
a:link {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#333300;
text-decoration:none;
}
a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#333300;
text-decoration:none;
}
a:active {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
a:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.calend a:link {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#333300;
text-decoration:underline;
}
.calend a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#333300;
text-decoration:underline;
}
.calend a:active {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#ffffff;
text-decoration:underline;
}
.calend a:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#ffffff;
text-decoration:underline;
}
.calend {
/*border: solid thin;*/
border-color: #ffffff;
padding: 5px;
}
.header_calend {
text-align: center;
background-color: #7AAC0C;
border: solid thin;
line-height:40px;
}
.week_day {
background-color: #9CCE2E;
color: #333300;
border: solid thin;
border-color: #ffffff;
}
.week_day:hover {
background-color: #CCFF66;
color: #588E03;
border-color: #588E03;
}
.week_end {
background-color: #ADDF3F;
color: #333300;
border: solid thin;
border-color: #ffffff;
}
.week_end:hover {
background-color: #CCFF66;
color: #588E03;
border-color: #588E03;
}
.day {
background-color: #ADDF3F;
color: #333300;
border: solid thin;
border-color: #ffffff;
padding:10px;
}
.fond {
background-color:#9CCE2E;
padding:10px;
}
.clair {
background-color:#CCFF66;
}
.text {
font-family:Verdana;
font-size:16px;
color:#333300;
}
.titre {
font-family:Verdana;
font-size:18;
font-weight:thin;
color:#FFEC00;
}
h1 {
font-family:Verdana;
font-size:20px;
color:#ffffff;
}
h2 {
font-family:Verdana;
font-size:20px;
color:#ffff00;
}
h3 {
font-family:Verdana;
font-size:16px;
font-weight:bold;
color:#ffffff;
}
maintenant j'aimerais afficher mes bords arrondis sur les extrémités du div #menu et si possible également des coins arrondis sur le div #main
je pensais faire pour #menu, un #menu_bord_droit en float: right et un #menu_bord_gauche en float: left mais ça ne fonctionne pas
si vous avez des pistes
http://img167.imageshack.us/img167/9053/eco27terkf1.th.jpg Modifié par Lomic (11 Jul 2008 - 00:54)
)
!
!
