Cadres transparant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Cadres transparant

Message par b2uty le Mar 10 Mai 2011 - 15:18

Bonjour, j'aimerais pouvoir mettre une image de font dans généralité pour en suite mettre des cadres transparant
au dessus, comme ceci :

Spoiler:

qui vient de se forum :
http://opus-luna.forumactif.com/
Quelqu'un pourait m'aider ?
Merci d'avance.

b2uty
****

Féminin
Messages : 455
Inscrit(e) le : 28/05/2010

http://kpop123.forumactif.com/
b2uty a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par Alyz le Mar 10 Mai 2011 - 16:45

Salut,

Tu n'as qu'à mettre l'image en tant que fond de tableau et construire ton tableau par-dessus :

Code:
<table style="background-image: url(adresse de l'image); background-repeat: no-repeat;"> CONTENU DE TON TABLEAU AVEC LES <TR> <TD> etc. </table>

Ensuite, les réglages dépendent de quelle image tu as et ce que tu veux faire exactement. =)

Alyz
****

Féminin
Messages : 290
Inscrit(e) le : 09/06/2010

http://r24.imgfast.net/users/2913/10/00/00/smiles/849849.gif
Alyz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par b2uty le Mar 10 Mai 2011 - 18:03

ça fonctionne pas pour moi. J'ai mit le contenue entre et tout la page c'est déformer, l'imagne n'est pas apparu et mes cadre sont pas devenue transparant. T.T

b2uty
****

Féminin
Messages : 455
Inscrit(e) le : 28/05/2010

http://kpop123.forumactif.com/
b2uty a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par Lixyr le Mar 10 Mai 2011 - 18:12

Tu as mis quoi comme code, beauty ?





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par b2uty le Mar 10 Mai 2011 - 18:26

J'ai mit le code que Alyz ma donnée entre le code j'ai mit mon contenue de ma page généralité.

Les deux emsemble :

Code:
<table style="background-image: url(http://nsa25.casimages.com/img/2011/05/10/110510060420561632.jpg); background-repeat: no-repeat;"> <DIV style="MARGIN-BOTTOM: -50px"><DIV align=center><DIV style="TEXT-ALIGN: left; PADDING-BOTTOM: 6px; BACKGROUND-COLOR: #e8e8e8; PADDING-LEFT: 6px; WIDTH: 800px; PADDING-RIGHT: 6px; HEIGHT: 143px; PADDING-TOP: 3px; moz-border-radius: 6px"><DIV style="TEXT-ALIGN: justify; PADDING-LEFT: 10px; PADDING-RIGHT: 10px" align=left><DIV> </DIV><DIV>
<TABLE style="WIDTH: 691px; HEIGHT: 124px" border=0 cellSpacing=1 cellPadding=1 width=691 align=center>
<TBODY>
<TR>
<TD width="50%"><DIV align=left><SPAN><IMG src="http://i66.servimg.com/u/f66/14/46/58/04/40029211.png"></A></SPAN></DIV></TD>
<TD width="50%" align=middle><SPAN><DIV class=pluscontext3><DIV align=justify><DIV style="BORDER-BOTTOM: #7c477f 3px solid; TEXT-ALIGN: right; FONT-VARIANT: small-caps; WIDTH: 337px; PADDING-RIGHT: 6px; FONT-FAMILY: Trebuchet; HEIGHT: 20px; FONT-SIZE: 14px; moz-border-radius: 6px"><B><FONT color=dimgray>I N T R O</FONT></B></DIV></DIV><DIV align=justify><FONT color=dimgray><FONT size=1><FONT size=3><STRONG>B</STRONG></FONT>ienvenue sur "Cubeast-fr" forum entièrement consacré au boysband Beast (비스트).Produit par Cube Ent,nos six garçons font leur début le 14 octobre 2009 avec un premier album 'Beast is the B2ST'.Composé de Yoon Doojun, Jang Hyunseung, Yong Junhyung, Yang Yoseob, Lee Kikwang et Son Dongwoon,les Beast seront les premiers rookies à avoir vendu 100 000 exemplaires en une année seulement.Ils en sont actuellement à leurs quatrième album, et préparent un nouvel album mais cette fois, japonais.</FONT></FONT></DIV></SPAN></DIV></TD></TR></TBODY></TABLE></DIV></DIV></DIV></DIV>
<P align=center sizset="8" sizcache="1">
<TABLE border=0 cellSpacing=3 width=800 height=0 sizset="8" sizcache="1">
<TBODY sizset="8" sizcache="1">
<TR vAlign=top sizset="8" sizcache="1">
<TD sizset="8" sizcache="1"><DIV align=center><DIV style="TEXT-ALIGN: center; PADDING-BOTTOM: 6px; BACKGROUND-COLOR: #e8e8e8; PADDING-LEFT: 6px; WIDTH: 210px; PADDING-RIGHT: 6px; HEIGHT: 394px; moz-border-radius: 6px" sizset="26" sizcache="1"><DIV align=left sizset="26" sizcache="1"><DIV align=center> </DIV><DIV align=center>
<FIELDSET style="PADDING-BOTTOM: 15px; PADDING-LEFT: 15px; WIDTH: 162px; PADDING-RIGHT: 15px; HEIGHT: 180px; PADDING-TOP: 0px" class=presenta><LEGEND><SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px">Cubeast-fr</SPAN></LEGEND><DIV style="PADDING-BOTTOM: 10px; OVERFLOW-X: hidden; OVERFLOW-Y: scroll; PADDING-RIGHT: 5px; HEIGHT: 130px"><BR><DIV style="TEXT-ALIGN: justify; LINE-HEIGHT: normal; MARGIN-TOP: -10px; FONT-SIZE: 9px"><FONT face=Verdana><DIV style="FLOAT: left; FONT-SIZE: 25px">B</DIV><BR><DIV align=justify><FONT color=dimgray><FONT size=1>ienvenue sur "Cubeast-fr" forum entièrement consacré au boysband Beast (비스트).Produit par Cube Ent,nos six garçons font leur début le 14 octobre 2009 avec un premier album 'Beast is the B2ST'.Composé de Yoon Doojun, Jang Hyunseung, Yong Junhyung, Yang Yoseob, Lee Kikwang et Son Dongwoon,les Beast seront les premiers rookies à avoir vendu 100 000 exemplaires en une année seulement.Ils en sont actuellement à leurs quatrième album, et préparent un nouvel album mais cette fois, japonais.</FONT></FONT></DIV></FONT></DIV></DIV></FIELDSET></DIV><DIV align=center> </DIV><DIV align=center><SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px"></SPAN></DIV></DIV><DIV align=center><DIV style="WIDTH: 183px; BACKGROUND: #eeeeee; HEIGHT: 141px" middle?><DIV style="BORDER-LEFT: #eeeeee 10px solid; BORDER-TOP: #eeeeee 15px solid; BORDER-RIGHT: #eeeeee 10px solid" align=left><EMBED style="WIDTH: 158px; HEIGHT: 119px" height=119 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=158 src=http://www.youtube.com/v/CQUMQhZncXI wmode="transparent" quality="high" scale="exactfit"></EMBED></EMBED></DIV></DIV></DIV></DIV></DIV>
<p> </p></TD>
<TD><DIV style="TEXT-ALIGN: center; PADDING-BOTTOM: 6px; BACKGROUND-COLOR: #e8e8e8; PADDING-LEFT: 6px; WIDTH: 282px; PADDING-RIGHT: 6px; HEIGHT: 395px; moz-border-radius: 6px"><DIV align=left><SPAN></SPAN><SPAN>
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></SCRIPT>

<SCRIPT src="http://sd-2.archive-host.com/membres/up/192365822763294709/sscroller.js"></SCRIPT>

<STYLE type=text/css>
div#mysagscroller{
width: 450px; 
height:120px;
          }

div#mysagscroller ul li{
background:#b0cc66;
color:white;
padding:5px;
margin-bottom:5px;
          }


        /*CSS du SAG scroller*/

.sagscroller{
width: 450px; 
height:120px;
overflow:hidden;
position:relative;
border:7px solid #dedada;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

.sagscroller a{
font-weight:bold;
}

.sagscroller ul{
position:absolute;
margin:0;
padding:0;
background:black;
list-style:none;
width: 100%;
}

.sagscroller ul li{
display:block;
}

        </STYLE>

<SCRIPT>
var sagscroller1=new sagscroller({
  id:'mysagscroller',
  mode: 'manual' //<--no comma following last option
})

        </SCRIPT>
</SPAN></DIV><DIV align=left><SPAN><DIV align=center><FONT color=#000000 size=3 face=Verdana><DIV align=center><DIV style="BORDER-BOTTOM: #7c477f 3px solid; TEXT-ALIGN: right; FONT-VARIANT: small-caps; WIDTH: 250px; PADDING-RIGHT: 6px; FONT-FAMILY: Trebuchet; HEIGHT: 27px; FONT-SIZE: 14px; moz-border-radius: 6px" align=center><FONT color=dimgray><SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px">Cubeast-fr</SPAN></FONT> </DIV></DIV><DIV align=center>
<STYLE type=text/css>
div#mysagscroller{
width: 450px; 
height:120px;
          }

