Problème de CSS

Sujet résolu

16 mars 2007 à 14:28:52

Bonjour,

J'ai un petit soucis avec mon code CSS, j'ai lu les cours sur la création de site, j'avoue, je n'ai pas encore tout assimilé :euh:

le problème que je rencontre se situe au niveau du fond.

Je m'explique, en 1er lieu j'ai mis la bannière, ensuite j'ai fait le menu de gauche, c'est ensuite que c'est compliqué.
Pour le corps j'ai d'abord mis une image puis à la suite pour le fond j'ai laissé le background général.

Il en est à peu prés de même pour la marge de droite que je nomme "menu1" sauf que là je n'ai pas utilisé le background général.

Et donc ce qui ne va pas c'est que dés que je fais une page avec du texte trop long, et bien les menu reste à la même taille, il ne s'allonge pas en longeur comme le corps...

Je vais mettre le code vous comprendrez peut-être mieux o_O

body
{
width: 760px;
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 ! */
background-image: url("design/fondpage.jpg");
color: white;
/* Une petite image de fond pour éviter d'avoir un vieux fond blanc

*/
}

/* L'en-tête */

#en_tete
{
width: 760px;
height:500px;
background-image: url("image/banniere.jpg");
background-repeat: no-repeat;
}

/* _______________________________________________________________________*/

/* page centrale */

#corps
{
background-image: url("design/fondcorps.jpg");
background-repeat: no-repeat;
width: 470px;
position:absolute;
margin-left: 121px;
}

.element_corps
{
margin-left: 10px;
width: 425px;
text-align: left;

}
.element_corps a
{
color: #B3B3B3;
}

.element_corps a:hover
{
color: white;
}

/* _______________________________________________________________________*/
/* menu droite */

#menu1
{
float: right; /* Le menu flottera à gauche */
width: 170px;
background-image: url("design/marge.jpg");
background-repeat: repeat;
position:right;

}

.element_menu1
{
text-align: center;
}

/* _______________________________________________________________________*/

/* menu gauche */

#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
height:900px;
background-image: url("design/fondmenu.jpg");
background-repeat: repeat;
position: absolute;
}

.element_menu
{
text-align: center;
background-repeat: repeat-x;

}

.element_menu a
{
color: #B3B3B3;
}

.element_menu a:hover
{
color: white;
}

/* _______________________________________________________________________*/
/* texte*/

{
font-size: 12px;
font-family: Comic sans MS, Arial, Verdana, "Arial Black", serif;
}

h3
{
text-align: center;
text-decoration: italic;
}

h2
{
text-align: center;
text-decoration: italic;
}

