18041 sujets

Questions générales et questions de débutants

L'image de fond.

Pages :
Bonjour à tous, gros débutant en CSS, je commence à jouer avec ce langage super sympa.
Je m'applique sur un brouillon qui risque bien de devenir un jour un vrai site, si je ne renonce pas.
En attendant je commence à déjà à rencontrer quelques difficultés mineures, mais gênantes.
Il se trouve que sur mon brouillon j'ai déterminé 3 zones distinctes.
Un haut de page, une zone de contenu, et le pied de page.
http://octokom.free.fr/HTML/Edito.html
Ma fiche se style est ici : http://octokom.free.fr/style.css
Dans ma zone de contenu, il me plairait de mettre une image de fond répétée.
Ayant plus ou moins saisi la manière de faire, j'ai donc inséré dans ma fiche de style : 
.contenu {
background-image:url(./Images/Interface/rat.jpg;);

Cela dit il n'y a rien à faire, mon fond ne s'affiche pas.
En outre si je visionne mon site en local, il n'y a aucun soucis, l'image de fond s'affiche.

Quelqu'un aurait un petite idée ? °_O
Bonjour

J'ai regardé ton code. Tu devrais utiliser des id plutôt que des classes pour les divs définissant des blocs (hautdepage, contenu...)
http://www.alsacreations.com/article/lire/535-quelle-est-la-difference-entre-une-classe-class-et-un-id.html

Sinon essaie comme ceci
background-image:url("/Images/Interface/rat.jpg");


Vérifie le chemin d'accès également...
http://www.alsacreations.com/astuce/lire/78-quelle-est-la-diffrence-entre-les-chemins-relatifs-et-absolus.html
Modifié par thelma (02 Oct 2010 - 16:17)
Au fil de mes essais, en local, cette image de fond n'apparaît même plus, qu'importe la manière dont j'écris le code.
De plus il va falloir maintenant me pencher sur la différence entre <div> et <id> ... Elle va être longue cette journée Smiley smile
a écrit :
De plus il va falloir maintenant me pencher sur la différence entre <div> et <id>


En fait c'est plutôt entre <div id=""></div> et <div class=""></div> qu'il faut choisir.
En Css
-une id s'écrit #nomdelid
-une classe : .nomdelaclasse
L'article explique très bien.

Fais également attention de bien fermer les div. Les div table et contenu ne le sont pas pour l'instant.
Modifié par thelma (02 Oct 2010 - 16:30)
Je me permet de rajouter une question, est-il possible de gérer la taille de la police simplement dans la zone de contenu, sans influencer le reste ?
oui avec une classe justement.

<p class="nomdelaclasse">blajdskldkql</p> 



p.nomdelaclasse
{
font-size:taille choisie avec son unité (px, %, em...) ;
}


Là tu trouveras aussi des infos dans la partie apprendre du site.
Administrateur
Bonjour,

tu trouveras dans les Tutoriels, une explication de la différence entre classe et identifiant, entre autres. Dans chaque catégorie, clique sur 'Tous les documents ...' et commence par le dernier tuto classé http://www.alsacreations.com/css/img/doc_level_1.png (le plus ancien en fait) et en les lisant plutôt du plus ancien au plus récent (de bas en haut).
Modifié par Felipe (02 Oct 2010 - 17:14)
Je rajoute encore une autre question vis à vis de la mise en forme ...
Il se trouve que dans mon champs "contenu" qui se trouve être toute la zone rayée,
le texte est aligné à gauche. Cela dit, j'aimerais que la petite icone en .gif que j'ai crée soit centrée au milieu. Par quel biais je peux centrer cette image, sachant qu'elle est soumise à la balise : 
text-align: left;
contenu dans ma fiche de style ?
Je ne veux pas casser ton enthousiasme. Le site est bien parti. Simplement je crois que tu pars du mauvais pied en utilisant les tableaux pour la mise en page. Cette pratique tend à disparaître aujourd'hui et on préconise de mettre en page en utilisant les feuilles de style. Quitte à démarrer un site et puisque tu as un peu de temps, je te conseille de reprendre ce que tu as fait sans utiliser les tableaux. Ça va de demander un petit effort d'apprentissage mais le site n'en sera que mieux. Les tableaux vont te poser plus de soucis au final.
Modifié par thelma (02 Oct 2010 - 19:09)
Hello

Tu peut cibler un objet en CSS
Dans ton cas il s'agit d'un icone : donc <img />

Avec un id du genre : img#centre { . . . instructions . . . }
Mais si tu veut cibler en particulier : #centre { . . . instruction . . . }

++
Modifié par zardoz (02 Oct 2010 - 19:15)
Thelma. Je te remercie pour ce précieux conseil.
J'ai donc supprimé mon tableau, et je vais tenter de jouer avec une mise en page uniquement en CSS. Dès lors, je vais me poser un millions de questions. Puis-je déterminer une zone pour que mon texte ne dépassera pas ... (Avec des marges ?) Comment gérer des exceptions stylistiques, genre une lettre d'une autre couleur, un caractère en gras ...
Bref, je vais devoir faire pas mal de recherches. Smiley smile

Zardoz, je pige bien que l'on peut donc cibler un élément, mais cette balise est à inscrire dans la fiche de style ou sur la page ?
Est-ce que tu aurais un exemple d'une balise rédigée complètement s'il te plait ? Smiley smile
a écrit :
Puis-je déterminer une zone pour que mon texte ne dépassera pas ... (Avec des marges ?)


Ton texte est déjà contenu dans une div <div class="contenu"></div>

Pour créer une marge entre le bord du bloc et le contenu (le texte), on utilise la propriété padding.
Hello world

Il est sûrement mieux d'importer un fichier CSS. Avec « link » évidemment.
Ce ficher nous amène toujours à une réflexion : en particulier la mise en forme.

Le CSS est puissant. Bien utiliser c'est up.
Le HTML ne saurais s'en passé. Sans le CSS le HTML n'est rien : sauf derrière les rideaux.

++
Je continue à poser des questions, car en fait, il est plus facile d'apprendre avec les coups de pouces sur le forum, qu'en lisant des tutos. Smiley smile

J'aimerais savoir pourquoi, dans certains cas les blocs se chevauchent, et des fois non.

Par exemple sur mon édito : Je me suis démerdé à avoir un bloc contenant une image de fond correspondant au haut du site. La partie correspondant au menu, un bloc pour la bannière avec le petit titre édito (qui est très boiteuse) composée d'une couleur de fond et d'une image insérée dans la page :
-Compris dans la fiche de Style :
.enteteedito {
    font-size:11pt;
    height:40px;
    width: 800px;
    background:url(Images/Interface/rat.jpg)
    margin-left: auto;
    margin-top:auto;
    margin-right: auto;
    margin-bottom: auto;
    }

-Compris dans la page :
<div class="enteteedito"><img src="../Images/Interface/Edito/bas-entete.png" width="800" height="32" /></div>


Cet élément là se décale facilement entre le fond et l'image.

Il y a un bloc vide, avec une simple couleur, et dans la page j'ai intégré l'image correspondant au raccourcis des archives des Editos.
Puis le pied de page.

La grosse galère se situe entre le menu, mon bloc d'entête et mon bloc de contenu.
Pourquoi ils ne sont pas fixes, pourquoi ont-ils tendance à se chevaucher ou au contraire à présenter des espaces entre eux. Il me faut déconstruire et reconstruire pour arriver sans trop savoir comment à un résultat convenable.
Modifié par Mr.Gerald (02 Oct 2010 - 23:02)
Allo @the world

Bon d'ac t'a cibler à ce que je vois.

Mais c'est pas suffisant MDR.
Vàs faire un tour du côté de l'héritage. Smiley smile

++
Modifié par zardoz (02 Oct 2010 - 23:40)
Je triche encore, j'ai calé mes gif dans un tableau afin de le centrer.
Je n'ai pas encore saisis comment ça se goupille.
Est-ce que je peux, dans ma fiche css ajouter une balise qui va faire que dans la zone "contenu"
de mes pages, mes gif vont se centrer tout seul ? Smiley smile
Je vais faire mes recherches sur des tutos ^^
Pages :
Sujet clos
Aller à