Accueil
Créer un forumPetit soucis de mise en forme...
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Petit soucis de mise en forme...
par Minki Sam 22 Mar 2014 - 17:12
Bonjour!
J'ai un petit soucis dans la mise en forme de mon forum notamment pour ce qui est du profil des utilisateurs...
La page d'accueil n'a aucun problème de taille, c'est ce que je veux justement. Seulement quand je clique sur le profil d'un utilisateur, les deux colonnes de la fenêtre profil font chacune la taille de mon forum.
Comme puis-je faire pour que les deux colonnes ensemble face la taille de la largeur du forum?
Voici le l'URL http://winnerfrance.fr1.co/
Voici une capture de la taille de mon forum
Et voici celle de la fenêtre du profil d'un utilisateur
J'ai cherché différentes solutions mais quand je modifie Width de post profile dans le CSS, il n'y a aucun changement pour la fenêtre de profil.
Sinon la version de mon forum est Phbb2, je suis la fondatrice du forum et j'ai modifié deux templates (index_box et overall_header) ainsi que du CSS pour avoir la barre de navigation en haut.
J'ai un petit soucis dans la mise en forme de mon forum notamment pour ce qui est du profil des utilisateurs...
La page d'accueil n'a aucun problème de taille, c'est ce que je veux justement. Seulement quand je clique sur le profil d'un utilisateur, les deux colonnes de la fenêtre profil font chacune la taille de mon forum.
Comme puis-je faire pour que les deux colonnes ensemble face la taille de la largeur du forum?
Voici le l'URL http://winnerfrance.fr1.co/
Voici une capture de la taille de mon forum
- Spoiler:
Et voici celle de la fenêtre du profil d'un utilisateur
- Spoiler:
J'ai cherché différentes solutions mais quand je modifie Width de post profile dans le CSS, il n'y a aucun changement pour la fenêtre de profil.
Sinon la version de mon forum est Phbb2, je suis la fondatrice du forum et j'ai modifié deux templates (index_box et overall_header) ainsi que du CSS pour avoir la barre de navigation en haut.
Dernière édition par Minki le Ven 28 Mar 2014 - 13:41, édité 1 fois
Minki- Nouveau membre
-
Messages : 16
Inscrit(e) le : 16/03/2014 -
Minki- Nouveau membre
-
Messages : 16
Inscrit(e) le : 16/03/2014 -
Re: Petit soucis de mise en forme...
par Lixyr Lun 24 Mar 2014 - 16:03
Bonjour et Bienvenue Vu que vous êtes nouveau, voici quelques sujets importants :sur le Forum des Forums Forumactif  Sécurité : mail de fondation - Ce qu'il ne faut pas faire
 |
