Salut à tous,
Je m'excuse d'avance de ma nullité, je débute dans la création de feuilles de style
Voilà mon souci : je voudrais aligner 3 blocs horizontalement à l'intérieur d'un autre bloc. Et je n'y arrive pas, le troisième se situant irrémédiablement en dessous des 2 autres...
Je vous donne le code html et celui de la css.
html :
[cpp]<!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" lang="fr-fr">
<head>
<meta content="text/html; charset=ISO-8859-15" http-equiv="content-type" />
<title>essai</title>
<link href="essai.css" rel="stylesheet" type="text/css" />
</head>
<body style="direction: ltr;">
<div id="header"></div>
<div id="menu">
<div class="submenu">
<h3><a href="index.html">Accueil</a></h3>
</div>
<div class="submenu">
<h3>Formation</h3>
<ul>
<li><a href="dea.html">DEA</a></li>
<li><a href="these.html">Doctorat</a></li>
<li><a href="postdoc.html">Post-Doc</a></li>
</ul>
</div>
<div class="submenu">
<h3><a href="cv.html">CV</a></h3>
</div>
<div class="submenu">
<h3>Outils</h3>
<ul>
<li><a href="oligo.html">OligoCalc</a></li>
<li><a href="tabper.html">Tableau périodique</a></li>
<li><a href="tuto_01.html">Emulation Mac</a></li>
<li><a href="de.html">Téléchargement</a>
<ul>
<li><a href="dl1.html">Logiciels bio</a></li>
<li><a href="de2.html">Logiciels libres</a></li>
<li><a href="dl3.html">Emulation Mac</a></li>
<li><a href="dl4.html">Documents personnels</a></li>
</ul>
</li>
<li><a href="links.html">Liens</a>
<ul>
<li><a href="links1.html">ADN</a></li>
<li><a href="links2.html">Protéines</a></li>
<li><a href="links3.html">Logiciels libres</a></li>
<li><a href="links4.html">Divers</a></li>
</ul>
</li>
</ul>
</div>
<div class="submenu">
<h3><a href="mail.html">Contact</a></h3>
</div>
<div class="submenu">
<h3><a href="index_en.html">Anglais</a></h3>
</div>
</div>
<div id="body">
<h2>Bienvenue sur la page pro de Ludovic Champier<br>Docteur en Biochimie et Microbiologie</h2>
<div id="subbody1">
<h3>Mon parcours</h3>
<p>Premier & second cycles universitaires à l'Université Claude Bernard, Lyon 1</p>
<p>DEA National de Toxicolgie à l'Université René Descartes, Paris 5 et au CEA Grenoble</p>
<p>Thèse au Laboratoire de Chimie et Biochimie du CEA Grenoble</p>
<p>Post-doc au Laboratoire d'Ecologie Microbienne de l'Université Claude
Bernard, Lyon 1</p>
</div>
<div id="subbody2">
<h3>Actualité</h3>
<p>Les 6, 7 et 8 décembre se tiendra à Paris, France, le séminaire annuel du Programme National de ToxicologieNucléaire. Mes travaux sur les bTPMT effectués pour ce programme seront présentés sur un poster.</p>
</div>
<div id="subbody3">
<h3>Evénements</h3>
<p>Décembre 2005 : séminaire annuel du Programme National de Toxicologie Nucléaire, Paris, France - Poster</p>
<p>Juin 2005 : congrès BAGECO, Villeurbanne, France - Poster</p>
<p>Mai 2005 : congrès d'Ecologie Microbienne, Aubernai, France - Communication orale</p>
<p>2005-2006 : participation au Programme National de Toxicologie Nucléaire
Environnementale, groupe Toxicité du Sélénium</p>
</div>
</div>
<div id="footer">
<a href="http://www.nvu.com"><img alt="Document made with Nvu" src="http://www.nvu.com/images/madewithNvu80x15clear.png" border="0" /></a>
Dernière mise à jour : tôt ou tard...
<img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=lchampier.dat&ft=0&dd=B" />
</div>
</body>
</html>
[/cpp]
css :
[cpp]body
{
width: 900px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: #BFFFC9;
}
#header
{
width: 714px;
height: 58px;
background-image: url("img_top.png");
background-repeat: no-repeat;
margin: auto;
margin-bottom: 10px;
}
#menu
{
float: left;
width: 140px;
}
.submenu
{
background-color: #99FF99;
border: 1px dashed #1B871B;
margin-bottom: 10px;
}
.submenu h3
{
color: #666666;
font-family: verdana, arial, serif;
text-align: center;
font-size: 14px;
}
.submenu ul
{
list-style: none;
padding: 5px;
margin: 0px;
margin-bottom: 5px;
font-family: verdana, arial, serif;
font-size: 12px;
font-weight: bold;
}
.submenu li ul
{
list-style: none;
padding: 0px;
margin: 0px;
margin-bottom: 5px;
font-family: verdana, arial, serif;
font-size: 10px;
font-weight: normal;
font-style: italic;
}
.submenu a
{
text-align: left;
text-decoration: none;
color: #666666;
}
.submenu a:hover
{
background-color: #FFFF99;
color: #3366FF;
display: block;
width: 130px;
}
#body
{
margin-left: 150px;
margin-bottom: 20px;
padding: 10px;
padding-top: 20px;
color: #000000;
border: 1px dashed #1B871B;
background-color: #E6FFEF;
}
#body h2
{
font-family: verdana, arial, serif;
font-size: 12px;
color: #666666;
background-color: #FFCCFF;
width: 350px;
border: 1px solid #FF6CF0;
text-align: center;
padding: 10px;
margin: auto;
}
#subbody1
{
float: left;
width: 170px;
margin-top: 20px;
padding : 10px;
font-family: verdana, arial, serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
border : 1px solid #000000;
}
#subbody2
{
margin-left: 200px;
width: 300px;
margin-top: 20px;
padding : 10px;
font-family: verdana, arial, serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
border : 1px solid #000000;
}
#subbody3
{
margin-left: 535px;
width: 170px;
margin-top: 20px;
padding : 10px;
font-family: verdana, arial, serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
border : 1px solid #000000;
}
#footer
{
font-family: verdana, arial, serif;
font-size: 12px;
color: #666666;
background-color: #E6FFEF;
border: 1px dashed #1B871B;
text-align: center;
padding: 5px;
}
[/cpp]
Merci d'avance de l'éclairageprécieux que vous pourrez m'apporter
edit : un lien pour voir ce que donne ma page actuellement =>
Je m'excuse d'avance de ma nullité, je débute dans la création de feuilles de style
Voilà mon souci : je voudrais aligner 3 blocs horizontalement à l'intérieur d'un autre bloc. Et je n'y arrive pas, le troisième se situant irrémédiablement en dessous des 2 autres...
Je vous donne le code html et celui de la css.
html :
[cpp]<!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" lang="fr-fr">
<head>
<meta content="text/html; charset=ISO-8859-15" http-equiv="content-type" />
<title>essai</title>
<link href="essai.css" rel="stylesheet" type="text/css" />
</head>
<body style="direction: ltr;">
<div id="header"></div>
<div id="menu">
<div class="submenu">
<h3><a href="index.html">Accueil</a></h3>
</div>
<div class="submenu">
<h3>Formation</h3>
<ul>
<li><a href="dea.html">DEA</a></li>
<li><a href="these.html">Doctorat</a></li>
<li><a href="postdoc.html">Post-Doc</a></li>
</ul>
</div>
<div class="submenu">
<h3><a href="cv.html">CV</a></h3>
</div>
<div class="submenu">
<h3>Outils</h3>
<ul>
<li><a href="oligo.html">OligoCalc</a></li>
<li><a href="tabper.html">Tableau périodique</a></li>
<li><a href="tuto_01.html">Emulation Mac</a></li>
<li><a href="de.html">Téléchargement</a>
<ul>
<li><a href="dl1.html">Logiciels bio</a></li>
<li><a href="de2.html">Logiciels libres</a></li>
<li><a href="dl3.html">Emulation Mac</a></li>
<li><a href="dl4.html">Documents personnels</a></li>
</ul>
</li>
<li><a href="links.html">Liens</a>
<ul>
<li><a href="links1.html">ADN</a></li>
<li><a href="links2.html">Protéines</a></li>
<li><a href="links3.html">Logiciels libres</a></li>
<li><a href="links4.html">Divers</a></li>
</ul>
</li>
</ul>
</div>
<div class="submenu">
<h3><a href="mail.html">Contact</a></h3>
</div>
<div class="submenu">
<h3><a href="index_en.html">Anglais</a></h3>
</div>
</div>
<div id="body">
<h2>Bienvenue sur la page pro de Ludovic Champier<br>Docteur en Biochimie et Microbiologie</h2>
<div id="subbody1">
<h3>Mon parcours</h3>
<p>Premier & second cycles universitaires à l'Université Claude Bernard, Lyon 1</p>
<p>DEA National de Toxicolgie à l'Université René Descartes, Paris 5 et au CEA Grenoble</p>
<p>Thèse au Laboratoire de Chimie et Biochimie du CEA Grenoble</p>
<p>Post-doc au Laboratoire d'Ecologie Microbienne de l'Université Claude
Bernard, Lyon 1</p>
</div>
<div id="subbody2">
<h3>Actualité</h3>
<p>Les 6, 7 et 8 décembre se tiendra à Paris, France, le séminaire annuel du Programme National de ToxicologieNucléaire. Mes travaux sur les bTPMT effectués pour ce programme seront présentés sur un poster.</p>
</div>
<div id="subbody3">
<h3>Evénements</h3>
<p>Décembre 2005 : séminaire annuel du Programme National de Toxicologie Nucléaire, Paris, France - Poster</p>
<p>Juin 2005 : congrès BAGECO, Villeurbanne, France - Poster</p>
<p>Mai 2005 : congrès d'Ecologie Microbienne, Aubernai, France - Communication orale</p>
<p>2005-2006 : participation au Programme National de Toxicologie Nucléaire
Environnementale, groupe Toxicité du Sélénium</p>
</div>
</div>
<div id="footer">
<a href="http://www.nvu.com"><img alt="Document made with Nvu" src="http://www.nvu.com/images/madewithNvu80x15clear.png" border="0" /></a>
Dernière mise à jour : tôt ou tard...
<img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=lchampier.dat&ft=0&dd=B" />
</div>
</body>
</html>
[/cpp]
css :
[cpp]body
{
width: 900px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: #BFFFC9;
}
#header
{
width: 714px;
height: 58px;
background-image: url("img_top.png");
background-repeat: no-repeat;
margin: auto;
margin-bottom: 10px;
}
#menu
{
float: left;
width: 140px;
}
.submenu
{
background-color: #99FF99;
border: 1px dashed #1B871B;
margin-bottom: 10px;
}
.submenu h3
{
color: #666666;
font-family: verdana, arial, serif;
text-align: center;
font-size: 14px;
}
.submenu ul
{
list-style: none;
padding: 5px;
margin: 0px;
margin-bottom: 5px;
font-family: verdana, arial, serif;
font-size: 12px;
font-weight: bold;
}
.submenu li ul
{
list-style: none;
padding: 0px;
margin: 0px;
margin-bottom: 5px;
font-family: verdana, arial, serif;
font-size: 10px;
font-weight: normal;
font-style: italic;
}
.submenu a
{
text-align: left;
text-decoration: none;
color: #666666;
}
.submenu a:hover
{
background-color: #FFFF99;
color: #3366FF;
display: block;
width: 130px;
}
#body
{
margin-left: 150px;
margin-bottom: 20px;
padding: 10px;
padding-top: 20px;
color: #000000;
border: 1px dashed #1B871B;
background-color: #E6FFEF;
}
#body h2
{
font-family: verdana, arial, serif;
font-size: 12px;
color: #666666;
background-color: #FFCCFF;
width: 350px;
border: 1px solid #FF6CF0;
text-align: center;
padding: 10px;
margin: auto;
}
#subbody1
{
float: left;
width: 170px;
margin-top: 20px;
padding : 10px;
font-family: verdana, arial, serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
border : 1px solid #000000;
}
#subbody2
{
margin-left: 200px;
width: 300px;
margin-top: 20px;
padding : 10px;
font-family: verdana, arial, serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
border : 1px solid #000000;
}
#subbody3
{
margin-left: 535px;
width: 170px;
margin-top: 20px;
padding : 10px;
font-family: verdana, arial, serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
border : 1px solid #000000;
}
#footer
{
font-family: verdana, arial, serif;
font-size: 12px;
color: #666666;
background-color: #E6FFEF;
border: 1px dashed #1B871B;
text-align: center;
padding: 5px;
}
[/cpp]
Merci d'avance de l'éclairageprécieux que vous pourrez m'apporter
edit : un lien pour voir ce que donne ma page actuellement =>
Vous devez être connecté pour voir les liens.