Bon, vu que c'est un peu ma faute si cette nouvelle section viens d'ouvrir, ça la foutrait mal si j'y participais pô...
Donc voilà,j'inogure, je partage mon CSS de journal dévellopé en grande partie par sedART qui m'as aidé à l'optimiser pour cette daube de Ie...
Vous pouvez voir mon journal en action ICI
Et voici le code...
Le Header - Code:
-
<div class="fire">:thumb63311150:</div>
<div class="buttonscontainer"><div class="buttons"><a href="http://creatures.redheberg.com/">Creatures' Website</a><a href="http://creatures.redheberg.com/index.php?option=com_smf&Itemid=2&board=14.0">Tutorials (Fr)</a><a href="http://creatures.redheberg.com/index.php?option=com_smf&Itemid=2&board=50.0">Gallery</a><a href="http://creatures.redheberg.com/index.php?option=com_smf&Itemid=2&board=54.0">Photomanip</a><a href="http://creatures.redheberg.com/index.php?option=com_smf&Itemid=2&board=23.0">HP Lovecraft</a><a href="http://ajonesa.deviantart.com/prints/">Prints</a></div></div>
Journal Entry
- Code:
-
<div align="right"><div class="header3"><b>:flame: SedART helped me!</b></div><b>I very happy for my new journal
now 'cause it's compatible with Ie...
Good news, sedART helped me :bulletred:</b>
:postit: <u>All artworks are protected</u> :postit:
<i>under Creative Commons !
You can't use my art for make money
and you can't modify them except if
you ask me the rights
by mail or note... (aJa)</i>
<a href="http://sedart.deviantart.com/"><img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/thxsedart.gif" alt=""></a>
:thumb61440544: :thumb61484067:
<a href="http://creatures.redheberg.com/index.php?option=com_smf&Itemid=2&board=50.0" target="_blank"><img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/catalog_01.gif" alt="" width="200" height="80" border="0"></a>
<a href="http://creatures.redheberg.com/index.php?option=com_smf&Itemid=2&board=38.0" target="_blank"><img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/catalog_02.gif" alt="" width="200" height="25" border="0"></a>
<a href="http://creatures.redheberg.com/index.php?option=com_smf&Itemid=2&board=39.0" target="_blank"><img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/catalog_03.gif" alt="" width="200" height="25" border="0"></a>
<a href="http://creatures.redheberg.com/index.php?option=com_smf&Itemid=2&board=40.0" target="_blank"><img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/catalog_04.gif" alt="" width="200" height="25" border="0"></a>
<a href="http://creatures.redheberg.com/index.php?option=com_smf&Itemid=2&board=44.0" target="_blank"><img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/catalog_05.gif" alt="" width="200" height="25" border="0"></a>
<a href="http://creatures.redheberg.com/index.php?option=com_smf&Itemid=2&board=46.0" target="_blank"><img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/catalog_06.gif" alt="" width="200" height="25" border="0"></a>
<a href="http://creatures.redheberg.com/index.php?option=com_smf&Itemid=2&board=43.0" target="_blank"><img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/catalog_07.gif" alt="" width="200" height="25" border="0"></a>
<a href="http://creatures.redheberg.com/index.php?option=com_smf&Itemid=2&board=42.0" target="_blank"><img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/catalog_08.gif" alt="" width="200" height="25" border="0"></a>
<a href="http://creatures.redheberg.com/index.php?option=com_smf&Itemid=2&board=50.0" target="_blank"><img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/catalog_09.gif" alt="" width="200" height="25" border="0"></a>
<img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/catalog_12.gif" width="200" height="20" alt=""></div>
<a href="http://creatures.redheberg.com/index.php?option=com_smf&Itemid=2&action=gallery" target="_blank"><img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/stock.gif" alt="" border="0"></a>
<a href="http://creatures.redheberg.com/index.php?option=com_smf&Itemid=2&action=shop" target="_blank"><img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/mag.gif" alt="" border="0"></a></div>
<div align="right">
<img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/dd.gif" alt=""></div>
<div class="wow3">:thumb28902749: :thumb58843398:</div>
<div align="right"><img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/feat.gif" alt=""></div>
<div class="wow3">:thumb59377286: :thumb50048972: :thumb43384351:
:thumb38648871: :thumb50467137: :thumb49765161:
:thumb47866382: :thumb37202345: :thumb54540459:</div>
<div class="wow4"><i>(Scroll with the mouse to show all stamps)</i></div><div class="textsx">
<img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/titlebottom_stamps.jpg" alt="">
:thumb62712996: :thumb62761941: :thumb62761828: :thumb62761764:
<img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/titlebottom_art.jpg" alt="">
:thumb62762201: :thumb62762303: :thumb62762507: :thumb62762668:
:thumb62762795: :thumb62762951: :thumb62806423: :thumb62806621:
:thumb62806765: :thumb62806909: :thumb62807116: :thumb62807350:
:thumb62807504: :thumb62807649: :thumb62807768: :thumb62808037:
:thumb62808177: :thumb62808299: :thumb62808441:
<img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/titlebottom_fr_stamp.jpg" alt="">
:thumb62711949: :thumb62712906: :thumb62712399: :thumb62711803:
:thumb62712741: :thumb62712093: :thumb62712586: :thumb62712488:
:thumb62761656: :thumb62761548: :thumb62761356:</div>
Footer
- Code:
-
<div align="right"><img src="http://creatures.de.legende.free.fr/EXTRA/DAJournal/visit.gif" alt=""></div>
<div class="wow3">
<a href="http://www.maploco.com/view.php?id=1052317">...</a>
<img border=0 src="http://www.maploco.com/vmap/1052317.png" alt="Visitor Map"></div>
<div class="headerx">:thumb56379363: :thumb35922224: :thumb55558773:
:thumb21400109: :thumb60411254: :thumb62762025:
:thumb50984278: :thumb43460142: :thumb46086808:
:thumb57426575: :thumb39816247: :thumb46425382:
:thumb36696425: :thumb62300749: :thumb60943018:
" ThX a lot for all CSS tuts by :devsedart: "</div>
et enfin...
Le CSS
- Code:
-
div.journalbox {
background-color:#bac5ba !important;
border: 0px solid #000000;
background-image:url(http://creatures.de.legende.free.fr/EXTRA/DAJournal/backgroundDAJ18.jpg);
cursor:url(http://creatures.de.legende.free.fr/EXTRA/DAJournal/cursors/aja001.cur),auto;
background-repeat:no-repeat;
background-position:left top;
color:#fff;
margin-right: -34px;
}
div.journalbox a {
cursor:url(http://creatures.de.legende.free.fr/EXTRA/DAJournal/cursors/aja002.cur),auto;
color:#ffcc00;
text-decoration:none;
}
div.journalbox a:hover {
text-decoration:none;
font-weight:none;
color:#fff;
}
div.buttonscontainer {
position:absolute;
left:0px;
top:101px;
}
div.buttons {
background: transparent;
padding-top: 5px;
padding-bottom: 5px;
text-decoration: none;
color: #fff;
}
div.buttons a {
color: #ffcc00;
background-image:url(http://creatures.de.legende.free.fr/EXTRA/DAJournal/backbutDAJ.jpg);
background-repeat:repeat-x;
background-position:left top;
border-top: 0px solid #000000;
padding: 5px;
padding-left: 5px;
font: 11px Verdana;
font-weight: none;
text-decoration: none !important;
text-align: center;
margin-top: 0px;
}
div.buttons a:hover {
background: transparent;
padding-top: -4px;
text-decoration: none;
color: #fff;
}
div.text {
color:#fff !important;
text-align: justify;
font-size: 8pt !important;
font-family:Verdana;
line-height:15px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px !important;
}
div.journaltop {
padding:0px 0px 0px 200px;
font-family:Verdana;
font-size:7pt;
color:#fff;
height:0px;
background-color: transparent;
text-align: left;
line-height: 20px;
margin-bottom:0px;
height: 90px;
}
div.journaltop h2 {
padding:2px 0px 0px 0px;
margin-top:0px;
font-family:Arial Black;
font-size:15pt;
font-weight: lighter;
color:#fff;
letter-spacing:0.0em;
text-align: left;
line-height: 20px;
}
div.fire {
position:absolute;
top:35px;
right:0px;
}
div.journaltop img {
display:none;
}
div.text {
color:#000 !important;
text-align: justify;
font-size:8pt !important;
font-family:Verdana;
line-height:12px;
margin-left: 30px;
margin-right: 30px;
overflow: no;
}
div.textsc {
color: #fff !important;
letter-spacing:-0.03em;
text-align: right;
font-size:14px !important;
font-family:Verdana;
line-height:8px;
margin-left: 30px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
width: none;
height: 100px;
overflow: auto;
}
div.textsx {
color:#333333 !important;
background-color:transparent !important;
font-size:8pt !important;
font-family:Arial;
text-align: center;
line-height:15px;
width: none;
height: 175px !important;
overflow: auto;
padding-right: 100px;
margin-right: -215px;
padding-left: 100px;
margin-left: -215px;
margin-top: 0px !important;
border: 4px solid #374341;
}
div.quote {
width : 250px;
font-size:8pt !important;
font-family:Verdana;
color:#fff;
line-height:15px;
text-align: right;
margin-right: 4px;
margin-left: 130px;
border: 2px solid #ffcc00;
padding:4px 4px 4px 4px;
background: #374341;
}
div.header {
background: #92a399;
font-size: 14pt !important;
font-family:Verdana;
color: #444844 ;
margin-left: 30px;
margin-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
word-spacing: 5px;
}
div.header2 {
color:#359BD2 !important;
font-size: 14pt !important;
font-family:Arial;
padding:6px !important;
border: 0px solid #000000;
margin:1em !important;
word-spacing: 5px;
text-align: center;
margin-left: 30px;
margin-right: 30px;
}
div.header3 {
color:#fff !important;
font-size: 11pt !important;
font-family:Verdana;
}
div.headerx {
color:#6a7872 !important;
font-size:9px !important;
font-family:Verdana;
padding:0px !important;
border: 0px solid #000000;
margin:none !important;
text-align: center;
text-decoration: none;
margin-left: 30px;
margin-right: 30px;
}
div.journalbottom {
clear:both;
background-color:transparent;
background:url(http://creatures.de.legende.free.fr/EXTRA/DAJournal/backfooterDAJ2.jpg) no-repeat bottom center;
height: 75px !important;
font-family:Verdana;
font-size:10px;
color:#ffcc00;
}
div.journalbottom a {
color:#fff;
text-decoration:none;
}
div.journalbottom a:hover {
text-decoration:none;
font-weight:none;
color:#ffcc00;
}
div.journalbox ul.list {
padding: 0px 0px 0px 0;
font-family:Tahoma;
font-size:10px;
color:#333333;
letter-spacing:0.10em;
line-height:5px;
background-color:transparent;
}
div.journalbox ul.list img {
display:none;
}
div.journalbox ul.list li.a {
background-color:transparent;
}
div.wow2 {
background-color: #444844;
font-size: 10pt !important;
font-family:Verdana;
color: #fff ;
margin-left: 0px;
margin-right: 0px;
padding-top: 8px;
padding-bottom: 8px;
text-align: center;
word-spacing: 5px;
overflow: none;
}
div.wow3 {
background-image:url(http://creatures.de.legende.free.fr/EXTRA/DAJournal/backbloc.gif) !important;
background-repeat:no-repeat;
background-position:left top;
font-size: 10pt !important;
font-family:Verdana;
color: #fff ;
margin-left: 0px;
margin-right: 0px;
padding-top: 8px;
padding-bottom: 8px;
text-align: center;
word-spacing: 5px;
overflow: none;
}
div.wow4 {
background-image:url(http://creatures.de.legende.free.fr/EXTRA/DAJournal/backbloc.gif) !important;
background-repeat:no-repeat;
background-position:left top;
font-size: 7pt !important;
font-family:Verdana;
text-align: right;
color: #bbc2bb ;
margin-left: 0px;
margin-right: -4px;
padding-right: 8px;
padding-top: 4px;
padding-bottom: 4px;
word-spacing: 5px;
overflow: none;
}
J'ai laissé les URL mais biensur, pensé à les virer
Si vous avez des questions n'hésitez pas...