Ajouter image sur le coté

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

Résolu Ajouter image sur le coté

Message par shaldeball le Sam 18 Mai 2013 - 13:55

Bonjour,

Je suis l'admin du forum http://lrdp.forumgratuit.org/. La version du forum est en phpBB2.

Je voudrais rajouter cette image sur le coté gauche du forum .

J'ai regardé plusieurs tuto et post mais après différents tests je n'y arrive toujours pas.

Des plus un ancien membre de notre légion qui était web master m'a aidé a améliorer le forum mais a aussi modifier des templates et CSS donc cela m'a pas mal perdu.

CSS
Spoiler:
#i_icon_mini_site{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/1.png');
width:33px;
height:15px;
margin-top:3px;

}
#i_icon_mini_site:hover {

}
#i_icon_mini_index {
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/2.png');
width:40px;
height:15px;

}
#i_icon_mini_index:hover {

}
#i_icon_mini_search{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/5.png');
width:65px;
height:15px;

}
#i_icon_mini_search:hover {

}
#i_icon_mini_members{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/6.png');
width:49px;
height:15px;

}
#i_icon_mini_members:hover {

}
#i_icon_mini_groups{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/7.png');
width:47px;
height:15px;

}
#i_icon_mini_groups:hover {

}
#i_icon_mini_profile{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/8.png');
width:40px;
height:15px;

}
#i_icon_mini_profile:hover {

}

#i_icon_mini_message{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/9.png');
width:58px;
height:15px;

}
#i_icon_mini_message:hover {

}
#i_icon_mini_new_message{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/9_1.png');
width:98px;
height:15px;
}
#i_icon_mini_new_message:hover {

}


#i_icon_mini_logout{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/10.png');
width:76px;
height:15px;

}
#i_icon_mini_faq{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/3.png');
width:25px;
height:15px;

}
#i_icon_mini_register{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/11.png');
width:79px;
height:15px;

}
#i_icon_mini_login{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/12.png');
width:72px;
height:15px;

}

/*----------------------------------- IPPIKIGAMI - Squelette HA --------------*/
body {
background-color:#ebebeb;
margin:0px;
}
}

.ipp1 {
background:url('http://www.alderia-world.com/Illy/Phoenix/centre.png') repeat-y top center;
}
.ipp2 {
background:url('http://www.alderia-world.com/Illy/Phoenix/top_repeat.png') repeat-x top center;
}
.ipp3 {
background:url('http://www.alderia-world.com/Illy/Phoenix/head%20v2.png') no-repeat top center;
}
.ipp4 {
background:url('http://www.alderia-world.com/Illy/Phoenix/foot_repeat.png') repeat-x bottom center;
}
.ipp5 {
background:url('http://www.alderia-world.com/Illy/Phoenix/foot.png') no-repeat bottom center;
}


.ipp_t1 {
background:url('http://www.neo-verona.com/NeoVerona/VII/Index/Top.png') repeat;
width:19px;
height:82px;
}
.ipp_t2 {
position:fixed;
width:19px;
height:82px;
right:50%;
bottom:20%;
}


/*----------------------------------- NAVIGATION + NEWS --------------*/
#position_nav{
width: 1200px; margin-left: auto; margin-right: auto;}

#navigation_phoenix{
padding-top: 67px; padding-left: 112px; width: 628px;}
.last_news{
padding-left: 5px; padding-right: 5px; padding-top: 3px; text-align: justify; color: #474f82; font-family: Tw Cen MT; font-size: 12px; padding-top: 10px;}

#nav_ha{
margin-top: -167px; margin-left: -450px;}

.ajustement_news{
height: 14px;}


#mention_legal_fa
{
float: left;
padding-left: -50px;
padding-top: 100px;
font-size: 11px;
font-family: century gothic;
}

.module {-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}



span.imageGauche {
margin-left: 20px;
margin-right: 50px;
top: 27px;
float:left;
}

template général overall_header
Spoiler:
<!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" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB}>
<head>
<!-- BEGIN meta_emulate_ie7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<!-- END meta_emulate_ie7 -->
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING};" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script language="javascript" src="http://alderia.power-heberg.be/V8/JS/gradual.js"></script>
<script language="javascript" src="http://alderia.power-heberg.be/V8/JS/gradualks.js"></script>
<link rel="stylesheet" type="text/css" href="http://alderia-world.com/Illy/Forum/js/shadowbox.css"/>
<script type="text/javascript" src="http://alderia.power-heberg.be/V8/JS/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
handleOversize: "drag",
modal: true
});
</script>
<script type="text/javascript" src="shadowbox.js"></script>
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
<!-- BEGIN switch_fb_login -->
<script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
<!-- END switch_ticker -->

