[CSS + HTML] Besoin d'une petite aide sur le forum Programmation - 17-07-2011 19:36:09

Dirwiki

Niveau 6

17 juillet 2011 à 19:36:09

Salut tout le monde !
Alors je me lance dans la création d'un site en html et css ( php pour plus tard )

Alors la "base du site" est presque terminée mais j'ai un problème voici la disposition de mon site : http://s3.noelshack.com/upload/7344376998849_1.png

Comme vous voyez, dans le menu ( rectangle arrondi en gris ) je veux descendre mes liens pour qu'ils soit pile poil dans le rectangle. je rajoute donc un "padding-top: 20px;" dans le css pour descendre mon texte. Je vais donc voir ce que ca donne et le texte est bien descendu correctement mais il y a un truc bizare qui est apparu je vous laisse voir : http://s3.noelshack.com/upload/8406577678158_2.png

Quelle est la solution ?

Merci d'avance

takamura_san

Niveau 10

17 juillet 2011 à 19:59:26

T'as du oublié une balise fermente.
Parce que le background gris définis pour tes liens empiète sur l'espèce de carré bleu qui suit.

Dirwiki

Niveau 6

17 juillet 2011 à 20:09:19

T'entends quoi par une balise fermante ?
J'ai pensé a un truc, j'ai vu qu'en fait le truc c'est comme si le menu se répétait en bas j'ai donc ajouter un background-repeat no repeat et ca me donne ca : http://s3.noelshack.com/uom/upload/11459766398751_3.png
alors comment faire pour que la div contenu ( qui contient la zone ou il y a le texte) colle la div menu ?
J'ai essayé de faire margin: none mais ca ne change rien ...
Merci quand meme pour ta réponse

takamura_san

Niveau 10

17 juillet 2011 à 20:10:47

Mets ton code ca sera plus simple

Dirwiki

Niveau 6

17 juillet 2011 à 20:13:44

alors le html :

<body>
<div id="page">
<div id="header">
<img src="images/banniere.png" />
</div>
<div id="menu">
<a href="index.html">Accueil</a> <a href="2.html">Lien 2</a> <a href="3.html"> Lien 3</a>
</div>
<div id="contenu">
errerddd dddddddd dddddd ddddddd dddddd ddddd ddddddd ddddddddddd dddddddddd dddd ddddddd d d dd dd dddd ddd d dd fff ffffff ffff ff

</div>
<div id="footer">

</div>
</div>
</body>

et le css :

body
{
font-family: arial, verdana, sans serif;
background-color: #a4a4a4;
}

page

{
width: 1000px;
margin: auto;
}

header

{
background-image: url("images/header.png");
background-repeat: no-repeat;
height: 279px;
}

header img

{
width: 849px;
height: 199px;
padding-top: 75px;
padding-left: 72px;
}

menu

{
background-image: url("images/menu.png");
height: 78px;
text-align: center;
padding-top: 20px;
background-repeat: no-repeat;
}

contenu

{
background-image: url("images/contenu.png");
width: 764px;
background-repeat: repeat-y;
padding-left: 118px;
padding-right: 118px;
}

footer

{
background-image: url("images/footer.png");
height: 196px;
}

menu a

{
margin-left: 10px;
margin-right: 10px;
}

takamura_san

Niveau 10

17 juillet 2011 à 20:22:09

Juste pour vérifier tu peux mettre un height: 65px ou height: 60px dans menu et me dire ce que ca donne

takamura_san

Niveau 10

17 juillet 2011 à 20:25:53

Et une fois que t'as fais ca essaie de rajouter un
position: relative; dans contenu.

Dirwiki

Niveau 6

17 juillet 2011 à 20:26:02

Ahh oui j'ai essayé et la barre diminue et a partir de 57px on voit plus la barre :D Merci beaucoup ! Mais pourtant c'est bizare car mon image "menu.png" fait bien 78 de haut

takamura_san

Niveau 10

17 juillet 2011 à 20:33:01

Essaie de rajouter un position: relative; dans contenu et menu quand même

Dirwiki

Niveau 6

17 juillet 2011 à 20:36:21

Roo mais le problème doit etre ailleur car quand j'écris du texte sur plusieurs lignes dans mon "contenu"

Il y a de nouveau ces deux barres, c'est comme si les div ne se collent pas, elles laissent des marges entre elles, j'ai essayé margin: none postion: relative mais ca ne change rien

En tout cas merci pour ton aide

Fire_Storm

Niveau 10

17 juillet 2011 à 22:35:59

Pour centrer verticalement un texte dans un div il y a une petite astuce qui consiste à ajouter un line-height (propriété CSS quoi) de la même taille que la hauteur de la div, le seul soucis c'est qu'il faut que cette div possède une hauteur définie sinon ça ne marchera pas.

Ou alors comme tu as fais un padding.

A toi de voir ce que tu préfère.