div#mysagscroller ul li{
background:#b0cc66;
color:white;
padding:5px;
margin-bottom:5px;
          }


        /*CSS du SAG scroller*/

.sagscroller{
width: 450px; 
height:120px;
overflow:hidden;
position:relative;
border:7px solid #dedada;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

.sagscroller a{
font-weight:bold;
}

.sagscroller ul{
position:absolute;
margin:0;
padding:0;
background:black;
list-style:none;
width: 100%;
}

.sagscroller ul li{
display:block;
}

        </STYLE>

<SCRIPT>
var sagscroller1=new sagscroller({
  id:'mysagscroller',
  mode: 'manual' //<--no comma following last option
})

        </SCRIPT><DIV align=left><SPAN><DIV align=center><FONT color=#000000 size=3 face=Verdana><DIV align=center><FONT color=#000000 size=3 face=Verdana></FONT></DIV></FONT></DIV></SPAN></DIV><DIV align=left><SPAN></SPAN><SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px"></DIV><DIV align=center><FONT color=#000000 size=3 face=Verdana><DIV align=center><FONT color=#000000 size=3 face=Verdana><DIV align=center>TEXTE</DIV></FONT></FONT></SPAN></DIV></DIV></DIV></FONT></SPAN><SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px"><FONT color=#000000 size=3 face=Verdana><FONT color=#000000 size=3 face=Verdana></DIV></DIV><DIV align=center><DIV align=center><DIV style="BORDER-BOTTOM: #7c477f 3px solid; TEXT-ALIGN: right; FONT-VARIANT: small-caps; WIDTH: 250px; PADDING-RIGHT: 6px; FONT-FAMILY: Trebuchet; HEIGHT: 27px; FONT-SIZE: 14px; moz-border-radius: 6px" align=center><FONT color=dimgray><SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px">Cubeast-fr</SPAN></FONT> </DIV></FONT></FONT></SPAN></DIV></DIV></DIV>
<p> </p></TD>
<TD sizset="26" sizcache="1"><DIV style="TEXT-ALIGN: center; PADDING-BOTTOM: 6px; BACKGROUND-COLOR: #e8e8e8; PADDING-LEFT: 6px; WIDTH: 274px; PADDING-RIGHT: 6px; HEIGHT: 394px; moz-border-radius: 6px" sizset="26" sizcache="1"><DIV align=left sizset="26" sizcache="1"><LEGEND><SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px"><DIV style="BORDER-BOTTOM: #7c477f 3px solid; TEXT-ALIGN: right; FONT-VARIANT: small-caps; WIDTH: 250px; PADDING-RIGHT: 6px; FONT-FAMILY: Trebuchet; HEIGHT: 27px; FONT-SIZE: 14px; moz-border-radius: 6px" align=center><FONT color=dimgray><SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px">Cubeast-fr</SPAN></FONT> </DIV></SPAN></DIV>
<p>
<CENTER>
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></SCRIPT>

<SCRIPT src="http://sd-2.archive-host.com/membres/up/192365822763294709/sscroller.js"></SCRIPT>

<STYLE type=text/css>
div#mysagscroller{
width: 200px; 
height:250px;
          }

div#mysagscroller ul li{
background:#b0cc66;
color:white;
padding:5px;
margin-bottom:5px;
          }


        /*CSS du SAG scroller*/

