Créer un forumTitre interactif qui se déplace en fonction de la taille d'un écran
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Titre interactif qui se déplace en fonction de la taille d'un écran
par Rnd. Mer 31 Juil 2024 - 15:07
Détails techniques
Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 30/07/2024
Lien du forum : (lien masqué, vous devez poster pour le voir)
Description du problème
Bonjour ! (Oui c'est encore moi
)Un trèèèès grand merci par avance aux personnes qui sauront m'aider dans mon problème !
Il faudra poster pour voir le forum en question
Prochainement mon forum va fêter sa première année d'existence, avec mon administratrice nous souhaitions marquer le coup avec des nouveautés. N'étant pas toujours une experte dans l'intégration des textes dans mes headers, j'ai opté pour une nouveauté; intégrer un petit code pour le titre du forum. Ce titre étant interactif. Malheureusement il y a un défaut dans celui-ci
En effet selon la taille de l'écran, le titre n'est pas à la même place. Voici deux exemples
- Petit écran:
- Rendu téléphone:
Je voudrais en effet que le titre se trouve comme sur cette image ci
- Spoiler:
Et qu'évidemment cela ne bouge pas d'un écran à un autre
Je ne sais pas si cela est faisable, je laisse néanmoins mon template Overall_Header là où j'ai installé le code qui se nomme "disappear" (il y a le CSS dans le template également)
- Spoiler:
- Code:
<!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} {NAMESPACE_BBCODE}>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pridi:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ingrid+Darling&family=Nanum+Gothic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ingrid+Darling&family=Nanum+Gothic&family=Playfair+Display+SC&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Arimo&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Antonio:wght@100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Updock&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&family=Righteous&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Arapey:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=BhuTuka+Expanded+One&display=swap" rel="stylesheet">
<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"/>
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>
<!-- END switch_canonical_url -->
{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 src="{JQUERY_PATH}" type="text/javascript"></script>
<!-- BEGIN switch_recent_jquery -->
<script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}
<!-- BEGIN switch_fb_login -->
<script src="https://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 -->
<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/>
<script src="{JQUERY_DIR}/ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<script src="https://kit.fontawesome.com/f15612b287.js" crossorigin="anonymous"></script>
<!-- BEGIN switch_ticker_new -->
<script src="{JQUERY_DIR}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 elements */
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 conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
$('ul#fa_ticker_content li').each(function () {
if ($(this).height() > height_max) {
height_max = $(this).height();
}
});
/* Redimensionnement des elements 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');
if (pm != null) {
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}');
if (report != null) {
report.focus();
}
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function () {
Ticker.start({
height: {switch_ticker.HEIGHT},
spacing: {switch_ticker.SPACING},
speed: {switch_ticker.SPEED},
direction: '{switch_ticker.DIRECTION}',
pause: {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH},
logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
<!-- END switch_login_popup -->
<!-- BEGIN switch_login_popup -->
$(document).ready(function () {
$(window).resize(function () {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth / 2 - popupWidth / 2
});
});
});
<!-- 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 -->
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
<!-- BEGIN google_analytics_code_bis -->
gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
<!-- END google_analytics_code_bis -->
</script>
<!-- END google_analytics_code -->
<script src="https://cdn.userway.org/widget.js" data-account="BtkOh0LUmb"></script>
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}"
vlink="{T_BODY_VLINK}">
<!-- html dark mode -->
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
</div>
<!--fin html dark mode -->
<!-- début script dark mode -->
<script>
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
</script>
<!-- fin dark mode -->
<style>
.panaff {
width: 870px;
height: 150px;
position: static;
display: flex;
overflow: hidden;
padding: 2px;
margin-left: auto;
margin-right: auto;
background-color: var(--colbackgris);
border-radius: 20px;
margin-top: 60px;
margin-bottom: 20px;
}
.panaffmaj {
text-align: justify;
height: 138px;
width: 130px;
background-color: transparent;
overflow: auto;
position: relative;
display: inline-block;
border-right: 1px solid var(--blanc);
margin-left: 5px;
margin-right: 5px;
padding: 5px;
}
.panaffmaj span{
margin-top: 14px;
font-family: var(--fontit);
font-size: 40px;
letter-spacing: 5px;
text-transform: capitalize;
font-weight: 300;
margin-right: 20px;
margin-bottom: -20px!important;
text-align: center;
background-image: var(--linearv9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent!important;
display: inline-block;
margin-left: 20px;
}
.panavertissement {
display: block;
text-align: justify;
padding: 1px;
margin: 5px 0;
height: 130px;
line-height: 16px;
width: 310px;
margin-left: 5px;
margin-right: 5px;
background-color: var(--blanc);
overflow: auto;
border-radius: 20px;
padding: 5px;
}
.panavertissement span{font-size: 12px;
line-height: 16px;
text-align: justify;
font-family: var(--fontbasique);
color: var(--ecriture);
}
.links img {
width: 70px;
height: 140px;
margin-top: 4px;
object-fit: cover;
margin-right: 8px;
border-radius: 20px;
outline: 1px solid var(--blanc);
padding: 3px;
margin-left: 7px;
}
.pop-up:target {position:static; left:0;}
.popBox {
background:var(--blanc);
position:absolute;
margin:auto;
width:600px;
height:300px;
top: 0px;
left: 0;
bottom: 0;
right: 0;
z-index:10;
opacity:0;
-webkit-transition: opacity 0.6s ease-in-out;
-ms-transition: opacity 0.6s ease-in-out;
transition: opacity 0.6s ease-in-out;
}
:target .popBox {position:fixed; opacity:1;}
/* Light box properties */
.lightbox {display:none; text-indent:-999em; background:var(--blanc); opacity:0.6; width:100%; height:100%; position:fixed; top:0; left:0; bottom:0; right:0; z-index:5;}
:target .lightbox {display:block;}
.close:link,
.close:visited {
position:absolute;
top:0.5em; right:-0.5em;
display:block;
width:2em; height:2em;
padding:4px 5px 5px 4px;
text-decoration:none;
color:var(--noir);
}
/* ----- POP UP ----- */
.BMInfos_Pop {
width: 600px;
padding: 5px;
height: 300px;
border-radius:20px!important;
background-color: var(--blanc);
display: flex;
flex-direction: row;}
.BMBlock_img {
width: 225px;
height: 300px;
object-fit: cover;
background: var(--blanc);
margin-right: 8px;
margin-top: 2px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-radius: 20px;
}
.BMInfos_Pop img {
width: 200px;
height: 290px;
object-fit: cover;
float: left;
}
.BMInfo_BlockPop{
width: 200px;
background: var(--blanc);
height: 300px;
}
.BMInfo_BlockPop h1{
font-size: 30px;
font-family: var(--fontit);
letter-spacing: 2px;
font-weight: 300;
text-align: center;
padding: 8px;
background-image: var(--linearv4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent !important;
margin-top: 20px;
}
tagadmin {
display: inline-block;
font-size: 20px;
line-height: 7px;
text-transform: uppercase;
letter-spacing: 2px;
padding: 3px 5px;
font-weight: bold;
font-family: var(--fonptitit);
margin-left: 3px;
margin-top: 30px;
}
.BMInfos_PresPop {
width: 280px;
background: var(--blanc);
height: 280px;
text-align: center;
overflow: auto;
padding: 10px;
margin: 0px 10px;
}
.BMInfos_PresPop h2{
padding: 4px;
font-size: 14px;
color: var(--blanc);
font-family: var(--fontaes3);
text-transform: uppercase;
width: 179px;
letter-spacing: 1px;
text-align: center;
background: var(--linearv9);
height: 20px;
border-radius: 20px;
margin-left: 6px;
}
.panmiddlecont {
width: 185px;
height: 140px;
margin-left: 10px;
padding: 5px;
border-left: 1px solid var(--blanc);
}
.panmiddleur{border: 1px solid var(--blanc);
color: var(--blanc)!important;
display: inline-block;
margin: 2px;
padding: 2px;
width: 80px;
text-align: center;
margin-top:10px;
border-radius:20px;
}
span.panmiddleur {
background: var(--linearv1)!important;
}
.panmiddleur a{
color: var(--blanc)!important;
font-family: var(--fonptitit);
font-size: 8px;
letter-spacing: 2px;
text-transform: uppercase;
transition: all .5s ease;
}
.disappear {
position: absolute;
left:0;
right:0;
font-size: 90px;
font-family: 'Great Vibes';
margin: auto;
width:100%;
text-align: center;
height:fit-content;
bottom:0;
top:0;
}
.disappear span {
display: inline-block;
color: transparent;
text-shadow: 0px 0px 10px #e49bb6;
animation-duration: 12s;
animation-iteration-count: infinite;
font-weight: 900;
background-image: var(--linearv3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent !important;
}
.disappear span:nth-child(1){
animation-name: disappearleft;
}
.disappear span:nth-child(2){
animation-name: disappearleft;
animation-delay: .8s;
}
.disappear span:nth-child(3){
animation-name: disappearight;
animation-delay: .6s;
}
.disappear span:nth-child(4){
animation-name: disappearleft;
animation-delay: .8s;
}
.disappear span:nth-child(5){
animation-name: disappearight;
animation-delay: 1s;
}
.disappear span:nth-child(6){
animation-name: disappearight;
animation-delay: 1.3s;
}
.disappear span:nth-child(7){
animation-name: disappearleft;
animation-delay: 1.6s;
}
.disappear span:nth-child(8){
animation-name: disappearight;
animation-delay: 2s;
}
.disappear span:nth-child(9){
animation-name: disappearight;
animation-delay: 2.3s;
}
.disappear span:nth-child(10){
animation-name: disappearleft;
animation-delay: 2.6s;
}
.disappear span:nth-child(11){
animation-name: disappearight;
animation-delay: 3s;}
@keyframes disappearleft{
50% {transform: skew(50deg) translateY(-200%);
text-shadow: 0px 0px 50px;
opacity: 0;
}
}
@keyframes disappearight{
50% {transform: skew(-50deg) translateY(-200%);
text-shadow: 0px 0px 50px;
opacity: 0;
}
}
</style>
<div id="navigation"><div id="navig">{GENERATED_NAV_BAR}</div></div>
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt=""/> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br/>
<span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN inactive_users_modal -->
<div id="inactive_popup" style="z-index: 10000 !important;">
<table class="forumline" style="padding: 0px; width: 480px;" border="0" cellspacing="1"
cellpadding="0">
<tr height="25">
<td class="catLeft">
<span class="genmed module-title">{inactive_users_modal.L_MODAL_TITLE}</span>
</td>
</tr>
<tr height="{LOGIN_POPUP_MSG_HEIGHT}">
<td class="row1" align="left" valign="top">
<span class="genmed">{inactive_users_modal.L_MODAL_BODY}</span>
<div id="inactive_popup_buttons">
<input type="button" id="inactive_popup_url" class="mainoption" value="{inactive_users_modal.L_MODAL_BUTTON}" />
<input type="button" id="inactive_popup_close" class="button" value="{inactive_users_modal.L_CLOSE}" />
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$('#inactive_popup #inactive_popup_close').on('mouseup', function () {
document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
$('#inactive_popup').hide(50);
});
$('#inactive_popup #inactive_popup_url').on('mouseup', function () {
document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
location.href = '{inactive_users_modal.U_MODAL}'
})
</script>
<!-- END inactive_users_modal -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<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>
<!-- BEGIN switch_quick_login -->
<tr>
<td class="row1" align="left" valign="top">
<div class="social_btn">
<!-- BEGIN fb_quick_connect -->
<div class="fb-login-button"></div>
<!-- END fb_quick_connect -->
<!-- BEGIN topicit_quick_connect -->
<div class="ti-connect"></div>
<!-- END topicit_quick_connect -->
</div>
</td>
</tr>
<!-- END switch_quick_login -->
</table>
</div>
<!-- END switch_login_popup -->
<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
<table class="forumline" width="{LIKE_POPUP_WIDTH}" height="{LIKE_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="{LIKE_POPUP_MSG_HEIGHT}">
<td class="row1" align="left" valign="top">
<div id="like_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="like_popup_close" type="button" class="button" value="{L_LIKE_CLOSE}"/>
</form>
</div>
<span class="genmed">{LIKE_POPUP_MSG}</span>
</td>
</tr>
</table>
</div>
<!-- END switch_like_popup -->
<a name="top"></a>
{JAVASCRIPT}
<div class="headerbm"><div class="disappear">
<span>b</span> <span>u</span> <span>s</span> <span>a</span> <span>n</span> <span>m</span> <span>e</span> <span>m</span> <span>o</span> <span>r</span> <span>y</span>
</div>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN switch_logo_left -->
<td>
<a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
</td>
<!-- END switch_logo_left -->
<td align="center" width="100%" valign="middle">
<!-- BEGIN switch_logo_center -->
<a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
<br/>
<!-- END switch_logo_center -->
<div class="maintitle">{MAIN_SITENAME}</div>
<br/>
<span class="gen">{SITE_DESCRIPTION}<br/> </span>
</td>
<!-- BEGIN switch_logo_right -->
<td><a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a></td>
<!-- END switch_logo_right -->
</tr>
</table>
</div>
<div class="panaff">
<div class="panaffmaj">
<span>MAJ</span>
<br/>
<span>N°11</span>
</div>
<div class="panavertissement">
<span><bt6>Busan Memory</bt6> est un forum chill, <linear1>bon enfant</linear1>, sans la moindre prise de tête. On est ici avant tout pour passer un <u>bon</u> moment <u4>tous ensemble</u4> dans la <mc2>bonne humeur</mc2>, <mc6>la joie</mc6>, la <mc7>bienveillance</mc7>. Cette petite chose que nous avons créé est là pour que nous puissions avoir le plaisir de partager <u1>notre passion commune pour l'écriture</u1>. <linear4>BM</linear4> c'est aussi un forum <i3>sans aucune contrainte</i3> de rp pour éviter toute forme de pression. C'est un forum à <u3>avatar réel</u3> (toutes origines acceptées) et qui sollicite tout de suite une identité sous la forme <b1>Nom Prénom</b1>. Ici tout ce que l'on souhaite c'est que les personnes présentes soient <mc1>heureux.ses</mc1> au sein de Busan Memory. N'oubliez pas; <u>fun</u> et <u>beaucoup d'amour</u>.</span>
</div>
<div class="links">
<a href="#pop1"><img src="https://64.media.tumblr.com/136de0edf949f1076f64989dc716c236/302f8e0ae1f66aa5-d5/s250x400/1d986c3d11097a45f3640fa3ec356fa1a2717a33.gif"/></a>
<a href="#pop2"><img src="https://64.media.tumblr.com/05c79b111999eddcea1bdc2872138fcf/tumblr_p538g44t7a1rug3rlo2_250.gif"/></a>
<div id="pop1" class="pop-up">
<div class="popBox">
<div class="BMInfos_Pop">
<div class="BMBlock_img">
<img src="https://i.pinimg.com/originals/92/66/83/926683010a303dcb82302cf14a7414f9.gif" class="BMInfos_Pop">
</div>
<div class="BMInfo_BlockPop">
<h1>Esprit Sombre</h1>
<img src="https://www.zupimages.net/up/24/04/2pnl.png" style="margin-top: 4px;margin-bottom: 10px;height: 80px;width: 80px;object-fit: cover;text-align: center;margin-left: 40px;">
<tagadmin><a href="https://busanmemory.forumactif.com/privmsg?mode=post&u=2" target="_blank">mp</a></tagadmin>
<tagadmin><a href="https://busanmemory.forumactif.com/u2" target="_blank">profil</a></tagadmin>
</div>
<div class="BMInfos_PresPop">
<h2>Tatiana</h2>
<br/>
<h2>Fondatrice</h2>
<br/>
<h2>25 YO</h2>
<br/>
<h2>Grosse rageuse</h2>
</div>
</div>
<a href="#links" class="close"><span class="th th-cross-1"></span></a>
</div>
<!-- This link is the light box -->
<a href="#links" class="lightbox">Back to links</a>
</div>
<div id="pop2" class="pop-up">
<div class="popBox">
<div class="BMInfos_Pop">
<div class="BMBlock_img">
<img src="https://i.pinimg.com/originals/75/ef/28/75ef2857758427d34fa763cf6628a367.gif" class="BMInfos_Pop">
</div>
<div class="BMInfo_BlockPop">
<h1>Suah</h1>
<img src="https://www.zupimages.net/up/24/04/2pnl.png" style="margin-top: 4px;margin-bottom: 10px;height: 80px;width: 80px;object-fit: cover;text-align: center;margin-left: 40px;">
<tagadmin><a href="https://busanmemory.forumactif.com/privmsg?mode=post&u=6" target="_blank">mp</a></tagadmin>
<tagadmin><a href="https://busanmemory.forumactif.com/u6" target="_blank">profil</a></tagadmin>
</div>
<div class="BMInfos_PresPop">
<h2>Anastasia</h2>
<br/>
<h2>Administratrice</h2>
<br/>
<h2>25 YO</h2>
<br/>
<h2>Drama Queen</h2>
</div>
</div>
<a href="#links" class="close"><span class="th th-cross-1"></span></a>
</div>
<!-- This link is the light box -->
<a href="#links" class="lightbox">Back to links</a>
</div>
</div>
<div class="panmiddlecont">
<span class="panmiddleur"><a href="https://busanmemory.forumactif.com/t17-reglement" title="règlement">règlement</a></span>
<span class="panmiddleur"><a href="https://busanmemory.forumactif.com/t16-contexte" title="contexte">contexte</a></span>
<span class="panmiddleur"><a href="https://busanmemory.forumactif.com/t15-groupes" title="groupes">groupes</a></span>
<span class="panmiddleur"><a href="https://busanmemory.forumactif.com/t23-faceclaim" title="bottin">bottin</a></span>
<span class="panmiddleur"><a href="https://busanmemory.forumactif.com/f30-scenariis" title="scenarios">scénariis</a></span>
<span class="panmiddleur"><a href="https://busanmemory.forumactif.com/t8-guide-du-newbie" title="guide">guide</a></span>
<span class="panmiddleur"><a href="https://busanmemory.forumactif.com/f77-guest" title="invités">invités</a></span>
<span class="panmiddleur"><a href="https://busanmemory.forumactif.com/t571-les-tops-sites" title="tops sites">tops sites</a></span>
<span class="panmiddleur"><a href="https://busanmemory.forumactif.com/t14-l-aes" title="l'aes">l'aes</a></span>
<span class="panmiddleur"><a href="https://busanmemory.forumactif.com/t4-credits">crédits</a></span>
</div>
</div>
<br>
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="10" cellpadding="10" border="0" align="center">
<tr>
<td class="bodyline">
<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 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 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 -->
J'espère de tout coeur ne pas mettre trop emporté dans mes explications et que la demande reste clair
Je remercie sincèrement votre aide et vous souhaite de passer une agréable journée
Rnd.- Nouveau membre
-
Messages : 27
Inscrit(e) le : 07/09/2022 -
Re: Titre interactif qui se déplace en fonction de la taille d'un écran
par Toryudo Mer 31 Juil 2024 - 19:30
Bonjour !
Il faut savoir une chose avec le positionnement absolute :
- si vous mettez un top = 0 et un bottom = 0 à la fois, alors vous centrez l'élément verticalement sur l'écran
- si vous mettez un left = 0 et un right = 0 à la fois, alors vous centrez l'élément horizontalement sur l'écran
Dans votre cas, je pense que vous voulez centrer l'élement horizontalement, donc left et right sont corrects.
Par contre, vous ne voulez pas centrer l'élément verticalement, vous voulez le positionner précisément par rapport au haut de la page. Dans ce cas, supprimez la valeur bottom et adaptez la valeur du top pour descendre l'animation où vous voulez. Sur mon écran, ce serait environ un top: 427px :
Il faut savoir une chose avec le positionnement absolute :
- si vous mettez un top = 0 et un bottom = 0 à la fois, alors vous centrez l'élément verticalement sur l'écran
- si vous mettez un left = 0 et un right = 0 à la fois, alors vous centrez l'élément horizontalement sur l'écran
Dans votre cas, je pense que vous voulez centrer l'élement horizontalement, donc left et right sont corrects.
Par contre, vous ne voulez pas centrer l'élément verticalement, vous voulez le positionner précisément par rapport au haut de la page. Dans ce cas, supprimez la valeur bottom et adaptez la valeur du top pour descendre l'animation où vous voulez. Sur mon écran, ce serait environ un top: 427px :
- Code:
.disappear {
position: absolute;
left:0;
right:0;
font-size: 90px;
font-family: 'Great Vibes';
margin: auto;
width:100%;
text-align: center;
height:fit-content;
top: 427px;
}
Toryudo- Aidactif
-
Messages : 1538
Inscrit(e) le : 31/03/2020 -
Re: Titre interactif qui se déplace en fonction de la taille d'un écran
par Rnd. Mer 31 Juil 2024 - 21:43
Vous êtes définitivement mon sauveur hihi Non avec un peu plus de sérieux, je ne savais pas, je pensais au contraire que la formule déposée ainsi centrée tous les éléments et ceux peu importe les écrans
Je pense que je vais me garder cette information sur un papierJe vous remercie infiniment ! C'est parfait j'ai installé et vérifié sur les écrans et mon téléphone, c'est exactement le rendu que je voulais
Un grand merci encore une fois !! Passez une bonne soirée ... Pour moi le sujet est parfaitement résolu
Rnd.- Nouveau membre
-
Messages : 27
Inscrit(e) le : 07/09/2022 -
Sujets similaires» Comment changer la taille de police du titre principal, sa taille et sa couleur
» Adapter une image à la taille de l'écran
» Réglage positionnement élément en fonction taille écran
» Comment gérer la taille de son fond d'écran?
» Taille auto de l'affichage en fonction de la déf de l'écran
» Adapter une image à la taille de l'écran
» Réglage positionnement élément en fonction taille écran
» Comment gérer la taille de son fond d'écran?
» Taille auto de l'affichage en fonction de la déf de l'écran
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum