La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  [Résolu] Probleme haut de page.		 « Précédent Suivant »
Pages: [1] Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: [Résolu] Probleme haut de page.  (Lu 2089 fois)
[Résolu] Probleme haut de page.
« sur: le 04-02-2012 a 14:19:49 »
lorikcana01
Membre récent
*

Hors-Ligne

Messages: 9





Voir le Profil
Répondre avec citation

Bonjour, j'ai un probleme avec mon haut de page, je n'arrive pas à mettre le texte au centre verticalement. Il est en bas...

(ne faite pas attention au "google adwork"  )
Pourriez vous m'aider svp ?
Voici mon code HTML:
<header id="haut">
    <div id="bloc_page" class="haut">
         
       <nav>
                    <ul>
                        <li><a href="#">ACCUEIL</a></li>
                        <li><a href="#">BLOG</a></li>
                        <li><a href="#">FORUM</a></li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
                </nav>
         
   </div>
</header>

Et mon code CSS:
#haut
{
    background-image: url('images/haut.jpg');
   background-repeat: repeat;
   width: auto;
   height: 40px;
   text-align: left;
}
nav
{
    width: 1215px;
   height: 40px;
    display: inline-block;
}

nav ul
{
    list-style-type: none;
}

nav li
{
    display: inline-block;
    margin-right: 15px;
}

nav a
{
    font-size: 1.2em;
    color: grey;
    text-decoration: none;
   font-family: times new roman;
}

nav a:hover
{
    color: grey;
    text-decoration: underline;
}
#bloc_page
{
    width: 1200px;
    margin: auto;
}
« Dernière Édition: le 05-02-2012 a 14:47:54 par lorikcana01 » Rapporter au modérateur  

Re:Probleme haut de page.
« Répondre #1 sur: le 04-02-2012 a 14:53:00 »
WebD
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 938





Voir le Profil    WWW    E-Mail
Répondre avec citation

Essai un vertical-align:middle
Rapporter au modérateur  
Agence Web  | Sticker MacBook | Lunettes personnalisées
Re:Probleme haut de page.
« Répondre #2 sur: le 04-02-2012 a 15:32:31 »
WebVitrine
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 639



Critique Mastery Max level !

Voir le Profil    WWW    E-Mail
Répondre avec citation

Trop mal foutu ton code...

Ta balise nav qui a un width supérieur à ton div principal.

text-align : left ... t'as pas besoin de le préciser, par défaut le texte est toujours à gauche !

width : auto;

Tu charges deux fois ta class haut...?

C'est un gros fouillis !

Ha, et pour centrer une div, utilises margin : 0 auto;
« Dernière Édition: le 04-02-2012 a 15:33:45 par WebVitrine » Rapporter au modérateur  
Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016
Re:Probleme haut de page.
« Répondre #3 sur: le 04-02-2012 a 16:57:39 »
lorikcana01
Membre récent
*

Hors-Ligne

Messages: 9





Voir le Profil
Répondre avec citation

En effet WebVitrine ^^ Je debute... Donc voici mon HTML apres reglages :

<body>
    <header id="haut">
      <div id="haut1">
              <nav>
                            <ul>
                                <li><a href="#">ACCUEIL</a></li>
                                <li><a href="#">BLOG</a></li>
                                <li><a href="#">FORUM</a></li>
                                <li><a href="#">CONTACT</a></li>
                            </ul>
                      </nav>
      </div>
    </header>

Et mon CSS:

body
{
    background-image: url('images/bg.jpg');
   background-repeat : no-repeat;
   margin: auto;
   background-attachment: fixed;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    background-color: #eeeeee;
}
#haut
{
    background-image: url('images/haut.jpg');
   background-repeat: repeat;
   width: auto;
   height: 40px;
}
#haut1
{
    margin : 0 auto;
   width: 1200px;
}
nav
{
    width: 1200px;
   height: 40px;
    display: inline-block;
}

nav ul
{
    list-style-type: none;
}

nav li
{
    display: inline-block;
    margin-right: 15px;
}

nav a
{
    font-size: 1.2em;
    color: grey;
    text-decoration: none;
   font-family: times new roman;
}

nav a:hover
{
    color: grey;
    text-decoration: underline;
}

Mais ça ne fonctionne toujours pas... le texte reste en bas 

« Dernière Édition: le 04-02-2012 a 16:58:43 par lorikcana01 » Rapporter au modérateur  
Re:Probleme haut de page.
« Répondre #4 sur: le 04-02-2012 a 17:11:03 »
WebVitrine
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 639



Critique Mastery Max level !

Voir le Profil    WWW    E-Mail
Répondre avec citation

Pas mieux ...

