alignement en-tete et menu

11 avril 2006 à 16:46:39

Donc dans le cours, le côté gauche du menu et aligner avec le côté droit de l'en-tete, mais moi je ne veux pas que les deux trucs soit alignés, je voudrais que le côté gauche du menu soit un peu colles avec la bord de l'écran comme ici!
J'ai essayé plusieurs méthode mais impossible de déplacer l'en-tete sans le menu

comment faire ? :euh:

Merci

Y a quelqu'un :euh:

strucky

11 avril 2006 à 17:43:36

BONJOUR

</span>

Citation : chiensable

Y a quelqu'un

Hum, 17h24 - 16h46 => 38 mn

Si urgent que ça ??

Quant à ton problème, je ne l'est pas compris...

Anonyme

11 avril 2006 à 17:50:04

Dis moi chiensable connais tu le CSS ? Si oui, tu devrais être capable de faire cette modification

Si tu y arrives pas donne nous ton css puis ta page !

Linux-cobaye

11 avril 2006 à 18:09:14

Sk!tZz > Biensur que je connais le CSS, pourquoi ? o_O

Le problème c'est que quand je mets:

margin: auto;

Je tiens a vous rassurer, j'ai enlever volontairement le "{" et le "}" et aussi d'autre chose!

Donc quand je mets le code, meme n'importe où, l'en-tete et le corps sont toujours touchez pas le "margin: auto;" alors que je voudrais que l'en-tete soit au milieu de la page et le menu a 10 pixels du bord de l'écran!
Et quand je retire le fameux code bin le menu reste a 10 pixels du bord de l'écran et l'en-tete et coller a l'écran alors que je demandequel soit au milieu de la page en parlant de largeur!
J'ai mit le code pour le menu et pour l'en-tete pour quel soit au milieu mais rien a faire :colere:

Anonyme

11 avril 2006 à 18:10:48

Montre nous tes codes !

Linux-cobaye

11 avril 2006 à 18:20:29

CSS: (J'ai tout mis désolé si je devais pas tout mettre

)

/*Code CSS des cadres du texte*/
.cadre-texte
{
width: 130px;
text-align: justify;
border-bottom: solid 1px rgb(201,200,204);
border-left: solid 1px rgb(201,200,204);
border-right: solid 1px rgb(201,200,204);
background-color: rgb(240,248,255);

}

/*Code CSS des cadres des images*/
.cadre-image
{
width: 127px;
border-bottom: solid 1px rgb(210,234,255);
border-left: solid 1px rgb(210,234,255);
border-right: solid 1px rgb(210,234,255);
border-top: solid 1px rgb(210,234,255);
}

a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration: underline;
color: black;
}
a /* Lien normal */
{
text-decoration: none;
color: black;
}

/*Code CSS du centrage*/
.cadre-texte
{
text-align: center;
}

.centre
{
text-align: center;
}

body
{
width: 760px;
margin-top: 20px;
margin: auto;
background-color: rgb(147,204,255);
}

/* L'en-tête */

#en-tete
{
width: 760px;
height: 100px;
background-image: url("Image/encoursderéalisation.PNG");
background-repeat: no-repeat;
margin-bottom: 10px;
margin: auto;
}

#menu
{
float: left; /* Le menu flottera à gauche */
width: 129px; /* Très important : donner une taille au menu */
}

.element_menu
{
background-repeat: repeat-x;
margin: 10px;
margin-bottom: 0px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

Et le HTML: (Faites pas trop attention au texte qui sera visible)

<!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>My life</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Acceuil" href="codecss.css" />
</head>
<body>
<div id="en_tete">

</div>

<div id="menu"><div class="element_menu">
<p><div class="cadre-image"><img src="Image/my_life.png" alt="my_life"/></div>
<div class="cadre-texte"><a href="accueil.html">Acceuil</a>
<br /><a href="présentation.html">Présentation</a>
<br /><a href="my_life.html">My life</a></div>
</div></div>

<div id="corps">
<br />
<div class="centre"> <h2>Bienvenu sur My life !</h2></div>
Grâce a My life vous pourrez gagnez des cadeaux et de l'argent, aussi vous pouvez donnez vos commentaires sur certains logiciels pour nous aidez à les améliorer !</p>
<p>Aidez les personnages virtuelle du site à survivre dans différents milieu (les airs, la mer, la terre...) et donnez vos avis sur des logiciels et si votre commentaires et juger gagner le logiciels améliorer !!</p>
<p>Qu'es ce que c'est ?
Qu'es ce qui faut faire ?
C'est payant ?
<br />Pour avoir les réponses à ces questions, je vous invite a allez voir <a href="présentation.html"><strong>ici</strong></a></p>
<p><div class="centre"><img src="Image/encoursderéalisation2.PNG" alt="encoursderealisation"></div></p>
</div>
<br />
<div id="pied_de_page">
A METTRE PLUS TARD

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

Voilà !

Anonyme

11 avril 2006 à 18:24:45

redis moi exactement ce que tu veux stp . Car je comprend pas très bien :-°

Linux-cobaye

11 avril 2006 à 18:33:03

Que l'image de l'en-tete ou banniere soit en haut et au milieu de la page, et que le menu soit a 10 pixels du bord gauche de la page!

Anonyme

11 avril 2006 à 18:54:28

Je suis en train de regarder ton CSS. Pour la bannière c'est bon !
Mais pour que le menu soit à 10px de la gauche il faudrait que tu agrandisse le body et que tu places ton menu en conséquence !

Linux-cobaye

11 avril 2006 à 18:59:31

Ba non justement pour la bannière c'est pas bon

Anonyme

11 avril 2006 à 19:01:50

#en_tete
{
width: 760px;
height: 100px;
background-image: url("Image/encoursderéalisation.PNG");
background-repeat: no-repeat;
margin-bottom: 10px;
margin: auto;
}

t'as oublier le non de ton id dans ton css et sur ta page xhtml .
#en_tete pas #en-tete

JVAlex

11 avril 2006 à 19:09:13

Enfin tu l'as pas oublié, mais tu as remplacé le "_" du XHTML par un "-" dans le CSS, voilà tout simplement d'où vient le problème

Linux-cobaye

11 avril 2006 à 19:17:32

Et non toujours pas