Bonjour à toutes et à tous !
J'ai un petit soucis de positionnement avec un tableau. J'aimerais que ce dernier soit centrer dans le div #contenu mais là il reste collé à gauche de cette div ...
J'ai tenté vainement du margin, du padding, du height ... rien n'y fait mon tableau ne veut pas bouger
.
le code html :
le css :
Merci du temps que vous accordez aux néophytes ...
Modifié par barbe douce (25 Sep 2006 - 22:15)
J'ai un petit soucis de positionnement avec un tableau. J'aimerais que ce dernier soit centrer dans le div #contenu mais là il reste collé à gauche de cette div ...
J'ai tenté vainement du margin, du padding, du height ... rien n'y fait mon tableau ne veut pas bouger
.le code html :
<!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="en" lang="en">
<head>
<title>Iparraldeko Konpilazioa - Accueil</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<link rel="stylesheet" media="all" type="text/css" href="css/hidden.css" />
<!--[if lt IE 7.]>
<script language="JavaScript" type="text/javascript" src="js/sleight.js"></script>
<script language="JavaScript" type="text/javascript" src="js/sleightbg.js"></script>
<![endif]-->
<!--[if lte IE 6]>
<style type="text/css">div#page {height: 100%;}</style>
<link rel="stylesheet" media="all" type="text/css" href="css/hidden_ie.css" />
<![endif]-->
</head>
<body>
<div id="page">
<div class="hidden_menu">
<ul class="drop">
<li><a class="drop" href="#">Navigation rapide
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="index.html" title="Retour à l'accueil" accesskey="1">Accueil</a></li>
<li><a href="presentation.html" title="Keskekoi ?" accesskey="2">Présentation</a></li>
<li><a href="download.html" title="Les kompils chez soi ..." accesskey="3">Téléchargements / Ecoutes</a></li>
<li><a href="partenaires.html" title="Qui se cache derrière IK" accesskey="4">Partenaires</a></li>
<li><a href="contact.html" title="Nous contacter" accesskey="5">Contacts / Infos pratiques</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
</ul>
</div>
<h1 id="premier-element" class="header"><img src="images/logo.png" title="" alt="Logo Iparraldeko Konpilazioa"/></h1>
<div id="dernier-element" class="content">
<div class="hidden_radio">
<ul class="drop">
<li><a class="drop" href="#">Radio
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="radio.html" onclick="window.open(this.href, 'Radio_Iparraldeko_Konpilazioa', 'height=600, width=300, top=0, left=0, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=no, status=no'); return false;">
Pour écouter les Kompils tout en continuant de naviguer, cliquez ici (ouvre une fenêtre pop-up).</a>
</li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
</ul>
</div>
<div class="hidden_news">
<ul class="drop">
<li><a class="drop" href="#">News
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a>.: 01/09/2006 :.<br />
Mise en ligne du site pour les compilation "Iparraldeko Konpilazioa".
Bienvenue à tous !
.: 01/09/2006 :.<br />
Mise en ligne du site pour les compilation "Iparraldeko Konpilazioa".
Bienvenue à tous !</a>
</li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
</ul>
</div>
<div class="leftside">
<a href="ik2006.html" title="presentation de l'édition 2006" accesskey="8" class="img">
<img src="images/ik2006.jpg" title="Edition IK 2006" alt="Pochette IK 2006" /></a>
<a href="ik2006.html" title="presentation de l'édition 2006" accesskey="8" class="legend">Iparraldeko Konpilazioa 2006</a>
<a href="ik2005.html" title="presentation de l'édition 2005" accesskey="7" class="img">
<img src="images/ik2005.jpg" title="Edition IK 2005" alt="Pochette IK 2005" /></a>
<a href="ik2005.html" title="presentation de l'édition 2005" accesskey="7" class="legend">Iparraldeko Konpilazioa 2005</a>
</div>
<div id="contenu">
<h2><span class="lettrine">T</span><br />éléchargements des kompils : mode d'emploi.</h2>
<table class="dl">
<thead>
<tr>
<th></th>
<th colspan="2" class="line">IK 2006</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="12" class="line line2">Titres<br />séparés</th>
<th class="line">MP3</th>
<th class="line">OGG</th>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-01.mp3</a></td>
<td><a href="" title="" class="contenu">titre-01.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-02.mp3</a></td>
<td><a href="" title="" class="contenu">titre-02.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-03.mp3</a></td>
<td><a href="" title="" class="contenu">titre-03.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-04.mp3</a></td>
<td><a href="" title="" class="contenu">titre-04.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-05.mp3</a></td>
<td><a href="" title="" class="contenu">titre-05.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-06.mp3</a></td>
<td><a href="" title="" class="contenu">titre-06.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-07.mp3</a></td>
<td><a href="" title="" class="contenu">titre-07.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-08.mp3</a></td>
<td><a href="" title="" class="contenu">titre-08.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-09.mp3</a></td>
<td><a href="" title="" class="contenu">titre-09.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-10.mp3</a></td>
<td><a href="" title="" class="contenu">titre-10.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-11.mp3</a></td>
<td><a href="" title="" class="contenu">titre-11.ogg</a></td>
</tr>
<tr>
<th rowspan="3" class="line line2">Packs</th>
<td><a href="" title="" class="contenu">IK2006-mp3.rar</a></td>
<td><a href="" title="" class="contenu">IK2006-ogg.rar</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">pack-mp3.rar</a></td>
<td><a href="" title="" class="contenu">pack-ogg.rar</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">covers-inlay.jpg</a></td>
<td><a href="" title="" class="contenu">covers-booklet.jpg</a></td>
</tr>
</tbody>
</table>
<br/><a href="#" class="contenu">retour en haut de la page</a><br /> <br />
<table class="dl">
<thead>
<tr>
<th></th>
<th colspan="2" class="line">IK 2005</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="13" class="line line2">Titres<br />séparés</th>
<th class="line">MP3</th>
<th class="line">OGG</th>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-01.mp3</a></td>
<td><a href="" title="" class="contenu">titre-01.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-02.mp3</a></td>
<td><a href="" title="" class="contenu">titre-02.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-03.mp3</a></td>
<td><a href="" title="" class="contenu">titre-03.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-04.mp3</a></td>
<td><a href="" title="" class="contenu">titre-04.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-05.mp3</a></td>
<td><a href="" title="" class="contenu">titre-05.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-06.mp3</a></td>
<td><a href="" title="" class="contenu">titre-06.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-07.mp3</a></td>
<td><a href="" title="" class="contenu">titre-07.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-08.mp3</a></td>
<td><a href="" title="" class="contenu">titre-08.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-09.mp3</a></td>
<td><a href="" title="" class="contenu">titre-09.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-10.mp3</a></td>
<td><a href="" title="" class="contenu">titre-10.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-11.mp3</a></td>
<td><a href="" title="" class="contenu">titre-11.ogg</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">titre-12.mp3</a></td>
<td><a href="" title="" class="contenu">titre-12.ogg</a></td>
</tr>
<tr>
<th rowspan="3" class="line line2">Packs</th>
<td><a href="" title="" class="contenu">IK2005-mp3.rar</a></td>
<td><a href="" title="" class="contenu">IK2005-ogg.rar</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">pack-mp3.rar</a></td>
<td><a href="" title="" class="contenu">pack-ogg.rar</a></td>
</tr>
<tr>
<td><a href="" title="" class="contenu">covers-inlay.jpg</a></td>
<td><a href="" title="" class="contenu">covers-booklet.jpg</a></td>
</tr>
</tbody>
</table>
<br/><a href="#" class="contenu">retour en haut de la page</a>
</div>
</div>
<div id="piedpage" class="footer">
<div class="spacer"></div>
<div id="bas">
<ul>
<li><a href="index.html" title="Retour à l'accueil" accesskey="1">Accueil</a></li>
<li><a href="presentation.html" title="Keskekoi ?" accesskey="2">Présentation</a></li>
<li><a href="download.html" title="Les kompils chez soi ..." accesskey="3">Téléchargements / Ecoutes</a></li>
<li><a href="partenaires.html" title="Qui se cache derrière IK" accesskey="4">Partenaires</a></li>
<li><a href="contact.html" title="Nous contacter" accesskey="5">Contacts / Infos pratiques</a></li>
<li><a href="ik2006.html" title="presentation de l'édition 2006" accesskey="8">IK 2006</a></li>
<li><a href="ik2005.html" title="presentation de l'édition 2005" accesskey="7">IK 2005</a></li>
<li><a href="radio.html" onclick="window.open(this.href, 'Radio Iparraldeko Konpilazioa', 'height=600, width=300, top=0, left=0, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=no, status=no'); return false;">
Radio (ouvre une fenêtre pop-up).</a>
</li>
</ul>
<div id="pied">
<p>
<a href="http://www.mozilla-europe.org/fr/products/firefox/"><img src="http://sfx-images.mozilla.org/affiliates/Buttons/36x14/blue.gif" alt="Get Firefox!" title="Get Firefox!"/></a> -
<a href="http://www.ekxaoproductions.com" title="Mais qui à commis ce site ?" class="logo"><img src="images/ekxao.gif" title="Une tête qui en dit long ..." alt="Logo Ekxao Productions"/></a> -
<a href="http://www.lanetikegina.org" title="Producteur executif ...">Lanetik Egina</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>le css :
/* --- GENERAL --- */
*{margin:0;padding:0;}
html, body {
height: 100%;
color: #E3CB3E;
background-color: #000;
}
a:link, a:visited {
color: #977F10;
font: normal bold .9em Garamond, sans-serif;
}
a:hover, a:active {
color: #fff;
font: normal bold .9em Garamond, sans-serif;
}
/* --- BLOC CONTENEUR GLOBAL --- */
div#page {
position: relative;
width: 600px;
margin: 0 auto;
min-height: 100%;
background: url(../images/bg_body.jpg) repeat;
}
div#page #premier-element {
margin-top: 0;
}
div#page #dernier-element {
margin-bottom: 0;
padding-bottom: 160px;/* ATTENTION : cet espace doit permettre de placer le pied de page ! */
}
/* --- HEADER --- */
.header {
height: 110px;
text-align: right;
}
/* --- CONTENU --- */
.leftside {
float: right;
width: 145px;
text-align: center;
}
.leftside img{
border: 5px solid #000;
}
.legend {
margin-bottom: 15px;
}
a.img {
text-decoration: none;
}
a.legend {
display: block;
}
#contenu {
width: 60%;
margin: 0 60px;
background: transparent url(../images/bg_contenu.jpg) repeat;
padding-bottom: 20px;
border: 3px solid #000;
}
#contenu p {
padding: 1em;
font-weight: bold;
}
#contenu h2 {
margin: 1em 0 2em 1em;
font-size: 1.3em;
}
#contenu img {
float: left;
margin-right: 1em;
background: #fff;
}
.lettrine {
float: left;
font-size: 3em;
font-weight: bold;
font-family: Garamond, sans-serif;
border: 1px solid #412a0e;
background: url(../images/bg_body.jpg) repeat;
margin: 3px !important;
margin: 1px;
padding: 2px;
line-height: 1em;
}
a.contenu, a:visited.contenu {
color: #1D1306;
}
a:hover.contenu, a:active.contenu{
color: #fff;
}
.dl table {
border: 0;
border-collapse: collapse;
width: 90%;
margin: 0 auto;
}
.dl thead, .dl tfoot {
background-color: transparent;
border: 0;
}
.dl tbody {
background-color: transparent;
border: 0;
}
.dl th {
border: 0;
padding: 5px;
background-color: transparent;
width: 2em;
}
.dl th.line {
border: 1px solid #e3cb3e;
background-color: #000;
}
.dl th.line2 {
font-size: .7em;
width: auto;
}
.dl td {
width: 10em;
font-size: 80%;
border: 1px solid #e3cb3e;
padding: 5px;
text-align: center;
background-color: #000;
}
.dl caption {
}
.dl a, .dl a:visited {
color: #977f10;
}
/* --- PIED DE PAGE --- */
div#piedpage {
position: absolute;
bottom: 0; left: 0;
width: 100%;
height: 149px;
}
div.spacer {
clear: both;
height: 90px;
background: transparent url(../images/degrade24.png) repeat-x;
}
#bas {
background-color: #000;
font-size: .8em;
}
#bas ul {
list-style-type: none;
}
#bas ul li {
float: left;
margin: -.5em 0 1em 0;
padding: 0 .5em;
border: 1px solid #412a0e;
border-width: 0 1px 0 0;
}
#bas ul li a {
display: block;
text-decoration: none;
}
div#pied {
clear: both;
margin: 0 auto;
background-color: #000;
text-align: center;
border: 1px solid #412a0e;
border-width: 2px 0 0;
color: #fff;
}
#pied a{
color: #fff;
text-decoration: none;
}
#pied a.logo {
vertical-align: middle;
}
#pied img{
border: none;
}
file:///D:/EkxaO%20prod/WWW/IK/www/css/hidden.css
/* common styling */
.hidden_menu, .hidden_radio, .hidden_news{
position:absolute;
font: bold 1em Garamond, sans-serif;
}
.hidden_menu{
z-index: 300;
}
.hidden_radio {
z-index: 200;
}
.hidden_news {
z-index: 100;
top: 220px;
}
.hidden_menu ul, .hidden_radio ul, .hidden_news ul {
list-style-type: none;
border: 1px solid #000;
border-width: 1px 2px 2px 0;
}
ul.drop {border:0;}
.hidden_menu ul li, .hidden_radio ul li, .hidden_news ul li {
position: relative;
float: left;
}
.hidden_menu ul li a, .hidden_menu ul li a:visited {
display: block;
text-decoration: none;
width: 25px;
height: 100px;
background: transparent url(../images/menu.jpg) top right no-repeat;
text-indent: -999px;
}
.hidden_radio ul li a, .hidden_radio ul li a:visited {
display: block;
text-decoration: none;
width: 25px;
height: 100px;
background: transparent url(../images/radio.jpg) top right no-repeat;
text-indent: -999px;
}
.hidden_news ul li a, .hidden_news ul li a:visited {
display: block;
text-decoration: none;
width: 25px;
height: 100px;
background: transparent url(../images/news.jpg) top right no-repeat;
text-indent: -999px;
}
.hidden_menu ul li ul, .hidden_radio ul li ul, .hidden_news ul li ul {
visibility: hidden;
position: absolute;
width: 190px;
top: 0;
left: 0;
}
table {
margin: 0; padding: 0; border: 0;
border-collapse: collapse;
font-size: 1em;
}
p.news {
color: #fff;
font: bold 1em 1em Garamond, sans-serif;
}
/* specific to non IE browsers */
.hidden_menu ul li:hover a, .hidden_radio ul li:hover a, .hidden_news ul li:hover a {
color: #fff;
width: 215px;
}
.hidden_menu ul li:hover ul, .hidden_radio ul li:hover ul, .hidden_news ul li:hover ul {
visibility: visible;
}
.hidden_menu ul li:hover ul li a {
display: block;
background: transparent url(../images/bg_menu.png) repeat;
text-indent: 0;
color: #977f10;
height: auto;
line-height: 1em;
padding: 5px;
width: 180px;
text-align: left;
}
.hidden_radio ul li:hover ul li a {
display: block;
background: transparent url(../images/bg_menu.png) repeat;
text-indent: 0;
color: #977f10;
height: auto;
line-height: 1.52em;
padding: 5px;
width: 180px;
text-align: left;
}
.hidden_news ul li:hover ul li a{
display: block;
background: transparent url(../images/bg_menu.png) repeat;
text-indent: 0;
color: #977f10;
height: auto;
line-height: 1.52em;
padding: 5px;
width: 180px;
text-align: left;
}
.hidden_menu ul li:hover ul li a:hover, .hidden_radio ul li:hover ul li a:hover, .hidden_news ul li:hover ul li a:hover {
color: #fff;
}
Merci du temps que vous accordez aux néophytes ...
Modifié par barbe douce (25 Sep 2006 - 22:15)
YOUHOU !!