Miki a besoin d'aide pour l'en tête

Voilà le code complet

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PA</title>

<style>

ul{
list-style: none;
margin: 0;
padding: 0;
}

ul li{
float: left;
display: block;
margin-right: 0px;
}

ul li div.onglet{
display: block;
overflow: hidden;
height: 300px;
width: 50px;
background-image: url('http://i1088.photobucket.com/albums/i329/Tite-May/Miki/fondpubetentete2.png');
}

#a1{
width: 600px;
}

ul li img{
position: absolute;
border: solid 1px #163947;
}

ul li p{
margin: 0;
padding: 0;
font-size:14px;
color:#000000;
}

ul#liste1{
list-style-type:square
margin: 0;
padding: 0;
font-size:14px;
color:#000000;
}

ul li h1{
width:540px;
margin-left:50px;
height:30px;
background-color:#000000;
color:#ffffff;
font-size:16px;
text-align:center;
font-weight:bold;
margin-bottom:2px;
}

ul li h2{
height:20px;
text-align:center;
font-size:12px;
margin:auto;
color:#ffffff;
font-weight:bold;
margin-bottom:2px;
background-color:#000000;
}

ul li table tr{
vertical-align:top;
}

ul li table{
width:540px;
margin-left:50px;
}

ul li a{
color:#888888;
text-decoration:none;
}

div#staff img, img#votelfd, div#privilegies img, div#autres img{
position:relative;
border: 0 !important;
}
.infobulle {
display: inline;
position: relative;
font-size: 11px;
color:#ffffff;
z-index: 0;
text-align: center;
margin:auto;
}

.infobulle span {display: none;}

.infobulle:hover {
background: none;
z-index: 999;
cursor: defaut;
}

.infobulle:hover span {
display: inline;
position: absolute;
left: 30px;
top: -50px;
padding: 5px;
background-image : url('http://img4.hostingpics.net/pics/654627infobulle.jpg');
border: 2px solid #888888;
font-size: 11px;
color:#ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
width: auto;
}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 600;
minWidth = 45;

$("ul li div").click(
   function(){
      $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
      $(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
      lastBlock = this;
   }
);

$("#infos_staff").click(
      function(){
         $("#staff").css({'position':'absolute', 'z-index':'10'});
      }
   );

$(".autres").click(
   function(){
      $("#staff").css({'position':'relative'});
   }
);

});
</script>
</head>
<body>

<table cellspacing="6px" cellpadding="0">
<tr>
<td>
<ul>
<li>
<div id="a1" class="onglet autres">
<img src="http://i1088.photobucket.com/albums/i329/Tite-May/Miki/prologue.png" />
<h1>~Prologue~</h1>
<table cellpadding="0" cellspacing="4" border="0">
<tr>
<td width="50%">
<h2>Bienvenue sur Bulles d'Encre !</h2>
<p> De l'aventure au policier en passant par le fantastique, tous les genres sont représentés sur Bulles d'Encre, un forum libre d'accès à tous ceux et celles qui ont le désir d'écrire et de partager leurs histoires. Alors, prenez votre plume magique et montrez-nous de quoi votre esprit est capable !</p>
</td>
<td width="50%">
<h2>Qui sommes-nous ?</h2><p>

<p> Bienvenue cher ami écrivain !
<br>Vous avez choisi Bulles d'Encre pour partager vos oeuvres ou en découvrir d'autres ? Eh bien sachez que Bulles d'Encre ce n'est pas que ça. Notre Maison d'écrivain et Maison d'édition vous donne en effet la possibilité :</p>
<ul id="liste1"><li>* d'améliorer votre maîtrise des traitements de texte,</li><li>* d'approfondir votre connaissance de la langue française,</li><li>* de participer à nos nombreux jeux, concours et autres discussions !</li></ul>
</td>
</tr>
</table>
</div>
</li>
<li>
<div class="onglet" id="infos_staff">
<img src="http://i1088.photobucket.com/albums/i329/Tite-May/Miki/personnel.png" />
<h1>~Le Personnel~</h1>
<table cellpadding="0" cellspacing="4" border="0">
<tr>
<td width="50%"><div id="staff">
<h2>Le Staff</h2>