Bonjour Minki.
Pouvez-vous laisser le champ "membre" accessible aux invités, que je puisse jeter directement un coup d'oeil ?
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez
le message qui vous a aidé pour que celui-ci soit mis en évidence.♢ Épinglez votre sujet en résolu
pour prévenir la modération.
Lixyr- Aidactive
-
Messages : 7387
Inscrit(e) le : 22/07/2010 -
Re: Petit soucis de mise en forme...
par Minki Lun 24 Mar 2014 - 21:46
Voilà, il est désormais accessible aux invités
Minki- Nouveau membre
-
Messages : 16
Inscrit(e) le : 16/03/2014 -
Re: Petit soucis de mise en forme...
par Lixyr Lun 24 Mar 2014 - 21:50
Merci.
Dans votre CSS, vous avez ça :
(panneau d'administration >> affichage >> couleurs >> feuille de style CSS)
Hors chacune des tables dans le profil (gauche et droite) est elle aussi modifiée par la classe forumline, ce qui fait que chacune d'elle aura une largeur de 850px.
Il faudrait plutôt mettre :
Et si vous voulez garder la largeur de 850px pour le forum, vous pouvez mettre dans le CSS :
Dans votre CSS, vous avez ça :
(panneau d'administration >> affichage >> couleurs >> feuille de style CSS)
.forumline {
width: 850px;
(...)
Hors chacune des tables dans le profil (gauche et droite) est elle aussi modifiée par la classe forumline, ce qui fait que chacune d'elle aura une largeur de 850px.
Il faudrait plutôt mettre :
- Code:
width:100%;
Et si vous voulez garder la largeur de 850px pour le forum, vous pouvez mettre dans le CSS :
- Code:
.bodyline {width:850px;}
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez
le message qui vous a aidé pour que celui-ci soit mis en évidence.♢ Épinglez votre sujet en résolu
pour prévenir la modération.
Lixyr- Aidactive
-
Messages : 7387
Inscrit(e) le : 22/07/2010 -
Re: Petit soucis de mise en forme...
par Minki Mar 25 Mar 2014 - 19:20
Merci beaucoup!!
Mais cela a entrainé un second problème...
Mais cela a entrainé un second problème...
- Spoiler:
Minki- Nouveau membre
-
Messages : 16
Inscrit(e) le : 16/03/2014 -
Re: Petit soucis de mise en forme...
par Lixyr Mar 25 Mar 2014 - 22:06
Petite erreur de ma part, la taille de 850% est à mettre sur .bodylinewidth :
Sinon, cet affichage provient de votre CSS, au niveau de la classe a.mainmenu:hover. Les modifications effectuées par cette classe sont prises en compte vu que c'est un menu de navigation de profil. Qu'est-ce que vous voulez faire ? L'enlever ?
- Code:
.bodylinewidth
{
width: 850px;
}
Sinon, cet affichage provient de votre CSS, au niveau de la classe a.mainmenu:hover. Les modifications effectuées par cette classe sont prises en compte vu que c'est un menu de navigation de profil. Qu'est-ce que vous voulez faire ? L'enlever ?
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez
le message qui vous a aidé pour que celui-ci soit mis en évidence.♢ Épinglez votre sujet en résolu
pour prévenir la modération.
Lixyr- Aidactive
-
Messages : 7387
Inscrit(e) le : 22/07/2010 -
Re: Petit soucis de mise en forme...
par Minki Mer 26 Mar 2014 - 12:23
il y a une légère superposition et j'aimerai que qu'il soit bien distinct.
Minki- Nouveau membre
-
Messages : 16
Inscrit(e) le : 16/03/2014 -
Re: Petit soucis de mise en forme...
par Lixyr Mer 26 Mar 2014 - 15:13
Au départ, la classe a.mainmenu était pour le menu global ou pour le profil ? C'est pour savoir s'il faut modifier le template ou juste le css.
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez
le message qui vous a aidé pour que celui-ci soit mis en évidence.♢ Épinglez votre sujet en résolu
pour prévenir la modération.
Lixyr- Aidactive
-
Messages : 7387
Inscrit(e) le : 22/07/2010 -
Minki- Nouveau membre
-
Messages : 16
Inscrit(e) le : 16/03/2014 -
Re: Petit soucis de mise en forme...
par Lixyr Mer 26 Mar 2014 - 23:08
Dans la classe a.mainmenu et a.mainmenu:hover, rajoutez ceci dans votre css :
- Code:
display:block;
float:left;
- Code:
margin-top:2px;
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez
le message qui vous a aidé pour que celui-ci soit mis en évidence.♢ Épinglez votre sujet en résolu
pour prévenir la modération.
Lixyr- Aidactive
-
Messages : 7387
Inscrit(e) le : 22/07/2010 -
Re: Petit soucis de mise en forme...
par Minki Jeu 27 Mar 2014 - 14:28
ce problème est réglé cependant cela a aussi affecté la barre de navigation (j'ai l'impression que tout entraîne un autre problème et j'ai l'impression de mettre trompée en vous disant que a.mainmenu ne concernait que le profil...)
Ca ne serai pas lié au fait que j'ai modifié le template overall_header ? (il me semble que c'était pour mettre la barre de navigation en haut)
Ca ne serai pas lié au fait que j'ai modifié le template overall_header ? (il me semble que c'était pour mettre la barre de navigation en haut)
Minki- Nouveau membre
-
Messages : 16
Inscrit(e) le : 16/03/2014 -
Re: Petit soucis de mise en forme...
par Lixyr Jeu 27 Mar 2014 - 17:40
Au pire on peut toujours modifier le template overall_header, qui sera plus simple à modifier que le template des profils, et mettre une autre classe pour que ça ne prenne pas effet sur le menu global. Donnez-moi le contenu de votre template overall_header, que je vous dise comment modifier ça.
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez
le message qui vous a aidé pour que celui-ci soit mis en évidence.♢ Épinglez votre sujet en résolu
pour prévenir la modération.
Lixyr- Aidactive
-
Messages : 7387
Inscrit(e) le : 22/07/2010 -
Re: Petit soucis de mise en forme...
par Minki Jeu 27 Mar 2014 - 21:05
- 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>
<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>
<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 -->
<link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
<!-- 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 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({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 = 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 type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
<!-- BEGIN google_analytics_code_bis -->
_gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
_gaq.push(['b._trackPageview']);
<!-- END google_analytics_code_bis -->
(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="navig" align="{MENU_POSITION}">{GENERATED_NAV_BAR}</div>
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="http://2img.net/i/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 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>
<!-- BEGIN switch_logo_left -->
<td><a href="{U_INDEX}"><img 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 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 src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_right -->
</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 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 -->
Minki- Nouveau membre
-
Messages : 16
Inscrit(e) le : 16/03/2014 -
Re: Petit soucis de mise en forme...
par Dr. Sam Jeu 27 Mar 2014 - 21:40
Bonsoir,
De mon coté je vois que les menus son à gauche alors que les séparation son à droite.
Dans votre CSS vous avez ce code ou un semblable:
Il faut supprimé dans le CSS donné plus haut cette partie de code:
Ensuite, recherche ce code:
Et dans ce code supprime ceci:
C'est pas encore terminé ^^!
Recherche ce code:
Puis enlève ceci:
Ajoute ce code aussi: (Si tu veux que la barre de navigation soit toujours en haut à gauche)
Tu peux enregistrer
Cordialement,
De mon coté je vois que les menus son à gauche alors que les séparation son à droite.
Dans votre CSS vous avez ce code ou un semblable:
- Code:
a.mainmenu {
color: #FFFFFF !important;
display: block;
float: left;
font-size: 14px;
font-weight: bold;
padding-bottom: 5px;
padding-top: 5px;
text-shadow: 1px 1px 0 #000000;
}
Il faut supprimé dans le CSS donné plus haut cette partie de code:
- Code:
display: block;
float: left;
Ensuite, recherche ce code:
- Code:
a.mainmenu:hover {
border-bottom: 2px solid #FFFFFF;
color: #FFFFFF !important;
display: block;
font-size: 14px;
font-weight: bold;
padding-bottom: 5px;
padding-top: 5px;
text-decoration: none !important;
}
Et dans ce code supprime ceci:
- Code:
display: block;
C'est pas encore terminé ^^!
Recherche ce code:
- Code:
a.mainmenu:hover {
color: #EDEDED;
text-decoration: underline;
}
Puis enlève ceci:
- Code:
text-decoration: underline;
Ajoute ce code aussi: (Si tu veux que la barre de navigation soit toujours en haut à gauche)
- Code:
.mainmenu img {
float: left;
}
Tu peux enregistrer
Cordialement,
Dernière édition par Dr. Sam le Jeu 27 Mar 2014 - 23:32, édité 2 fois
Dr. Sam- *****
-
Messages : 894
Inscrit(e) le : 28/06/2012 -
Re: Petit soucis de mise en forme...
par Lixyr Jeu 27 Mar 2014 - 22:32
Merci, Dr. Sam, de demander à Minki de supprimer ce que je lui ai demandé de rajouter pour que son code s'affiche comme elle le souhaitait...
Bref, Minki, étant donné que ta barre de navigation a comme classe navig, tu peux faire comme ça dans ton CSS : (rajoute à la suite)
et à la place des ///// tu mets le même contenu que tu as pour a.mainmenu et a.mainmenu:hover, sauf que tu ne mets pas ce que je t'ai dit de rajouter plus haut (à savoir, le display:block; , float:left; et margin:2px;) sinon ça va donner le même affichage.
------------------------------------------------------
A part ça, je ne sais pas si tu as la même chose dans ton profil, mais perso, en tant qu'invité, le lien profil n'est pas actif, ce qui créé un décalage.
Du coup, il faudrait que tu changes la classe a.mainmenu par a.mainmenu, span.gen strong { /////// etc
Ainsi, le float prendra aussi effet sur ce qui est en gras dans la barre de navigation du profil. A tester.
Bref, Minki, étant donné que ta barre de navigation a comme classe navig, tu peux faire comme ça dans ton CSS : (rajoute à la suite)
- Code:
.navig a.mainmenu { ////// }
.navig a.mainmenu:hover { ////// }
et à la place des ///// tu mets le même contenu que tu as pour a.mainmenu et a.mainmenu:hover, sauf que tu ne mets pas ce que je t'ai dit de rajouter plus haut (à savoir, le display:block; , float:left; et margin:2px;) sinon ça va donner le même affichage.
------------------------------------------------------
A part ça, je ne sais pas si tu as la même chose dans ton profil, mais perso, en tant qu'invité, le lien profil n'est pas actif, ce qui créé un décalage.
Du coup, il faudrait que tu changes la classe a.mainmenu par a.mainmenu, span.gen strong { /////// etc
Ainsi, le float prendra aussi effet sur ce qui est en gras dans la barre de navigation du profil. A tester.
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez
le message qui vous a aidé pour que celui-ci soit mis en évidence.♢ Épinglez votre sujet en résolu
pour prévenir la modération.
Lixyr- Aidactive
-
Messages : 7387
Inscrit(e) le : 22/07/2010 -
Re: Petit soucis de mise en forme...
par Dr. Sam Jeu 27 Mar 2014 - 23:36
Je suis désolé,
Mais je ne comprend pas pourquoi envoyer le a.mainmenu en float: left; ? Ceci tasse tout les a.mainmenu et fait en sorte que dans le profil les lien se ramasse en mottons et les séparateur de lien à l'opposé.
peut-être que je n'ai pas bien compris ce qu'elle demandait
Mais je ne comprend pas pourquoi envoyer le a.mainmenu en float: left; ? Ceci tasse tout les a.mainmenu et fait en sorte que dans le profil les lien se ramasse en mottons et les séparateur de lien à l'opposé.
peut-être que je n'ai pas bien compris ce qu'elle demandait
Dr. Sam- *****
-
Messages : 894
Inscrit(e) le : 28/06/2012 -
Re: Petit soucis de mise en forme...
par Lixyr Ven 28 Mar 2014 - 0:37
Et bien, à la base les liens chevauchaient le texte au dessus. Si on veut modifier ça sans bouger le code initial, donc modifier l'apparence, il faut mettre les liens (qui sont de type inline) en type block pour pouvoir leur mettre un margin, qui va créer un léger espacement si on ne met pas une valeur trop élevée, et ainsi supprimer le chevauchement (je parle de margin car les autres solutions telles que le line-height ou même supprimer le padding ne fonctionnent pas, à priori c'était la seule solution possible dans ce cas-là). Mais étant donné que les liens sont de type block maintenant, ils se retrouvent les uns en dessous des autres. C'est pourquoi il faut un float:left, pour que les liens se retrouvent côte à côte. Ensuite, si ça ne s'affiche pas exactement comme on veut, il faut jouer avec les positions. Et faire en sorte que les liens sous hover soient également codés de la même manière (ainsi que les liens sélectionnés parfois, qui prennent une apparence différente) pour qu'il n'y ait pas de soucis d'affichage.
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez
le message qui vous a aidé pour que celui-ci soit mis en évidence.♢ Épinglez votre sujet en résolu
pour prévenir la modération.
Lixyr- Aidactive
-
Messages : 7387
Inscrit(e) le : 22/07/2010 -
Re: Petit soucis de mise en forme...
par Minki Ven 28 Mar 2014 - 13:48
Merci beaucoup!! le problème est complètement réglé et je n'ai pas d'autres problèmes!! 
Merci pour m'avoir également dit pour le lien profil, en étant connecté, il y avait aussi le problème!
Merci pour m'avoir également dit pour le lien profil, en étant connecté, il y avait aussi le problème!
Minki- Nouveau membre
-
Messages : 16
Inscrit(e) le : 16/03/2014 -
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum