Sujets similaires

Bonjour, j'ai quelques petits soucis avec ma pa.
J'avais fait la mise en page, tout marchait correctement. Quand j'ai voulu mettre une image de fond, j'ai eu des surprises par contre. Je m’explique, quand je rajoute la hauteur de l'imager pour qu'elle soit entièrement visible la deuxième "ligne" de mon tableau se décale jusqu'à la fin de l'image, laissant une grande partie vide. Quand j'enlève la hauteur, les éléments sont biens en place, mais mon image est en partie masquée par une cadre de la couleur de mon fond. Je ne comprend pas d'où vient le problème, ce n'est pas la première fois que j'utilise ce genre de fond, mais j'avoue que là, je sèche Mise en forme pa 3517359236

Voici une image:
https://2img.net/h/oi50.tinypic.com/10muazq.jpg

En gros j'aimerais que les éléments du bas se retrouvent là où il y a les flèches sans que mon image soit masquée =S

Et voilà mon code:

Merci pour votre aide Mise en forme pa 577704309

Bonjour OceanSoul,

Est-ce tu pourrais nous montrer ton code actuel ?

Merci.

Amicalement,
DexX

Le voici:

Code:: <table width="732" align="center" height="682">
<tbody><tr><td background="http://i49.tinypic.com/1ik0g0.jpg" background-repeat="no-repeat"><div class="titre2"><div style="margin-top:-230px;">
<a href="LIEN">Contexte</a><a" href="LIEN">Guide</a><a href="LIEN" >Le Bottin</a><a href="LIEN" class="gradualfader">Postes Vacants</a><a href="LIEN">Fireflies</a><a href="LIEN">Pavillon des Invités</a>
</div>
</div>
<div class="gensmall">
<br>
<table align="middle" cellpadding="1" cellspacing="1" width="100%">
<tbody>
<tr>
<td align="center" width="320">
</td>
<td align="center" width="320">
</td>
</tr>
<tr>
<td style="TEXT-ALIGN: center" width="320">
<div style="width: 220px;padding-left:65px;">
<div style="text-align: justify;">
<br> <br><br><br>

<font size="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.<br>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tbody><tr><td>
<br> <br>
<div style="text-align: left; text-shadow: black 1px 1px;">
</div>
</td>
<td>
<div style="text-align: right; text-shadow: black 1px 3px;">
<a href="LIEN"><span class="gradualfader" style="opacity: 0.3; "><i>more?</i></span></a>
</div>
<br></td></tr></tbody></table>
</font></div></div></div></td>
<td style="TEXT-ALIGN: left" width="290">
<br>
<table border="0" cellpadding="2" cellspacing="1" width="100%">
<tbody><tr><td></td></tr></tbody></table>
</div>
</tr>
</tbody>
</table> </div>
</td></tr></tbody></table>
<table align="center" height="" width="725">
<tbody>
<tr>
<td class="row1" rowspan="1" background-repeat="no-repeat" align="center" background="LIEN" valign="middle">
<div class="gensmall">
<br>
<table align="middle" cellpadding="1" cellspacing="1" width="90%">
<tbody>
<tr>
<td align="center" width="320">
</td>
<td align="center" width="320"></td>
</tr>
<tr>
<td style="TEXT-ALIGN: center" width="320">
<div style="width: 250px;">
<div style="text-align: justify;"><table border="0" cellpadding="2" cellspacing="1" width="90%">
<tbody><tr><td><center><iframe name="onglet" src="http://mementomorii.forumactif.org/h27-staff" frameborder="0" height="200px" scrolling="no" width="250px"></iframe></center>
</td>
</tr>
</tbody>
</table>
</div></div></div>
</td><td style="TEXT-ALIGN: left" width="100"><div style="width: 250px;padding-left:90px;padding-top:-350px;">
<script type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/B1D671CF-E532-4481-99AA-19F420D90332/netdefender/hui/ndhui.css">

</head>

<body>
<script type="text/javascript" language="javascript" src="/B1D671CF-E532-4481-99AA-19F420D90332/netdefender/hui/ndhui.js?0=0&0=0&0=0"></script>
<div style="margin-top: 0px; margin-left: 55px; height: 180; width:auto; border: 0px solid #000;">

<div class="a1">
<a class="icon"><img src="http://pics.livejournal.com/justinianas/pic/003x9ahy"><span>
<table cellspacing="2" cellpadding="2" width="100%" border="0">
<tbody>
<tr>
<td align="center" valign="middle">
<div class="nom">
<font style="text-shadow:0px 0px 1px #73413d; color:#543431;">Démétri Graham</font>
</div>
<div class="statut">
feat Joseph Morgan - assez négociable
</div>
<div class="sep">
</div>
<font style="color:#543431;size:9px;">démons<br>
<div class="LD">
Master of Puppets
</div></font>
</td>
<td align="center" valign="middle" width="80" height="80">
</td></tr>
<tr>
<td colspan="2" align="center" valign="middle">
<div class="contact">
<a href="http://devil-tears.forumactif.org/t2986-demons-masters-of-puppets#91416" class="postlink" target="_blank" rel="nofollow">en savoir plus? </a>
</td></tr></tbody></table></span></a>
</div>


<div class="a2">
<a class="icon"><img src="http://pics.livejournal.com/justinianas/pic/0021687s"><span>
<table cellspacing="2" cellpadding="2" width="100%" border="0">
<tbody>
<tr>
<td align="center" valign="middle">
<div class="nom">
<font style="text-shadow:0px 0px 1px #669e82; color:#5B7367;">Sohan Goldwyn</font>
</div>
<div class="statut">
feat Alex Petyffer - peu négociable
</div>
<div class="sep">
</div>
<font style="color:#5B7367;size:9px;">porteur du virus <br>
<div class="LD">
Wrong tendencies
</div></font>
</td>
<td align="center" valign="middle" width="80" height="80">
</td></tr>
<tr>
<td colspan="2" align="center" valign="middle">
<div class="contact">
<a href="http://devil-tears.forumactif.org/t2992-porteurs-du-virus-wrong-tendencies#91449" class="postlink" target="_blank" rel="nofollow">en savoir plus? </a>
</td></tr></tbody></table></span></a>
</div>


<div class="a3">
<a class="icon"><img src="http://i49.tinypic.com/xfxjxy.png"><span>
<table cellspacing="2" cellpadding="2" width="100%" border="0">
<tbody>
<tr>
<td align="center" valign="middle">
<div class="nom">
<font style="text-shadow:0px 0px 1px #44a5be; color:#355F6A;">Cole Endrix</font>
</div>
<div class="statut">
feat Jamie Dornan - négociable
</div>
<div class="sep">
</div>
<font style="color:#355F6A;size:9px;">élus<br>
<div class="LD">
Last of the wilds
</div> </font></td>
<td align="center" valign="middle" width="80" height="80">
</td></tr>
<tr>
<td colspan="2" align="center" valign="middle">
<div class="contact">
<a href="http://devil-tears.forumactif.org/t2994-elus-last-of-the-wilds#91475" class="postlink" target="_blank" rel="nofollow">en savoir plus? </a>
</div>
</td></tr></tbody></table></span></a>
</div>

<br>
<div style="margin-bottom: 45px;">
</div>

<div class="a1">
<a class="icon"><img src="http://img.photobucket.com/albums/v101/Elita85/ICONS/ACTORS/HEMSWORTH/Hemsworth1.png"><span>
<table cellspacing="2" cellpadding="2" width="100%" border="0">
<tbody>
<tr>
<td align="center" valign="middle">
<div class="nom">
<font style="text-shadow:0px 0px 1px #a7d9e6; color:#5E828B;">Castiel A. Northwild</font>
</div>
<div class="statut">
feat Chris Hemsworth - négociable
</div>
<div class="sep">
</div>
<font style="color:#5E828B;size:9px;">divinités<br>
<div class="LD">
Kings and Queens
</div></font>
</td>
<td align="center" valign="middle" width="80" height="80">
</td></tr>
<tr>
<td colspan="2" align="center" valign="middle">
<div class="contact">
<a href="http://devil-tears.forumactif.org/t2990-divinites-kings-and-queens#91469" class="postlink" target="_blank" rel="nofollow">en savoir plus? </a>
</div>
</td></tr></tbody></table></span></a>
</div>


