Problèmes de tailles d'images

et de texte^^ et de scroll bar :D

30 septembre 2006 à 18:39:00

Yop all

Voila j'ai un problème avec le codage d'un design avant toute chose voila le html + le css :

<!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="en" lang="en">
<head>
<title>DENJOX v1 <>Welcome & Have Fun <></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="DENJOX" href="styledenjox.css" />
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="header">

</div>
<div id="menu_barre">

   </div>
   <div id="haut">
   </div>
<div id="menu">
<div class="element_menu">
<h3>Titre menu</h3>

<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>

</div>
</div>

<div id="contenu">
   </div>
   <div id="element_contenu">
   lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala
   <br>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala
   <br>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala
   lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala
   <br>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala
   <br>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala
   lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala
   <br>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala
   <br>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala
   lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala
   <br>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala
   <br>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala
   </div>

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

et voila le css:

body
{
width: 1000px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
}

#header
{
width: 1008px;
height: 213px;
background-image: url("images/header.png");
}

#menu_barre
{
width: 1008px;
height: 36px;
background-image: url("images/menu_barre.png");
}

#haut
{
width: 1008px;
height: 135px;
background-image: url("images/haut.png");
}

#menu
{
float: left;
}

.element_menu
{
width: 157px;
background-image: url("images/menu.png");
background-repeat: repeat-y;
color: white;

}

#contenu
{
width: 851px;
height: 62px;
background-image: url("images/contenu_haut.png");
margin-left: 157px;
}

#element_contenu
{

width: 851px;
background-image: url("images/contenu.png");
background-repeat: repeat-y;
margin-left: 157px;
color: white;
padding-left: 20px;
}

#footer
{

background-image: url("images/footer.png");
width: 1008px;
height: 59px;
}

div
{
vertical-align: top
}

Donc mes problèmes sont les suivants:
-Pour le menu l'image ne couvre pas toute la hauteur :s
-Pour le texte du menu quand je met un padding-left pour le centrer plus cela décale aussi le texte du contenu :s
-Pour finir^^ j'ai une scroll bar indésirable en bas que je n'arrive pas a enlever :s

Merci d'avance de m'aider

(je sais j'ai beaucoup de problème

zeunyton

30 septembre 2006 à 20:06:38

pour ton image tu peux jouer avec le background-positon:;

background-position:top;

Alors pour ton texte

text-align:center;

pour l'autre attend un peut je fait des recherche car je sais que ces avec hidden mais je ne sais plus comment on écrit le code

Voila j'ai trouvais ces en css

overflow:hidden;

devilspy

30 septembre 2006 à 23:47:43

Yop

Merci de ta réponse

alors pour le texte ça a marcher sans problème^^ merci bcp

Sinon pour le reste ça ne marche pas

Pour le background-top ça ne change rien :s
Et pour le hidden ça marche trop bien

ça enleve meme la scroll de droite alors que c'est que celle du bas qui me gene^^

Merci

devilspy

1 octobre 2006 à 16:22:32

up plzz need help

har1bo

1 octobre 2006 à 16:29:50

Salut!

Pour le menu,essaie de lui applquer l'image de fond

Pour le texte,met le deja entre les balises <p> </p>,puis applique le padding au p

Pour la Scrollbar,...Je sais pas

Et petite remarque:t'as pas besoin de mettre la ligne de style body dans le xhtml,elle y est dans le CSS

En gros,voila:

<!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="en" lang="en">
<head>
<title>DENJOX v1 <>Welcome & Have Fun <></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="DENJOX" href="styledenjox.css" />
</head>

<div id="header">

</div>
<div id="menu_barre">

</div>
<div id="haut">
</div>
<div id="menu">
<div class="element_menu">
<h3>Titre menu</h3>

<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>

</div>
</div>

<div id="contenu">
</div>
<div id="element_contenu">
<p>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalal
<br>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalal
<br>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala
lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala
<br>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalal

<br>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala
lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalal
<br>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalal
<br>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalal
lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala
<br>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala
<br>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalaala
</p>
</div>

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

Pour le css,je te laisse faire :diable:

devilspy

1 octobre 2006 à 18:04:26

je savais pas pour le body merci^^

sinon je ne comprend pas trop ce que tu entend par une image de fond :? car j'en est mis une mais elle ne va pas jusqu'en bas c'est tout !

merci de ton aide

har1bo

1 octobre 2006 à 18:05:47

Re!

Je te parle d'apliquer l'image de fond au menu,et non au element_menu

Voila!

devilspy

1 octobre 2006 à 19:48:47

non ça ne change rien :s meme si je met l'image dans les 2 :s par contre j'ai remarquer quelque chose c'est que lorsque que le menu est plus long que le contenu le menu s'agrandit et passe par dessus le footer oO le footer ne descend pas oO pourtant j'ai fait comme dans le tuto pour créer son design (le TP) !

merci d'avance

har1bo

1 octobre 2006 à 19:51:09

Un clear:both au footer?

devilspy

2 octobre 2006 à 18:38:47

ouéééé

ça marche

merci beaucoup^^ mais c'est quoi ce code?

c'est la premiere fois que je le vois

par contre now j'ai aussi le contenu qui ne descent pas jusqu'en bas :s je vois pas du tout d'où ça viens :s personne n'a une idée pleaseee ?

merci d'avance

devilspy

4 octobre 2006 à 7:07:05

up plzzzz je vois pas comment faire :'(

devilspy

6 octobre 2006 à 7:13:08

^ Up SvP je sais pas quoi faire

^
| |

har1bo

6 octobre 2006 à 12:35:41

Citation : devilspy

ouéééé ça marche merci beaucoup^^ mais c'est quoi ce code? c'est la premiere fois que je le vois par contre now j'ai aussi le contenu qui ne descent pas jusqu'en bas :s je vois pas du tout d'où ça viens :s personne n'a une idée pleaseee ?

merci d'avance

Salut!

clear:both; sert a anuler les floats sur le block

Pour le menu,essaie de faire un div conteneur qui englobe le menu et le footer.Tu lui appliques l'image dez fond en repeat-y,ça devrait aller