[HTML/CSS] question pour mon fond sur le forum Création de sites web - 25-07-2012 23:41:49

Liste des sujets

[HTML/CSS] question pour mon fond

le-platinum-3

Niveau 8

25 juillet 2012 à 23:41:49

bonjour a tous, j'ai 14 ans et j'ai commecner a créer un site web avec HTML5 et CSS3

cependant je narrive pas a mettre le fon de ma page comme je le voudrai

en effet, mon fond ressemble a ceci :

mais je voudrai qu'l ressemble a cela :

voici le code utilisé :
HTML :

<!DOCTYPE html>
<HTML>
<HEAD>
<META charset="utf-8" />
<LINK rel="stylesheet" href="style.css" />
<TITLE> Mapcraft - Page 1 - Le site de partage de vos maps Minecraft ! </TITLE>
</HEAD>
<BODY>
<DIV id="hg">
<DIV id="hd">
<DIV id="contenu">
<H1> Mapcraft </H1>
<H3> Le site de partage de vos maps Minecraft et Portal 2 ! </H3>
<H3> Accueil </H3>
<BR><BR>
<CENTER>
<TABLE border="1">
<TR>
<TD align="center" width="125 px"> <A href="Pages-index/PageM1.html"> Maps Minecraft </A> </TD>
<TD align="center" width="125 px"> <A href="Pages-index/PageP1.html"> Maps Portal 2 </A> </TD>
<TD align="center" width="125 px"> <A href="Pages-index/PageJ1.html"> Jeux en ligne </A> </TD>
<TD align="center" width="125 px"> <A href="http://mapcraft-forum.forumjv.com/0-82597-0-1-0-1-0-0.htm"> Le forum </A> </TD>
<TR>
</TABLE>
</CENTER>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>

et CSS :

BODY
{
background-color: black;
color: white;
}

hg, #hd

{
background-repeat:no-repeat;
background-image:url(Images/Fond.jpg);
}

{
background-position: left;
}

{
background-position: right;
}

contenu

{
margin-left: 100px;
margin-right: 100px;
}

contenu p

{
text-align: justify;
}

P
{
color: white; /* paragraphes en blanc */
font-family: Verdana; /* paragraphes en VERDANA */
text-align: left; /* paragraphes aligné à gauche */
}

H1, H2, H3, H4, H5, H6
{
color: white; /* titre en blanc */
text-align: center; /* titre centré */
text-decoration: underline; /* titre souligné */
}

A:link, A:visited
{
color: White; /* lien avant et après clic en blanc */
text-decoration: underline; /* lien avant et apres clic souligné */
}

.lienpage
{
display: inline; /* lienpage en une seule ligne */
}

.ps, .ms
{
color: red; /* mots et phrases important(e)s en rouge */
font-style: italic; /* mots et phrases important(e)s en ITALIQUE */
font-weight: bold; /* mots et phrases important(e)s en GRAS */
}

voila, je ne sais vraiment pas quoi faire pour que cela fonctionne --'

(la secondes image a été faite via PAINT windows)

merci a tous de vos réponses
bya

le-platinum-3

Niveau 8

25 juillet 2012 à 23:46:51

code repost via PASTEBIN

HTML : http://pastebin.com/RFuxq0Yq

CSS : http://pastebin.com/CYNNkKar

merci de vos réponses

Thymotep

Niveau 10

25 juillet 2012 à 23:53:35

Salut,

Deux solutions simples :

1 Tu fais une seule image de fond qui se répétera sur tout le site (à mettre dans le CSS dans la balise body) et tu créer un div avec un fond noir, qui contient l'ensemble du site est qui est centré sur la page (avec un margin: 0 auto; dans le css).

2 Tu crées un background qui contient le fond noir de la largeur voulu au milieu, et dans le css du body tu mets un background: url('tonfichier.ext') top center repeat-y; pour que ton fichier soit placé en haut du site, centré horizontalement, et se répète vers le bas

Je pense que la première solution est meilleure

PS : Ne pas utiliser de majuscule pour le nom des balises, çà sert à rien, et c'est laid

le-platinum-3

Niveau 8

26 juillet 2012 à 00:00:57

en fait je voudrai juste que limage se mette sur TOP LEFT et l'image (qui est la meme) se mùettente en TOP RIGHT

mais je ne trouve pas la solution

c'est juste ca que je demande en fait : comment mettre image de fond ??? une en TOP LEFT et lautre en TOP RIGHT

merci

Thymotep

Niveau 10

26 juillet 2012 à 01:11:07

Tu ne peux pas, d'où les solutions proposés ci dessus.

Une seule image qui se répète en x et y (repeat). Et un div qui contiendra l'ensemble du site, qui aura un fond noir et qui sera centré. Celui passant au dessus du background, tu aura ta zone noir au milieu et de chaque côté le fond voulu

le-platinum-3

Niveau 8

26 juillet 2012 à 01:49:25

pourrait tu stp me passer un code ? car je ne suis pas tres doué en compréhension --' je comprend mieux es codes que les longues explication
merci

le-platinum-3

Niveau 8

26 juillet 2012 à 02:27:38

Ah ben en fait j'ai découvert le "faute" qui est de moi --'

en fait, j'utilise 2 documents CSS pour les pages principales et secondaires

et la "faute" est que j'ai mis les #hg et #hd
dans le mauvais CSS, celui qui na aucun rapport avec ma page principale --'

alors voila, j'ai trouvé l'erreur, corrigée et tout fonctionne, pas au pixels pret mais bon

SCREEN :

voila, désolé a ceux que j'ai dérangé et merci

bye

Aide à l'achat Mac
Création de sites web
Internet
Macintosh
Création de Jeux
Linux
Programmation
Steam Deck
Hardware

La vidéo du moment

News jeu

22 114 spectateurs

Halo: Campaign Evolved fait de la coopération sa plus grande force

Loin de se limiter à une simple refonte graphique, Halo: Campaign Evolved reconstruit la campagne du premier Halo en accordant une place centrale à la coopération. Que ce soit pour découvrir l'aventure une première fois ou la parcourir à nouveau, le titre multiplie les options pour permettre aux joueurs de former facilement une escouade, tout en ajoutant de nouvelles mécaniques qui encouragent la rejouabilité.

Toutes les news jeu