<center>
<div class="infobulle">
<img src="http://img4.hostingpics.net/pics/77944632100.png" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;" />
<span>
<strong>Miki </strong><br>Directrice
<br/>
<img src="http://img4.hostingpics.net/pics/121887100100.png" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u1">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=1">Missive</a><br/>
</span>
</div>

<div class="infobulle">
<img src="http://i43.servimg.com/u/f43/15/33/65/55/ela11.png" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;" />
<span>
<strong>Elayne</strong><br>Co-Directrice
<br/>
<img src="http://i43.servimg.com/u/f43/15/33/65/55/ela210.png" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u2">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=2">Missive</a><br/>
</span>
</div>

<div class="infobulle">
<img src="http://i43.servimg.com/u/f43/15/33/65/55/connem10.jpg" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;" />
<span>
<strong>Connem's</strong><br/>Agent de Sécurité
<br/>
<img src="http://i43.servimg.com/u/f43/15/33/65/55/connem11.jpg" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u8">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=8">Missive</a><br/>
</span>
</div>

<div class="infobulle">
<img src="http://i43.servimg.com/u/f43/15/33/65/55/zaza10.png" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;" />
<span>
<strong>Zaïtto </strong><br/>Agent de Sécurité <br/> Correctrice
<br/>
<img src="http://i43.servimg.com/u/f43/15/33/65/55/zaza210.png" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u5">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=5">Missive</a><br/>
</span>
</div>

<div class="infobulle">
<img src="http://www.hostingpics.net/thumbs/90/64/87/mini_906487FL2.jpg" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;width:32px;height:100px;" />
<span>
<strong>Foxy'Lady </strong><br/>Correctrice
<br/>
<img src="http://www.hostingpics.net/thumbs/14/30/98/mini_143098FL1.jpg" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u65">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=65">Missive</a><br/>
</span>
</div>

<div class="infobulle">
<img src="http://www.hostingpics.net/thumbs/22/41/65/mini_224165loulou2.jpg" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;width:32px;height:100px;" />
<span>
<strong>loulouaunutella </strong><br/>Reporter
<br/>
<img src="http://www.hostingpics.net/thumbs/63/94/46/mini_639446loulou1.jpg" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u70">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=70">Missive</a><br/>
</span>
</div>

<br/>

<div class="infobulle">
<img src="http://i43.servimg.com/u/f43/15/33/65/55/absynt10.png" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;" />
<span>
<strong>Absynthe</strong><br/>Reporter - Illustratrice
<br/>
<img src="http://i43.servimg.com/u/f43/15/33/65/55/absynt11.png" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u30">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=30">Missive</a><br/>
</span>
</div>

<div class="infobulle">
<img src="http://i43.servimg.com/u/f43/15/33/65/55/18-9710.png" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;" />
<span>
<strong>Talimsan </strong><br/> Illustratrice
<br/>
<img src="http://i43.servimg.com/u/f43/15/33/65/55/talim210.png" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u18">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=18">Missive</a><br/>
</span>
</div>

<div class="infobulle">
<img src="http://i43.servimg.com/u/f43/15/33/65/55/chou10.png" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;" />
<span>
<strong>Choutic</strong><br/> Bibliothécaire<br/> Animatrice
<br/>
<img src="http://i43.servimg.com/u/f43/15/33/65/55/chouti10.png" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u7">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=7">Missive</a><br/>
</span>
</div>

