Archives FluxBB.fr

Les archives de FluxBB.fr

Recherche rapide

Vous n'êtes pas identifié(e).

Version 1.4.13 : [.tar.gz][.zip] (maj 20/10/2014)
Pack langue française pour 1.4.x : [.zip] (maj 06/01/2012)

Branche 1.5.x : fluxbb.org

Version 1.2.24 fr (entièrement en français) : [.zip] (maj 26/08/2011)
Pack langue française pour 1.2.x : [.zip] [.rar] (maj 15/10/2006)

Vous avez un problème ?
Avant de poser votre question sur les forums d'entraide nous vous invitons à consulter :

#1 06-03-2008 12:30:14

lolo7830
Habitué

Ajout bloc latéral gauche

Bonjour a tous,

Etant tres novice en Php, j'ai besoin , si possible, du coup de main d'un habitué.

J'ai mis en place récemment un forum : http://www.creons-nous.com/

Dans l'Aide, j'ai trouvé comment faire une bannière latérale et j'y ai mis des images et des liens (c'était pas gagné!!  siffle)

Maintenant, autre défi, ajouter sous cette bannière latérale gauche, un blok supplémentaire dans le meme etat d'esprit que la bannière, afin d'y mettre une image et un lien qui renverra vers l'annuaire...Ce sera plus percutant coté visuel plutot que le lien soit inscrit dans un sous-forum, non?

D'avance merci de vos aimables contributions,

Salutations

Laurent/

Hors ligne

#2 06-03-2008 19:36:25

Ti pierre
Habitué très actif

Re : Ajout bloc latéral gauche

Dans l'aide on te dit comment ajouter un bloc :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<pun_head>
<style type="text/css">
    #left {
        width: 120px;
        float: left;
    }
    #main {
        margin-left: 130px;
    }
    #container {
        width: 100%;
        float: right;
        margin-left: -120px;
    }
</style>
</head>
<body>

<div id="punwrap">
<div id="pun<pun_page>" class="pun">

<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
        </div>
        <pun_navlinks>
        <pun_status>
    </div>
</div>

<div id="container">
    <div id="main">
    
        <pun_announcement>
    
        <pun_main>
        
    </div>    
</div>

<div id="left">   
    <div class="block">
        <h2 class="block2"><span>Menu 1</span></h2>
        <div class="box">
            <div class="inbox">
                <ul>
                    <li><a href="index.php">Lien 1</a></li>
                    <li><a href="index.php">Lien 2</a></li>
                    <li><a href="index.php">Lien 3</a></li>
                    <li><a href="index.php">Lien 4</a></li>
                </ul>        
            </div>
        </div>
    </div>
</div>

<div class="clearer"></div>

<pun_footer>

</div>
</div>

</body>
</html>

A toi de répeter le code autant de fois que necessaires selon le nombre de bloc que tu désire, exemple de code pour 2 blocs :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<pun_head>
<style type="text/css">
    #left {
        width: 120px;
        float: left;
    }
    #main {
        margin-left: 130px;
    }
    #container {
        width: 100%;
        float: right;
        margin-left: -120px;
    }
</style>
</head>
<body>

<div id="punwrap">
<div id="pun<pun_page>" class="pun">

<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
        </div>
        <pun_navlinks>
        <pun_status>
    </div>
</div>

<div id="container">
    <div id="main">
    
        <pun_announcement>
    
        <pun_main>
        
    </div>    
</div>

<div id="left">   
    <div class="block">
        <h2 class="block2"><span>Menu 1</span></h2>
        <div class="box">
            <div class="inbox">
                <ul>
                    <li><a href="index.php">Lien 1</a></li>
                    <li><a href="index.php">Lien 2</a></li>
                    <li><a href="index.php">Lien 3</a></li>
                    <li><a href="index.php">Lien 4</a></li>
                </ul>        
            </div>
        </div>
    </div>
    <div class="block">
        <h2 class="block2"><span>Menu 2</span></h2>
        <div class="box">
            <div class="inbox">
                <ul>
                    <li><a href="index.php">Lien 1</a></li>
                    <li><a href="index.php">Lien 2</a></li>
                    <li><a href="index.php">Lien 3</a></li>
                    <li><a href="index.php">Lien 4</a></li>
                </ul>        
            </div>
        </div>
    </div>
</div>

<div class="clearer"></div>

<pun_footer>

</div>
</div>

</body>
</html>

Cela répond à ta demande ?


cf Mpok : Nous ne faisons pas le travail à votre place mais nous prenons le temps de vous montrer le chemin. Merci de lire ce que l'on vous dit et de réfléchir avant de re-demander une explication.

Hors ligne

#3 06-03-2008 20:17:32

Amigo41
Habitué

Re : Ajout bloc latéral gauche

moi je veut un bloc annonce mais a droite du forum pour mettre une pub

Hors ligne

#4 06-03-2008 20:34:05

lolo7830
Habitué

Re : Ajout bloc latéral gauche

Ti Pierre

Ca ressemble a ce que j'ai tenté cet apres midi
Et je t'en remercie!!

Mais ce que j'avais fait avait décalé tout le bas du forum...Donc je referais une tentative en soirée ou dans la nuit au calme

Je te tiens au courant...

Bonne soirée et ad taleur ou a +

Laurent

Hors ligne

#5 10-03-2008 19:21:09

lolo7830
Habitué

Re : Ajout bloc latéral gauche

Ti Pierre,

Merci pour ton coup de main...ca marche impecc, exactement ce que je souhaitais!!

Pourtant j'avais fait quasi la meme manip, mais bon, j'ai du me gourer d'un espace ou d'une acolade ou d'un Div!

Salutations/
...Et encore merci!
Laurent

Hors ligne

#6 25-10-2009 01:31:25

Guims
Habitué

Re : Ajout bloc latéral gauche

Bonjour,

Je me permet de faire remonter ce topic,je l'ai mit sur mon forum ,en index tout va bien smile  mais en viewforum et viewtopic les blocs se mettent  entre le footer et la fin du topic ou des posts (pour le viewforum).le décalage de gauche y est bien mais ceux ni vont pas.

Enfin juste pour savoir si c'est possible d'implanter les blocs juste en index ?

Hors ligne

#7 10-12-2009 17:42:40

Guims
Habitué

Re : Ajout bloc latéral gauche

Re bonjour,

Bon maintenant avec pas mal de temps passé dessus je n'ai plus de probleme en index et viewforum,regardez les screens :

index : ici
viewforum : ici

Mais je ne comprends pas pourquoi en viewtopic les blocs sont systématiquement en bas huh

viewtopic : ici

je met mon le fichier main.tpl mais je ne pense pas que ça vienne de la :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="<pun_content_direction>">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />



<pun_head>

<link rel="icon" type="image/gif" href="/favicon.gif" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /><![endif]-->
<link rel="alternate" type="application/rss+xml" href="extern.php?action=new&type=rss" title="FLUX RSS DE MON FORUM" />
<link rel="stylesheet" type="text/css" href="http://www.streamguims.com/box/src/css/shadowbox.css">

<script type="text/javascript" src="http://www.streamguims.com/box/src/js/lib/yui-utilities.js"></script>

<script type="text/javascript" src="http://www.streamguims.com/box/src/js/adapter/shadowbox-yui.js"></script>

<script type="text/javascript" src="http://www.streamguims.com/box/src/js/shadowbox.js"></script>

<script type="text/javascript">

window.onload = function(){

Shadowbox.init();

};

</script>

<script type='text/javascript' language='javascript' src='disclaimer.js'></script>

<style type="text/css">
    #left {
        width: 120px;
        float: left;
    }
    #main {
        margin-left: 130px;
    }
    #container {
        width: 100%;
        float: right;
        margin-left: -120px;
    }
</style>


</head>
<body>

<div id="punwrap">
<div id="pun<pun_page>" 
<div class="pun">

<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
            <br />
            <form action="search.php" method="get">
                <div id="recherche">

                </div>
            </form>
        </div>
        <br /><br /><br /><br /><br />
        <pun_navlinks>
        <pun_status>
    </div>
</div>
<pun_login>
<pun_JS-menu>
<div id="container">
    <div id="main">
<pun_announcement>


    
<pun_main>
    </div>    
</div>

<div id="left">   
    <div class="block">
        <h2 class="block2"><span>Menu 1</span></h2>
        <div class="box">
            <div class="inbox">
                <ul>
                    <li><a href="index.php">Lien 1</a></li>
                    <li><a href="index.php">Lien 2</a></li>
                    <li><a href="index.php">Lien 3</a></li>
                    <li><a href="index.php">Lien 4</a></li>
                </ul>        
            </div>
        </div>
    </div>

    <div class="block">
        <h2 class="block2"><span>Menu 2</span></h2>
        <div class="box">
            <div class="inbox">
                <ul>
                    <li><a href="index.php">Lien 1</a></li>
                    <li><a href="index.php">Lien 2</a></li>
                    <li><a href="index.php">Lien 3</a></li>
                    <li><a href="index.php">Lien 4</a></li>
                </ul>        
            </div>
        </div>
    </div>
</div>

<div class="clearer"></div>
<pun_footer>
</div>
</div>
</body>
</html>

Si quelqu'un peut m'aider ce serais franchement top ...

merci

Dernière modification par Guims (10-12-2009 17:43:30)

Hors ligne

#8 10-12-2009 22:26:06

Mpok
Néo Admin

Re : Ajout bloc latéral gauche

1) Puisque tu as passé "pas mal de temps" dessus, tu devrais savoir qu'un screenshot NE SERT A RIEN !
Dire "regardez les screens" est une aberration : ce n'est pas parce que visuellement (qui plus est dans UN navigateur) ta page "semble" bonne qu'elle l'est forcément...
D'autre part, un lien html direct nous permet (à nous, ceux qui veulent t'aider) de trouver plus facilement tes pbms. JAMAIS un pbm html/css (ce qui est le cas ici) n'a été résolu par des screenshots.......

2) Heureusement, tu as publié ton main.tpl.
Et cela même si tu "ne penses pas que ça vienne de là"...
Pour ma part, je pense qu'à 90% de chance, cela vient de là... siffle
Cela dépend un peu du css associé (que je n'ai pas, donc j'intuite..).
Dans le css, je suppose que ton bloc #left est déclaré avec la propriété "float: left" (parce que c'est comme cela qu'il devrait logiquement l'être).
EDIT : si tu as suivi les excellents conseils de Ti Pierre, il DOIT l'être.
Ce que Ti Pierre a omis de te dire, c'est que la propriété css "float" (left ou right) signifie que le bloc sera décalé (à gauche ou à droite) DU FLUX et extrait de celui-ci. Le "flux" étant l'affichage 'global' de la page. Il FAUT donc que le bloc à extraire du flux apparaisse AVANT le reste. C'est logique.
Dans ton cas, le bloc "#left" est APRES le bloc "pun_main", C'EST PAS BON...
Il faut donc déplacer tout ton bloc "left" avant "<pun_main>"....

A tester, la position qui est la meilleure pour toi (selon le menu et tes préférences).


Life is a struggle, programming is a suffer.

Hors ligne

#9 10-12-2009 23:46:20

oldie-2
Habitué très actif

Re : Ajout bloc latéral gauche

Mpok a écrit :

Ce que Ti Pierre a omis de te dire, c'est que la propriété css "float" (left ou right) signifie que le bloc sera décalé (à gauche ou à droite) DU FLUX et extrait de celui-ci. Le "flux" étant l'affichage 'global' de la page. Il FAUT donc que le bloc à extraire du flux apparaisse AVANT le reste. C'est logique.

Même si c'est un peu plus compliqué que cela, cest super bien expliqué ... bravo !!!

Je dis que c'est peu plus compliqué car l'extraction des float du flux se fait container par container et que l'affichage des "float" se fait à la fin de l'affichage de son container et non à la fin de la page.

Autre chose à savoir, s'il y a plusieurs "float: right" dans un container, il faut placer le plus à droite en premier, puis celui qui précède le plus à droite et ainsi de suite.

Je crois aussi qu'il faut mettre les "float: right" avant les "float: left" mais je n'en suis pas sûr.

Hors ligne

#10 11-12-2009 00:51:34

Mpok
Néo Admin

Re : Ajout bloc latéral gauche

oldie-2 a écrit :

Je dis que c'est peu plus compliqué car l'extraction des float du flux se fait container par container et que l'affichage des "float" se fait à la fin de l'affichage de son container et non à la fin de la page.

Euh... ok... mais je n'ai pas compris en quoi c'était différent de ce que j'avais dit (ou peut-être n'ai-je pas employé les bons termes).

