Fork me on GitHub

Rapport de message :*
 

Cadre autour de la banniere (xoops-banner)

Titre du sujet : Cadre autour de la banniere (xoops-banner)
par jml sur 29/05/2008 19:06:42

Afin de fignoler le header du theme j'aurai souhaité enjoliver la bannire par un cadre.

Mon header est composé de trois image, une gauche et une droite pour chaque extrémité du header etune centrale qui s'adapte a la résolution de l'écran.

Le but créer une image supplémentaire mais qui devra toujours rester dans le même cadre que la bannière et cela quelque soit la résolution de l'écran.

Mes questions étant :

1-Comment connaitre la position de la banniere afin d'en relever les parametres de positionnement ?

2-Quel code ajouter dans mon style afin de garder la position absolu par rapport à la bannière ?

J'utilise le theme Sparks-K modifié en couleur

Ci-dessous theme et style


Citation :
Theme.html


Citation :
<!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" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<head>
<!-- Theme by Aph3x http://www.aphexthemes.com -->
<meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" />
<meta http-equiv="content-language" content="<{$xoops_langcode}>" />
<meta name="robots" content="<{$xoops_meta_robots}>" />
<meta name="keywords" content="<{$xoops_meta_keywords}>" />
<meta name="description" content="<{$xoops_meta_description}>" />
<meta name="rating" content="<{$xoops_meta_rating}>" />
<meta name="author" content="<{$xoops_meta_author}>" />
<meta name="copyright" content="<{$xoops_meta_copyright}>" />
<meta name="generator" content="Microsoft FrontPage 4.0" />
<title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>
<link href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" />
<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_url}>/xoops.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_themecss}>" />
<!-- RMV: added module header -->
</head>
<body>
<{$xoops_module_header}>
<script type="text/javascript">
<!--
<{$xoops_js}>
//-->
</script>
<script type="text/javascript" src="<{$xoops_imageurl}>chrome.js">

