Vers le contenu

Index du forum » Support Webmaster » HTML / XHTML / CSS
Modifier la taille de la police   Imprimer le sujet
FAQ M’enregistrer Connexion
Guide informatique hardware En1heure.com
Articles phares : Quelle alimentation PC | Choisir son ecran LCD PC

Chercher un sujet :

Fixer une image fixe en plus d'une image de fond

Support HTML / XHTML / CSS et validation de vos sites aux standards du Web.
Répondre
Ana

Messages: 7
Inscription: Mer Oct 06, 2010 7:35 am
Fixer une image fixe en plus d'une image de fondMessagePosté: Mer Oct 06, 2010 7:41 am
Bonjour!
Je suis bloquée depuis plusieurs jours sur un problème de CSS.
J'ai quelques notions (vite fait) de HTML et aucune de CSS, j'ai mis en place un blog hébergé sur tumblr.
J'ai inséré une image de fond qui se répète à l'infini.
Jusque là tout va bien.
J'aimerai placer un logo en haut à gauche de ma page, et là ça se gate, quand j'essaie de l'insérer mon image de fond disparait...
Est ce possible d'avoir à la fois une image de fond qui se répète et une image fixe?

le logo en question: http://img10.hostingpics.net/pics/412009fond2logo.jpg
le blog: http://tonerimprim.tumblr.com/
Haut
vanquish
Avatar de l’utilisateur
Administrateur
Messages: 1614
Inscription: Ven Mar 26, 2004 7:16 am
Localisation: /var/www/
Fixer une image fixe en plus d'une image de fondMessagePosté: Mer Oct 06, 2010 9:48 am
Bonjour Ana,

Bienvenue. Hé non ce n'est pas possible sur un même bloc.
Par contre tu peux placer ton image là où tu veux avec :
Code: Tout sélectionner
position : absolute;


Ou par rapport à tes éléments de page (mieux) avec :
Code: Tout sélectionner
position : relative;


Tu devrais copier/coller la partie CSS et HTML qui te pose souci ;)
Haut
Ana

Messages: 7
Inscription: Mer Oct 06, 2010 7:35 am
Fixer une image fixe en plus d'une image de fondMessagePosté: Mer Oct 06, 2010 11:58 am
Merci de ton aide ^^ le logo a enfin trouvé sa place!

Par contre maintenant c'est le bloc central qui me pose problème :P j'aimerai qu'il soit centré, or pour l'instant il est à gauche.

Code: Tout sélectionner

-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#F9F9F9 none repeat scroll 0 0;
display:block;
float:left;
margin:30px 0 15px;
padding:10px;
position:relative;
width:600px;


J'ai un peu cherché et j'ai appris que les seules options sont right, left et none... voui mais moi je veux que ça soit au centre :( une solution?
Haut
vanquish
Avatar de l’utilisateur
Administrateur
Messages: 1614
Inscription: Ven Mar 26, 2004 7:16 am
Localisation: /var/www/
Fixer une image fixe en plus d'une image de fondMessagePosté: Mer Oct 06, 2010 1:32 pm
Ici tu le mets en float:left, normal qu'il flotte à gauche ;)
Enleve donc :
Code: Tout sélectionner
float:left;
margin:30px 0 15px;
position:relative;

et met :
Code: Tout sélectionner
margin:0 auto;

sur le bloc (le div) que tu souhaites centrer.

Alors ? ;)
Haut
Ana

Messages: 7
Inscription: Mer Oct 06, 2010 7:35 am
Fixer une image fixe en plus d'une image de fondMessagePosté: Mer Oct 06, 2010 1:56 pm
Yep ;) le bloc est centré! par contre l'habillage blanc a migré tout en haut de la page et je ne sais pas où trifouiller pour le remettre en place (je précise que je n'ai pas écrit le code de A à Z, j'ai utilisé un thème)

Image
Haut
vanquish
Avatar de l’utilisateur
Administrateur
Messages: 1614
Inscription: Ven Mar 26, 2004 7:16 am
Localisation: /var/www/
Fixer une image fixe en plus d'une image de fondMessagePosté: Mer Oct 06, 2010 7:42 pm
Chez moi (Firefox et Chrome), ça fonctionne sans souci!
Haut
Ana

Messages: 7
Inscription: Mer Oct 06, 2010 7:35 am
Fixer une image fixe en plus d'une image de fondMessagePosté: Jeu Oct 07, 2010 6:25 am
Tu as de la chance :p j'ai testé sous safari, IE, firefox, la bande blanche est toujours là haut, j'ai demandé à des collègues de tester sur leur ordinateur, même problème...
Haut
vanquish
Avatar de l’utilisateur
Administrateur
Messages: 1614
Inscription: Ven Mar 26, 2004 7:16 am
Localisation: /var/www/
Fixer une image fixe en plus d'une image de fondMessagePosté: Jeu Oct 07, 2010 7:08 am
Alors colle ton CSS qu'on voit ça.
Haut
Ana

Messages: 7
Inscription: Mer Oct 06, 2010 7:35 am
Fixer une image fixe en plus d'une image de fondMessagePosté: Jeu Oct 07, 2010 7:25 am
Voilà :)

Code: Tout sélectionner
<style type="text/css">

