NPDS : Gestion de contenu et de communauté

salut!
j ai commencé a me pencher sur le probleme

lorsque l on est sur un petit mobile on a pas forcement besoin de tout=> on n affiche pas ce dont on a pas besoin, ensuite il faut agandir la taille des differents textes, redimensioner pas mal des choses ( imaginez de gros doigts sur un petit clavier..^^)
dans le header du theme voulu il faut mettre
echo '<meta name="viewport" content="width=device-width, maximum-scale=1"/>';


(cela empeche le redimensionement automatique de la page)

et a la fin du style.css c est là que vous devez tout faire


/*la suite n agit que si l 'ecran fait moins de XXXpx    */
@media (max-width: 920px){
  /************************************************************************
Aspect Général du site : Font, Textes, Marges, etc...
*************************************************************************/
body {
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75em;
    
}

  #col_LB {
    /* on cache les blocs de gauches */
   display: none;
}

#col_RB { /* Là où se trouvent vos Blocs droits*/
    /* on cache les blocs de droites */
    display: none;
}
 #container {
    text-align:center;
    margin-left:0;
    margin-right:0;
    width:985px;
}
#header { /* Ici - Le Header Complet avec Image de Fond */
    background: !url(!../images/2header.jpg);
    background-size: 985px 180px;
    height: 180px;
    width: 985px;
}
#header .slogan { /*Positionnement du Slogan du Site dans le Header*/
    text-align: left;
    color: #ffff00;
    font-size: 4em;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 15px 0px 0px 0px;
}

#header .menuHG{ /*Positionnement du bloc menu Haut Gauche du Site dans le Header*/
        position: relative;
        text-align: left;
        line-height: 20px;
    color: #ffffff;
    font-size: 3.0em;
    font-weight: bold;
    font-family: Georgia, "Times New Roman", serif;
    padding: 0px 0px 0px 0px;
}
etc.....

en fait vous reecrivez un ccs complet

petit exemple pas fini ( je demarare à peine)

http://s460077810.onlinehome.fr/index.php?op=edito


pour vous aidez , je conseille "opera" et "opera mobile for windows"
qui aident bien :-)

voilà^^

cool / continu :-)

Je ne vois pas bien comment passer un bloc à la suite du bloc principal.
Regarde le thème Epure_02 et aussi BlogNpds.

Bon, comme je vois que pleins de monde se pose les questions des tablettes, mobiles, etc ....

J'envoie à qui me le demande le thème H5responsive....
Mon Mail Jireck - AT - Gmail DOT Com

J'envoie une copy à Dev.

Pour bien marcher, un theme responsive a besoin de :

de la ligne viewport, de media query et de point defini de rupture ainsi qu'une grille.

Pour etre correct, et ne pas toucher le core il faut rajouter
Le viewport dans le header_head.inc du thème.

D'ailleur, tout doit etre dans le repertoire themes/theme-responsive car sinon .... ca merdoie ...


Voila ... plus d'info sur demande

il ressemble pas mal à ce a quoi je suis arrivé a partir de "brown" ton menu est bcp plus attractif, je vais sans doute m'en servir merci :-)

en fait , meme si c est plus "bourin" (je repare des portes de garages, je ne suis pas programateur^^) je prefere ma facon de faire qui te laisse un site 100% normal lorsque tu es sur pc et un site sans chichi pour les portables...
pour ce que j en ai vu le tiens ressemble à un site fait pour un mobile qui s adapte au pc, j'ai fait l inverse mais bon toi tu as tout créé :=! alors que moi je ne joue qu'avec quelques portions de codes ;-)

non c'est un site fait pour Desktop qui s'adapte au mobiles ...

mais de toutes facons c'est la meme chose.
Faut que ce soit la meme chose...

Et non je n'ai pas tout créer ... j'ai fait du responsive... ce que ne peux pas par defaut les themes npds

slt,

pourtant, si j'ai bien lu les articles que tu m'as passés hier, et notamment ici:
http://www.siteduzero.com/informatique/tutoriels/qu-est-ce-que-le-responsive-web-design/les-enjeux-du-responsive
l'auteur dit bien, "pensez d'abord mobile".
:#

le slider nivo est dans le theme au fait ?

pas compris la question

oui, bartok, mais dans la mesure ou je ne suis pas bon en prog, je demarre d 'un theme tout fait...

nouvel exemple sur Permanent-Double-Side ce theme qui est fait dans les regles de l art ( les balises ne sont pas entre-croisé et si tu modifie le css d'une tu ne modifie que celle là) et bien en 10mn j'ai fait une adaptation

http://s460077810.onlinehome.fr/index.php?op=edito


ok, ce n'est pas fini, mais pour le temps passé le relutat est plus que correct, enfin je trouve...

recap des modifs:


echo '<meta name="viewport" content="width=device-width, maximum-scale=1"/>';
au debut du header du theme

et


@media (max-width: 990px){  copie de l actuel style.css que l on modifie a sa guise avec des display et autre width...}


que l on met a la fin du style.css ( max-width: 990px inclus ma tablette en 7 pouces, mais on peut repeter l'operation tant qu'on veut, en rajoutant autant de @media que l on veut toucher d'appareils..

C'est du responsive, mais sans codes compliqué :-)

dans ce que tu m'a envoyé - il est fait référence à un slider qui n'est pas dans l'archive je pense

Je viens de verifier mon archive; et je ne vois ^pas ou il fait reference a un slider ...

à la rigueur, j'ai oublie d'epurer le code dans detail-news où il y a un code add-this...

tu peux me dire où?

je viens de mettre un petit outil sur mon site de test, un convertisseur px-em et vice versa
pour faire du responsive c'est indispensable il me semble ..
ca peut servir :-) et tout cas moi ca me sert ^^
j ai bientot fini mon theme , il me restea cleaner les codes, à finir de tout mettre en "em" et a rajouter quelques commentaires

On attends avec impatience

slt

pas mieux, on a eu la même idée. ;-)
je vais re adapter "Brown" en ce sens, si j'y arrive

si c peut t aider, voilà mon header.html

<html>
<head>
    <title>border</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">
    <script type="text/!javascript!" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script type="text/!javascript!" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
</head>
<!-- partie superieure du header background" -->
<div id="header_top">

 </div>
<!-- Debut du header avec bg, slogan, date, tout positioné par CSS -->
<div id="header">
    
    <!-- classe header.slogan -->
    <div class="slogan">!slogan! 
    </div>
    <!-- classe header.date -->
    <div class="date">!date! 
    </div>
    <div class="online">!nb_online!
    </div>
        <!-- classe header.login -->
    <div class="login">
            <!-- si on est pas co on affiche -->
            no_groupe_text() !login! !/!
            groupe_text() Bonjour !member! !/! 
            <?php
            if(autorisation(1)) 
            {
            ?>
            <form action="user.php?op=logout"  method="post">
                  <input class="bouton_standard" value="Déconnexion" type="submit"><br>
            </form>    
            <?php
            }
            else{};
            ?>    
    </div><!-- fin de la classe login -->
        
    <!-- classe menu2 -->
    <ul id="menu2">
               <li><a href="index.php?op=edito">Acceuil</a></li>
            <li><a href="forum.php" >Forum</a></li>
            <li><a href="user.php">Votre compte</a></li>
            <li><a href="download.php" >Téléchargement</a></li>
            <li><a href="static.php?op=calulateur.html&npds=-1#convert" >Convertisseur px-em</a></li>
            no_groupe_text() <li><a href="user.php?op=only_newuser" >Créer un compte</a></li> !/!
            
    </ul>
    <!-- classe logo -->
    <div id="logo"> </div>
</div>
<!-- Fin du Bloc Header -->
</html>



le le css qui va avec (juste la partie header)


/************************************************************************
Parce qu'on utilise "em" en taille de font
*************************************************************************/

html {
    font-size: 0.75em;
}
/************************************************************************
Aspect Général du site : Font, Textes, Marges, etc...
*************************************************************************/

body {
    /*background: !url(!../images/body/bg_body.png) #fff repeat-x;*/
        background-color: #8ECDFB;

    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    margin: 0;
    text-align: center; /* pour corriger un bug de centrage IE */
    padding: 0;
}
#container {
    
    text-align:left;
    margin-left:auto;
    margin-right:auto;
    width:80em;
}


/************************************************************************
partie header
*************************************************************************/



#menu2                { float:left; position:absolute; top:10em; left:3em;  }

#menu2 a                { background:#FFF; color:#0000EF; border:#00005A 0.4em solid;  text-decoration:none; padding:0.833em;
                        margin-right:0.833em; border-radius:0.833em; -moz-border-radius:0.833em; -webkit-border-radius:0.833em;}
                    
#menu2 a:hover        { background:#0000EF; color:#FFF; border:#0099cc 0.4em solid; text-decoration:none; padding:0.833em;
                        margin-right:0.833em; border-radius:0.833em; -moz-border-radius:0.833em; -webkit-border-radius:0.833em;}

#menu2 a.selected    { background:#AAA; color:#FFF; border:#0000EF 0.4em solid; text-decoration:none; padding:0.833em;
                        margin-right:0.833em; border-radius:0.833em; -moz-border-radius:0.833em; -webkit-border-radius:0.833em;}
                    
#menu2 li            { float:left; }

#header_top{
    background:!url(!"../images/Header/header_top.png") no-repeat;
    height: 2.5em;
    width: 80em;
}

#header { /* Ici - Le Header Complet avec Image de Fond */
    background: !url(!../images/Header/header.jpg); 
    height: 14em;
    width: 80em;
}
/*Positionnement du logo dans le Header*/
div#logo {
  position: absolute;
  background-image: !url(!../images/logo/logo.png);
  background-repeat: no-repeat;
  width: 20em;
  height: 20em;
  padding: 0;
  left: 55em;
}
#header .login { /*Positionnement du bloc login dans le Header*/
    text-align: right;
    color: #FFFFFF;
    top: 1.80em;
    height:1em;
    padding-right:2.5em;
    padding-bottom:2.5em;
    font-size: 1.15em;
}

#header .slogan { /*Positionnement du Slogan du Site dans le Header*/
    position: absolute;
    color: #FFFFFF;
    top: 1.85em;
    left: 1.8em;
    font-size: 2.15em;
}
#header .date { /*Positionnement de la date dans Site dans le Header*/
    position: absolute;
    color: #FFFFFF;
    top: 0.85em;
    left: 36em;
    font-size: 1.70em;
}
#header .online { /*Positionnement du online dans le Header*/
    position: absolute;
    color: #FFFFFF;
    top: 1.30em;
    left: 5em;
    font-size: 1.20em;
}

comme tu le vois, tout est en em, une image pour le header se trouve forcement dans le dossier image/header...
et tout les éléments du header sont positionable ou tu veux en modifiant le css