/***********************************************
* Chrome CSS Drop Down Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
<table class="toptable" cellspacing="0">
<tr>
<td>
<img src="<{$xoops_imageurl}>/imgs/heads_01.jpg" width="130" height="250"> </td>
<td id="headbg">
<div id="Stitle" style="width: 293; height: 36"><h1><font face="Script MT Bold" size="7"><{$xoops_sitename}></font></h1></div>
<{$xoops_banner}>
<div id="Sslogan"><h3><font face="Script MT Bold" size="5"><{$xoops_slogan}></font></h3></div>
</td>
<td>
<map NAME="ImageMap1">
<area SHAPE="rect" COORDS="23,166,73,216" HREF="http://www.fashion-libertine.eu/modul ... dex.php?iframeid=31" alt="Visiotchat">
<area SHAPE="rect" COORDS="96,164,146,216" HREF="http://www.fashion-libertine.eu/modul ... gal/index.php?cat=1" alt="Albums">
<area SHAPE="rect" COORDS="171,166,222,217" HREF="http://www.fashion-libertine.eu/modules/xoopsmembers/" alt="Membres"></map><img USEMAP="#ImageMap1" SRC="http://www.fashion-libertine.eu/heads_03.jpg" BORDER="0" ALIGN="bottom" width="400" height="250"> </td>
<tr>
<td id="headerbar" colspan="3">
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="<{$xoops_url}>/">Accueil</a></li>
<li><a href="<{$xoops_url}>/modules/newbb/">Forum</a></li>
<li><a href="<{$xoops_url}>/modules/newbb/viewforum.php?forum=2">Sortir ce soir</a></li>
<li><a href="<{$xoops_url}>/modules/extcal/calendar.php">Calendrier</a></li>
</ul>
</div>

<!--1st drop down menu -->
</td>
</tr>
</table>
<table class="maintable" cellspacing="0">
<tr>
<td id="leftcolumn">
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="blocks">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td class="cornerTLB">&nbsp;</td>
<td class="cornerTCB">&nbsp;</td>
<td class="cornerTRB">&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="cornerCL"><img src="<{$xoops_imageurl}>imgs/blocks_06.png" alt="" width="10" height="96" /></td>
<td class="cornerCC">
<!-- Start left blocks loop -->
<{foreach item=block from=$xoops_lblocks}>
<{include file="sparks-K/sideblock.html"}>
<{/foreach}>
<!-- End left blocks loop -->
</td>
<td class="cornerCR"><img src="<{$xoops_imageurl}>imgs/blocks_10.png" alt="" width="10" height="96" /></td>
</tr>
</table></td> </tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="cornerBL">&nbsp;</td>
<td class="cornerBC">&nbsp;</td>
<td class="cornerBR">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>

<td id="centercolumn">
<br />
<!-- Display center blocks if any -->
<{if $xoops_showcblock == 1}>
<table cellspacing="0">
<tr>
<td id="centerCcolumn" colspan="2">
<!-- Start center-center blocks loop -->
<{foreach item=block from=$xoops_ccblocks}>
<{include file="sparks-K/blocks.html"}>
<{/foreach}> <!-- End center-center blocks loop -->
</td>
</tr>
<tr>
<td id="centerLcolumn">
<!-- Start center-left blocks loop -->
<{foreach item=block from=$xoops_clblocks}>
<{include file="sparks-K/blocks.html"}>
<{/foreach}>
<!-- End center-left blocks loop -->
</td>
<td id="centerRcolumn">
<!-- Start center-right blocks loop -->
<{foreach item=block from=$xoops_crblocks}>
<{include file="sparks-K/blocks.html"}>
<{/foreach}>
<!-- End center-right blocks loop -->
</td>
</tr>
</table>
<{/if}>
<!-- End display center blocks -->
<{if $xoops_contents}>
<div id="content">
<{$xoops_contents}>
</div>
<{/if}>
<{if $xoBlocks.page_bottomleft or $xoBlocks.page_bottomright or $xoBlocks.page_bottomcenter}>
<table cellspacing="0">
<{if $xoBlocks.page_bottomcenter}>
<tr><td id="bottomCcolumn" colspan="2">
<{foreach from=$xoBlocks.page_bottomcenter item=block}><{include file="sparks-K/blocks.html"}><{/foreach}>
</td>
</tr>
<{/if}>
<{if $xoBlocks.page_bottomleft or $xoBlocks.page_bottomright}>
<tr>
<td id="bottomLcolumn">
<{foreach from=$xoBlocks.page_bottomleft item=block}><{include file="sparks-K/blocks.html"}><{/foreach}>
</td>
<td id="bottomRcolumn">
<{foreach from=$xoBlocks.page_bottomright item=block}><{include file="sparks-K/blocks.html"}><{/foreach}>
</td>
</tr>
<{/if}>
</table>
<{/if}><p style="padding-top: 5px" align="center">L'univers du <a href="http://www.clicsexe.fr/">sexe</a></p>
</td>
<{if $xoops_showrblock == 1}>
<td id="rightcolumn">
<!-- Start right blocks loop -->
<{foreach item=block from=$xoops_rblocks}>
<{include file="sparks-K/blocks.html"}>
<{/foreach}>
<!-- End right blocks loop -->
</td>
<{/if}>
</tr>
</table>

<table class="footertable" cellspacing="0">
<tr>
<td><a href="#" title="Back to top of page" ><img src="<{$xoops_imageurl}>imgs/up.png" width="25" height="25" alt="" /></a></td>
<td id="footerbar"><{$xoops_footer}></td>
<td><a href="#" title="Back to top of page" ><img src="<{$xoops_imageurl}>imgs/up.png" width="25" height="25" alt="" /></a></td>
</tr>
</table>
</body>
</html>


Citation :
Style.css


Citation :
body { color: #272727;background-color : #2EAAD4;background-image: url(imgs/bgw.gif);background-repeat: repeat; font-size: 12px; font-family: /*"lucida sans unicode",*/Verdana, Arial, Helvetica, sans-serif; margin: 0px; padding: 0px;}



table {width: 100%;text-align: left;}

table td {padding: 0; border-width: 0; vertical-align: top;font-size: 12px;font-family: /*"lucida sans unicode",*/Verdana, Arial, Helvetica, sans-serif;}

