Sujet Précédent Sujet Suivant

Comment insérer une image en CSS

Fermé
Bastien572 - 29 mai 2010 à 19:16
 Bastien572 - 27 juin 2010 à 16:03
Bonjour !

Mon probleme est que je n'arrive pas (Dans le CSS) ajouter des images pour tout le site web a coté du h1 qui est Magic-Mania.

Comment ajouter ces images dans le css ???

En espérant de rapides réponses Bastien572.





























































CODE HTML :

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head><META NAME="Description" CONTENT="La magie bluffante et la plus populaire qu''''''''il soit. Magic-mania vous offre des vidéos de magie jamais vues réalisées par un magicien exceptionel "JOJOMAGIC"">
<META NAME="Keywords" CONTENT="magic,mania,monsite,tour de magie,magie,-,bluff,Magie,MAGIE,voila">
<META http-equiv="Content-Language" content="fr">
<META NAME="Author" CONTENT="Jojo-magic">









<EMBED SRC="/sons/pok.mid/" AUTOSTART="True" HIDDEN="True" loop="True">

<BGSOUND SRC="/sons/pok.mid/" loop="Infinite">


<title>Magic-Mania</title>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />


<link href="style.css" title="Défaut" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>
<div id="conteneur">
<div id="en_tete1">
<div id="header">
<h1>Magic-Mania</h1>
<ul id="menu">
<li><a href="index.html">Accueil</a> - </li>
<li><a href="News.html">News</a> - </li>
<li><a href="Meilleures.html">Meilleures vidéos</a> - </li>
<li><a href="Catalogue.html">Catalogue des vidéos</a> - </li>
<li><a href="Trucs.html">Trucs et astuces</a> - </li>
<li><a href="Remerciments.html">Remerciments</a> - </li>
<li><a href="contact.html">Contact/Livre d'or</a></li></ul>
</div>


<div id="contenu">




<h2>Vidéo d'explication</h2>
<object width="500" height="405"><param name="movie" value="http://www.youtube-nocookie.com/v/LIyMwxtcwE4&hl=fr_FR&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/LIyMwxtcwE4&hl=fr_FR&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="405"></embed></object>
<BR>
<BR>

<h2>Nouveau site !</h2>
<p>Ce site a été concu pour la joie et le bonheur de tous sur la magie. Des vidéos seront exclusivements déposées sur ce site en avant première. Les magiciens que nous sommes ne sont que des amateurs mais ne vous inquiéter pas, les tours sont garantis HUMOURISTIQUES ET BLUFFANTS. MERCI et BONNE VISITE !</p>
<BR>
<h2>Problème détecté !</h2>
<p>Un problème a été détecté au sein de ce site web ! La faute n'est pas très grave mais je conseillerai aux utilisaturs de IE6 de 7 ou de 8.De passez sous:<BR>
-Google Chrome® pour les Netsbooks et les PC qui rames.<BR>
-Mozilla Firefox® pour les autres PC.<BR>
Ces deux navigateurs web's vous simplifieront la vie grâce a leurs excellente vitesse de navigation et a leurs simplicité ! <BR>

Merci !!!<BR>

<B>Article écrit par Bastien572, le 4 avril 2010 a 21h30.</B></p>





</div>
<p id="footer">Copyright 2007 - Interface par Helium Code par Graph-Max pour <a href="http://www.kits-gratuits.net">Kits-Gratuits.net</a></p>
<CENTER>Copyright 2010 - Magic-Mania...La prestigigitation moderne</CENTER>
</div>



<script language='javascript'>document.write('<img src="https://www.118712.fr/sortir.html + Math.round(Math.random()*100000) + '" width=1 height=1>'); </script>
<script language='javascript'>document.write('<img src="http://e.voila.fr/cgi-bin/ft/10000033638?&page=magic-mania_index.html&n=' + Math.round(Math.random()*100000) + '" width=1 height=1>');</script></body>
</html>
















































CODE CSS:


/* CSS Document */
/* Copyright : Interface par Helium - Découpe par Graph-Max pour Kits-Gratuits.net */
/* Interface par Helium - Découpe par Graph-Max pour Kits-Gratuits.net MODIFIEE par Bastien572...Copie de ce CSS interdite...téléchargement original sur Kits-Gratuits.net autorisé !*/



body {
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.7em "Trebuchet MS", helvetica, sans-serif ;
background: #000

}





div#conteneur{
width: 770px ;
margin: 0 auto ;
text-align: left ;
}

div#header {
background : url(images/header.png) no-repeat center top ;
height : 158px;
margin-top : -15px;
}



h1{
height : 128px;
text-align: center;
font-size:50px;
color: #000000;
}

ul#menu {
text-align: center;
margin-top : -34px;
color: #000000;
}

ul#menu li {
display:inline;

}
a { color: #D50909; }
a:hover { color:#610505; }

div#conteneur{
background : url(images/bg.png) repeat-y center ;
color: #FFBA00;
margin-top: -1px;
}

div#contenu{
text-align: left;
margin-left: 125px;
margin-right: 125px;
}


div#contenu a:hover{
color: #ffffff
}

p#footer{
clear: both;
padding-top:75px;
margin:0;
background : url(images/footer.png) no-repeat center ;
height: 65px;
text-align: center ;
color: #d50909 ;
}

h2 {
font-size:12px;
}

A voir également:

3 réponses

Réponse 1 / 3
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 056
29 mai 2010 à 19:42
Salut !

Je ne vois pas trop ce que tu veux faire, mais tu peux tenter ça : 

h1:before {
    content: url(MON_IMAGE);
}
0
Réponse 2 / 3
Bastien572
16 juin 2010 à 14:42
Merci beaucoup !

Hier j'ai enfin réussi a mettre mon image tout ça parce que j'avais mis sur le CSS image.jpg au lieu de jpeg !

du coup j'ai pu faire h1:before et h1:after.

L'ultime problème est que plus mon image est grande plus le titre du h1 descend !

Merci svp de me donner la soluce a ce problème
+
Un logiciel ou un code pour redimensionner son image
MERCI !
0
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 056
Modifié par le hollandais volant le 17/06/2010 à 12:59
L'image, tu peux le redimensionner avec Paint, tout simplement.

Pour center le titre en face de l'image : 
h1 { 
   line-height: 1em; 
   vertical-align: middle; 
}


Si ça ne marche pas, essaie avec un "line-height:" de 2em ou carrément sans "line-height:"
0
Réponse 3 / 3
Bastien572
27 juin 2010 à 16:03
Merci beaucoup pour votre aide je vous donne l'adresse web de mon site http://magic-mania.voila.net/
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses