Html/css double backgroud
Fermé
rake-off
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
-
10 juin 2009 à 19:41
zaristi Messages postés 30 Date d'inscription vendredi 29 mai 2009 Statut Membre Dernière intervention 11 juin 2009 - 11 juin 2009 à 14:13
zaristi Messages postés 30 Date d'inscription vendredi 29 mai 2009 Statut Membre Dernière intervention 11 juin 2009 - 11 juin 2009 à 14:13
A voir également:
- Html/css double backgroud
- Double ecran - Guide
- Whatsapp double sim - Guide
- Editeur html - Télécharger - HTML
- Double appel - Guide
- Double authentification google - Guide
26 réponses
arthezius
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
475
10 juin 2009 à 19:53
10 juin 2009 à 19:53
Tu peux le faire avec des div et tu gère ça en CSS.
Exemple tu met un div en début de page avec une largeur à 100% et un background et tu met le deuxième sur body en le mettant en bas.
Si tu gère ça bien tu aura le résultat voulu.
Exemple tu met un div en début de page avec une largeur à 100% et un background et tu met le deuxième sur body en le mettant en bas.
Si tu gère ça bien tu aura le résultat voulu.
rake-off
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
10 juin 2009 à 19:55
10 juin 2009 à 19:55
ce n'est pas possible donc d'appliquer une image en haut et une autre en bas en tan que background??
rake-off
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
10 juin 2009 à 20:00
10 juin 2009 à 20:00
j'ai un petit problème, je voulais laisser mon body en width:1024px; mais mon image de fond en bas est de 1366px et elle ce redimensionne à mon body
zaristi
Messages postés
30
Date d'inscription
vendredi 29 mai 2009
Statut
Membre
Dernière intervention
11 juin 2009
8
10 juin 2009 à 20:42
10 juin 2009 à 20:42
tu as plein de solutions, la plus simple serait de mettre ton header dans le background en CSS et repeat X,
de devellopper ton "body" en 1024 dans un div puis en bas (footer) mettre un div en 1366 ensuite tu peux voir à jouer sur le zindex si tu veux que le body passe sur le footer.
je te fais un code qui te donne le résultat que tu recherche, c'est vite fait, mais ça doit marcher :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
.bg {
background-image: url(../res/bg.jpg);
background-repeat: repeat-x;
background-color: #666666;
margin: 0;
}
.bottom {
margin: 0;
padding: 0;
bottom: 1px;
text-align: center;
position:absolute;
left:50%;
margin-left: -683px;
z-index: 0;
}
-->
</style>
</head>
<body class="bg">
<div style="width:1024px; margin-left:auto; margin-right:auto; margin-top:75px; text-align:center;z-index: 100;">
<img src="../image/body.jpg" width="1024" height="430" />
</div>
<span class="bottom">
<img src="../image/footer.jpg" width="1366" height="120" />
</span>
</body>
</html>
dans la class "bottom" margin-left = -la moitié de ton footer
les CSS sont à deporter vers une feuille de style
is it OK
un de mes site est fait ainsi :
http://www.retoucheur-photo.com/
de devellopper ton "body" en 1024 dans un div puis en bas (footer) mettre un div en 1366 ensuite tu peux voir à jouer sur le zindex si tu veux que le body passe sur le footer.
je te fais un code qui te donne le résultat que tu recherche, c'est vite fait, mais ça doit marcher :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
.bg {
background-image: url(../res/bg.jpg);
background-repeat: repeat-x;
background-color: #666666;
margin: 0;
}
.bottom {
margin: 0;
padding: 0;
bottom: 1px;
text-align: center;
position:absolute;
left:50%;
margin-left: -683px;
z-index: 0;
}
-->
</style>
</head>
<body class="bg">
<div style="width:1024px; margin-left:auto; margin-right:auto; margin-top:75px; text-align:center;z-index: 100;">
<img src="../image/body.jpg" width="1024" height="430" />
</div>
<span class="bottom">
<img src="../image/footer.jpg" width="1366" height="120" />
</span>
</body>
</html>
dans la class "bottom" margin-left = -la moitié de ton footer
les CSS sont à deporter vers une feuille de style
is it OK
un de mes site est fait ainsi :
http://www.retoucheur-photo.com/
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
rake-off
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
10 juin 2009 à 21:20
10 juin 2009 à 21:20
ok je test dés maintenant mais dit moi c'est du flash la plupart des corps de ton site??
rake-off
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
10 juin 2009 à 21:29
10 juin 2009 à 21:29
c'est quoi z-index, désolé mais je ne m'en suis jamais servis et les span quand est ce qu'il faut les utiliser??
zaristi
Messages postés
30
Date d'inscription
vendredi 29 mai 2009
Statut
Membre
Dernière intervention
11 juin 2009
8
10 juin 2009 à 21:30
10 juin 2009 à 21:30
Ajax Flash et Css…
pour revenir a la class bottom, si tu veux que le footer passe dessous, met z-index à -(moins)100
tu peux voir aussi mon autre site, Ajax et jQuery Css Flash :
http://michel-mee.com/
A+
pour revenir a la class bottom, si tu veux que le footer passe dessous, met z-index à -(moins)100
tu peux voir aussi mon autre site, Ajax et jQuery Css Flash :
http://michel-mee.com/
A+
zaristi
Messages postés
30
Date d'inscription
vendredi 29 mai 2009
Statut
Membre
Dernière intervention
11 juin 2009
8
10 juin 2009 à 21:34
10 juin 2009 à 21:34
z-index c'est la position du "calque" ou div dans la 3eme dimension, c'est à dire en profondeur.
pour les span :
http://www.webmaster-hub.com/lofiversion/index.php/t3085.html
pour les span :
http://www.webmaster-hub.com/lofiversion/index.php/t3085.html
rake-off
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
10 juin 2009 à 21:42
10 juin 2009 à 21:42
merci beaucoup, cela marche mais j'ai toujours un soucis mon span ce trouve sous le corps (3eme dimension) mais juste en dessous de mon background et non en bas de ma page comme je le voudrais, un div ne serai pas plus favorable??
zaristi
Messages postés
30
Date d'inscription
vendredi 29 mai 2009
Statut
Membre
Dernière intervention
11 juin 2009
8
10 juin 2009 à 21:53
10 juin 2009 à 21:53
tu peux, c'est fonction de tes besoins…
rake-off
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
10 juin 2009 à 21:55
10 juin 2009 à 21:55
oui mais du coup j'ai toujours mon problème mon span ne s'affiche pas en bas de la page??
zaristi
Messages postés
30
Date d'inscription
vendredi 29 mai 2009
Statut
Membre
Dernière intervention
11 juin 2009
8
10 juin 2009 à 21:57
10 juin 2009 à 21:57
fait un copier coller du code, j'ai fais une ou deux modif et remplace le span par div
rake-off
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
10 juin 2009 à 22:05
10 juin 2009 à 22:05
je suis désolé mais la il ne s'affiche pas en bas de la page web mais au bas de la fenêtre donc il ce place par rapport à la taille de la fenêtre et n'est ppas au bonne endroit, une idée??
merci
merci
zaristi
Messages postés
30
Date d'inscription
vendredi 29 mai 2009
Statut
Membre
Dernière intervention
11 juin 2009
8
10 juin 2009 à 22:08
10 juin 2009 à 22:08
suprime : bottom: 1px; si tu veux que tout soit collé et suprime aussi le z-index (à voir)
rake-off
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
10 juin 2009 à 22:13
10 juin 2009 à 22:13
le probleme c ke mon background fai 1000px de haut et le pied de page y est coller au lieu d'être tt en bas
Si ce site t'inspire tellement, tu peux en afficher la source ...
Par contre, ... désolé de spoiler, mais il semblerait que leur double background CSS n'est qu'un simple PNG sur toute la page ;)
Par contre, ... désolé de spoiler, mais il semblerait que leur double background CSS n'est qu'un simple PNG sur toute la page ;)
An()nimous
Messages postés
134
Date d'inscription
mercredi 17 décembre 2008
Statut
Membre
Dernière intervention
10 janvier 2015
4
11 juin 2009 à 03:20
11 juin 2009 à 03:20
ma question repose egalement sur les feuille de style CSS du forum-actif !
j'aimerais savoir, comment integrer un curseur personalisé sur son forum, j'ai vu plein de topic sur ce sujet, non seulement un topic sur les faq forum-actif, mais je ne comprend pas leur description :
body {
cursor: url('ADRESSE DU CURSEUR.cur'), auto;
}
que dois-je mettre a " ADRESSE DU CURSEUR.cur ??? je ne c'est pas comment heberger un curseur, si c'est ce qu'il faut faire !
et secondo, faut-til enlever les deux petit " ' " avant et apres l'adresse ?
merci pour vos reponses
j'aimerais savoir, comment integrer un curseur personalisé sur son forum, j'ai vu plein de topic sur ce sujet, non seulement un topic sur les faq forum-actif, mais je ne comprend pas leur description :
body {
cursor: url('ADRESSE DU CURSEUR.cur'), auto;
}
que dois-je mettre a " ADRESSE DU CURSEUR.cur ??? je ne c'est pas comment heberger un curseur, si c'est ce qu'il faut faire !
et secondo, faut-til enlever les deux petit " ' " avant et apres l'adresse ?
merci pour vos reponses
arthezius
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
475
11 juin 2009 à 07:05
11 juin 2009 à 07:05
Merci de te créer ton propre topic plus que de poser ta question sur celui d'un autre.
A chaque question son topic.
A chaque question son topic.
An()nimous
Messages postés
134
Date d'inscription
mercredi 17 décembre 2008
Statut
Membre
Dernière intervention
10 janvier 2015
4
11 juin 2009 à 07:51
11 juin 2009 à 07:51
je veux pas etre de mauvaise fois, mais ... j'ai crée mon topic, avant de poser ma question ici mais .... sans reponse depuis hier !
rake-off
Messages postés
200
Date d'inscription
mardi 12 mai 2009
Statut
Membre
Dernière intervention
10 décembre 2011
1
11 juin 2009 à 09:19
11 juin 2009 à 09:19
mon problème de double background, c'est que si ce n'est qu'un png sur toute la page comment cela ce fait que le fichier png prendrai la taille de la page traité sans jamais ce déformé, juste le centre en blanc s'allongerai?? mais comment?
zaristi
Messages postés
30
Date d'inscription
vendredi 29 mai 2009
Statut
Membre
Dernière intervention
11 juin 2009
8
11 juin 2009 à 10:41
11 juin 2009 à 10:41
tu peux aussi faire comme suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
.bg {
background-image: url(http://michel-mee.com/
background-repeat: repeat-x;
background-color: #CCCCCC;
margin: 0;
}
.container {
margin-top:120px;
height: 600px;
}
.txt {
font-family: Arial, Helvetica, sans-serif;
color: #993333;
font-size: 24px;
}
.titr {
font-family: Arial, Helvetica, sans-serif;
color: #660099;
font-size: 32px;
}
-->
</style>
</head>
<body class="bg">
<table class="container" width="1366" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="171"> </td>
<td width="1024"><p align="center" class="titr">09/03/08<br /></p>
<div align="justify"><span class="txt">Des images tournées avec un téléphone portable montrent le char en train de percuter un coin de la maison. Le conducteur, apparemment saoûl et hilare, tente maladroitement de se hisser à bord avec deux bouteilles de vodka.<br />
"Sortez-le du char", hurle alors une villageoise.<br />
L'armée a promis vendredi de verser des dédommagements aux propriétaires de la maison et a dit que le char devait avoir connu une panne et avoir été distancé par une colonne de blindés qui se dirigeait vers un site de manoeuvres.<br />
Auparavant, l'armée avait expliqué que le blindé avait glissé sur de la neige fondue.<br />
"Bien sûr, il y a eu des abus mais l'équipage a agi de toute bonne foi pour rattraper son unité", a déclaré le colonel Konstantin Lazoutkine, porte-parole du District militaire Volga-Oural.<br />
"Dieu merci, ils n'ont pas tiré", dit quant à lui le propriétaire de la maison sur la vidéo.</span>
</p>
<p><span class="txt">BERLIN (AFP) - Quelque 230 DVD pornographiques ont été retrouvés à l'abbaye Maria Laach, l'une des plus célèbres d'Allemagne, dissimulés dans la chambre d'un moine bénédictin, affirme le quotidien bavarois Abendzeitung de jeudi.<br />
La police a fait cette découverte après le vol de 4 DVD de pornographie homosexuelle par un moine dans un sex-shop de Wurtzbourg, en Bavière.<br />
Le moine de 49 ans avait été pris en flagrant délit par la vendeuse. Il s'était alors échappé du magasin, avait jeté dans une poubelle municipale son larcin avant d'être rattrapé par la police, selon le journal.<br />
Comme le sex-shop se plaignait de vols à répétition, des policiers se sont rendus dans l'abbaye du moine, en Rhénanie-Palatinat, et y ont découvert la collection de films dans sa cellule. </span></p></div></td>
<td width="171"> </td>
</tr>
</table>
<table width="1366" border="0" cellspacing="0" cellpadding="0" align="center" background="http://michel-mee.com/">
<tr>
<td align="center" height="100">FOOTER</td>
</tr>
</table>
</body>
</html>
qu'en pense tu ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
.bg {
background-image: url(http://michel-mee.com/
background-repeat: repeat-x;
background-color: #CCCCCC;
margin: 0;
}
.container {
margin-top:120px;
height: 600px;
}
.txt {
font-family: Arial, Helvetica, sans-serif;
color: #993333;
font-size: 24px;
}
.titr {
font-family: Arial, Helvetica, sans-serif;
color: #660099;
font-size: 32px;
}
-->
</style>
</head>
<body class="bg">
<table class="container" width="1366" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="171"> </td>
<td width="1024"><p align="center" class="titr">09/03/08<br /></p>
<div align="justify"><span class="txt">Des images tournées avec un téléphone portable montrent le char en train de percuter un coin de la maison. Le conducteur, apparemment saoûl et hilare, tente maladroitement de se hisser à bord avec deux bouteilles de vodka.<br />
"Sortez-le du char", hurle alors une villageoise.<br />
L'armée a promis vendredi de verser des dédommagements aux propriétaires de la maison et a dit que le char devait avoir connu une panne et avoir été distancé par une colonne de blindés qui se dirigeait vers un site de manoeuvres.<br />
Auparavant, l'armée avait expliqué que le blindé avait glissé sur de la neige fondue.<br />
"Bien sûr, il y a eu des abus mais l'équipage a agi de toute bonne foi pour rattraper son unité", a déclaré le colonel Konstantin Lazoutkine, porte-parole du District militaire Volga-Oural.<br />
"Dieu merci, ils n'ont pas tiré", dit quant à lui le propriétaire de la maison sur la vidéo.</span>
</p>
<p><span class="txt">BERLIN (AFP) - Quelque 230 DVD pornographiques ont été retrouvés à l'abbaye Maria Laach, l'une des plus célèbres d'Allemagne, dissimulés dans la chambre d'un moine bénédictin, affirme le quotidien bavarois Abendzeitung de jeudi.<br />
La police a fait cette découverte après le vol de 4 DVD de pornographie homosexuelle par un moine dans un sex-shop de Wurtzbourg, en Bavière.<br />
Le moine de 49 ans avait été pris en flagrant délit par la vendeuse. Il s'était alors échappé du magasin, avait jeté dans une poubelle municipale son larcin avant d'être rattrapé par la police, selon le journal.<br />
Comme le sex-shop se plaignait de vols à répétition, des policiers se sont rendus dans l'abbaye du moine, en Rhénanie-Palatinat, et y ont découvert la collection de films dans sa cellule. </span></p></div></td>
<td width="171"> </td>
</tr>
</table>
<table width="1366" border="0" cellspacing="0" cellpadding="0" align="center" background="http://michel-mee.com/">
<tr>
<td align="center" height="100">FOOTER</td>
</tr>
</table>
</body>
</html>
qu'en pense tu ?