oldie-2 a écrit :

Autre chose à savoir, s'il y a plusieurs "float: right" dans un container, il faut placer le plus à droite en premier, puis celui qui précède le plus à droite et ainsi de suite.

Ah !  (même si ce cas est plus rare) Bien vu ! C'est un peu comme le positionnement des Widget en Gtk... (pour ceux qui connaissent).

oldie-2 a écrit :

Je crois aussi qu'il faut mettre les "float: right" avant les "float: left" mais je n'en suis pas sûr.

Alors là, je ne suis pas plus sûr que toi, mais j'en doute FORTEMENT...


Life is a struggle, programming is a suffer.

Hors ligne

#11 11-12-2009 11:55:22

Guims
Habitué

Re : Ajout bloc latéral gauche

Bonjour,

Mpok,dans le template que j'ai mit plus haut il y a le bout de code CSS associé aux blocs ...

Enfin bref,désoler pour ces screens,la prochaine fois je proposerais le lien de mon forum à la personne qui souhaite m'aider.

En tous cas,merci à vous deux,la c'est vraiment explicite,j'y suis arriver en 10mn et croyez moi qu'hier j'ai essayer mainte fois happy

Encore merci,ça déchire avec de telles explications ...

EDIT: bon je vois que j'ai encore un soucis,les liens sont cliquable dans le premier bloc mais pas sur le deuxième.

je vous remet mon template,si vous pouvez me dire ce qui cloche,car avec un seul bloc ça fonctionne nickel.Comprend pas là...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="<pun_content_direction>">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />



<pun_head>

<link rel="icon" type="image/gif" href="/favicon.gif" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /><![endif]-->
<link rel="alternate" type="application/rss+xml" href="extern.php?action=new&type=rss" title="FLUX RSS DE MON FORUM" />
<link rel="stylesheet" type="text/css" href="http://www.streamguims.com/box/src/css/shadowbox.css" />

<script type="text/javascript" src="http://www.streamguims.com/box/src/js/lib/yui-utilities.js"></script>

<script type="text/javascript" src="http://www.streamguims.com/box/src/js/adapter/shadowbox-yui.js"></script>

<script type="text/javascript" src="http://www.streamguims.com/box/src/js/shadowbox.js"></script>

<script type="text/javascript">

window.onload = function(){

Shadowbox.init();

};

</script>

<script type='text/javascript' language='javascript' src='disclaimer.js'></script>

<style type="text/css">
    #left {
        width: 120px;
        float: left;
    }

    #main {
        margin-left: 130px;
    }
    #container {
        width: 100%;
        float: right;
        margin-left: -120px;
    }
</style>


</head>
<body>

<div id="punwrap">
<div id="pun<pun_page>" class="pun">

<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
            <br />
            <form action="search.php" method="get">
                <div id="recherche">

                </div>
            </form>
        </div>
        <br /><br /><br /><br /><br />
        <pun_navlinks>
        <pun_status>
    </div>
</div>
<pun_login>
<pun_JS-menu>

<div id="container">
    <div id="main">
    
<pun_announcement>

    </div>    
</div>

<div id="left">   
    <div class="block">
        <h2 class="block2"><span><center>Menu</center></span></h2>
        <div class="box">
            <div class="inbox">
                <ul>
                    <li><a href="index.php">Lien 1</a></li>
                    <li><a href="index.php">Lien 2</a></li>
                    <li><a href="index.php">Lien 3</a></li>
                </ul>        
            </div>
        </div>
    </div>


    <div class="block">
        <h2 class="block2"><span><center>Menu</center></span></h2>
        <div class="box">
            <div class="inbox">
                <ul>
                    <li><a href="index.php">Lien 1</a></li>
                    <li><a href="index.php">Lien 2</a></li>
                    <li><a href="index.php">Lien 3</a></li>
                    <li><a href="index.php">Lien 4</a></li>
                </ul>        
            </div>
        </div>
    </div>
</div>

<div id="container">
    <div id="main">
    
<pun_main>

    </div>    
</div>

<div class="clearer"></div>
<pun_footer>
</div>
</div>
</body>
</html>

Dernière modification par Guims (11-12-2009 12:46:10)

Hors ligne

Pied de page des forums