h5
{
text-align: center;
font-style: italic;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
<title>Clair De lune, the inner's senshi site</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Sailor Moon, Sailor Mercury, Sailor Mars, Sailor Jupiter, Sailor Venus,
Pretty Guardian Sailor Moon, pgsm, Sailor Moon Live, naoko takeuchi" />

<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />

</head>

<body>



<div id="en_tete">



</div>




<div id="corps">

<div class="element_corps" >

<img src="image/wellcome.gif" />

<p> Vous voici arrivé sur le site des inners senshi, j'ai nommé:
Sailor Moon, Sailor Mercure, Sailor Mars, Sailor Jupiter et Sailor Vénus!
<br />
Clair de Lune vous donnent toutes les infos du manga, de l'anime, du seramyu et du live.
Des images, du son, des vidéos, des jeux, des profils complets....il ne tiens qu'à vous de découvrir toutes les richesses de ce site!
<br />
</p>
Amusez-vous bien et bonne visite!
<br />

<h1>Zoom sur...</h1>
<p>
<center>-----------------------------------------------------</center>

<h1>News</h1>
<p> Haaaaaaa!!! ce que ça fait du bien de revenir!! j'ai enfin pu faire les changements d'hébergement, j'ai fini mon petit layout qui m'a pris pas mal de temps -_-' j'ai du réviser tout mon html...<br />
Mais Clair de Lune est de retour avec plein de nouveauté!</p>

</div>
</div>




<div id="menu1">

<div class="element_menu1" >
<img src="design/fonddroit.jpg" />

</div>
</div>




<div id="menu">

<div class="element_menu" >

<img src="design/boutsite.jpg" />

<a href="index.html" class="element_menu">Acceuil</a><br />
<a href="http://bloglumina.free.fr/phpBB2/index.php" class="element_menu">Forum</a><br />
<a href="apropos.html" class="element_menu">A propos</a><br />
<a href="liens.html" class="element_menu">liens</a><br />
<a href=".html" class="element_menu">livre d'or</a><br />
<a href="suggestion.html" class="element_menu">Suggestions</a><br />
<a href="webmiss.html" class="element_menu">Webmiss</a><br />

<br />

<img src="design/bouthistoire.jpg" />

<a href="intro.html" class="element_menu">Introduction</a><br />
<a href="naoko.html" class="element_menu">Mangaka</a><br />
<a href="manga.html" class="element_menu">Manga</a><br />
<a href="anime.html" class="element_menu">Anime</a><br />
<a href="live.html" class="element_menu">Live</a><br />
<a href="seramyu.html" class="element_menu">Seramyu</a><br />

<br />

<img src="design/boutperso.jpg" />

<a href="usagi.html" class="element_menu">Usagi/Sailor Moon</a><br />
<a href="ami.html" class="element_menu">Ami/Sailor Mercury</a><br />
<a href="rei.html" class="element_menu">Rei/Sailor Mars</a><br />
<a href="makoto.html" class="element_menu">Makoto/Sailor Jupiter</a><br />
<a href="minako.html" class="element_menu">Minako/Sailor Vénus</a><br />

<br />

<img src="design/boutgoodies.jpg" />

<a href="gallerie.html" class="element_menu">Gallerie</a><br />
<a href="avatar.html" class="element_menu">Avatar</a><br />
<a href="wallpaper.html" class="element_menu">Wallpapers</a><br />
<a href="gif.html" class="element_menu">Gif animés</a><br />
<a href="transparent.html" class="element_menu">Transparents</a><br />
<a href="papier_lettre.html" class="element_menu">Papiers à lettre</a><br />

<br />
<img src="design/boutfan.jpg" />

<a href="quizz.html" class="element_menu">Quizz</a><br />
<a href="concour.html" class="element_menu">Concours</a><br />
<a href="adoption.html" class="element_menu">Adoptions</a><br />
<a href="vosaward.html" class="element_menu">Awards</a><br />

<br />

</div>
</div>

</body>
</html>

Voilà si quelqu'un pouvait me dire ce qui cloche j'en serais ravi

Merci d'avance

Mister Magoo

16 mars 2007 à 14:44:00

Salut
Ben tout va bien car les menus ne s'allongent normalement que si tu mets du texte dedans.
Tes menus et ton corps sont dans des div différentes donc ils auront des vies indépendantes si je puis m'exprimer ainsi.
Ce qui arrive a ton site est normal.

Ce qui ne serait pas normale c'est que tu ais tes menus qui passent en dessous du corps, ou le corps en dessous des menus.

Mais rassure toi tout est normal pour ton site.

Si ça rend pas comme tu le souhait fais parvenir des captures d'écran et tu auras alors d'autre solutions

Mais pour le moment ton site a l'air de fonctionner logiquement

Cybermoon

16 mars 2007 à 19:41:09

Merci pour votre réponse

en fait c'est vrai que sans les captures on ne se rend pas bien compte, le soucis dont je parlais c'est que quand j'ai trop de texte dans la partie "corps" les 2 menus sur le côtés eux ne s'allongent pas

voilà les capture d'écran (je ne les met pas en visuel, ça prend trop de place)

La 1ère c'est avec un texte de taille normal; vous voyez, les menus sur le côté?! o_O

1ère capture cliquez merci

Le seconde c'est idem et là j'y aie mis du texte plus long

2ème caputre cliquez merci

voilà, mais si je comprend bien ce que vous dites, comme il n'y a pas de texte en plus dans les menus ce serait normal, que pourrais-je donc faire pour que les menus s'allongent eux aussi en harmonie avec le "corps"?!

merci d'avance :euh:

Cybermoon

19 mars 2007 à 12:55:13

je fais juste un petit "up"
s'il vous plait :'(

Mister Magoo

19 mars 2007 à 14:36:02

Salut alors j'ai eu une idée .
Voila l'idée

1 il va falloir créer une balise conteneur qui va encadrer tes menus (droit et gauches) ainsi que ton corps
ça va te donner un truc du genre:

</body>
<div id="conteneur">

<div id="menugauche">
bla bla du menu
</div>

<div id="corps">
bla bla du corps
</div>

<div id="menudroit">
bla bla du menu
</div>

<div id="pieddepage">
bla bla du pied de page
</div>

</div>

La suite de l'astuce est dans le CSS. Il va falloir que tu définisses les borders du conteneur de façon à avoir les bordures externes qui t'intéressent ici je pense border-left et border-right.
De cette façon les bordures externes grandissent en même temps que ta page.

Ensuite tu définis les borders du corps de page border-left et border-right.
voila c'est une solution j'espère avoir été clair dans mon explication.

Pour résumer mon idée ce sont les borders du corps et du conteneur qui vont servir de bordure pour tes menus.

PS: ton site a l'air plutot simpas même si je ne suis pas trop branché manga .
</span>

Tootsie

19 mars 2007 à 14:55:30

C'est peut être un peu bête ce que je vais dire, étant donné que je débute mais ... :euh:

Pourquoi pas tout simplement mettre la hauteur à 100% pour le menu ?

Code css:

#menu
{
height: 100%;
}

Cybermoon

19 mars 2007 à 22:19:38

oui tu as été trés clair (et je t'en remercie d'ailleurs)
Par contre pour les balises border, en fait je ne sais pas si j'en ai vraiment l'utilité, dans le sens où les bordure que l'on voit font partie du fond, mes bordures sont sous forme graphique et non dans le CSS...

Dois-je donc rajouter juste le conteneur, mais dans ce cas que dois-je mettre dans ses propriétés?! o_O

Et au passage merci du compliment

Tootsie, j'ai essayé ce que tu m'as dit mais ça ne marche pas

Sota

19 mars 2007 à 23:49:08

Si ce que tu veux est que ton image ( celle de droite ) reste toujours présente il suffit de rajouter ça ( si l'image est le background):

background-attachement: fixed;

Si c'est plutôt une image ( en tout cas que tu ne t'en sers pas comme background):

position: fixed;

Pour le menu de gauche, il n'y a aucun intérêt à le fixer vu qu'il doit défiler avec la page.

Cybermoon

20 mars 2007 à 13:49:03

je te remercie Sota, mais en fait l'image du menu de droite je l'ai mise directement dans mon HTML (je vais peut-être faire des changements sur certaine pages) et ce que je veux c'est que le fond de mes deux menus s'allongent en même temps que le corps...

Cybermoon

21 mars 2007 à 20:50:35

petit up?? s'il vous plait...

Cybermoon

23 mars 2007 à 12:49:20

Personne ne sait?! :euh:

(je ne peux pas mettre mon site en ligne sans ça....)

Cybermoon

27 mars 2007 à 17:20:20

youhou???? quelqu'un peut m'aider svp?!!!

Cybermoon

28 mars 2007 à 21:58:05

heeeeelp me please heeeeeelp me....

Cybermoon

31 mars 2007 à 23:19:16

je commence vraiment à désespéré... mon problème est-il si compliqué?!

Cybermoon

8 avril 2007 à 15:34:44

s'il vous plait y'a personne qui saurait me dire?!

Problème de CSS

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Problème de CSS

Problème de CSS

Supprimer

Modérer

Signaler le message aux modérateurs