Petit soucis de mise en forme...

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

Résolu Petit soucis de mise en forme...

Message par Minki le 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
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

Féminin
Messages : 16
Inscrit(e) le : 16/03/2014

http://ygfrenchfamily.forumactif.org/
Minki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Minki le Lun 24 Mar 2014 - 10:43

UP!

Minki
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 16/03/2014

http://ygfrenchfamily.forumactif.org/
Minki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Lixyr le Lun 24 Mar 2014 - 16:03

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

Bonjour Minki.

Pouvez-vous laisser le champ "membre" accessible aux invités, que je puisse jeter directement un coup d'oeil ?





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5647
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Minki le Lun 24 Mar 2014 - 21:46

Voilà, il est désormais accessible aux invités

Minki
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 16/03/2014

http://ygfrenchfamily.forumactif.org/
Minki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Lixyr le Lun 24 Mar 2014 - 21:50

Merci.

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;}





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5647
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Minki le Mar 25 Mar 2014 - 19:20

Merci beaucoup!!
Mais cela a entrainé un second problème...

Spoiler:

Minki
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 16/03/2014

http://ygfrenchfamily.forumactif.org/
Minki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Lixyr le Mar 25 Mar 2014 - 22:06

Petite erreur de ma part, la taille de 850% est à mettre sur .bodylinewidth :
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 ?





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5647
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Minki le 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

Féminin
Messages : 16
Inscrit(e) le : 16/03/2014

http://ygfrenchfamily.forumactif.org/
Minki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Lixyr le 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.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5647
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Minki le Mer 26 Mar 2014 - 22:16

Uniquement pour le profil.

Minki
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 16/03/2014

http://ygfrenchfamily.forumactif.org/
Minki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Lixyr le 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;
et si vous voulez rajouter une marge en haut, rajoutez aussi :
Code:
margin-top:2px;





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5647
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Minki le 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)

Minki
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 16/03/2014

http://ygfrenchfamily.forumactif.org/
Minki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Lixyr le 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.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5647
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Minki le 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://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 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

Féminin
Messages : 16
Inscrit(e) le : 16/03/2014

http://ygfrenchfamily.forumactif.org/
Minki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Dr. Sam le 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:
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 cheers

Cordialement,
Smile


Dernière édition par Dr. Sam le Jeu 27 Mar 2014 - 23:32, édité 2 fois

Dr. Sam
*****

Masculin
Messages : 894
Inscrit(e) le : 28/06/2012

http://www.fa-aide.com/
Dr. Sam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Lixyr le 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)

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.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5647
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Dr. Sam le 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 Shocked

Dr. Sam
*****

Masculin
Messages : 894
Inscrit(e) le : 28/06/2012

http://www.fa-aide.com/
Dr. Sam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Lixyr le 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.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5647
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit soucis de mise en forme...

Message par Minki le 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!! Very Happy

Merci pour m'avoir également dit pour le lien profil, en étant connecté, il y avait aussi le problème!

Minki
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 16/03/2014

http://ygfrenchfamily.forumactif.org/
Minki 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