<div class="infobulle">
<img src="http://i43.servimg.com/u/f43/15/33/65/55/zorglo10.png" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;" />
<span>
<strong>Zorgloub</strong><br/>Bibliothécaire Animatrice
<br/>
<img src="http://i43.servimg.com/u/f43/15/33/65/55/zorglo11.png" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u40">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=40">Missive</a><br/>
</span>
</div>
</center>
</div></td>
<td width="50%">
<h2>Le Recrutement</h2>
<p>* Nous recrutons :</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/t437-recrutement#8236" style="color:#c45612;">Illustrateurs</a> ,</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/t228-recrutement-les-animateurs" style="color:#3d3d3d;">Animateurs</a> ,</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/t166-recrutement-la-biblio-a-besoin-d-aide" style="color:#999900;">Bibliothécaires</a>.</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/t438-recrutement-nous-recherchons-des-moderateurs#8239" style="color:#1e7a10;">Modérateurs</a> ,</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/t284-recrutementcorrecteurs" style="color:#0A40C9;">Correcteurs</a> ,</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/t165-recrutement-le-journal-recrute" style="color:#7B1A8F;">Journalistes</a>.</p>
</td>
</tr>
</table>
</div>
</li>
<li>
<div class="onglet autres">
<img src="http://i1088.photobucket.com/albums/i329/Tite-May/Miki/news.png" />
<h1>~Les Nouveautés~</h1>
<table cellpadding="0" cellspacing="4" border="0">
<tr>
<td width="50%">
<h2>L'actualité</h2>
<ul id="liste1">
<li>00/00/0000 : Une nouveauté</li>
<li>00/00/0000 : Une nouveauté</li>
<li>00/00/0000 : Une nouveauté</li>
<li>00/00/0000 : Une nouveauté</li>
</ul>
</td>
<td width="50%">
<h2>Soutenez-nous !</h2>
<p>Vous pouvez retrouver dès à présent toute l'actualité de Bulles d'Encre sur Facebook :</p>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fapps%2Fapplication.php%3Fid%3D127909203967983%26sk%3Dwall&width=292&colorscheme=light&show_faces=false&border_color&stream=false&header=false&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:262px; height:62px;" allowTransparency="true"></iframe>
<p>Et n'oubliez pas de voter pour notre forum !</p>
<center><a href="http://lesforumsdefa.olympe-network.com/topsite/vote.php?id=349" target="_blank"><img src="http://lesforumsdefa.olympe-network.com/topsite/img/vote.gif" border="0" id="votelfd" /></a></center>
</td>
</tr>
</table>
</div>
</li>
<li>
<div class="onglet autres">
<img src="http://i1088.photobucket.com/albums/i329/Tite-May/Miki/prix.png" />
<h1>~Les Prix~</h1>
<table cellpadding="0" cellspacing="4" border="0">
<tr>
<td width="50%">
<h2>Les prix littéraires</h2>
<p>Résultats blabla.</p>
</td>
<td width="50%">
<h2>Les concours</h2>
<p>Résultats blabla</p>
</td>
</tr>
</table>
</div>
</li>
<li>
<div class="onglet autres">
<img src="http://i1088.photobucket.com/albums/i329/Tite-May/Miki/rseau.png" />
<h1>~Le Réseau~</h1>
<table cellpadding="0" cellspacing="4" border="0">
<tr>
<td width="50%">
<div id="privilegies">
<h2>Les privilégiés</h2>

<justify>
<a href="http://pensionnat-tsuruko.roleplaylife.net" class="postlink" target="_blank" rel="nofollow"><img src="http://img11.hostingpics.net/pics/831186Bouton.jpg" border="0" alt="" /></a>
<a href="http://magiccampus.jeun.fr" class="postlink" target="_blank" rel="nofollow"><img src="http://nsa14.casimages.com/img/2010/03/30/100330125239177908.png" border="0" alt="" /></a>
<a href="http://bibliotheque.kanak.fr/"><img src="http://i60.servimg.com/u/f60/12/40/50/96/88x3114.png"></a>
<a href="http://the-horseworld.forumgratuit.org/"><img src="http://nsa27.casimages.com/img/2011/08/19/110819090043902265.jpg"></a>
<a href="http://azclandia.rpg-dynasty.net" class="postlink" target="_blank" rel="nofollow"><img src="http://i43.servimg.com/u/f43/15/33/65/55/az11.png" border="0" alt="" /></a>
<a href="http://apn-world.forumactif.com/"><img src="http://i43.servimg.com/u/f43/15/33/65/55/apn10.png"/></a>
<a href="http://monde-oublie.forumactif.com/"><img src="http://i54.tinypic.com/ei8uty.gif"></a>
<a href="http://lycee-virtuel.francais.tv/"><img src="http://i41.servimg.com/u/f41/16/31/41/17/lili10.png"/></a>
<a href="http://revesdecriture.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i44.servimg.com/u/f44/16/64/06/70/sans_t20.gif" border="0" alt="" /></a>
</justify>
</div>
</td>
<td width="50%">
<div id="autres">
<h2>Les autres</h2>
<justify>
<a href="http://www.ile-improbable.net/" target="_blank"><img src="http://kiri84.free.fr/logo.png" border="0" alt="Forum de OuF"></a>
<a href="http://zestedecouleurs.forumactif.org/forum" class="postlink" target="_blank" rel="nofollow"><img src="http://i65.servimg.com/u/f65/11/25/40/17/logo110.png" border="0" alt="" /></a>
<a href="http://fushigi-yume.forumactif.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i46.photobucket.com/albums/f120/darkishow/fy/88.jpg" border="0" alt="" /></a>
<a href="http://www.melodie-pub.net"><img src="http://i44.servimg.com/u/f44/14/44/90/04/logomp11.png"alt="Mélodie-PUB"/></a>
<a href="http://school-of-pub.fr" target="_blank"><img src="http://school-of-pub.fr/forum_automne2011/logo.jpg" alt="School Of Pub, forum d'entraide et de formations" title="School Of Pub, forum d'entraide et de formations" style="border:0 !important;" /></a>
<a href="http://www.amis-pub.net/portal" class="postlink" target="_blank" rel="nofollow">
<img src="http://i43.servimg.com/u/f43/15/33/65/55/talach10.png" border="0" alt="" /></a>
<a href="http://aidecreation.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i40.servimg.com/u/f40/17/00/45/45/883110.png" border="0" alt="" /></a>
</justify>
</div>
</td>
</tr>
</table>
</div>
</li>
</ul>
</td>
<td>
<h1>~Navigation rapide~</h1>
<ul id="liste1"><li><a href="http://www.bulles-dencre.net/t1-regles-de-bienseance">La Charte.</a></li>
<li><a href="http://www.bulles-dencre.net/f3-presentation">Les Présentations.</a></li>
<li><a href="http://www.bulles-dencre.net/f35-l-actualite">L'Actualité.</a></li>
<li><a href="http://www.bulles-dencre.net/f68-cours-particuliers">Les Cours.</a></li>
<li><a href="http://www.bulles-dencre.net/f24-le-magasinier-du-coin">Le Journal.</a></li>
<li><a href="http://www.bulles-dencre.net/t175-formulaire">Le Partenariat.</a></li>
</ul>
</td>
</tr>
</table>

</div>
</body>

</html>

C'est quoi le souci d'affichage ? Smile

Pour les liens ?

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 06/03/2011

Ben attends, capture ^^

http://img11.hostingpics.net/pics/857335ent.png

J'essaie ton code ^^
Pour voir ce que j'ai de faux ^^
Ah ben c'est pareil avec toi...
J'ai repéré un fin de tr alors qu'il n'y en avait pas d'ouvert alors j'ai sup mais ça reste comme ça...

_________________

Mon diplôme:

C'est donc normal Smile

Code:

ul li{
float: left;
display: block;
margin-right: 0px;
}

ça s'applique sur tous les li ^^

Or, ici, on ne veut pas que ça s'applique à celui de la nav. Donc, on va ajouter dans le css

Code:

ul#liste1 li{
clear:both;
}

pour annuler le "float:left"

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 06/03/2011

Code:

ul#liste1{
list-style-type:square
margin: 0;
padding: 0;
font-size:14px;
color:#000000;
clear:both;
}

J'ai ça c'est au bon endroit ? en revanche je n'ai pas li juste après liste 1. (c'est ce qui me met le doute ^^)
Apparemment non ce n'était pas là c'est arrangé ^^

_________________

Mon diplôme:

en fait, ici tu as appliqué le style sur la liste (ul) qui a pour id "liste1"

Or, moi j'ai appliqué mon annulation de float sur les points (li) de la liste (ul) qui a pour id "liste1". Voilà pourquoi le "li" à son importance Smile

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 06/03/2011

Ouki d'acc ^^
Merci ^^
Maintenant comme je fais pour que le style (background et reste de mise en page) s'applique aussi à la nav rapide ? Smile

_________________

Mon diplôme:

Yep

On va donner un nom à la case. Par exemple

Code:

Et dans le css on fera :

Code:

td#navi_rapide{blablabla}

td#navi_rapide h1{le css des h1 de la colonne navi_rapide}

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 06/03/2011

Ouki d'acc j'essaie ça Smile

Merci ^^

Voilà ce que j'ai :

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PA</title>

<style>

ul{
list-style: none;
margin: 0;
padding: 0;
}

ul li{
float: left;
display: block;
margin-right: 0px;
}

ul li div.onglet{
display: block;
overflow: hidden;
height: 300px;
width: 50px;
background-image: url('http://img4.hostingpics.net/pics/639912thfondpubetentete2.png');
}

