• Résolu Faire une page sur toute la largeur


    Dimanche 7 Juillet 2013 à 18:03
    Serviteur-ofs

    OK pour CSS, mais pourquoi l'avoir proposé ici s'il n'est bon que pour ' Omega-Manga '

    Merci pour votre réponse passé et à venir

    Dimanche 7 Juillet 2013 à 18:37
    Mike GMZ

    Il me semble répondre à une demande bien précise de la part de lokposs,
    " ..faire une page sur toute la longueur .." pour son blog ' Omega-Manga '
    (ou autre ...), non ???????
    Par contre ton post n'est pas vraiment indispensable (il y a le forum 'cafataria et bla..bla..bla..pour ça) à moins que tu juges ton intervention utile pour notre blogueur ...Lokposs !!!!!!!!!!!!!!!!!!!!!!!!!!!

    Dimanche 7 Juillet 2013 à 18:38
    lulette

    OFS ... re bonjour

    Mike a répondu à la demande précise de lokposs,  en lui donnant un exemple avec un de ses articles à lui

    Il a même écrit plus bas :

    => le bon code pour lokposs: <=

    li, #module_article20199861 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;}
     
    lulette> c'est le N° d'article en page d'accueil de Omega-Manga.
    Voir image ici.
    Attention: il faut que cet article comporte des liens vers d'autres directions, sinon on reste bloqué sur la page....!

     

    en réponse à ma propre question, car je voulais confirmer que le n° de l'article dans le code devait être changé et remplacé par celui de l'article que toi ou moi écririons pour faire cette page

    le reste du code est bon pour tout le monde

    T'as plus qu'à faire ta page ou ton article (avec tous les boutons et les liens, surtout!), à repérer ton numéro (si tu as mozilla firefox, place ta souris au niveau de l'article, clic droit, "examiner l'élément") et à copier le code dans le css du blog

    Je t'ai indiqué ce fil pour que tu y trouves de l'aide par rapport à une demande que tu me faisais, encore faut-il lire, puis s'immiscer dans la conversation avec tact, tu comprends? (par exemple, tu ne dis jamais bonjour, ou salut, ou coucou)

    EDIT :

    j'ai fait l'essai sur mon blog d'essai

    - j'ai créé un article en n'oubliant pas d'y mettre au moins un lien vers un rubrique

    - avec mozilla firefox, j'ai repéré l'identifiant de l'article et ai adapté le code de Mike; ce qui a donné ce code

    li#module_article93475399 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    }

    et ça en image, bouh!

     

    alors j'ai modifié le code encore

    li#module_article93475399 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color:white;
    height:768px;}

    en rajoutant un fond blanc, et en allongeant le fond en hauteur (height:auto, n'a pas marché)

    et ça donne ça

    en revanche, comment enlever les infos article uniquement sur cet article? et comment faire en sorte que le texte ne se colle pas au bord de l'écran? une histoire de "padding"?

    En tout cas, merci Mike, ce me sera utile pour un autre blog

     

    EDIT 2 : j'ai trouvé, hé hé!

    j'ai rajouté padding:25px; à l'intérieur du premier code

    li#module_article93475399 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color:white;
    height:768px;
    padding:25px;
    }
     

     

    et ce code pour virer la ligne d'infos (par lulette dans bidule à telle heure)


    li#module_article93475399 .article_info {display:none;}

    Dimanche 7 Juillet 2013 à 22:01
    Serviteur-ofs

    Lulette Merci et Merci < Mike, mes excuses si j'ai manqué de civilité, ce n'est pas dans mes habitudes.

    Je regarderai tout ça attentivement...  je ne suis pas certain d'avoir tout bien compris... je vous reviendrai surement encore merci

    Dimanche 7 Juillet 2013 à 23:01
    lokposs

    XD tout le monde s'embrouille pour pas grand chose ^^ Je voulais simplement vous remercier ! ( OFS : Pour voir le numéro de ton article il te suffit de faire clic droit sur le titre de ton article et aller sur inspecter l'élément ! )

    Dimanche 7 Juillet 2013 à 23:36
    Mike GMZ

    @Lulette >

    Evidement la hauteur de l' article dépend de son contenu. Il faudra ajouter une hauteur minimum pour un article peu fourni. J'opterais pour un 'min-height' plutôt qu'un 'height' car si ton article dépasse 768px une srollbar verticale va apparaître.
    Dans ton cas c'est un test, mais pour un article "réel" mieux vaut le préparer (couleur de fond, image, titre centré etc...)
    Sinon ton code est bon.
    Je remets le code que j'ai proposé à Lokposs pour faire une page maintenance:

    <div style="position: fixed; top: 0px; left: 0px; background-color:rgba(0, 0, 0, 0.67);; width: 100%; height: 100%; font-size: 30px; color: red; z-index: 1;"><span style="position: absolute; top: 30%; left: 40%; border: 4px solid yellow; padding: 10px;background-color:black;box-shadow:6px 6px 10px grey;" data-mce-mark="1"><span style="font-size: xx-large;" data-mce-mark="1">Site Ferm&eacute;</span><br /><span style="color: #ff9900; font-size: x-large;" data-mce-mark="1">Merci pour votre attention</span></span></div>

    Dans ce cas il faudra utiliser: Contenu > Gérer les rubriques > Editer/Supprimer pour avoir accès au reste du blog. (c'est un code basique à modiifier à volonté)

    Lundi 8 Juillet 2013 à 00:01
    lulette

    D'accord!

    j'ai testé un height:100%, j'aime mieux

    Mille mercis pour tout!

    Lundi 8 Juillet 2013 à 01:26
    lokposs

    Je n'ai pas utilisé tout votre tralala désolé .... mais : Je garde ceci pour ma rubrique MANFRA ! D'ici là vous pouvez venir voir mon nouveau thème qui vient d'être mis en ligne !

     

    Lundi 8 Juillet 2013 à 05:32
    Serviteur-ofs

    Merci lokposs, et pour Lulette, je travaille à ma page et dès que je serai à peu près pret, je te recontacte, encore merci.

    Bonjour, C'est Réussi Merci Lulette et Mike et locposs, vous pouvez voir

    ================================

     

    15 oct 2013

    Bonjour, j'ai réussi une première fois, mais là je désire faire un autre site et je n'y arrive plus. le CSS ne semble pas vouloir s'enregistrer ?

    Voici l'adresse d'une page test à modifier pour la rendre SANS colonne

    http://serviteur-ofs.eklablog.com/bienvenue-p671537

     

    Merci de m'aider encore!

    Lundi 21 Octobre 2013 à 16:43
    lulette

    Coucou

    Pourtant, il suffisait de relire les derniers messages ci-dessus  :)

     

     

     

    li#module_article93475399 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color:white;
    height:768px;
    padding:25px;
    }
     

     

     

    et ce code pour virer la ligne d'infos (par lulette dans bidule à telle heure)

     


    li#module_article93475399 .article_info {display:none;}

    Donc, si je me souviens bien, il te reste juste à trouver l'identifiant de ton nouvel article (futur accueil pleine page) pour remplacer ce qui est orange par le nouveau numéro => clic droit n'importe où dans ton article et "inspecter l'élément", tu vas retrouver le n°

    N'oublie surtout pas d'avoir créé tous les liens vers les autres parties du blog avant d'installer le code!




    Vous devez être membre pour poster un message.