La Ferme du web - Les forums

Venez baraguiner avec la communauté !

Vous n'êtes pas identifié.

#1 09/06/2011 15:55:54

Nat82
Membre
Date d'inscription: 09/06/2011
Messages: 4

insérer un logo sur une image

bonjour,
Comment faire pour insérer un logo sur un bandeau (image) en en-tête.

Voici mon code (qui ne fonctionne pas, je n'ai que le logo et pas l'image en arrière-plan :

Code:

                            div#header{
            /*margin: 10px 10px 10px 10px;
            height: 100px;*/
            margin-left: 170px;
            margin-right: 170px;
            background-image: url(images/sunset.jpg);
            background: url(images/logo.jpg) no-repeat;
            }

Merci pour votre aide.

Hors ligne

 

09/06/2011 15:55:54

Botte De Foin Publicitaire


#2 09/06/2011 16:55:30

codegrabber
Membre
Date d'inscription: 31/12/2009
Messages: 96

Re: insérer un logo sur une image

alors si je comprends bien, tu veux caler une image dans un div, c'est ca ?
si oui effectivement ton code ne va pas fonctionner.
ici, tu veux styler le div, donc les marges sont celles du div par rapport a son element parent (body ?).

pour caler ton image, tu dois faire un truc du genre :

Code:

div#header{
  background: url(images/logo.jpg) no-repeat top left;
}

cela affichera le logo en haut a gauche de ton div.
change "top" et "left" en fonction du placement souhaité de ton image.
tu peux aussi lui donner des chiffres pour être plus précis sur le placement.
ca c'est pour la version courte !
sinon tu peux aussi passer cela en plusieurs lignes :
- background-image
- background-position
- background-repeat
mais la 1ère solution permet de tout faire en une ligne smile

bon courage

Hors ligne

 

#3 09/06/2011 17:15:35

Nat82
Membre
Date d'inscription: 09/06/2011
Messages: 4

Re: insérer un logo sur une image

merci pour ta réponse.
En fait je suis débutante dans le css (je pense que c'est utile de le préciser hmm
dans mon header ; j'ai un bandeau une image donc et ce bandeau je voudrais afficher mon logo à gauche du bandeau. Est-ce que je peux joindre une copie d'écran pour être plus explicite ?

Merci

Hors ligne

 

#4 09/06/2011 17:30:30

Sybio
Administrateur
Date d'inscription: 06/10/2008
Messages: 91
Site web

Re: insérer un logo sur une image

Si tu débutes je te conseille le très bon tuto http://www.siteduzero.com/forum-81-122-xhtml-css.html du sdz ^^
Et une fois que tu l'as lu et bien n'hésites pas à mettre en pratique tes connaissances via le tuto de la ferme -> http://www.lafermeduweb.net/tutorial/cr … ss-11.html
wink

Sinon pas de pb pour le screenshot ^^

Hors ligne

 

#5 09/06/2011 17:39:00

Nat82
Membre
Date d'inscription: 09/06/2011
Messages: 4

Re: insérer un logo sur une image

j'ai déjà suivie une formation d'1 jour sur le css mais il me manque la pratique. Là je bloque juste sur cela : insérer une image (un logo) sur une autre image (le bandeau du header).
la copie d'écran que j'ai n'est pas sur mon site (vu qu'il n'est pas encore réalisé !) ; je l'ai sur mon pc. comment je fais pour te l'envoyer ?

Hors ligne

 

#6 09/06/2011 17:48:56

Sybio
Administrateur
Date d'inscription: 06/10/2008
Messages: 91
Site web

Re: insérer un logo sur une image

Ce n'est pas compliqué ^^
2 images à afficher (le bandeau et une par dessus) donc 2 div:

HTML:

Code:

<div id="header">

    <div id="logo"></div>

</div>

CSS:

Code:

#header
{
    background: url("images/monHeader.jpg");
    width: largeur_image_header;
    height: hauteur_image_header; 
}

#logo
{
    background: url("images/logo.jpg");
    width: largeur_image_logo;
    height: hauteur_image_logo;   
}

Voila la div de ton logo apparaitra par défaut en haut à gauche de ton header, à toi de la palcer avec des margin ou en jouant avec le padding sur ton #header.

Si tu as déjà eu une formation je te conseille de mettre en pratique via ce tuto: http://www.lafermeduweb.net/tutorial/cr … ss-11.html ou du moins piocher ce don tu as besoin ^^

Hors ligne

 

#7 10/06/2011 17:30:29

Nat82
Membre
Date d'inscription: 09/06/2011
Messages: 4

Re: insérer un logo sur une image

Merci pour vos réponse.
alors pour le header et logo, cela à marcher sauf que maintenant cela m'a décalé les autres blocs.
En fait j'ai plusieurs blocs dans mon header :
un bandeau
un logo à gauche
un titre centrer
une zone de recherche
un autre bloc pour le menu (dans le header).

Je n'arrive pas à les placer et à les fixeer  (dès que je bouge un, cela bouge un autre bloc).
voici mon code CSS :

Code:

[color=#0d1bf1]html {font-size: 100%;}
        body {padding: 1em; font-size: .85em; font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;}
        
        h1 {margin-top: 0; text-align: center; background: moccasin;}
        ol, ul, li {padding: 0; margin: 1em;}
        
        div#header{
            background: url("images/header.jpg");
            margin-left: 300px;
            margin-right: 300px;
            height: 110px;             
            }
            
        /*div#logo{
            background: url("images/logo.jpg") no-repeat;
            width: 50px;
            height: 100px;  
            width:690px;
            left : 70%;
            margin-left : -100px
            }*/
            
        div#blog-title{
            margin-left: auto;
            margin-right: auto;
            width: 200px;
            text-align:center;
            }
            
        div#search{
            z-index:1
            position:fixed;
            margin-top:-20px;
            margin-left: 750px;
            /*margin-left: 750px;*/
            width: 200px;            
            }
            
        div#petit_header{
            background: yellow;
            height: 50px;
            margin-top: 30px;
            margin-left: 170px;
            margin-right: 170px;
            }[/color]

et mon code fichier header.php (c'est du wordpress)
[code]</head>
<body <?php body_class(); ?>>
<div id="header">
<div id="logo"></div>
<div id="blog-title"><a href="<?php echo home_url() ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></div></a> <?php bloginfo( 'description' ) ?>
<div id="search"><?php get_search_form(); ?></div>
<div id="petit_header"></div>
</div>[/code


J'ai pourtant regarder les tuto ; cherchez sur le net mais j'avoue que je m'y perd.
Merci pour votre précieuse aide.
Nathalie

Hors ligne

 

Pied de page des forums

Powered by FluxBB
© Copyright 2008-2009 - LaFermeduWeb.net