.sagscroller{
width: 200px; 
height:250px;
overflow:hidden;
position:relative;
border:7px solid #dedada;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

.sagscroller a{
font-weight:bold;
}

.sagscroller ul{
position:absolute;
margin:0;
padding:0;
background:black;
list-style:none;
width: 100%;
}

.sagscroller ul li{
display:block;
}

        </STYLE>

<SCRIPT>
var sagscroller1=new sagscroller({
  id:'mysagscroller',
  mode: 'manual' //<--no comma following last option
})

        </SCRIPT><DIV id=mysagscroller class=sagscroller>
<UL>
<LI>OO1. blablablablablablabla<BR>blablablablabla<BR>blablablablablablablablabla
<LI>OO2. blablablablablablablablabla<BR>blablablablablablablablabla
<LI>OO3. blablablablablablablablablablablabla<BR>blablablablablablablablablablablabla </LI></UL></DIV></CENTER><DIV style="BORDER-BOTTOM: #7c477f 3px solid; TEXT-ALIGN: right; FONT-VARIANT: small-caps; WIDTH: 250px; PADDING-RIGHT: 6px; FONT-FAMILY: Trebuchet; HEIGHT: 27px; FONT-SIZE: 14px; moz-border-radius: 6px" align=center><FONT color=dimgray><SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px">Cubeast-fr</SPAN></FONT> </DIV></DIV></TD></TR></TBODY></TABLE></p><DIV></DIV></DIV></EMBED><!-- Debut shoutbox - http://www.i-tchat.com --><!-- Fin shoutbox -->
 </table>

b2uty
****

Féminin
Messages : 455
Inscrit(e) le : 28/05/2010

http://kpop123.forumactif.com/
b2uty a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par Lixyr le Mar 10 Mai 2011 - 18:50

Oulaaa c'est le cafouillis là-dedans ! J'ai du mal à m'y retrouver. Wink

Si tu veux bien, on va faire ça un peu plus clairement. Donc on va refaire tout ça point par point.

Ton image de fond, c'est celle-là ?





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par b2uty le Mar 10 Mai 2011 - 19:07

non c'est celle ci :

http://nsa25.casimages.com/img/2011/05/10/110510060420561632.jpg

en faite ça c'est le code que Alyz ma donner :
Code:
<table style="background-image: url(http://nsa25.casimages.com/img/2011/05/10/110510060420561632.jpg); background-repeat: no-repeat;">

et le reste c'est tout mon contenue avec les cadres

b2uty
****

Féminin
Messages : 455
Inscrit(e) le : 28/05/2010

http://kpop123.forumactif.com/
b2uty a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par Lixyr le Mar 10 Mai 2011 - 19:13

Vui, mais le code est bon il me semble. Le problème doit venir de ton contenu je pense.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par b2uty le Mar 10 Mai 2011 - 19:27

T.T oh que faire je me suis vraimant batu pour faire les cadres.
Esque ça ne serais pas encore une foix acause d'explorer ?!

b2uty
****

Féminin
Messages : 455
Inscrit(e) le : 28/05/2010

http://kpop123.forumactif.com/
b2uty a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par Lixyr le Mar 10 Mai 2011 - 19:38

Voilà ce que je vois sous Firefox :






Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par b2uty le Mar 10 Mai 2011 - 19:41

Oui c'est ça mon contenue, apart que le cadre du dessus n'est pas défformer chez moi.

b2uty
****

Féminin
Messages : 455
Inscrit(e) le : 28/05/2010

http://kpop123.forumactif.com/
b2uty a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par Lixyr le Mar 10 Mai 2011 - 19:55

Ok, donc ça s'affiche bien (mise à part la déformation) chez moi ? Ou alors tu vois encore un problème ?





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par b2uty le Mar 10 Mai 2011 - 20:07

Non il n'y a pas d'autre probleme.

Mon site de test :
http://kpop123.forumactif.com/forum

b2uty
****

Féminin
Messages : 455
Inscrit(e) le : 28/05/2010

http://kpop123.forumactif.com/
b2uty a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par Lixyr le Mar 10 Mai 2011 - 20:17

C'est tout beau tout ça ! ^^
Donc le seul problème c'est l'image de fond qui ne s'affiche pas ?





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par b2uty le Mar 10 Mai 2011 - 20:21

Merci =)
Oui, les cadres doivent etre transparants et l'image du fond devrait s'affichée.

b2uty
****

Féminin
Messages : 455
Inscrit(e) le : 28/05/2010

http://kpop123.forumactif.com/
b2uty a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par Lixyr le Mar 10 Mai 2011 - 20:58

Okay.

Alors l'image de fond ne s'affiche pas à cause des div multiples et variées que tu as ajoutés en dessous ainsi que les table.

Va falloir faire le tri dans ce code, parce que tu as plein de div qui se suivent alors que tu pourrais les fusionner. Ça allègerait ton code et on s'y retrouverait mieux.

En mettant une div à la place du table, on voit le fond, cependant il va falloir que tu révises un peu ce cafouillis, car ta div n'est pas centrée par rapport au contenu, ou plutôt : le contenu n'est pas centré par rapport à la div.

Code:
<div style="background-image: url(http://nsa25.casimages.com/img/2011/05/10/110510060420561632.jpg); background-repeat: no-repeat;"> ton contenu </div>


Moi à ta place, j'aurais mis un table de base, avec l'image de fond, et ensuite rien que des cellules et des lignes. Ton image aurait été visible dès le début et il n'y aurait pas ces problèmes de cadres. Là tu as trop de div et de table, alors tout est ingérable.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par b2uty le Jeu 12 Mai 2011 - 15:11

Je ferais ça se weekend, parceque en semaine j'ai pas trop le temps de bien regarder.

b2uty
****

Féminin
Messages : 455
Inscrit(e) le : 28/05/2010

http://kpop123.forumactif.com/
b2uty a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par Lixyr le Ven 13 Mai 2011 - 16:13

D'accord. ^^ N'oublie pas de venir poster ça une fois que tu auras fini. Comme ça on pourra attaquer, et si tu n'y arrives pas, je pourrai t'aider, au pire.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par b2uty le Sam 14 Mai 2011 - 18:29

Bon alors j'ai essayer, j'ai retiré des 'div' et sa ma déformer le placement du contenue T.T

b2uty
****

Féminin
Messages : 455
Inscrit(e) le : 28/05/2010

http://kpop123.forumactif.com/
b2uty a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par Lixyr le Sam 14 Mai 2011 - 22:46

Oui après il faut mettre des margin, pour pouvoir centrer le contenu. Enfin, disons que ça dépend comme c'est placé. Vous obtenez quoi ?





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par b2uty le Sam 14 Mai 2011 - 23:25

des margin c est [Center] ..?
sorry vous parlez a une débutante, j y connais pas grand choses.T.T

b2uty
****

Féminin
Messages : 455
Inscrit(e) le : 28/05/2010

http://kpop123.forumactif.com/
b2uty a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par tupac le Dim 15 Mai 2011 - 6:22

Bonjour b2uty

Je pense que le mieux a faire serait de refaire votre page d'accueil avec des cellules comme Lixyr Yrna vous l'a suggéré parce qu'avec toutes ces div j'ai les yeux qui piquent Wink

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par Lixyr le Dim 15 Mai 2011 - 12:39

@b2uty a écrit:des margin c est [Center] ..?
sorry vous parlez a une débutante, j y connais pas grand choses.T.T

En fait, disons pour être simple, que les center marchent pour les textes, et les margin, ce sont pour centrer des blocs, comme les div, les tables etc.

Envoie ton code, maintenant, que je vois si ça "pique" moins, comme l'a dit Tupac.

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par b2uty le Dim 15 Mai 2011 - 15:21

J'en est retirer pas mal, mais certains j'ai préféré ne pas toucher.

Code:
<DIV align=center;TEXT-ALIGN: 6px? moz-border-radius: 3px; PADDING-TOP: 143px; HEIGHT: 6px; PADDING-RIGHT: 800px; WIDTH: PADDING-LEFT: #e8e8e8; BACKGROUND-COLOR: PADDING-BOTTOM: left; -50px;><DIV style="TEXT-ALIGN: justify; PADDING-LEFT: 10px; PADDING-RIGHT: 10px" align=left><DIV> </DIV><DIV>
<TABLE style="WIDTH: 691px; HEIGHT: 124px" border=0 cellSpacing=1 cellPadding=1 width=691 align=center>
<TBODY>
<TR>
<TD width="50%"><DIV align=left><SPAN><IMG src="http://i66.servimg.com/u/f66/14/46/58/04/40029211.png"></A></SPAN></DIV></TD>
<TD width="50%" align=middle><SPAN><DIV class=pluscontext3><DIV align=justify><DIV style="BORDER-BOTTOM: #7c477f 3px solid; TEXT-ALIGN: right; FONT-VARIANT: small-caps; WIDTH: 337px; PADDING-RIGHT: 6px; FONT-FAMILY: Trebuchet; HEIGHT: 20px; FONT-SIZE: 14px; moz-border-radius: 6px"><B><FONT color=dimgray>I N T R O</FONT></B></SPAN></DIV></DIV></DIV></TD></TR></TBODY></TABLE></DIV></DIV></DIV><DIV></DIV>
<P align=center sizcache="1" sizset="8">
<TABLE border=0 cellSpacing=3 width=800 height=0 sizcache="1" sizset="8">
<TBODY sizcache="1" sizset="8">
<TR vAlign=top sizcache="1" sizset="8">
<TD sizcache="1" sizset="8"><DIV style="TEXT-ALIGN: center; PADDING-BOTTOM: 6px; BACKGROUND-COLOR: #e8e8e8; PADDING-LEFT: 6px; WIDTH: 210px; PADDING-RIGHT: 6px; HEIGHT: 394px; moz-border-radius: 6px" align=center; sizcache="1" sizset="26"><DIV align=left sizcache="1" sizset="26"> </DIV>
<FIELDSET style="PADDING-BOTTOM: 15px; PADDING-LEFT: 15px; WIDTH: 162px; PADDING-RIGHT: 15px; HEIGHT: 180px; PADDING-TOP: 0px" class=presenta><LEGEND><SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px">Cubeast-fr</SPAN></LEGEND><DIV style="PADDING-BOTTOM: 10px; OVERFLOW-X: hidden; OVERFLOW-Y: scroll; PADDING-RIGHT: 5px; HEIGHT: 130px"><BR><DIV style="TEXT-ALIGN: justify; LINE-HEIGHT: normal; MARGIN-TOP: -10px; FONT-SIZE: 9px"><FONT face=Verdana><DIV style="FLOAT: left; FONT-SIZE: 25px">B</DIV><BR><DIV align=justify><FONT color=dimgray><FONT size=1>ienvenue sur "Cubeast-fr" forum entièrement consacré au boysband Beast (비스트).Produit par Cube Ent,nos six garçons font leur début le 14 octobre 2009 avec un premier album 'Beast is the B2ST'.Composé de Yoon Doojun, Jang Hyunseung, Yong Junhyung, Yang Yoseob, Lee Kikwang et Son Dongwoon,les Beast seront les premiers rookies à avoir vendu 100 000 exemplaires en une année seulement.Ils en sont actuellement à leurs quatrième album, et préparent un nouvel album mais cette fois, japonais.</FONT></FONT></FONT></DIV></FIELDSET>
<p> </p><DIV style="WIDTH: 183px; BACKGROUND: #eeeeee; HEIGHT: 141px" middle?><DIV style="BORDER-LEFT: #eeeeee 10px solid; BORDER-TOP: #eeeeee 15px solid; BORDER-RIGHT: #eeeeee 10px solid" align=left><EMBED style="WIDTH: 158px; HEIGHT: 119px" height=119 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=158 src=http://www.youtube.com/v/CQUMQhZncXI wmode="transparent" quality="high" scale="exactfit"></EMBED></EMBED></DIV></DIV></DIV><DIV align=center><SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px"></SPAN></DIV>
<p> </p></TD>
<TD><DIV style="TEXT-ALIGN: center; PADDING-BOTTOM: 6px; BACKGROUND-COLOR: #e8e8e8; PADDING-LEFT: 6px; WIDTH: 282px; PADDING-RIGHT: 6px; HEIGHT: 395px; moz-border-radius: 6px"><DIV align=left><SPAN></SPAN><SPAN>
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></SCRIPT>