table.maintable {width: 100%;background-color: #FF78BA;border-left: 8px solid #FFF;border-right: 8px solid #FFF;margin-right: auto;margin-left: auto;}

table.footertable {width: 100%;margin-right: auto;margin-left: auto;}

table.maintable {height:600px;}

table.toptable {width: 100%;border-top: 8px solid #FFF;border-left: 8px solid #FFF;border-right: 8px solid #FFF;;background-color: #FF78BA;margin-right: auto;margin-left: auto;}

div {font-size: 12px;}



div.wrapper { text-align: left; }



a {color: #000000;font-size: 100%; text-decoration: none;font-weight: bold; background-color: transparent;}

a:hover {color: #272727;text-decoration: underline;}



h1 {font-size: 2.3em; font-weight: bold;}

h2 {font-size: 1.9em; font-weight: bold;}

h3 {font-size: 1.6em; font-weight: bold;}

h4 {font-size: 1.3em; font-weight: bold;}

h5 {font-size: 1.0em; font-weight: bold;}

ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;}

li { margin-left: 2px; list-style: square inside; color: #F71B7F}



#Stitle {text-align: left; position: relative; top: 1px; left: 3px;}

#Sslogan {text-align: left; position: relative; bottom: 5px; right: 5px;}



input.formButton {}

.item {border: 2px solid #cccccc;}

.itemHead {padding: 3px; background-image: url(imgs/bgl.png);background-repeat: repeat-x; color: #FFFFFF;}

.itemInfo {text-align: right; padding: 3px; background-color: #F71B7F}

.itemTitle a {font-size: 130%; font-weight: bold; font-variant: small-caps; color: #ffffff; background-color: transparent;}

.itemPoster {font-size: 100%; font-style:italic;}

.itemPostDate {font-size: 100%; font-style:italic;}

.itemStats {font-size: 100%; font-style:italic;}

.itemBody {padding-left: 5px;}

.itemText {margin-top: 5px; margin-bottom: 5px; line-height: 1.5em;}

.itemText:first-letter {font-size: 133%; font-weight: bold;}

.itemFoot {text-align: right; padding: 3px; background-image: url(imgs/nav-bar-bg.jpg);background-repeat: repeat-x; height: 25px;}

.itemAdminLink {font-size: 100%;}

.itemPermaLink {font-size: 100%;}



td#leftcolumn {width: 220px; font-size:11px;padding-left: 5px;}

td#leftcolumn th {background-image: url(imgs/bgl.png);background-repeat: repeat-x; color: #FFFFFF; vertical-align: middle;}

td#leftcolumn div.blockTitle {padding-top: 8px; color: #FFFFFF; font-weight: bold;text-align: center;background-image: url(imgs/bglb.png);height:30px;vertical-align: middle;background-position: center; background-repeat: no-repeat;font-size: 110%}

td#leftcolumn div.blockContent {padding: 3px;margin-top: -10px; line-height: 120%; color: #000000;}

td#leftcolumn a {color: #000000;}

td#leftcolumn a:hover {color: #272727;}



td#rightcolumn {width: 220px;font-size:11px;padding-top: 12px;padding-right: 5px;}

td#rightcolumn th {background-image: url(imgs/bgl.png);background-repeat: repeat-x; color: #FFFFFF; vertical-align: middle;}

td#rightcolumn div.blockTitle {color: #FFFFFF; font-weight: bold;text-align: center;vertical-align: middle;font-size: 110%}

td#rightcolumn div.blockContent {padding: 3px; line-height: 120%;color: #000000;}



#centercolumn {font-size: 12px;padding-left: 5px;padding-right: 5px;}

#centercolumn th {background-image: url(imgs/bgl.png);background-repeat: repeat-x; color: #FFFFFF; vertical-align: middle;}



#centerCcolumn, #bottomCcolumn {padding: 0px 3px 1px 3px;}

#centerCcolumn .blockTitle, #bottomCcolumn .blockTitle {padding: 0px; color: #FFFFFF; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-left: 0px;font-size: 120%}

#centerCcolumn .blockContent, #bottomCcolumn .blockContent {padding: 3px; margin-right: 0px; margin-left: 0px; margin-bottom: 2px; line-height: 120%;}



#centerLcolumn, #bottomLcolumn, #centerRcolumn, #bottomRcolumn {

width: 50%; padding: 0px 3px 1px 3px;

}

#centerLcolumn .blockTitle, #bottomLcolumn .blockTitle, #centerRcolumn .blockTitle, #bottomRcolumn .blockTitle {

padding: 0px; color: #FFFFFF; font-weight: bold; margin-top: 0px;font-size: 120%

}

#centerLcolumn .blockContent, #centerRcolumn .blockContent, #bottomLcolumn .blockContent, #bottomRcolumn .blockContent {

padding: 3px; margin-left: 2px; margin-right: 3px; margin-bottom: 2px; line-height: 120%;

}



div#content {text-align: left; padding: 8px;}





td#footerbar {text-align:center;background-image: url(imgs/nav-bar-bg.jpg);background-repeat: repeat-x; width: 100%;color: #FFFFFF;vertical-align: middle;}

td#footerbar a {color: #FFFFFF}

td#headbg {text-align:center;background-image: url(imgs/heads_02.jpg);background-repeat: repeat-x; width: 100%;color: #FFFFFF;vertical-align: middle;}



td#mainmenu a {background-color: transparent; display: block; margin: 0; padding: 4px;}

td#mainmenu a:hover {background-color: transparent;}

td#mainmenu a.menuTop {padding-left: 3px;}

td#mainmenu a.menuMain {padding-left: 3px;}

td#mainmenu a.menuSub {padding-left: 9px;}



td#usermenu a {background-color: transparent; display: block; margin: 0; padding: 4px;}

td#usermenu a:hover {background-color: transparent;}

td#usermenu a.menuTop {}

td#usermenu a.highlight {background-color: transparent;}







.outer {
background-color: #F71B7F;
text-align:left;
border: 3px double #F8EFEF;
}

.head {background-color: #F71B7F;background-image: url(imgs/blocks_06a.png);background-repeat: repeat-y;

background-position: left;width: 10px; padding: 5px; font-weight: bold;}

.even {background-color: #f8bcf0; padding: 5px;border-bottom: 1px solid #1494C7;border-right: 1px solid #1494C7;border-left: 1px solid #1494C7;}

.odd {background-color: #f6a1eb; padding: 5px;border-bottom: 1px solid #1494C7;border-right: 1px solid #1494C7;border-left: 1px solid #1494C7;}

.foot {background-color: #c2cdd6; padding: 5px; font-weight: bold;}

tr.even td {background-color: #f8bcf0; padding: 5px;}

tr.odd td {background-color: #f6a1eb; padding: 5px;}



div.errorMsg { background-color: #FFCCCC; text-align: center; border-top: 1px solid #B1B1F5; border-left: 1px solid #B1B1F5; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}

div.confirmMsg { background-color: #DDFFDF; color: #136C99; text-align: center; border-top: 1px solid #B1B1F5; border-left: 1px solid #B1B1F5; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}

div.resultMsg { background-color : #CCCCCC; color: #333333; text-align: center; border-top: 1px solid silver; border-left: 1px solid silver; font-weight: bold; border-right: 1px solid #666666; border-bottom: 1px solid #666666; padding: 10px;}



div.xoopsCode { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}

div.xoopsQuote { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}





.comTitle {font-weight: bold; margin-bottom: 2px;}

.comText {padding: 2px;}

.comUserStat {font-size: 10px; color: #2F5376; font-weight:bold; border: 1px solid silver; background-color: #ffffff; margin: 2px; padding: 2px;}

.comUserStatCaption {font-weight: normal;}

.comUserStatus {margin-left: 2px; margin-top: 10px; color: #2F5376; font-weight:bold; font-size: 10px;}

.comUserRank {margin: 2px;}

.comUserRankText {font-size: 10px;font-weight:bold;}

.comUserRankImg {border: 0;}

.comUserName {}

.comUserImg {margin: 2px;}

.comDate {font-weight: normal; font-style: italic; font-size: smaller}

.comDateCaption {font-weight: bold; font-style: normal;}



.blocks {margin-bottom: 5px;}

.cornerTLC {background-image: url(imgs/blocks_01.png);height: 39px;width: 32px;

background-repeat: no-repeat;background-position: left;}

.cornerTC {background-image: url(imgs/blocks_03.png);background-repeat: repeat-x;}

.cornerTR {background-image: url(imgs/blocks_05.png);background-repeat: no-repeat;

background-position: right;height: 39px;width: 32px;}

.cornerTLB {background-image: url(imgs/left_01.png);height: 15px;width: 32px;

background-repeat: no-repeat;background-position: left;}

.cornerTCB {background-image: url(imgs/left_03.png);background-repeat: repeat-x;}

.cornerTRB {background-image: url(imgs/left_05.png);background-repeat: no-repeat;

background-position: right;height: 15px;width: 32px;}

.cornerBL {background-image: url(imgs/blocks_13.png);height: 16px;width: 32px;

background-repeat: no-repeat;background-position: left;}

.cornerBC {background-image: url(imgs/blocks_14.png);background-repeat: repeat-x;}

.cornerBR {background-image: url(imgs/blocks_15.png);height: 16px;width: 32px;

background-repeat: no-repeat;background-position: right;}

.cornerCC {background-image: url(imgs/blocks_08.png);background-repeat: repeat;

background-position: top;}

.cornerCL {background-image: url(imgs/blocks_06a.png);background-repeat: repeat-y;

background-position: left;width: 10px;vertical-align: top;}

.cornerCR {background-image: url(imgs/blocks_10a.png);background-repeat: repeat-y;

background-position: right;width: 10px;vertical-align: top;}



/* forms elements */

input { border: 1px solid #CCCCCC;font-size: 11px; font-family: verdana, arial, helvetica, sans-serif; color: #333333; background-color: #ffffff;padding-left:3px;background-color: #f7f7f7;}


textarea {background-color: #FFFFFF;color: #333333; border: #CCCCCC 1px solid; width: 430px; font-size: 11px; font-family: verdana, arial, helvetica, sans-serif;}

select {border: 1px solid #CCCCCC; font-size: 11px; font-family: verdana, arial, helvetica, sans-serif;}

.formButton {background-color: #3147EB;color: #FFFFFF;font-weight: bold;text-align:center;}

input:focus, textarea:focus{background-color: #ffffff;border: 1px solid #9f9f9f;}



td#add {width: 100px;padding-right: 60px;padding-top: 330px;}

table.alltab{width: 100%;margin-left: auto;margin-right: auto}



/* ######### Style for Navigation Bar ######### */





.chromestyle{

width: 100%;

font-weight: bold;

}



.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}



.chromestyle ul{

border: 1px solid #BBB;

width: 100%;

background: url(imgs/nav-bar-bg.jpg) center center repeat-x; /*THEME CHANGE HERE*/

padding: 4px 0;

margin: 0;

text-align: center; /*set value to "left", "center", or "right"*/

}



.chromestyle ul li{

display: inline;

}



.chromestyle ul li a{

color: #FFF;

padding: 4px 7px;

margin: 0;

text-decoration: none;

border-right: 1px solid #DADADA;

}



.chromestyle ul li a:hover{

background: url(imgs/chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/

color: #000000;

}



.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/

content: " v";

/*content: " " url(imgs/downimage.gif); /*uncomment this line to use an image instead*/

}





/* ######### Style for Drop Down Menu ######### */



.dropmenudiv{

position:absolute;

top: 0;

border: 1px solid #BBB; /*THEME CHANGE HERE*/

border-bottom-width: 0;

font:normal 12px Verdana;

line-height:18px;

z-index:100;

background-color: white;

width: 200px;

visibility: hidden;

filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/

}





.dropmenudiv a{

width: auto;

display: block;

text-indent: 3px;

border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/

padding: 2px 0;

text-decoration: none;

font-weight: bold;

color: black;

}



* html .dropmenudiv a{ /*IE only hack*/

width: 100%;

}



.dropmenudiv a:hover{ /*THEME CHANGE HERE*/

background-color: #F0F0F0;

}

Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

46 Personne(s) en ligne (38 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 46 | Plus ...