<!-- BEGIN switch_ticker_new -->
<script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});

switch( tickerDirParam )
{
case 'top' :
slid_vert = true;
break;

case 'left':
break;

case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;

case 'right':
auto_dir = 'prev';
break;

default:
slid_vert = true;
}

$(document).ready(function() {
var w_cont = $('#fa_ticker_container').width();

if (w_cont > 0)
{
$('#fa_ticker_container').width(w_cont);

/* Affichage de la liste */
$('#fa_ticker_content').css('display','block');

/* Calcul des dimensions du conteneur et des �l�ments */
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
var height_max = h_perso;

/* Calcul de la hauteur maximale du contenur en fonction des �l�ments et de la hauteur personnalis�e dans l'admin */
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );

/* Redimensionnement des �l�ments et des images trop larges */
$('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
if ($(this).width() > width_item)
{
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});

/* Redimensionnement et centrage du conteneur en mode vertical */
if (slid_vert)
{
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
}

/* Initialisation du caroussel */
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
}
else
{
$('ul#fa_ticker_content li:not(:first)').css('display','none');
$('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->

<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
pm.focus();
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
report.focus();
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
<!-- END switch_ticker -->
});

<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false;
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<!-- BEGIN switch_ticker_new -->
<style>
.jcarousel-skin-tango .jcarousel-item {
text-align:center;
width: 10px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
</style>
<!-- END switch_ticker_new -->

<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<div class="ipp1"/>
<div class="ipp2"/>
<div class="ipp3"/>

<div id="position_nav">
<table cellpadding="0" cellspacing="0" border="0" width="100%" id="navigation_phoenix">
<tr>
<td valign="top" width="100%">
<div class="ajustement_news"></div>
</td>
</tr>
<tr>
<td valign="top" width="100%">
<div class="last_news">
Forum en cours de réalisation | Alliance avec La brigade des Loups
</div>
</td>
</tr>
</table>
</div>


<div style="margin-top: -200px;"></div>


<div class="ipp4"/>
<div class="ipp5"/>
<table class="ipp_t2" border="0" style="margin-right: 447px;"><tr><td>
<table class="ipp_t1"><tr><td>
<center><a href=""><img src="http://illiweb.com/fa/empty.gif" border="0" height="47px" width="13px"></a></center>
</td></tr></table>
</td></tr></table>
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br />
<span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->

<!-- BEGIN switch_login_popup -->
<div id="login_popup">
<table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
<tr height="25">
<td class="catLeft">
<span class="genmed module-title">{SITENAME}</span>
</td>
</tr>
<tr height="{LOGIN_POPUP_MSG_HEIGHT}">
<td class="row1" align="left" valign="top">
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="mainoption" value="{L_LOGIN}" />
<input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
<span class="genmed">{LOGIN_POPUP_MSG}</span>
</td>
</tr>
</table>
</div>
<!-- END switch_login_popup -->

<a name="top"></a>
{JAVASCRIPT}
<table cellpadding="0" cellspacing="0" border="0" height="335px" width="100%"><tr><td align="center" valign="bottom">

<div id="nav_ha">{GENERATED_NAV_BAR}</div>

<table cellpadding="0" cellspacing="0" border="0" height="23px" width="898px">
<tr><td class="ippnsie1" align="center" valign="center">

<a href="#"><img src="http://illiweb.com/fa/empty.gif" id="ipp_nsie_a" border="0"/></a>
<a class="subavant" href="#"><img src="http://illiweb.com/fa/empty.gif" id="ipp_nsie_b" border="0"/></a>
<a href="#"><img src="http://illiweb.com/fa/empty.gif" id="ipp_nsie_c" border="0"/></a>
<a href="http://www.neoverona.com/la-gazette-f4/news-du-serveur-t292.htm"><img src="http://illiweb.com/fa/empty.gif" id="ipp_nsie_d" border="0"/></a>
<a href="#"><img src="http://illiweb.com/fa/empty.gif" id="ipp_nsie_e" border="0"/></a>
<a href="#"><img src="http://illiweb.com/fa/empty.gif" id="ipp_nsie_f" border="0"/></a>
<a href="http://www.neoverona.com/points-h5.htm"><img src="http://illiweb.com/fa/empty.gif" id="ipp_nsie_g" border="0"/></a>

</td></tr></table>

</td></tr></table>
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
<tr>
<td class="bodyline">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
</tr>
</table>


<div style="clear: both;"></div>

<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td {CLASS_TABLE_TYPE} align="left" class="row1">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker_new -->

<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td {CLASS_TABLE_TYPE} align="left" class="row1">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker -->

<div id="page-body">
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<table cellpadding="0" cellspacing="0" width="100%" class="three-col">
<tbody>
<tr>
<td valign="top" width="{C1SIZE}">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
</td>
<td valign="top" width="100%">
<!-- BEGIN html_validation -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
<!-- END html_validation -->

Merci d'avance pour votre aide


Dernière édition par shaldeball le Sam 18 Mai 2013 - 15:39, édité 1 fois

shaldeball
Nouveau membre

Messages : 5
Inscrit(e) le : 11/11/2011

http://lrdp.forumgratuit.org/
shaldeball a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter image sur le coté

Message par Tech le Sam 18 Mai 2013 - 14:37

Bonjour et Bienvenue
sur le Forum des Forums Forumactif
Vu que vous êtes nouveau, voici quelques sujets importants :
Sécurité : mail de fondation - Ce qu'il ne faut pas faire
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse Wink

Vous pouvez ajouter ce code à la ligne 191 de votre template overall_header :
Code:
  <div class="leftimg"><img src="http://nsm08.casimages.com/img/2013/05/16//mini_13051606511414133411195369.gif" alt="" /></div>

et dans votre CSS, rajoutez ceci :
Code:
.leftimg {
    bottom: 5px;
    position: absolute;
}

PS : Vous avez signalé que votre forum était en phpBB3 dans votre profil. Pour information, il s'agit d'un phpBB2 Wink

Cordialement.


Dernière édition par Tech le Sam 18 Mai 2013 - 14:57, édité 1 fois



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 20898
Inscrit(e) le : 01/12/2007

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

Résolu Re: Ajouter image sur le coté

Message par shaldeball le Sam 18 Mai 2013 - 14:51

Merci çà marche très bien mais l'image est un peu trop petite et beaucoup trop en haut.

j'ai donc remplacer l'image par celle d'origine plus grosse. Mais elle ne s'affiche pas.

Est-elle trop grosse? et comment la faire descendre un peu?

Ps: profil modifier

merci

shaldeball
Nouveau membre

Messages : 5
Inscrit(e) le : 11/11/2011

http://lrdp.forumgratuit.org/
shaldeball a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter image sur le coté

Message par Tech le Sam 18 Mai 2013 - 14:57

Dans le premier code, remplacez ceci : http://nsm08.casimages.com/img/2013/05/16//mini_13051606511414133411195369.gif
par ceci : http://nsm08.casimages.com/img/2013/05/14//13051407122114133411188507.png

et dans le deuxième code, remplacez ceci : bottom: 5px;
par ceci : bottom: 0px;

Pouvez-vous laisser le code actif sur votre forum pour que je vois le résultat ?

Cordialement.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 20898
Inscrit(e) le : 01/12/2007

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

Résolu Re: Ajouter image sur le coté

Message par shaldeball le Sam 18 Mai 2013 - 15:05

merci.

C'est fais et ça a tout décalée

j'ai laissé le code actif

amicalement

shaldeball
Nouveau membre

Messages : 5
Inscrit(e) le : 11/11/2011

http://lrdp.forumgratuit.org/
shaldeball a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter image sur le coté

Message par Tech le Sam 18 Mai 2013 - 15:12

Remplacez le code CSS par :
Code:
.leftimg {
    top: 600px;
    position: absolute;
}

Cordialement.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 20898
Inscrit(e) le : 01/12/2007

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

Résolu Re: Ajouter image sur le coté

Message par shaldeball le Sam 18 Mai 2013 - 15:18

Ça marche nickel merci pour tout.

Juste une dernière question je recherche un autre image pour mettre sur la droite.

Quel code devrais-je mettre et surtout au niveau du template je devrais le mettre juste après ligne 192?

Merci pour tout

Amicalement

shaldeball
Nouveau membre

Messages : 5
Inscrit(e) le : 11/11/2011

http://lrdp.forumgratuit.org/
shaldeball a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter image sur le coté

Message par Tech le Sam 18 Mai 2013 - 15:30

Oui vous pouvez, il faudra aussi changer la class="leftimg" par exemple par class="rightimg" et dans le CSS ceci :
Code:
        .rightimg {
            top: 600px;
            left: Xpx;
            position: absolute;
        }
où X est une valeur selon votre choix.

Cordialement.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 20898
Inscrit(e) le : 01/12/2007

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

Résolu Re: Ajouter image sur le coté

Message par shaldeball le Sam 18 Mai 2013 - 15:39

Merci pour tout

amicalement

shaldeball
Nouveau membre

Messages : 5
Inscrit(e) le : 11/11/2011

http://lrdp.forumgratuit.org/
shaldeball 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