<SCRIPT src="http://sd-2.archive-host.com/membres/up/192365822763294709/sscroller.js"></SCRIPT>

<STYLE type=text/css>
div#mysagscroller{
width: 450px; 
height:120px;
          }

div#mysagscroller ul li{
background:#b0cc66;
color:white;
padding:5px;
margin-bottom:5px;
          }


        /*CSS du SAG scroller*/

.sagscroller{
width: 450px; 
height:120px;
overflow:hidden;
position:relative;
border:7px solid #dedada;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

.sagscroller a{
font-weight:bold;
}

.sagscroller ul{
position:absolute;
margin:0;
padding:0;
background:black;
list-style:none;
width: 100%;
}

.sagscroller ul li{
display:block;
}

        </STYLE>

<SCRIPT>
var sagscroller1=new sagscroller({
  id:'mysagscroller',
  mode: 'manual' //<--no comma following last option
})

        </SCRIPT>
</SPAN><FONT color=#000000 size=3 face=Verdana><DIV style="BORDER-BOTTOM: #7c477f 3px solid; TEXT-ALIGN: right; FONT-VARIANT: small-caps; WIDTH: 250px; PADDING-RIGHT: 6px; FONT-FAMILY: Trebuchet; HEIGHT: 27px; FONT-SIZE: 14px; moz-border-radius: 6px" align=center><FONT color=dimgray><SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px">Cubeast-fr</SPAN></FONT> </DIV></DIV><DIV align=center>
<STYLE type=text/css>
div#mysagscroller{
width: 450px; 
height:120px;
          }

div#mysagscroller ul li{
background:#b0cc66;
color:white;
padding:5px;
margin-bottom:5px;
          }


        /*CSS du SAG scroller*/