Tout ce dont tu as besoin, c'est d'une div avec un ul et tes li.
ensuite, pour ton positionnement, tu joues sur le style margin et padding.

Ton div, tu le fous en width 100% avec un background.
Ton ul, tu le fous en margin 5px auto;
Ton li, tu utilises ton margin right.

Tu compliques énormément ton code ...
Rapporter au modérateur  
Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016
Re:Probleme haut de page.
« Répondre #5 sur: le 04-02-2012 a 17:38:07 »
lorikcana01
Membre récent
*

Hors-Ligne

Messages: 9





Voir le Profil
Répondre avec citation

Merci, oui j'essai de mettre le plus de details possible mais... je m'embrouille en fait  . Donc apres re-rectification ça donne ^^:


<body>
    <div id="haut1">
          <ul>
                <li><a href="#">ACCUEIL</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">FORUM</a></li>
                <li><a href="#">CONTACT</a></li>
          </ul>
    </div>

et CSS:

#haut1
{
    background-image: url('images/haut.jpg');
   background-repeat: repeat;
   height: 40px;
    margin : 0 auto;
   width: 100px;
}
#haut1 ul
{

   height: 40px;
    display: inline-block;
    list-style-type: none;
   margin: 5px auto;
}

#haut1 li
{
    display: inline-block;
    margin-right: 15px;
}

(j'epargne les lien hein ^^)
Mais le probleme (encore un ^^) c'est que ça donne ça...

Le texte est aligné verticalement mais n'est plus en une seule ligne et l'image de fond ne se repte plus malgres le "repeat;". 

« Dernière Édition: le 04-02-2012 a 17:42:59 par lorikcana01 » Rapporter au modérateur  
Re:Probleme haut de page.
« Répondre #6 sur: le 04-02-2012 a 17:44:56 »
WebVitrine
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 639



Critique Mastery Max level !

Voir le Profil    WWW    E-Mail
Répondre avec citation

C'est déjà un peu plus propre.

Ton width, 100% et non 100px. Sinon la largeur de ton bandeau de navigation risque d'être étroit.

Vire le height du UL

Et adapte ton margin pour centrer verticalement ton menu.

Dans tout les cas, si tu galères déjà autant rien que pour faire un menu, tu es loin d'arriver à tes fins. Je te conseil vraiment de reprendre les choses à zero .
En passant par exemple par une petite formation sur le site du zero : http://www.siteduzero.com/

C'est gratos et adapté au débutant. Et c'est très bien fait comme site !
Rapporter au modérateur  
Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016
Re:Probleme haut de page.
« Répondre #7 sur: le 04-02-2012 a 18:04:59 »
lorikcana01
Membre récent
*

Hors-Ligne

Messages: 9





Voir le Profil
Répondre avec citation

Merci pour ton aide  Oui je crois que je vais y faire un tour ! Derniere petite question, sachant que mon "width: 1200px;" sur ma page, comment est-ce que je peux mettre mes lien à la au meme "debut" horizontalement en gardant quand meme le background en 100%?

Donc commencer au niveau du "A" de CONTACT.
« Dernière Édition: le 04-02-2012 a 18:06:36 par lorikcana01 » Rapporter au modérateur  
Re:Probleme haut de page.
« Répondre #8 sur: le 04-02-2012 a 19:56:23 »
WebVitrine
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 639



Critique Mastery Max level !

Voir le Profil    WWW    E-Mail
Répondre avec citation

Tu centre ton UL et tu lui donnes un width de 1200px
« Dernière Édition: le 04-02-2012 a 19:57:11 par WebVitrine » Rapporter au modérateur  
Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016
Re:Probleme haut de page.
« Répondre #9 sur: le 04-02-2012 a 20:24:20 »
lorikcana01
Membre récent
*

Hors-Ligne

Messages: 9





Voir le Profil
Répondre avec citation

Jvais te paraitre lourd mais... comment je centre le UL stp car text-align: center; n'aligne que le text et non le bloc :/?

« Dernière Édition: le 04-02-2012 a 20:26:01 par lorikcana01 » Rapporter au modérateur  
Re:Probleme haut de page.
« Répondre #10 sur: le 04-02-2012 a 20:30:25 »
WebVitrine
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 639



Critique Mastery Max level !

Voir le Profil    WWW    E-Mail
Répondre avec citation

Essaye avec un width: 1200px et un margin: 0 auto
Text-align c'est pour le text.
Margin te permet de centrer un élément.

Je m'arrête là, j'ai quand même du boulot qui m'attend.
Rapporter au modérateur  
Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016
Re:Probleme haut de page.
« Répondre #11 sur: le 04-02-2012 a 20:43:20 »
lorikcana01
Membre récent
*

Hors-Ligne

Messages: 9





Voir le Profil
Répondre avec citation

Merci encore WebVitrine, mais j'ai encore ce probleme et je ne peux pas mettre le "margin: 0 auto;" car il n'aligne pas horizontalement et j'ai deja mis "margin: 8px auto;" pour aligner verticalement. Quelqu'un d'autre pourrait m'aider maintenant que WebVitrine travaille svp?
Voici mon code HTML:

<div id="haut1">
        <ul>
                <li><a href="#">ACCUEIL</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">FORUM</a></li>
                <li><a href="#">CONTACT</a></li>
        </ul>
</div>

et CSS:

#haut1
{
    background-image: url('images/haut.jpg');
   background-repeat: repeat;
   height: 40px;
    margin : 0 auto;
   width: 100%;
}
#haut1 ul
{
    display: inline-block;
    list-style-type: none;
   margin: 8px auto;
   width: 1200px;
}
#haut1 li
{
    display: inline-block;
    margin-right: 15px;
}


Mon probleme est expliqué dans le message "Repondre#7"
« Dernière Édition: le 04-02-2012 a 20:46:52 par lorikcana01 » Rapporter au modérateur  
Re:Probleme haut de page.
« Répondre #12 sur: le 04-02-2012 a 20:50:29 »
dandreaweb
P'tit nouveau
**

Hors-Ligne

Sexe: Male
Messages: 124



dandreaweb

Voir le Profil    WWW    E-Mail
Répondre avec citation

Bonjour lorikcana,
Test ce code, ça devrait le faire :

ton  html :

<ul id="nav">
  <li><a href="#">ACCUEIL</a></li>
  <li><a href="#">BLOG</a></li>
  <li><a href="#">FORUM</a></li>
  <li><a href="#">CONTACT</a></li>
</ul>

ton css

#nav {
width:1200px;
background-image: url('images/haut.jpg');
list-style:none;
margin:auto;
height:30px;
padding:10px 0 0 10px;
}

