Forum : Header constitué d'une image au centre et d'une couleur sur les cotés

height:90px;
background:url(images/header.png) center no-repeat #ff0100

Les deux points après le repeat ne servent à rien. Il en est de même pour le "repeat-x", on utilise cette valeur généralement lorsque l'on veut remplir le cadre avec un motif, ce qui n'est pas le cas apriori

bloum

Auteur

Merci pour ta réponse
J'ai réussi à mettre mon image et la couleur en mettant

header{

background-color: #FF0100;
background-image:url(images/header.png)

}

Mais dès que je rajoute center, un padding ou un margin l'image disparait... Comment ça se fait ?

arnich

Il manque un ; à la fin de ta ligne background-image:url(images/header.png)

bloum

Auteur

Ah oui merci !
Mais ça ne change pas, dès que je mets un center, un margin, un padding etc l'image disparait.
De même, en dessous j'ai 2 petits logo que je voudrais mettre à droite. Mais à chaque fois que je mets quelque chose en rapport avec la position (margin, padding, position, float etc) l'image disparait...

Edit : j'ai remarqué que mon éditeur de texte colore les mots genre padding margin etc. Donc il colore le margin que j'ai mis pour centrer tout sur 960px, mais ne colore pas celui des "id" images etc

arnich

Tu peux montrer ton code.

bloum

Auteur

HTML/PHP :

<!DOCTYPE html>
<html>
  <head <?php language_attributes(); ?>>
    <meta charset="<?php bloginfo('charset'); ?>">
    <title><?php the_title(); ?></title>
    <link type="text/css" rel="stylesheet" href="<?php echo trailingslashit( get_bloginfo('template_url') ); ?>style.css" media="screen" />
    <?php wp_head(); ?>
  </head>
  <body>
    <div class="wrap">
      <header>
        <div id="header">
            <div class="center">
                <div id="logo">
                </div>
                <h1>Identité visuelle - Print - Web</h1>
                <div id="logofb">
                </div>
                <div id="logotwitter">
                </div>
            </div>
        </div>
      </header>

  CSS :

.center{
    margin : auto;
    width:900px;
}

#header{    
    background-color: #FF0100;
    background-image:url(images/header.png) ; 

}

#logo{
    width:340px;
    height: 218px;
    background-image:url(images/logo.png)
}

#logofb{
    width:97px;
    height:97px;
    background-image:url(images/facebook.png)

}

#logotwitter{
    width: 97px;
    height: 79px;
    background-image:url(images/twitter.png)
}

Voilà. Donc le margin du .center fonctionne
Mais dès que je mets un margin ,padding, position, float etc à #header, #logofb #logotwitter, l'image disparait

arnich

Il manque toujours des ;

Toutes les lignes de propriétés du css doivent finir par un ;

bloum

Auteur

D'accord j'ai rajouté, donc j'ai réussi à placer les 2 logos.
Mais pour le #header, je voudrais que le background-image soit centré sur les 900px (comme le reste) et que sur les côtés il y ai la couleur du background-color, comment faire ?

Et j'ai une petite question, si je veux que mon thème soit responsive, il faut que je mette toutes les valeurs qui sont en px en % c'est ça ?

Lartak

Bonsoir.

Et j'ai une petite question, si je veux que mon thème soit responsive, il faut que je mette toutes les valeurs qui sont en px en % c'est ça ?

Tout dépend de ce que tu veux dire par responsive.
Veux-tu parler de différentes tailles/résolution d'écran d'ordinateur ou tout supports (ordinateur, tablette, mobile) ?
Si tu veux juste parler d'ordinateurs, à la rigueur c'est jouable avec juste les %, mais si c'est pour tout support, ce sera plus compliqué, selon les supports il faudra que certains éléments ne s'affichent pas et certains éléments devront avoir un affichage différent.
Donc, dans le dernier cas, il te faudra par exemple utiliser les @mediaqueries, pour avoir des affichages différents selon le support utilisé par l'utilisateur.

arnich

Tu a ce tuto plutot bien foutu :http://www.grafikart.fr/tutoriels/html-css/grille-responsive-css-498

bloum

Auteur

Euh je sais pas je pensais le faire juste pour les tailles d'écran. Mais étant donné que je centre tout sur 900px, le design sera adapté aux mobiles etc donc faut il vraiment que je fasse les mediaqueries ?

Benjamin Derepas

Sur 900px ton design ne sera pas adapté sur mobile

Lounis

Arnich ta donner un lien , regarde et apprends et ton problème sera résolue enfin normalement .

Lounis,

Header constitué d'une image au centre et d'une couleur sur les cotés

13 réponses