Problème background
Artistik
-
Artistik -
Artistik -
Bonjour,
J'ai besoin d'aide!
Voila, je désire créer une page d'accueil dans laquelle se trouvera:
-un background
-une vidéo de dailymotion centrée au milieu de cette page
-un bouton flash "ENTRER" en dessous de la vidéo
Mon problème est le suivant:
j'ai placé mon background dans un tableau HTML ou j'ai inscrit les valeurs width: 100% height: 100%.
Tout s'affiche de la même facon sous des résolutions d'écrans différentes cependant ce fond d'ecran est défini comme image et non comme background: regardez plutot:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Bienvenue sur le forum En vert et contre tous</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#000000">
<div align="center">
<table width="100%" height="100%" border="0">
<tr>
<td><div align="center"><img src="https://i57.servimg.com/u/f57/11/17/63/01/fondec10.jpg" width="100%" height="100%"></div>
<center></center></td></td>
</tr>
</table>
</div>
</body>
</html>
J'éprouve donc des difficultés maintenant à placer la vidéo par dessus cette image. J'ai donc décidé de la définir en tant que background mais elle s'affiche désormais différemment suivant la résolution!
J'aimerais donc connaître le code exact qui permet au background d'un tableau HTML de se placer au centre sans se répéter, qui prend toute la largeur du tableau et s'adapte à chaque résolution. Sinon merci de me donner une technique efficace pour ce que je souhaite faire (CSS).
J'espere poster dans la bonne partie...Merci beaucoup
J'ai besoin d'aide!
Voila, je désire créer une page d'accueil dans laquelle se trouvera:
-un background
-une vidéo de dailymotion centrée au milieu de cette page
-un bouton flash "ENTRER" en dessous de la vidéo
Mon problème est le suivant:
j'ai placé mon background dans un tableau HTML ou j'ai inscrit les valeurs width: 100% height: 100%.
Tout s'affiche de la même facon sous des résolutions d'écrans différentes cependant ce fond d'ecran est défini comme image et non comme background: regardez plutot:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Bienvenue sur le forum En vert et contre tous</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#000000">
<div align="center">
<table width="100%" height="100%" border="0">
<tr>
<td><div align="center"><img src="https://i57.servimg.com/u/f57/11/17/63/01/fondec10.jpg" width="100%" height="100%"></div>
<center></center></td></td>
</tr>
</table>
</div>
</body>
</html>
J'éprouve donc des difficultés maintenant à placer la vidéo par dessus cette image. J'ai donc décidé de la définir en tant que background mais elle s'affiche désormais différemment suivant la résolution!
J'aimerais donc connaître le code exact qui permet au background d'un tableau HTML de se placer au centre sans se répéter, qui prend toute la largeur du tableau et s'adapte à chaque résolution. Sinon merci de me donner une technique efficace pour ce que je souhaite faire (CSS).
J'espere poster dans la bonne partie...Merci beaucoup
A voir également:
- Problème background
- Windows 7 logon background changer - Télécharger - Thèmes & Fonds d'écran
- Starter background changer - Télécharger - Thèmes & Fonds d'écran
- John's background switcher - Télécharger - Suite bureautique
- Background color css ✓ - Forum CSS
- Realtek audio background process class ✓ - Forum Pilotes (drivers)
7 réponses
Salut,
Si tu veux placer une image en arrière plan sur ton site il faut initialement la mettre au format de ton cadre (ex 600/400)
> Avec Photoshop (ou the gimp) c'est assez simple...
Pour ne pas avoir de problème de résolution choisi des tableaux avec largeur et hauteur fixes.
Si tu veux placer une image en arrière plan sur ton site il faut initialement la mettre au format de ton cadre (ex 600/400)
> Avec Photoshop (ou the gimp) c'est assez simple...
Pour ne pas avoir de problème de résolution choisi des tableaux avec largeur et hauteur fixes.
Oui mais mon cadre est défini en % pour que chaque visiteur puisse voir la même chose sans avoir la même résolution
ok pour le % mais mon conseil serai plutot de décomposé ton xhtml et ton css dans deux fichiers différent lié l'un à l'autre tu aura moin de soucil et ton xhtml sera plus lisible.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Pour la résolution si tu veux pouvoir afficher l'image en arrière plan correctement il faut une table de taille fixe...
Regarde l'exemple :
index.html
CSS.css
Disposition des dossiers
C:/TON SITE WEB/
C:/TON SITE WEB/image/
C:/TON SITE WEB/image/bg_600x400.jpg (arrière plan)
C:/TON SITE WEB/index.html
C:/TON SITE WEB/CSS.css
Regarde l'exemple :
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Bienvenue sur le forum En vert et contre tous</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="CSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center">HEADER DU SITE (ex : image logo du site)</div></td>
</tr>
<tr>
<td width="600" height="400" background="image/bg_600x400.jpg"><div align="center">CONTENT (ex :code youtube)</div></td>
</tr>
<tr>
<td><div align="center">FOOTER (ex : nom du site copyright et signature)</div></td>
</tr>
</table>
</body>
</html>
CSS.css
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
body {
background-color: #000000;
}
h1 {
font-size: 12px;
}
h2 {
font-size: 14px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 24px;
}
h6 {
font-size: 9px;
}
Disposition des dossiers
C:/TON SITE WEB/
C:/TON SITE WEB/image/
C:/TON SITE WEB/image/bg_600x400.jpg (arrière plan)
C:/TON SITE WEB/index.html
C:/TON SITE WEB/CSS.css
je m'explique il faut crée ton xhtml sans CSS dedans sous notepad++ que tu enregistre soit en .html soit en .php selon le contenus.
dans ton <head></head> ajoute ceci :
<link rel="stylesheet" href="ici le lien vers ton fichier design" type="text/css" />
par exemple sa :
<link rel="stylesheet" href="design.css" type="text/css" />
puis toujours sous notepad++ crée un autre fichier que tu codera en CSS (voir language CSS) que tu apelera design et que tu enregistrera en .css dans le dossier source de ton site.
le css marche ainsi :
html, body {
background: transparent url('fond1.png') repeat scroll top center;
margin: auto;
padding: 0;}
la tu indique a ton css qu'il faut qu'il applique une image de fond appellé fond1.png que l'emargement de la page sea automatique etc...
Pour appelé une div en css on fait ainsi :
div#global {
padding: 0;
margin: auto;
width: 800px;
border: none;
}
et pour appelé une class :
.image1 {
border-style: outset;
border-width: 5px;
border-color: white; }
pour en apprendre plus sur le css va voir ici :
https://openclassrooms.com/fr/courses
Tu vera sa va te saoulé d'aprendre cette nouvelle magniére de crée un site mais aprés tu eliminera plein plein de probléme.
dans ton <head></head> ajoute ceci :
<link rel="stylesheet" href="ici le lien vers ton fichier design" type="text/css" />
par exemple sa :
<link rel="stylesheet" href="design.css" type="text/css" />
puis toujours sous notepad++ crée un autre fichier que tu codera en CSS (voir language CSS) que tu apelera design et que tu enregistrera en .css dans le dossier source de ton site.
le css marche ainsi :
html, body {
background: transparent url('fond1.png') repeat scroll top center;
margin: auto;
padding: 0;}
la tu indique a ton css qu'il faut qu'il applique une image de fond appellé fond1.png que l'emargement de la page sea automatique etc...
Pour appelé une div en css on fait ainsi :
div#global {
padding: 0;
margin: auto;
width: 800px;
border: none;
}
et pour appelé une class :
.image1 {
border-style: outset;
border-width: 5px;
border-color: white; }
pour en apprendre plus sur le css va voir ici :
https://openclassrooms.com/fr/courses
Tu vera sa va te saoulé d'aprendre cette nouvelle magniére de crée un site mais aprés tu eliminera plein plein de probléme.