.sagscroller{
width: 450px; 
height:120px;
overflow:hidden;
position:relative;
border:7px solid #dedada;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

.sagscroller a{
font-weight:bold;
}

.sagscroller ul{
position:absolute;
margin:0;
padding:0;
background:black;
list-style:none;
width: 100%;
}

.sagscroller ul li{
display:block;
}

        </STYLE>

<SCRIPT>
var sagscroller1=new sagscroller({
  id:'mysagscroller',
  mode: 'manual' //<--no comma following last option
})

        </SCRIPT><DIV align=center><FONT color=#000000 size=3 face=Verdana><FONT color=#000000 size=3 face=Verdana></FONT></FONT></SPAN></DIV><SPAN></SPAN><SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px"></DIV><FONT color=#000000 size=3 face=Verdana><FONT color=#000000 size=3 face=Verdana><DIV align=center> </DIV></FONT></FONT></SPAN></DIV></FONT></SPAN><SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px"><FONT color=#000000 size=3 face=Verdana><FONT color=#000000 size=3 face=Verdana></FONT></FONT></SPAN> </DIV>
<p> </p></DIV></TD>
<TD sizcache="1" sizset="26"><DIV style="TEXT-ALIGN: center; PADDING-BOTTOM: 6px; BACKGROUND-COLOR: #e8e8e8; PADDING-LEFT: 6px; WIDTH: 274px; PADDING-RIGHT: 6px; HEIGHT: 394px; moz-border-radius: 6px" sizcache="1" sizset="26"><DIV align=left sizcache="1" sizset="26"><LEGEND><SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px"><DIV style="BORDER-BOTTOM: #7c477f 3px solid; TEXT-ALIGN: right; FONT-VARIANT: small-caps; WIDTH: 250px; PADDING-RIGHT: 6px; FONT-FAMILY: Trebuchet; HEIGHT: 27px; FONT-SIZE: 14px; moz-border-radius: 6px" align=center><FONT color=dimgray><SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px">Cubeast-fr</SPAN></FONT> </DIV></SPAN>
<p>
<CENTER>
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></SCRIPT>

<SCRIPT src="http://sd-2.archive-host.com/membres/up/192365822763294709/sscroller.js"></SCRIPT>

<STYLE type=text/css>
div#mysagscroller{
width: 200px; 
height:250px;
          }

div#mysagscroller ul li{
background:#b0cc66;
color:white;
padding:5px;
margin-bottom:5px;
          }


        /*CSS du SAG scroller*/

