28172 sujets

CSS et mise en forme, CSS3

Création d'une entête avec logo et du texte centré

Bonjour,

Je bloque sur un truc tout bête.
J'ai besoin de faire une entête avec un logo et un texte.

La largeur de mon entête est de 1000px
Le logo à une taille de 280x100 et doit être positionné (idéalement) en top:10px et left:20px par rapport au point (0,0) de mon div d’entête

La particularité est que je désire centrer le texte de mon entête par rapport au texte en dessous (celui de la colonne de droite).

Le plus simple est de regarder l'image pour mieux comprendre ce que je souhaite faire.
J'ai mis le code HTML afin de reproduire facilement l'exemple.

Voici ce que le code ci dessous génère :
upload/38052-enete.jpg 

<!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" xml:lang="fr-FR" lang="fr-FR">
<head>
  <title>Test</title>

  <style>
    body {
      margin: 0;
      padding: 5px 0; 
      color: black;
      background-color: black;
      font-family: Arial, Times, Serif;
      font-size: 0.80em;
    }
    #global {
      width: 1000px;
      margin: 0 auto;
      padding:0;
      background-color: white;
    }
    #entete {
      background-color: lightgray;
      width: 1000px;
      height: 120px;
    }
    #entete_logo {
      float: left;
      position: relative;
      top: 10px;
      left: 10px;
      width: 280px;
      height: 100px;
    }
    #entete_titre {
border:1px green solid;
      float: left;
      position: relative;
      top: 10px;
      left: -280px;
      margin: 0 auto;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      padding: 5px 0px 5px 0px;
      width: 715px;
      line-height: 30px;
    }
    #colonne_gauche {
      width: 205px;
      float: left;
      background-color: lightgray;
      padding: 10px 0px 0px 0px;
      min-height: 130px;
      height:auto !important;
    }
    #colonne_droite {
      float: left;
      background: white;
      width: 735px;
      padding: 10px 30px;
    }
  </style>
</head>
 
<body>
  <div id="global">
    <div id="entete">
      <div id="entete_logo">
        <img src="logo.gif" />
      </div>
      <div id="entete_titre">
        Ici mon texte à centrer<br />
        Avec des retours à la ligne<br />
        Merci d'avance pour votre aide
      </div>
    </div>
   
    <div id="colonne_gauche">
    </div>
 
    <div id="colonne_droite">
      <p style="text-align:center; font-weight:bold; font-size:26px">
      Ici du texte centré
      <br />
      ...................................
      </p>
    </div>
  </div>
</body>
</html>


Je bloque dans le centrage du texte de l'entête.
Je n'arrive pas à gérer mes DIV correctement pour que ceux ci ne rentrent pas en "collision" et casse ma mise en forme.

J'espère que vous pourrez m'aider.
Merci d'avance pour votre aide et bonne journée
Modifié par slolo (06 Sep 2011 - 12:02)
bonjour,

pourquoi ne pas mettre l'entête à 100% au lieu de 1000px, ce qui permettra de centrer le texte, le logo pouvant lui être défini par un style css déjà défini?
Bonjour,

Je ne suis pas sûr de bien saisir l'intérêt du 100%, tu pourrais modifier l'exemple pour voir ce que ça donnerait.

En fait, ce que j'aimerais réussir à faire dans mon entête, c'est un DIV de 795px de long positionné à gauche en 205px (pour être calé par rapport à la colonne de droite) et centrer le texte (205+795 = 1000px)
Le souci c'est que le DIV de mon logo m'empêche de faire ce que je veux.
J'ai tenté le positionnement relatif, les float:left, ... mais rien n'y fait.
Je n'arrive pas à mon résultat final.

Pourtant je suis sûr que ça n'a rien de bien compliqué.
Bonjour,

Voici deux solution, plusieurs techniques sont faisables dans ton cas mais pour comparer il me faudrait un aperçu plus complet du rendu visuel final de ton interface. La technique peut dépendre de ton header si il est de hauteur fixe ou variable. Mais les solution ci-après fonctionnent dans les deux cas.

D'abord il suffit de positionner ton logo en absolu, ensuite il ne t’embêtera plus.

Solution 1 (la plus simple) :
Tu laisse ton div "entete_titre" dans le flux et tu lui applique un margin-left:205px;

Solution 2 :
Tu positionnes ton div "entete_titre" en float:right
Enfin tu place un overflow:hidden sur ta balise "entete" pour étendre la hauteur de ton header en fonction du contenu de ta balise "entete_titre"

Si tu as un problème de superposition, il suffit de positionner div "entete_titre" en position:relative et lui donner un z-index inférieur au z-index que tu aura attribuer à ton logo.

A++ Smiley cligne
Modifié par Spacedementia (06 Sep 2011 - 18:39)
Bonjour Spacedementia et merci pour ta réponse.

Spacedementia a écrit :
Solution 1 (la plus simple) :
Tu laisse ton div "entete_titre" dans le flux et tu lui applique un margin-left:205px
J'ai déjà essayé cette solution mais ça ne fonctionne pas.
Le DIV contenant le texte à centré passe à la ligne.
J'ai donc essayé de réduire la largeur de mon DIV mais rien n'y fait.
C'est comme si l'image prenait 280px de large dans le flux sur les 1000px de largeur de mon site et que je ne pouvais pas aller en dessous de 280px.
Peut être que je devrais jeter un oeil sur les marges négatives.

Spacedementia a écrit :
Solution 2 :
Tu positionnes ton div "entete_titre" en float:right
Enfin tu place un overflow:hidden sur ta balise "entete" pour étendre la hauteur de ton header en fonction du contenu de ta balise "entete_titre"

Je vais regarder de ce côté là mais ça m'a l'air bien "tordu" pour ce que je veux faire (qui me semble pourtant pas bien compliqué à la base)
Salut Slolo,

Tout d'abord :
slolo a écrit :

Je vais regarder de ce côté là mais ça m'a l'air bien "tordu" pour ce que je veux faire (qui me semble pourtant pas bien compliqué à la base)

Les deux solutions que je t’ai donné ne sont pas tordues ! C'est deux manières de faire c'est tout, les deux sont tout à fait correcte et utilisables. Smiley cligne

slolo a écrit :

Le DIV contenant le texte à centré passe à la ligne.

La solution que je t’ai proposée fonctionne, si ton div passe à la ligne c'est que tu n'as pas appliqué correctement mes consignes.
Spacedementia a écrit :

D'abord il suffit de positionner ton logo en absolu, ensuite il ne t’embêtera plus.

Je t'ais indiqué dans mon précédent message de positionner ton div "logo" en absolu, l'as tu fais ?

slolo a écrit :
Peut être que je devrais jeter un oeil sur les marges négatives.

Non dans ce cas la ça devient "tordu" ^^... Je t'affirme que tu n'en a pas besoin dans ce cas.
Modifié par Spacedementia (07 Sep 2011 - 18:47)
Sujet clos
Aller à