#a1{
width: 600px;
}

ul li img{
position: absolute;
border: solid 1px #163947;
}

ul li p{
margin: 0;
padding: 0;
font-size:14px;
color:#000000;
}

ul#liste1{
list-style-type:square
margin: 0;
padding: 0;
font-size:14px;
color:#000000;

}

ul#liste1 li{
clear:both;
}

ul li h1{
width:540px;
margin-left:50px;
height:30px;
background-color:#000000;
color:#ffffff;
font-size:16px;
text-align:center;
font-weight:bold;
margin-bottom:2px;
}

ul li h2{
height:20px;
text-align:center;
font-size:12px;
margin:auto;
color:#ffffff;
font-weight:bold;
margin-bottom:2px;
background-color:#000000;
}

ul li table tr{
vertical-align:top;
}

ul li table{
width:540px;
margin-left:50px;
}

ul li a{
color:#888888;
text-decoration:none;
}

div#staff img, img#votelfd, div#privilegies img, div#autres img{
position:relative;
border: 0 !important;
}
.infobulle {
display: inline;
position: relative;
font-size: 11px;
color:#ffffff;
z-index: 0;
text-align: center;
margin:auto;
}

.infobulle span {display: none;}

.infobulle:hover {
background: none;
z-index: 999;
cursor: defaut;
}

.infobulle:hover span {
display: inline;
position: absolute;
left: 30px;
top: -50px;
padding: 5px;
background-image : url('http://img4.hostingpics.net/pics/654627infobulle.jpg');
border: 2px solid #888888;
font-size: 11px;
color:#ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
width: auto;
}

td#navi_rapide{
background-image: url('http://img4.hostingpics.net/pics/639912thfondpubetentete2.png');
}

td#navi_rapide h1{
height:20px;
text-align:center;
font-size:12px;
margin:auto;
color:#ffffff;
font-weight:bold;
margin-bottom:2px;
background-color:#000000;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 600;
minWidth = 45;

$("ul li div").click(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);

$("#infos_staff").click(
function(){
$("#staff").css({'position':'absolute', 'z-index':'10'});
}
);

$(".autres").click(
function(){
$("#staff").css({'position':'relative'});
}
);

});
</script>
</head>
<body>

<table cellspacing="6px" cellpadding="0">
<tr>
<td>
<ul>
<li>
<div id="a1" class="onglet autres">
<img src="http://i1088.photobucket.com/albums/i329/Tite-May/Miki/prologue.png" />
<h1>~Prologue~</h1>
<table cellpadding="0" cellspacing="4" border="0">
<tr>
<td width="50%">
<h2>Bienvenue sur Bulles d'Encre !</h2>
<p> De l'aventure au policier en passant par le fantastique, tous les genres sont représentés sur Bulles d'Encre, un forum libre d'accès à tous ceux et celles qui ont le désir d'écrire et de partager leurs histoires. Alors, prenez votre plume magique et montrez-nous de quoi votre esprit est capable !</p>
</td>
<td width="50%">
<h2>Qui sommes-nous ?</h2><p>

<p> Bienvenue cher ami écrivain !
<br>Vous avez choisi Bulles d'Encre pour partager vos oeuvres ou en découvrir d'autres ? Eh bien sachez que Bulles d'Encre ce n'est pas que ça. Notre Maison d'écrivain et Maison d'édition vous donne en effet la possibilité :</p>
<ul id="liste1"><li>* d'améliorer votre maîtrise des traitements de texte,</li><li>* d'approfondir votre connaissance de la langue française,</li><li>* de participer à nos nombreux jeux, concours et autres discussions !</li></ul>
</td>
</tr>
</table>
</div>
</li>
<li>
<div class="onglet" id="infos_staff">
<img src="http://i1088.photobucket.com/albums/i329/Tite-May/Miki/personnel.png" />
<h1>~Le Personnel~</h1>
<table cellpadding="0" cellspacing="4" border="0">
<tr>
<td width="50%"><div id="staff">
<h2>Le Staff</h2>

<center>
<div class="infobulle">
<img src="http://img4.hostingpics.net/pics/77944632100.png" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;" />
<span>
<strong>Miki </strong><br>Directrice
<br/>
<img src="http://img4.hostingpics.net/pics/121887100100.png" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u1">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=1">Missive</a><br/>
</span>
</div>

<div class="infobulle">
<img src="http://i43.servimg.com/u/f43/15/33/65/55/ela11.png" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;" />
<span>
<strong>Elayne</strong><br>Co-Directrice
<br/>
<img src="http://i43.servimg.com/u/f43/15/33/65/55/ela210.png" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u2">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=2">Missive</a><br/>
</span>
</div>

<div class="infobulle">
<img src="http://i43.servimg.com/u/f43/15/33/65/55/connem10.jpg" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;" />
<span>
<strong>Connem's</strong><br/>Agent de Sécurité
<br/>
<img src="http://i43.servimg.com/u/f43/15/33/65/55/connem11.jpg" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u8">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=8">Missive</a><br/>
</span>
</div>

<div class="infobulle">
<img src="http://i43.servimg.com/u/f43/15/33/65/55/zaza10.png" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;" />
<span>
<strong>Zaïtto </strong><br/>Agent de Sécurité <br/> Correctrice
<br/>
<img src="http://i43.servimg.com/u/f43/15/33/65/55/zaza210.png" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u5">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=5">Missive</a><br/>
</span>
</div>

<div class="infobulle">
<img src="http://www.hostingpics.net/thumbs/90/64/87/mini_906487FL2.jpg" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;width:32px;height:100px;" />
<span>
<strong>Foxy'Lady </strong><br/>Correctrice
<br/>
<img src="http://www.hostingpics.net/thumbs/14/30/98/mini_143098FL1.jpg" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u65">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=65">Missive</a><br/>
</span>
</div>

<div class="infobulle">
<img src="http://www.hostingpics.net/thumbs/22/41/65/mini_224165loulou2.jpg" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;width:32px;height:100px;" />
<span>
<strong>loulouaunutella </strong><br/>Reporter
<br/>
<img src="http://www.hostingpics.net/thumbs/63/94/46/mini_639446loulou1.jpg" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u70">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=70">Missive</a><br/>
</span>
</div>

<br/>

<div class="infobulle">
<img src="http://i43.servimg.com/u/f43/15/33/65/55/absynt10.png" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;" />
<span>
<strong>Absynthe</strong><br/>Reporter - Illustratrice
<br/>
<img src="http://i43.servimg.com/u/f43/15/33/65/55/absynt11.png" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u30">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=30">Missive</a><br/>
</span>
</div>

<div class="infobulle">
<img src="http://i43.servimg.com/u/f43/15/33/65/55/18-9710.png" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;" />
<span>
<strong>Talimsan </strong><br/> Illustratrice
<br/>
<img src="http://i43.servimg.com/u/f43/15/33/65/55/talim210.png" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u18">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=18">Missive</a><br/>
</span>
</div>

<div class="infobulle">
<img src="http://i43.servimg.com/u/f43/15/33/65/55/chou10.png" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;" />
<span>
<strong>Choutic</strong><br/> Bibliothécaire<br/> Animatrice
<br/>
<img src="http://i43.servimg.com/u/f43/15/33/65/55/chouti10.png" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u7">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=7">Missive</a><br/>
</span>
</div>

<div class="infobulle">
<img src="http://i43.servimg.com/u/f43/15/33/65/55/zorglo10.png" style="-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;border: 1px solid #000000;margin-left:5px;" />
<span>
<strong>Zorgloub</strong><br/>Bibliothécaire Animatrice
<br/>
<img src="http://i43.servimg.com/u/f43/15/33/65/55/zorglo11.png" /><br/>
<a href="http://bullesdencre.forumgratuit.org/u40">Profil</a> | <a href="http://bullesdencre.forumgratuit.org/privmsg?mode=post&u=40">Missive</a><br/>
</span>
</div>
</center>
</div></td>
<td width="50%">
<h2>Le Recrutement</h2>
<p>* Nous recrutons :</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/t437-recrutement#8236" style="color:#c45612;">Illustrateurs</a> ,</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/t228-recrutement-les-animateurs" style="color:#3d3d3d;">Animateurs</a> ,</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/t166-recrutement-la-biblio-a-besoin-d-aide" style="color:#999900;">Bibliothécaires</a>.</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/t438-recrutement-nous-recherchons-des-moderateurs#8239" style="color:#1e7a10;">Modérateurs</a> ,</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/t284-recrutementcorrecteurs" style="color:#0A40C9;">Correcteurs</a> ,</p>
<p>- <a href="http://bullesdencre.forumgratuit.org/t165-recrutement-le-journal-recrute" style="color:#7B1A8F;">Journalistes</a>.</p>
</td>
</tr>
</table>
</div>
</li>
<li>
<div class="onglet autres">
<img src="http://i1088.photobucket.com/albums/i329/Tite-May/Miki/news.png" />
<h1>~Les Nouveautés~</h1>
<table cellpadding="0" cellspacing="4" border="0">
<tr>
<td width="50%">
<h2>L'actualité</h2>
<ul id="liste1">
<li>00/00/0000 : Une nouveauté</li>
<li>00/00/0000 : Une nouveauté</li>
<li>00/00/0000 : Une nouveauté</li>
<li>00/00/0000 : Une nouveauté</li>
</ul>
</td>
<td width="50%">
<h2>Soutenez-nous !</h2>
<p>Vous pouvez retrouver dès à présent toute l'actualité de Bulles d'Encre sur Facebook :</p>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fapps%2Fapplication.php%3Fid%3D127909203967983%26sk%3Dwall&width=292&colorscheme=light&show_faces=false&border_color&stream=false&header=false&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:262px; height:62px;" allowTransparency="true"></iframe>
<p>Et n'oubliez pas de voter pour notre forum !</p>
<center><a href="http://lesforumsdefa.olympe-network.com/topsite/vote.php?id=349" target="_blank"><img src="http://lesforumsdefa.olympe-network.com/topsite/img/vote.gif" border="0" id="votelfd" /></a></center>
</td>
</tr>
</table>
</div>
</li>
<li>
<div class="onglet autres">
<img src="http://i1088.photobucket.com/albums/i329/Tite-May/Miki/prix.png" />
<h1>~Les Prix~</h1>
<table cellpadding="0" cellspacing="4" border="0">
<tr>
<td width="50%">
<h2>Les prix littéraires</h2>
<p>Résultats blabla.</p>
</td>
<td width="50%">
<h2>Les concours</h2>
<p>Résultats blabla</p>
</td>
</tr>
</table>
</div>
</li>
<li>
<div class="onglet autres">
<img src="http://i1088.photobucket.com/albums/i329/Tite-May/Miki/rseau.png" />
<h1>~Le Réseau~</h1>
<table cellpadding="0" cellspacing="4" border="0">
<tr>
<td width="50%">
<div id="privilegies">
<h2>Les privilégiés</h2>