.sagscroller{
width: 200px; 
height:250px;
overflow:hidden;
position:relative;
border:7px solid #dedada;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

.sagscroller a{
font-weight:bold;
}

.sagscroller ul{
position:absolute;
margin:0;
padding:0;
background:black;
list-style:none;
width: 100%;
}

.sagscroller ul li{
display:block;
}

        </STYLE>

<SCRIPT>
var sagscroller1=new sagscroller({
  id:'mysagscroller',
  mode: 'manual' //<--no comma following last option
})

        </SCRIPT>
</CENTER><DIV style="BORDER-BOTTOM: #7c477f 3px solid; TEXT-ALIGN: right; FONT-VARIANT: small-caps; WIDTH: 250px; PADDING-RIGHT: 6px; FONT-FAMILY: Trebuchet; HEIGHT: 27px; FONT-SIZE: 14px; moz-border-radius: 6px" align=center><FONT color=dimgray><SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px">Cubeast-fr</SPAN></FONT> </DIV></DIV></DIV></TD></TR></TBODY></TABLE></EMBED></p>

b2uty
****

Féminin
Messages : 455
Inscrit(e) le : 28/05/2010

http://kpop123.forumactif.com/
b2uty a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par Lixyr le Dim 15 Mai 2011 - 19:52

Bon alors j'ai retiré plein plein de trucs là-dedans, qu'on remettra plus tard, comme les deux codes dans le dernier tableau dont je n'ai pas vu l'utilité : c'était pour avoir ton trait en dessous de ton titre ? Il y a un moyen beaucoup plus simple d'avoir ce résultat sans passer par le java, enfin bon, j'ai réussi à avoir ton image de fond et tes cellules transparentes, en retirant les couleurs de fond, et en retirant un attribut style en trop dans ta table (tu en avais deux, je les ai fusionnés).

Voilà le code "simplifié"


Code:
    <table border="0" cellspacing="1" cellpadding="1" align="center" style="background-image: url(http://nsa25.casimages.com/img/2011/05/10/110510060420561632.jpg); background-repeat: no-repeat; background-color:transparent;width: 691px; height:124px;">
    <TR>
    <TD width="50%"><IMG src="http://i66.servimg.com/u/f66/14/46/58/04/40029211.png">
</TD>
    <TD colspan="2" align=middle><DIV class=pluscontext3 align="justify" style="BORDER-BOTTOM: #7c477f 3px solid; TEXT-ALIGN: right; FONT-VARIANT: small-caps; WIDTH: 337px; PADDING-RIGHT: 6px; FONT-FAMILY: Trebuchet; HEIGHT: 20px; FONT-SIZE: 14px; moz-border-radius: 6px"><B><FONT color=dimgray>I N T R O</FONT></B></DIV></TD>
</TR>


<tr>
<td align=center sizcache="1" sizset="8" style="TEXT-ALIGN: center; PADDING-BOTTOM: 6px; PADDING-LEFT: 6px; WIDTH: 210px; PADDING-RIGHT: 6px; HEIGHT: 394px; moz-border-radius: 6px" align=center; sizcache="1" sizset="26">

    <FIELDSET style="PADDING-BOTTOM: 15px; PADDING-LEFT: 15px; WIDTH: 162px; PADDING-RIGHT: 15px; HEIGHT: 180px; PADDING-TOP: 0px" class=presenta><LEGEND>
<SPAN style="FONT-FAMILY: georgia; LETTER-SPACING: -3px; COLOR: #8ec3c1; FONT-SIZE: 24px; text-shadow: #B7C8C5 1px 1px 1px">
Cubeast-fr
</SPAN>
</LEGEND><DIV style="PADDING-BOTTOM: 10px; OVERFLOW-X: hidden; OVERFLOW-Y: scroll; PADDING-RIGHT: 5px; HEIGHT: 130px"><BR><DIV style="TEXT-ALIGN: justify; LINE-HEIGHT: normal; MARGIN-TOP: -10px; FONT-SIZE: 9px"><FONT face=Verdana><DIV style="FLOAT: left; FONT-SIZE: 25px">B</DIV><BR><DIV align=justify><FONT color=dimgray><FONT size=1>ienvenue sur "Cubeast-fr" forum entièrement consacré au boysband Beast (비스트).Produit par Cube Ent,nos six garçons font leur début le 14 octobre 2009 avec un premier album 'Beast is the B2ST'.Composé de Yoon Doojun, Jang Hyunseung, Yong Junhyung, Yang Yoseob, Lee Kikwang et Son Dongwoon,les Beast seront les premiers rookies à avoir vendu 100 000 exemplaires en une année seulement.Ils en sont actuellement à leurs quatrième album, et préparent un nouvel album mais cette fois, japonais.</FONT></FONT></FONT></DIV></FIELDSET><DIV style="WIDTH: 183px; BACKGROUND: #eeeeee; HEIGHT: 141px" style="BORDER-LEFT: #eeeeee 10px solid; BORDER-TOP: #eeeeee 15px solid; BORDER-RIGHT: #eeeeee 10px solid;" align="left">
<EMBED style="WIDTH: 158px; HEIGHT: 119px" height=119 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=158 src=http://www.youtube.com/v/CQUMQhZncXI wmode="transparent" quality="high" scale="exactfit">
</EMBED>
</DIV>

</TD>

 
 <TD align=middle><DIV class=pluscontext3 align="justify" style="BORDER-BOTTOM: #7c477f 3px solid; TEXT-ALIGN: right; FONT-VARIANT: small-caps; WIDTH: 200px; PADDING-RIGHT: 6px; FONT-FAMILY: Trebuchet; HEIGHT: 20px; FONT-SIZE: 14px; moz-border-radius: 6px"><B><FONT color=dimgray>  Cubeast-fr</FONT></B></DIV></TD>

          </TD>

    <TD align=middle><DIV class=pluscontext3 align="justify" style="BORDER-BOTTOM: #7c477f 3px solid; TEXT-ALIGN: right; FONT-VARIANT: small-caps; WIDTH: 200px; PADDING-RIGHT: 6px; FONT-FAMILY: Trebuchet; HEIGHT: 20px; FONT-SIZE: 14px; moz-border-radius: 6px"><B><FONT color=dimgray>  Cubeast-fr</FONT></B></DIV></TD>
</TR></TABLE>

Bon ne panique surtout pas, c'est pas très beau mais on va arranger ça. ^^ Au moins maintenant, le code est plus clair.

Dis-moi donc ce que tu veux modifier dans tout ça, maintenant.

ps : dans les deux dernières cellules j'ai mis le code de ton intro pour que tu retrouves ton petit trait en dessous, donc c'est normal que ça ait cette allure-là. Au cas où tu voudrais retrouver l'apparence de tes titres d'avant, pas de problème, on peut faire ça avec du code tout simple.

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par b2uty le Dim 15 Mai 2011 - 20:26

Ohhhhh merci beaucoup,c'est juste parfait !!!!
Pour le reste je panse m'en sortir tout seul pour changer l'apparence des titre et tout bien placé.

Je panse mettre se sujet comme résolu, si j'ai un probleme esque je peux te contacter par MP ?

b2uty
****

Féminin
Messages : 455
Inscrit(e) le : 28/05/2010

http://kpop123.forumactif.com/
b2uty a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par Lixyr le Dim 15 Mai 2011 - 20:31

Oui si tu veux. Smile

Ravie d'avoir pu t'aider. ^^





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadres transparant

Message par b2uty le Dim 15 Mai 2011 - 21:05

Encore merci ^^

Je met se sujet résolu.

b2uty
****

Féminin
Messages : 455
Inscrit(e) le : 28/05/2010

http://kpop123.forumactif.com/
b2uty a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum