Titre: [Résolu] Probleme haut de page.
Posté par: lorikcana01 le le 04-02-2012 a 14:19:49
Bonjour, j'ai un probleme avec mon haut de page, je n'arrive pas à mettre le texte au centre verticalement. Il est en bas...
[url=http://www.imagup.com/data/1143026821.html]
(ne faite pas attention au "google adwork" ;D)
Pourriez vous m'aider svp ?
Voici mon code HTML:
[color=Red]<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>[/color]
Et mon code CSS:
[color=Red]#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;
}[/color] |
Titre: Re:Probleme haut de page.
Posté par: WebD le le 04-02-2012 a 14:53:00
| Essai un vertical-align:middle |
Titre: Re:Probleme haut de page.
Posté par: WebVitrine le le 04-02-2012 a 15:32:31
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; |
Titre: Re:Probleme haut de page.
Posté par: lorikcana01 le le 04-02-2012 a 16:57:39
En effet WebVitrine ^^ Je debute... Donc voici mon HTML apres reglages :
[color=blue]<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>[/color]
Et mon CSS:
[color=blue]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;
}[/color]
Mais ça ne fonctionne toujours pas... le texte reste en bas :-\ |
Titre: Re:Probleme haut de page.
Posté par: WebVitrine le le 04-02-2012 a 17:11:03
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 ... |
Titre: Re:Probleme haut de page.
Posté par: lorikcana01 le le 04-02-2012 a 17:38:07
Merci, oui j'essai de mettre le plus de details possible mais... je m'embrouille en fait :-\. Donc apres re-rectification ça donne ^^:
[color=green]
<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>[/color]
et CSS:
[color=blue]#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;
}[/color]
(j'epargne les lien hein ^^)
Mais le probleme (encore un ^^) c'est que ça donne ça...
[url=http://www.imagup.com/data/1143038723.html]
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;". :-\ |
Titre: Re:Probleme haut de page.
Posté par: WebVitrine le le 04-02-2012 a 17:44:56
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 ! |
Titre: Re:Probleme haut de page.
Posté par: lorikcana01 le le 04-02-2012 a 18:04:59
Merci pour ton aide ;D 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%?
[url=http://www.imagup.com/data/1143040765.html]
Donc commencer au niveau du "A" de CONTACT. |
Titre: Re:Probleme haut de page.
Posté par: WebVitrine le le 04-02-2012 a 19:56:23
| Tu centre ton UL et tu lui donnes un width de 1200px |
Titre: Re:Probleme haut de page.
Posté par: lorikcana01 le le 04-02-2012 a 20:24:20
| Jvais te paraitre lourd mais... comment je centre le UL stp car text-align: center; n'aligne que le text et non le bloc :/? |
Titre: Re:Probleme haut de page.
Posté par: WebVitrine le le 04-02-2012 a 20:30:25
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. |
Titre: Re:Probleme haut de page.
Posté par: lorikcana01 le le 04-02-2012 a 20:43:20
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:
[color=green]
<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>
[/color]
et CSS:
[color=blue]
#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;
}
[/color]
Mon probleme est expliqué dans le message "Repondre#7" |
Titre: Re:Probleme haut de page.
Posté par: dandreaweb le le 04-02-2012 a 20:50:29
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;
} |
Titre: Re:Probleme haut de page.
Posté par: lorikcana01 le le 04-02-2012 a 23:58:20
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:
[color=green]
<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>
[/color]
CSS:
[color=green]
#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;
}[/color] |
Titre: Re:Probleme haut de page.
Posté par: dandreaweb le le 05-02-2012 a 07:10:03
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.
|
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|