body { background: {color:Background} url(http://img7.hostingpics.net/pics/953391carrefond.png); font-family: Arial; font-size: 11px; ont-weight: normal; text-decoration: none; line-height: 15px; color: #666; padding: 0; margin: 0; }
a:link, a:visited { text-decoration: none; color: {color:Links}; }
a:hover { color: {color:Links Hover}; text-decoration: none; }
img, img a { border: 0; }
blockquote { color: #999; padding: 0; margin: 0 20px 0 20px; }

h1, h1 a:link, h1 a:visited { color: {color:Title}; font-family: Georgia; font-size: 30px; font-weight: normal; line-height: 100%; letter-spacing: -1px; text-transform: lowercase; text-decoration: none; text-align: left; margin: 0; padding: 0; }
h1 a:hover { color: {color:Title Hover}; text-decoration: none; }
h2, h2 a:link, h2 a:visited { color: {color:Post Title}; font-family: Georgia; font-size: 20px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; }
h2 a:hover { color: {color:Post Title Hover}; text-decoration: none; font-weight: normal; }
.header { color: {color:Header}; font-family: Georgia; font-size: 14px; background-color: #f1f1f1; border-left: 5px solid; margin: 0; padding: 2px 0 2px 5px; }

#one { width: 740px;  margin: 0 auto 0 auto; padding: 0px; }
#navi { text-transform: none; font-size: 100px; line-height: 40px; padding: 0; margin: 0; }
#navi a:link, #navi a:visited { color: #ff8da5; text-decoration: none;}
#navi a:hover { color: #ccc; text-decoration: none; }
#two { float: left; display: inline; position: relative; width: 620px; margin: 60px 0 0 60px; padding: 0; }
#three { width: 600px; float: left; display: block; position: relative; background-color: #f9f9f9; margin: 0; padding: 10px; }
#four {display: block;  background: #f9f9f9; width: 600px; margin:0 auto; padding: 10px; }
#five { width: 600px; float: left; display: block; position: relative; background-color: #f9f9f9; margin: 15px 0 50px 0; padding: 10px; }
.box, .following { background-color: transparent; text-align: left; padding: 0; margin: 15px 0 15px 0; }
.post { text-align: justify; line-height: 16px; margin: 20px 0 30px 0; padding: 0; }
.post img { text-align: center; margin: 10px auto 10px auto; padding: 0; }
.post-footer { float: left; display: block; position: relative; width: 100%; margin: 15px 0 25px 0; padding: 7px 0 7px 0; background-color: #C8C7C7; font-family: Arial; color: {color:Post Footer}; font-size: 11px;}
.post-footer a:link, .post-footer a:visited { color: {color:Post Footer Link}; text-decoration: none; }
.post-footer a:hover { color: {color:Post Footer Hover}; text-decoration: none; }
.postmetadata { float: left; display: block; position: relative; margin: 0 0 0 7px; padding: 0; text-align: left; background: transparent; }
.tags { float: right; display: block; position: relative; letter-spacing: normal; text-align: right; margin: 0px 7px 0px 0px; }

ol.notes { float: left; width: 100%; padding: 0px; margin: 0 0 25px 0; list-style-type: none; border-bottom: solid 1px #ccc; }
ol.notes li.note { border-top: solid 1px #ccc; padding: 10px; }
ol.notes li.note img.avatar { vertical-align: -4px; margin-right: 10px; width: 16px; height: 16px; }
ol.notes li.note span.action { font-weight: bold; }
ol.notes li.note .answer_content { font-weight: normal; }
ol.notes li.note blockquote { ont-style: none; border-color: #eee; padding: 4px 10px; margin: 10px 0px 0px 25px; }
ol.notes li.note blockquote a { text-decoration: none; }

.regular, .photo, .quote, .link, .conversation, .audio, .video { float: left; position: relative; width: 100%; text-align: justify; margin: 0; padding: 0; }
.regular img { max-width: 100%; }
.photo img, .photo a img:link, .photo a img:visited, .photo a img:hover { margin: 0; border: 1px solid #ccc; padding: 5px; background-color: #f2f2f2; }
.quotes { font-family: Georgia; font-size: 20px; font-style: italic; line-height: 22px; padding: 0 10px 0 10px; }
.quote .source { text-align: right; }
.conversation ul { list-style-type: none; margin: 0; padding: 0; }
.conversation ul li { padding: 4px 0px 4px 8px; margin-bottom: 1px; }
.conversation ul li span.label { font-weight: bold; }
.conversation ul li.odd { background-color: {color:Conversation Background 1}; }
.conversation ul li.even { background-color: {color:Conversation Background 2}; }
.audio b, .audio strong { color: #555; font-weight: bold; }
.following img { margin: 1px; padding: 0px; border: 0px solid; }
.following a img:link, .following a img:visited { border: 0px; }
.following a img:hover { border: 0px; }
</style>
Haut
vanquish
Avatar de l’utilisateur
Administrateur
Messages: 1614
Inscription: Ven Mar 26, 2004 7:16 am
Localisation: /var/www/
Fixer une image fixe en plus d'une image de fondMessagePosté: Jeu Oct 07, 2010 8:20 am
Vire :
Code: Tout sélectionner
background:#F9F9F9;

de #four ;)
Haut
Suivante
Répondre

Retourner vers HTML / XHTML / CSS



Chercher un sujet :


Index du forum
© Absolution Style by Christian Bullock
L’équipe du forum Supprimer les cookies du forum• Heures au format UTC - 1 heure
Powered by phpBB© 2000, 2002, 2005, 2007 phpBB Group
Traduction par: phpBB-fr.com
phpBB SEO
cron