#nav li {
display:block;
float:left;
margin-right:15px;
}

#nav li a {
font-size: 1.2em;
color:#B7B7B7;
text-decoration:none;
font-family: times new roman;
}

#nav li a:hover{
text-decoration:underline;
}
« Dernière Édition: le 04-02-2012 a 20:57:54 par clicandweb » Rapporter au modérateur  
Réalisation de sites internet , localisation : 69
dandreaweb.com
siren:534146618
Re:Probleme haut de page.
« Répondre #13 sur: le 04-02-2012 a 23:58:20 »
lorikcana01
Membre récent
*

Hors-Ligne

Messages: 9





Voir le Profil
Répondre avec citation

Bonjour, clicandweb merci pour ta reponse, ton code marche tres bien mis à part qu'il y a un probleme : le texte est tres bien aligné mais le background n'est pas sur toute la longueur le la page web, il reste sur les 1200px du site.
Comment faire pour eviter cela?

EDIT:
Solution trouvée !
Il suffisait de rajouter un div à ton code clicandweb.
Merci beaucoup à WebVitrine et clicandweb ! Voici le code de fin pour ceux qui sont intérressés :
HTML:

<div id="haut">
      <ul id="nav">
            <li><a href="#">ACCUEIL</a></li>
            <li><a href="#">BLOG</a></li>
            <li><a href="#">FORUM</a></li>
            <li><a href="#">CONTACT</a></li>
    </ul>
</div>

CSS:

#haut {
    background-image: url('images/haut.jpg');
}
#nav {
    width:1200px;
    list-style:none;
    margin:auto;
    height:30px;
    padding:10px 0 0 10px;
}
#nav li {
    display:block;
    float:left;
    margin-right:15px;
}

#nav li a {
    font-size: 1.2em;
    color:#B7B7B7;
    text-decoration:none;
    font-family: times new roman;
}

#nav li a:hover{
text-decoration:underline;
}
« Dernière Édition: le 05-02-2012 a 00:09:17 par lorikcana01 » Rapporter au modérateur  
Re:Probleme haut de page.
« Répondre #14 sur: le 05-02-2012 a 07:10:03 »
dandreaweb
P'tit nouveau
**

Hors-Ligne

Sexe: Male
Messages: 124



dandreaweb

Voir le Profil    WWW    E-Mail
Répondre avec citation

De rien Lorikcana, par contre, dans ta div haut tu peux également rajouter :
background-color:#242424;
avant ton background-image pour éviter de te retrouver avec un fond blanc au cas où tu aies un problème de chargement de ton image de fond.
« Dernière Édition: le 05-02-2012 a 11:33:11 par clicandweb » Rapporter au modérateur  
Réalisation de sites internet , localisation : 69
dandreaweb.com
siren:534146618
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 
Logo du forum du webmaster

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg