Débutant HTML/CSS
Gryfon
Messages postés
302
Date d'inscription
Statut
Membre
Dernière intervention
-
Gryfon Messages postés 302 Date d'inscription Statut Membre Dernière intervention -
Gryfon Messages postés 302 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai l'envie de créer un site web pour un serveur Online qu'un amis et moi nous avons crée. Je crée donc une base d'un doc HTML et un fichier CSS nommé design.css Voici mes deux codes :
Premier : accueil.html :
et voici le deuxième code, le CSS
Voilà, j'ai donc dans mon dossier Site qui se trouve dans mes documents une image de fond qui se nomme fond.jpg. Elle fait 1280x1024 et lorsque je double clique sur mon fichier html, l'image de fond n'apparaît pas. Je débute vraiment, est-ce que quelqu'un peut m'aider ?
J'ai l'envie de créer un site web pour un serveur Online qu'un amis et moi nous avons crée. Je crée donc une base d'un doc HTML et un fichier CSS nommé design.css Voici mes deux codes :
Premier : accueil.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Rules Life</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />
</head>
<body>
<!-- L'en-tête -->
<div id="en_tete">
</div>
<!-- Les menus -->
<div id="menu">
<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>
<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>
</div>
<!-- Le corps -->
<div id="corps">
<h1>Mon super site</h1>
<p>
Bienvenue sur mon super site !<br />
TEST TEST TEST TEST TEST
</p>
<h2>Titre 2?</h2>
<p>
TEST TEST TEST TEST<br />
test test test test
</p>
<h2>test</h2>
<p>
test<br />
test test test<br />
test test test
</p>
</div>
<!-- Le pied de page -->
<div id="pied_de_page">
<p>© Copyright "Ttest" 2005, tous droits réservés</p>
</div>
</body>
</html>
et voici le deuxième code, le CSS
body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("Site/fond.jpg");
Voilà, j'ai donc dans mon dossier Site qui se trouve dans mes documents une image de fond qui se nomme fond.jpg. Elle fait 1280x1024 et lorsque je double clique sur mon fichier html, l'image de fond n'apparaît pas. Je débute vraiment, est-ce que quelqu'un peut m'aider ?
A voir également:
- Débutant HTML/CSS
- Editeur html - Télécharger - HTML
- Logiciel de programmation pour débutant - Guide
- Logiciel montage vidéo débutant - Guide
- Br html ✓ - Forum Webmastering
- Espace en html ✓ - Forum HTML
5 réponses
La structure de tout ça n'est pas mauvaise, la sémantique est même proche de la perfection. Pour des débutants : BRAVO :)
Par contre, le doctype en xhtml 1.1 n'est pas judicieux. Du xhtml 1.0 sera bien suffisant (et ça évitera en plus des pbs avec IE...)
J'ai quelques craintes aussi avec un fond de 1280*1024... L'image risque d'être bien lourde, et si la résolution de l'écran ne fait pas 1280*1024 que se passe t-il ?
Pour tout de même en revenir au pb initial ;) : ça sent vraiment le problème de chemin. Le répertoire est bien Site avec un S majuscule ?
Le site est-il en ligne ? Si oui, peut-on avoir l'url ?
Par contre, le doctype en xhtml 1.1 n'est pas judicieux. Du xhtml 1.0 sera bien suffisant (et ça évitera en plus des pbs avec IE...)
J'ai quelques craintes aussi avec un fond de 1280*1024... L'image risque d'être bien lourde, et si la résolution de l'écran ne fait pas 1280*1024 que se passe t-il ?
Pour tout de même en revenir au pb initial ;) : ça sent vraiment le problème de chemin. Le répertoire est bien Site avec un S majuscule ?
Le site est-il en ligne ? Si oui, peut-on avoir l'url ?
J'ai compris mon erreur, j'ai passé le document les images en url et plus par répertoire, c'est plus simple. Aussi j'ai quelques autres questions.
Regarder cette image :
http://www.noelshack.com/up/aac/1-86fe720d44.jpg
Question 01 : Comment faire pour que l'image "site" soit tout au dessus de mon <div> element menu ? Donc, supprimer l'espace entre la limite et l'image...
02 : Comment mettre une image en dessous de mes <div> mais au dessus de mon arrière plan ?
03 : Comment faire un arrière plan qui s'adapte à chaque résolutions ?
04 : Comment faire pour foutre un arrière-plan fixe et qui ne se répète pas ?
05 : Comment faire pour que le <div> avec le copyrigth ne rentre pas dans l'élément menu à côté ?
06 : Est-il possible de faire des <div> avec un bord arrondi ?
Merci de votre aide ! J'en ai besoin !!!
Regarder cette image :
http://www.noelshack.com/up/aac/1-86fe720d44.jpg
Question 01 : Comment faire pour que l'image "site" soit tout au dessus de mon <div> element menu ? Donc, supprimer l'espace entre la limite et l'image...
02 : Comment mettre une image en dessous de mes <div> mais au dessus de mon arrière plan ?
03 : Comment faire un arrière plan qui s'adapte à chaque résolutions ?
04 : Comment faire pour foutre un arrière-plan fixe et qui ne se répète pas ?
05 : Comment faire pour que le <div> avec le copyrigth ne rentre pas dans l'élément menu à côté ?
06 : Est-il possible de faire des <div> avec un bord arrondi ?
Merci de votre aide ! J'en ai besoin !!!
Je ne vais pas répondre à toutes les questions car le temps me manque...
Pour faire des div arrondis :
http://www.mammouthland.net/weblog/2009/20_04_09.php
Arrière plan fixe qui ne se répète pas (à mettre dans la CSS) :
Faire un arrière plan qui s'adapte à toutes les résolutions : utiliser un javascript qui détecte la résolution de l'écran et qui choisisse le fond en fonction. Mais ce n'est franchement pas une bonne solution. Mieux vaut choisir un fond de page qui n'ait pas besoin de cet artifice.
Pour faire des div arrondis :
http://www.mammouthland.net/weblog/2009/20_04_09.php
Arrière plan fixe qui ne se répète pas (à mettre dans la CSS) :
background-repeat:no-repeat; background-attachment:fixed
Faire un arrière plan qui s'adapte à toutes les résolutions : utiliser un javascript qui détecte la résolution de l'écran et qui choisisse le fond en fonction. Mais ce n'est franchement pas une bonne solution. Mieux vaut choisir un fond de page qui n'ait pas besoin de cet artifice.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
