Journal Intime.com

Un autre regard sur l'intime.

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

Annonce

Ce forum n'est plus ouvert aux inscriptions ou aux nouveaux messages pour cause de spam. Merci d'utiliser le forum du journal du site : site.journalintime.com/forum/

#1 14/05/2009 20h23

Lilifirefly
Qu'est-ce que je fait-là moi?

Agrandir le fond en mode HTML

Bonjour,

je voulais avoir un journal personnalisé, et comme je connais quelques trucs de HTML, je me suis débrouillée. Mais j'ai un problème.Je veux mettre un fond donc j'ai inséré en bas de la feuille de style : body { background: url(http://goodies.pcastuces.com/vignettes/1368.jpg) no-repeat top left ; }. Seulement, mon image est trop petite et reste en haut à gauche. Comment faire pour l'étirer sur toute la page ?

Merci d'avance !

#2 15/05/2009 11h41

BohwaZ
Administrateur
Lieu : A l'ouest, complètement
Inscription : 02/03/2004
Messages : 2 268
Site Web

Re : Agrandir le fond en mode HTML

Tu ne peux pas (encore) l'étirer, tu peux juste la faire se répéter. Regarde un peu ça :

Répéter l'image à l'horizontal, et l'aligner en haut à droite : body { background: url(...) repeat-x top right; }
Répéter l'image en vertical, et l'aligner en bas au milieu : body { background: url(...) repeat-y bottom center; }

Bon si t'as des notions d'anglais tu devrais comprendre le principe...

Plus d'infos : http://css.mammouthland.net/image_de_fond.php


bohwaz.net | Polyamour.info | Altermusique.org                                  image.png

Hors ligne

#3 15/05/2009 12h34

Lilifirefly
Qu'est-ce que je fait-là moi?

Re : Agrandir le fond en mode HTML

Daccord, merci smile

#4 15/05/2009 13h11

Lilifirefly
Qu'est-ce que je fait-là moi?

Re : Agrandir le fond en mode HTML

Encore un problème :S

La page est trop large. Il y a une barre en bas pour circuler !

#5 16/05/2009 12h03

BohwaZ
Administrateur
Lieu : A l'ouest, complètement
Inscription : 02/03/2004
Messages : 2 268
Site Web

Re : Agrandir le fond en mode HTML

Fait-là moins large ?


bohwaz.net | Polyamour.info | Altermusique.org                                  image.png

Hors ligne

#6 16/05/2009 17h31

Lilifirefly
Qu'est-ce que je fait-là moi?

Re : Agrandir le fond en mode HTML

En fait j'avais réussi mais maintenant, le sous-titre, le texte et le blog archives vont les un en dessous des autres. Je n'arrive pas à remettre les archives à gauche le texte vers la droite et le sous titre au dessus. Je ne sais pas si c'est les marges ou autre chose :S

Merci d'avance big_smile

#7 16/05/2009 17h34

Lilifirefly
Qu'est-ce que je fait-là moi?

Re : Agrandir le fond en mode HTML

Je ne sais pas si ça pourra servir.


/*
   Feuille de style CSS par défaut Journal Intime.com
   Utilisation autorisée seulement dans le cadre du site http://journalintime.com/ et ses journaux.

   Les commentaires sont compris entre / * et * / (sans espaces).
*/

/* Importe les éléments généraux pour le corps du texte */
@import url(/ecrire/corps.css);

/* Enlève les marges et espaces à tous les éléments */
* { margin: 0; padding: 0; }

/* Définition des paramètres de la page: police et image de fond */
body {
    font-family: Papyrus, Helvetica, sans-serif; font-size: 14px;
    background: url(http://framboise782.free.fr/Iles/041_plage.jpg) no-repeat top left;
}

/* On place le titre du journal */
h1 { font-size: 2em; padding: 1em; margin-left: 2em; margin-top: 1em; }
h1 a { font-size: 2.5em; color: #000033; text-decoration: none; }

/* On donne la largeur de la page et on la centre */
h1,#page { width: 30em; }

/* Pour le bloc menu: liens forum, pages indépendantes, archives */
#blocmenu {
    background: url(fond07.png) no-repeat bottom right;
    width: 5em; float: left;
    border: 0.2em solid #0099FF; border-left: yes;
    padding-right: 1em; margin-right: 1em;
    padding-left: 1.5em; padding-bottom: 5em;
}
#blocmenu ul { list-style-type: none; }
#menu a { display: inline-block; width: 100%; padding: 0.2em; text-decoration: underline; }
#menu a:hover { color: red; }
#menu,#liste_pages { margin-bottom: 1em; }

#liste_pages a,#archives a { display: inline-block; width: 100%; text-decoration: underline; }
#liste_pages a:hover,#archives a:hover { color: red; }


/* Corps de la page: sous-titre et contenu */
#corps { float: center; width: 35em; }
h2 { border-bottom: 0.1em dashed #0099FF; margin-bottom: 1em; }

/* Liste des écrits */
#liste_ecrits dd { margin-left: 2em; }
#liste_ecrits dd.date { font-style: italic; }
#liste_ecrits dd.intro { margin-bottom: 1em; }
#liste_ecrits dt { font-size: 1.2em; font-weight: bold; }

/* Le texte du journal (n'apparait que sur la page d'accueil) */
#texte_journal { border: 2px solid #0099FF; margin-bottom: 0,1em; padding: 0.5em;
    font-family: Papyrus,Helvetica, serif; background: url(fond00.gif) no-repeat bottom right; min-height: 5em; }

/* Les icônes: logo JI.com et "RSS Journal" */
#bas { padding-top: 1em; margin-left: 1em; list-style-type: none; float: left; width: 10em; clear: left; }
#bas li { margin-bottom: 1em; }
#bas a img { border: none; }

/* Mise en page de la liste des messages du forum */
#forum_page .pagination { margin-top: 1em; text-align: right; }
#forum_page .liste { width: 100%; border-collapse: collapse; border: 1px solid #ccc; }
#forum_page th { text-align: left; width: 43%; }
#forum_page th,#forum_page td {  padding: 0.2em;}
#forum_page .titre { border-bottom: 1px solid #ccc; font-weight: bold; }
#forum_page .pair { background: #eee; }
#forum_page .reponses { text-align: center; width: 15%; }
#forum_page .titre .reponses { font-size: 0.9em; }
#forum_page .auteur { width: 12%; }
#forum_page .dernier { width: 30%; }

/* Lecture d'un message du forum */
#forum_message .reponse h2,#forum_message .reponse .id { display: none; }
#forum_message .auteur { float: left; width: 9em; text-align: right; font-family: Arial, Helvetica, sans-serif; clear: left; }
#forum_message .texte { margin-left: 10em; border: 2px dashed #ccc; padding: 1em; }
#forum_message .reponse h3 { width: 9em; font-size: 0.9em; float: left; clear: left; }
#forum_message .reponse { clear: both; margin-bottom: 2em; }

/* Formulaire d'envoi de message du forum */
#fpost { margin-top: 3em; }
#fpost .submit { margin-top: 1em; clear: both;  }
#fpost dl { width: 60%; float: left; }
#fpost input[type=text],#fpost textarea { width: 100%; }
#fpost .tip { margin-top: 12em; margin-left: 65%; width: 20%; }

/* Mise en forme du bouton RSS */
.rss .btn { display: inline; font-family: Arial, Helvetica, sans-serif; font-size: 10px; padding: 1px 0; border: 1px solid #666; margin: 0; text-decoration: none; background-color: #fff; }
.rss .btnFront { display: inline; background-color: #f90; color: #fff; padding: 0 2px; border: 1px solid #fff; border-top: 0; border-bottom: 0; margin: 0px; }
.rss .btnText { display: inline; background-color: #898e79; color: #fff; padding: 0 2px; border: 0; border-right: 1px solid #fff; margin: 0px; }
#corps, #corps * { font-family: Papyrus, Helvetica, mono; }
background-position:100% 0%

#8 17/05/2009 00h11

BohwaZ
Administrateur
Lieu : A l'ouest, complètement
Inscription : 02/03/2004
Messages : 2 268
Site Web

Re : Agrandir le fond en mode HTML

Tu peux ptet mettre l'adresse de ton journal ça ira plus vite ^^


bohwaz.net | Polyamour.info | Altermusique.org                                  image.png

Hors ligne

#9 19/05/2009 18h51

Lilifirefly
Qu'est-ce que je fait-là moi?

Re : Agrandir le fond en mode HTML

#10 21/05/2009 16h20

BohwaZ
Administrateur
Lieu : A l'ouest, complètement
Inscription : 02/03/2004
Messages : 2 268
Site Web

Re : Agrandir le fond en mode HTML

Bizarre, je sais pas trop ce que t'as fait, essaye de refaire des float ?


bohwaz.net | Polyamour.info | Altermusique.org                                  image.png

Hors ligne

#11 25/05/2009 17h40

Lilifirefly
Qu'est-ce que je fait-là moi?

Re : Agrandir le fond en mode HTML

J'ai essayé mais ça ne marche pas. Je crois que je vais remettre les fichiers de départ et je vais recommencer, vu que maintenant, je sais ce que je dois bidouiller big_smile

#12 28/10/2013 21h04

Crosmoz
Qu'est-ce que je fait-là moi?

Re : Agrandir le fond en mode HTML

Je sais que je suis pas dans les temps, mais ça peux toujours servir. La balise css est

body
{
    background-size: ****px;
}

Voila !

Pied de page des forums