<justify>
<a href="http://pensionnat-tsuruko.roleplaylife.net" class="postlink" target="_blank" rel="nofollow"><img src="http://img11.hostingpics.net/pics/831186Bouton.jpg" border="0" alt="" /></a>
<a href="http://magiccampus.jeun.fr" class="postlink" target="_blank" rel="nofollow"><img src="http://nsa14.casimages.com/img/2010/03/30/100330125239177908.png" border="0" alt="" /></a>
<a href="http://bibliotheque.kanak.fr/"><img src="http://i60.servimg.com/u/f60/12/40/50/96/88x3114.png"></a>
<a href="http://the-horseworld.forumgratuit.org/"><img src="http://nsa27.casimages.com/img/2011/08/19/110819090043902265.jpg"></a>
<a href="http://azclandia.rpg-dynasty.net" class="postlink" target="_blank" rel="nofollow"><img src="http://i43.servimg.com/u/f43/15/33/65/55/az11.png" border="0" alt="" /></a>
<a href="http://apn-world.forumactif.com/"><img src="http://i43.servimg.com/u/f43/15/33/65/55/apn10.png"/></a>
<a href="http://monde-oublie.forumactif.com/"><img src="http://i54.tinypic.com/ei8uty.gif"></a>
<a href="http://lycee-virtuel.francais.tv/"><img src="http://i41.servimg.com/u/f41/16/31/41/17/lili10.png"/></a>
<a href="http://revesdecriture.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i44.servimg.com/u/f44/16/64/06/70/sans_t20.gif" border="0" alt="" /></a>
</justify>
</div>
</td>
<td width="50%">
<div id="autres">
<h2>Les autres</h2>
<justify>
<a href="http://www.ile-improbable.net/" target="_blank"><img src="http://kiri84.free.fr/logo.png" border="0" alt="Forum de OuF"></a>
<a href="http://zestedecouleurs.forumactif.org/forum" class="postlink" target="_blank" rel="nofollow"><img src="http://i65.servimg.com/u/f65/11/25/40/17/logo110.png" border="0" alt="" /></a>
<a href="http://fushigi-yume.forumactif.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i46.photobucket.com/albums/f120/darkishow/fy/88.jpg" border="0" alt="" /></a>
<a href="http://www.melodie-pub.net"><img src="http://i44.servimg.com/u/f44/14/44/90/04/logomp11.png"alt="Mélodie-PUB"/></a>
<a href="http://school-of-pub.fr" target="_blank"><img src="http://school-of-pub.fr/forum_automne2011/logo.jpg" alt="School Of Pub, forum d'entraide et de formations" title="School Of Pub, forum d'entraide et de formations" style="border:0 !important;" /></a>
<a href="http://www.amis-pub.net/portal" class="postlink" target="_blank" rel="nofollow">
<img src="http://i43.servimg.com/u/f43/15/33/65/55/talach10.png" border="0" alt="" /></a>
<a href="http://aidecreation.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i40.servimg.com/u/f40/17/00/45/45/883110.png" border="0" alt="" /></a>
</justify>
</div>
</td>
</tr>
</table>
</div>
</li>
</ul>
</td>
<td id="navi_rapide">
<h1>~Navigation rapide~</h1>
<ul id="liste1"><li><a href="http://www.bulles-dencre.net/t1-regles-de-bienseance">La Charte.</a></li>
<li><a href="http://www.bulles-dencre.net/f3-presentation">Les Présentations.</a></li>
<li><a href="http://www.bulles-dencre.net/f35-l-actualite">L'Actualité.</a></li>
<li><a href="http://www.bulles-dencre.net/f68-cours-particuliers">Les Cours.</a></li>
<li><a href="http://www.bulles-dencre.net/f24-le-magasinier-du-coin">Le Journal.</a></li>
<li><a href="http://www.bulles-dencre.net/t175-formulaire">Le Partenariat.</a></li>
</ul>
</td>
</table>

</div>
</body>

</html>

J'aimerai mettre un léger cadre noir autour (mais je sais pas comment faire xD) et mettre le titre plus haut. Que dois-je modifier ? ^^

_________________

Mon diplôme:

Je poste parce que j'vois pas les éditions :rire:

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 06/03/2011

Ah ok parce que je me suis édité xD
Alors attends je remets. (ou tu regardes le message juste au-dessus ? xD)

_________________

Mon diplôme:

Pour le titre plus haut, il faut aligner les lignes en haut (tu sais, le valign="top" dans le tr)

Code:

Et ensuite tu joues ici

Code:

td#navi_rapide{
background-image: url('http://img4.hostingpics.net/pics/639912thfondpubetentete2.png');
padding-top:20px;
}

avec le padding top pour placer ton texte où tu le veux.

Pour le contour, tu veux l'appliquer aux 2 cases ?

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 06/03/2011

Oui pourquoi pas ^^
Ca ne me dérangerait pas qu'il soit sur les deux ^^

J'entre les autres données merci ^^

Sincèrement je en sais pas comment tu fais pour être partout à la fois ^^

_________________

Mon diplôme:

Toi aussi tu es partout Very Happy

Donc comme on va le mettre sur les 2, on va donner un nom de class aux 2 td du tableau principal

Code:

et

Code:

</td>
<td id="navi_rapide" class="col_tab">

Puis dans le css, on va ajouter

Code:

td.col_tab{
border: 1px solid black;
}

Comme ça, on ajoute cette bordure qu'aux cases ayant pour nom de class "col_tab"

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 06/03/2011

Super merci ^^
Bon maintenant, mon dernier souci c'est la liste de liens.
J'aimerai le centrer dans la case, aussi bien en hauteur qu'en largeur.
Cependant j'ai essayé de le placé dans une zone mais ça n'a rien changé donc je ne vois pas ou mettre le text align center...

Après oui c'est vrai que je suis un peu partout aussi. ^^"

_________________

Mon diplôme:

Pour les liens, tu veux les centrer en hauteur mais que le titre reste au meme endroit ?

_________________

SoP Story :: 2ème votes éliminatoires