<div class="a2">
<a class="icon"><img src="http://pics.livejournal.com/justinianas/pic/001sye86"><span>
<table cellspacing="2" cellpadding="2" width="100%" border="0">
<tbody>
<tr>
<td align="center" valign="middle">
<div class="nom">
<font style="text-shadow:0px 0px 1px #c87557; color:#784634;">Christian Bell</font>
</div>
<div class="statut">
feat Paul Wesley - non négociable
</div>
<div class="sep">
</div>
<font style="color:#784634;size:9px;">vampires anciens<br>
<div class="LD">
Drain the blood
</div></font>
</td>
<td align="center" valign="middle" width="80" height="80">
</td></tr>
<tr>
<td colspan="2" align="center" valign="middle">
<div class="contact">
<a href="http://devil-tears.forumactif.org/t2985-vampires-anciens-drain-the-blood#91399" class="postlink" target="_blank" rel="nofollow">en savoir plus? </a>
</div>
</td></tr></tbody></table></span></a>
</div>


<div class="a3">
<a class="icon"><img src="http://pics.livejournal.com/endlessroutine/pic/001ga5gg"><span>
<table cellspacing="2" cellpadding="2" width="100%" border="0">
<tbody>
<tr>
<td align="center" valign="middle">
<div class="nom">
<font style="text-shadow:0px 0px 1px #787878; color:#3A3A3A;">Azael B.Kingkane</font>
</div>
<div class="statut">
feat Mat Gordon - peu négociable
</div>
<div class="sep">
</div>
<font style="color:#3A3A3A;size:9px;">néphilims<br>
<div class="LD">
Damned and divine
</div></font>
</td>
<td align="center" valign="middle" width="80" height="80">
</td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle">
<div class="contact">
<a href="http://devil-tears.forumactif.org/t2982-nephilims-damned-and-divine#91361" class="postlink" target="_blank" rel="nofollow">en savoir plus? </a>
</div>
</td></tr></tbody></table></span></a>
</div></div>

</div></div></div></body>
</html><br>
<br></center>
</div></div> </div>
<br><div style="width: 250px;padding-left:90px;padding-top:-100px;">

<div style="text-align: center; padding-top:20px;padding-left:5px;">
<form>
<select style="width: 150px;" onchange="location = this.options [this.selectedIndex].value">
<option selected="selected">? TOP PARTENAIRES</option>
<option value="http://asaria.forumpro.fr/">Asaria</option>
<option value="http://www.revival-rock.net/">Revival Rock</option>
<option value="http://marvel-legacy.forumactif.org/">Marvel Legacy</option>
<option value="http://bloodandpleasure.forumactif.com/">Drag Me To Hell</option>
<option value="http://www.x-men-extended.net/">X-Men Extended</option>
<option value="http://cup-of-blood.1fr1.net/">Cup Of Blood</option>
<option value="http://www.vulnera-samento.com/forum">Vulnera Samento</option>
<option value="http://waterfordrpg.forumactif.fr/">Waterford, Irlande</option>
<option value="">Vous?</option>
<option value="">Vous?</option>
</select>
</form>
<br>
<center><a class="liens_pa" href="LIEN">plus</a><img src="http://i45.tinypic.com/15qp1sj.png"> › <a class="liens_pa" href="LIEN">devenir </a><img src="http://i45.tinypic.com/15qp1sj.png">
<p align="center"><a class="liens_pa" href="LIEN">nous lier</a>
</p>
<a href="http://www.root-top.com/topsite/obsession27/in.php?ID=13298"><img src="http://obsession27.free.fr/button99.jpg" alt="top rpg" title="top rpg" border="0"></a><a href="http://www.root-top.com/topsite/obsession27/in.php?ID=13298"></a></center>
</div></div></div>
<br>
</td></tr></tbody></table>

</div>
</td></tr></tbody></table>
</td></tr></tbody></table>

<div style="text-align: left;">
<a href="http://best-rpg.forumpro.fr" target="_blank"><img src="http://i47.tinypic.com/2j1vo1t.png" title="Best RPG, le site de référencement d’RPGs" alt="Best RPG, le site de référencement d’RPGs"></a>
</div>

<div style="position:relative;">
<div style="left: 498px; position: absolute; top: -25px;text-align:justify;">
<div style="text-align: right;">
<font color="302C2B"><i>Forum optimisé pour Mozilla </i><img src="http://fc01.deviantart.net/fs71/f/2011/170/e/8/_firefoxlove__by_nironan12-d2lzzdt.gif"></font><br>

<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>
<script type="text/javascript" src="http://sd-2.archive-host.com/membres/up/157799094412634124/grazdi.js"></script>
</div>

</div></div>

Euh, le code CSS plutôt. Désolé j'avais pas précisé.

Le voilà:

Code:: /* TEST LIENS */
a.iconlien{
text-decoration:none;
margin: 0px 2px;}

a.iconlien img{
width: 150px;
height: 63px;
opacity: 0.65;
overflow: hidden;
z-index: 990;
/*Arrondi*/
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius:50px 0px 50px 0px;
/*Ombrage*/
-moz-box-shadow: 0px 0px 5px black;
-webkit-box-shadow: 0px 0px 5px black;
box-shadow: 0px 0px 5px black;
/*transition*/
-webkit-transition: all 1s linear 0s;/* pour navigateur webkit */
-moz-transition: all 1s linear 0s; /* pour navigateur mozilla */
-o-transition: all 1s linear 0s;/* pour navigateur opera */
transition: all 1s linear 0s; /* pour les navigateurs récents */
}

a.iconlien:hover,a.icon:focus{
outline:none;}

a.iconlien:hover img{
width: 217px;
height: 90px;
opacity: 1;
border-radius:50px 0px 50px 0px;
position:relative;
z-index:500!important;}

/* TEST LIEN OFF */
/* PA BEGIN */
/* PV ON */
body {
font-family: Times New Roman, Arial, sans-serif;
font-size: 11px;}

a, a:link, a:visited, a:active{
color: #red;
outline: none;
text-decoration: none !important;}

a:hover{
color:#blue;
text-decoration: none !important;}

a.icon{
text-decoration:none;
margin: 0px 8px;}

a.icon img{
width: 45px;
height: 45px;
opacity: 0.65;
overflow: hidden;
z-index: 990;
/*Arrondi*/
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
/*Ombrage*/
-moz-box-shadow: 0px 0px 5px black;
-webkit-box-shadow: 0px 0px 5px black;
box-shadow: 0px 0px 5px black;
/*transition*/
-webkit-transition: all 1s linear 0s;/* pour navigateur webkit */
-moz-transition: all 1s linear 0s; /* pour navigateur mozilla */
-o-transition: all 1s linear 0s;/* pour navigateur opera */
transition: all 1s linear 0s; /* pour les navigateurs récents */
}

a.icon:hover,a.icon:focus{
outline:none;}

a.icon:hover img{
width: 85px;
height: 85px;
opacity: 1;
-moz-border-radius: 50px;
position:relative;
z-index:500!important;
/*Rotation*/
-webkit-transition: rotate(360deg);/* pour navigateur webkit */
-moz-transform: rotate(360deg); /* pour navigateur mozilla */
-o-transform: rotate(360deg);/* pour navigateur opera */
transform: rotate(360deg); /* pour les navigateurs récents */
}

.icon .LD{display:inline; color:#7A7057; font-style: italic;}
.icon .DT{display:inline; color:#C22525;}
.icon .BB{display:inline; color:#81B6C4;}
.icon .PL{display:inline; color:#E38100;}

.icon .sep{
width: 40px;
padding-bootom: 1px;
margin-bottom: 3px;
}

.icon .truc{
display: inline;
font-weight: bolder;
color: #BB8243;}

a.icon span{
position:absolute;
padding: 10px;
margin-top:-18px;
margin-left: -240px;
background: #090700;
border: 0px solid #1C1706;
background-repeat: repeat!important;
width: 235px;
opacity:0;
z-index:300;
/*transform*/
-webkit-transform:scale(0) rotateZ(-12deg);
-moz-transform:scale(0) rotate(-12deg);
-ms-transform:scale(0) rotateZ(-12deg);
-o-transform:scale(0) rotate(-12deg);
transform:scale(0) rotateZ(-12deg);
/*transition*/
-webkit-transition:all .25s;
-moz-transition:all .25s;
-ms-transition:all .25s;
-o-transition:all .25s;
transition:all .25s;
/*border-radius*/
-moz-border-radius: 10px 40px;
-webkit-border-radius: 10px 40px;
border-radius: 10px 40px;
/*box-shadow*/
box-shadow:
0px 0px 2px 2px #1C1706,
0px 0px 2px 2px #1C1706;}

a.icon:hover span, a.icon:focus span{
opacity:1;
/*transform*/
-webkit-transform:scale(1) rotateZ(0);
-moz-transform:scale(1) rotate(0);
-ms-transform:scale(1) rotateZ(0);
-o-transform:scale(1) rotate(0);
transform:scale(1) rotateZ(0);}

.icon .nom{
font: 15px Felipa;
letter-spacing: 1px;
text-shadow: 2px 0px 0px #fff;
color: #DA4A61;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);}

.icon .statut{
font-size: 8px;
letter-spacing: 1px;
color:#73736D;}

.icon .contact{
display:inline;
text-transform:uppercase;
font-size: 8px;
letter-spacing: 1px;}

.a1{position: absolute; z-index:0;}
.a1:hover{position: absolute;z-index:45;}
.a2{position: absolute; z-index:0; margin-left: 50px;}
.a2:hover{position: absolute;z-index:45;}
.a3{position: absolute; z-index:0; margin-left: 100px;}
.a3:hover{position: absolute;z-index:45;}

/* PV OFF */
/* DEBUT PA */
div.titre1 {
color: #275441;
letter-spacing: -2px;
border-bottom: 2px solid #4C4643;
text-shadow: black 1px 1px;
font-size: 17px;
font-family: Calligraffitti;
font-style: italic;
text-shadow: #fff 0 0 3px;
text-align: center
}

.titre2 {
text-shadow: black 0px 0px 2px;
color: #275441;
text-align: center;
font-size: 11px;
font-weight:bold;
text-transform: uppercase;
letter-spacing: 2px;
font-family: Georgia;
padding: 0
color: #3E1D83;
font-weight: normal;
text-align: center;
text-shadow: grey 1px 1px 1px;}

.staff {
/* contour staff */
border-radius:5px 35px;
border: 2px solid #241c12;
padding: 2px;
-box-shadow: #000 3px 8px 6px;
cursor: help
}

.liens_pa {
background: #0D0D0D;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;
-moz-border-radius: 65px 15px;
-webkit-border-radius: 65px 15px;
border-radius: 65px 15px;
-box-shadow: #1D1918 2px 2px 6px;
-box-shadow: inset #1D1918 2px 2px 6px;
}

/* FIN PA */

Il est complexe et mal fait ton code.

Pour expliquer ici, c'est pas facile.

Il faut que tu attribues une class ou un id à ton bloc (div) qui correspond au staff, dans ton code, j'ai vu que c'était un <iframe>.

Et dans ton code CSS, tu crées cette class et tu met les balises CSS que tu as besoin pour placer ce bloc dans le bloc "Les admins".

Je peux te refaire ton code si tu veux. Mais il me faut l'accès à ton forum pour plus de facilité et un moyen de te contacter pour t'expliquer.

Car te donner le code sur un forum sans pouvoir essayer réellement, c'est pas évident ^^.

Amicalement,
DexX

EDIT PAR 'CHRISTA : C'est la deuxième fois en quelques minutes que j'ai dû éditer un de tes messages parce qu'il cassait le forum. Tu es prié de te relire et d'arrêter de mettre du HTML dans tes messages en dehors des balises [code].

Je dois avoir un soucis, mais je n'arrive pas à lire ton message Mise en forme pa 3517359236

Bonjour,

J'ai édité le message de DexX pour retirer le bug, tu devrais pouvoir le lire à présent.

Accessoirement pourrait-on avoir une illustration de ton problème ? L'image que tu donnes dans ton premier message semble avoir été supprimée.

Quoi qu'il en soit, je repère moult balises croisées (ou balises non fermées) dans ton code, ainsi que des blocs vides et autres trucs bizarres, c'est sans doute dans ces erreurs de conception que réside ton problème !

Quelques erreurs que j'ai pu noter :

Code:: <td background="http://i49.tinypic.com/1ik0g0.jpg" background-repeat="no-repeat">

Utilise plutôt une classe sur ta cellule, car l'attribut background-repeat n'existe pas, donc comme ceci par exemple :

Code:: <td class="MaClasse">

Code:: .MaClasse {
background:url("http://i49.tinypic.com/1ik0g0.jpg");
background-repeat:no-repeat;
}

Un bug aussi à cette ligne :

Code:: <a" href="LIEN">Guide</a>

Un guillemet est apparu à côté du a sans raison valable.

A quoi sert cette partie du code ? =>

Code:: <tr>
<td align="center" width="320">
</td>
<td align="center" width="320">
</td>
</tr>

Tu as une ligne contenant deux colonnes totalement vides, quel est l'intérêt ?

Dans cette partie, il y a un </div> en trop :

Code:: </font></div></div></div></td>

Cette partie n'a aucun sens, autant la supprimer :

Code:: <td style="TEXT-ALIGN: left" width="290">
<br>
<table border="0" cellpadding="2" cellspacing="1" width="100%">
<tbody><tr><td></td></tr></tbody></table>
</div>
</tr>
</tbody>
</table> </div>
</td>

... Et ça continue comme ça pendant tout le reste du code, à ce stade là soit tu fais une commande (sur un autre forum) pour avoir un vrai code bien propre, soit tu recommences de zéro parce que le code actuel est un vrai capharnaüm, probablement le résultat de copiés collés sans comprendre ce que tu faisais...

Enfin je tiens à signaler à DexX que les codeurs de CSSActif parviennent à résoudre la plupart des problèmes sans jamais avoir à demander leur accès admin aux utilisateurs. Merci de suivre notre exemple et d'éviter de demander aux membres leurs accès, d'autant plus que sur CSSActif l'objectif est l'apprentissage, les codeurs n'ont pas à faire tout le travail à la place des membres.

Citation :: Enfin je tiens à signaler à DexX que les codeurs de CSSActif parviennent à résoudre la plupart des problèmes sans jamais avoir à demander leur accès admin aux utilisateurs. Merci de suivre notre exemple et d'éviter de demander aux membres leurs accès, d'autant plus que sur CSSActif l'objectif est l'apprentissage, les codeurs n'ont pas à faire tout le travail à la place des membres.

Ok. Sur ce.

Merci pour ta réponse 'Christa. J'ai préféré recommencer carrément, plutôt que de chercher pendant des heures telle ou telle ligne. Merci en tout cas pour ton aide vraiment Mise en forme pa 73120010

Mon problème est résolu =)

Pas de souci et bon courage pour ton message d'accueil o/

Mise en forme pa

Mise en forme pa

Sujets similaires

Sujets similaires

Partenaires Or