[Pb menu] hauteur des menus

24 juin 2006 à 13:44:27

salut !
je suis en train d'essayer de faire mon script de news et j'ai un petit problème au niveau du design !

En fait sur ces pages :
http://iutinfo.kelio-host.net/info/article-22-Test-de-l-etui-Piel-Frama-pour-Acer-N311.html
etc...
sa va !!

mais quand le contenu est plus petit que le menu de gauche sa plante :
http://iutinfo.kelio-host.net/info/categorie-2-Telephonie.html

Pouvez vous m'aider ??

ps: c'est un site de test et les articles sont juste la pour remplir
a+

rei_angel

24 juin 2006 à 17:11:56

je pense quand donnant une bonne taille a ton div tu devrais t'en sortir.

Lydriel

24 juin 2006 à 17:48:59

J'ai exactement le même problème que toi.

rei_angel : tu voudrait qu'il faudra modifier la taille du div à chaque qu'on ajoute un nouvel element dans le menu en gros ? A chaque qu'on en agrandit le contenu ?

devilhunt

24 juin 2006 à 17:53:13

Il faut donner une taille a ton contenu c'est tout, ou une taille minimale, mais sa ne fonctionne pas sous IE je crois

Lydriel

24 juin 2006 à 18:02:26

Si ça fait ça, c'est parce que le menu est flottant, donc, le footer se place par rapport au corps de page. Alors comment on peut faire pour que le footer se place par rapport au div qui descend le plus bas ?

EDIT: Je crois que j'ai resolu les problemes xpack, dans le code CSS de ton footer, il faut ajout

clear: both;

et ton footer se mettra la ou il doit être

xpack

24 juin 2006 à 18:22:49

merci bcp !!

C'est bon j'ai mis a jour
http://iutinfo.kelio-host.net/info/categorie-4-Tutoriaux.html

a+

AnthonyZéro

24 juin 2006 à 18:35:43

J'ai aussi un problème du genre, mais avec ce que vous dites j'ai pas réussi à y remédier

Voici mon code xhtml/php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > 
<head>
<title>DarkBane's Web - Accueil</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design définitif" href="style1.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Site des sorties nds et d'articles sur les jeuxvidéos, des astuces kotor2" />
<meta name="keywords" content="sorties nds, plannings nds, kotor2, nintendo, star wars" />
<meta name="author" content="Anthony LORIN" />
<meta name="date-revision-yyyymmdd" content="20060402" />
<meta name="reply-to" content="darkbane56@free.fr" />
<meta name="category" content="games" />
<meta name="revisit-after" content="15 days" />
<meta name="robots" content="index, follow" />
<meta name="identifier-url" content="http://kida.mine.nu/sorties-nds/" />
<meta http-equiv="refresh" content="120" />
</head>

<body>



<div id="en_tete">
<br /><br /><br /><br /><br /><br />
<br />
</div>



<?php
// Puis on inclue le menu
include("menu.php");
?>



<div id="corps">
<h1>bienvenue sur darkbane's web !</h1>
<p style="text-align:center;"><i>Résolution conseillée : 1024 par 768 pixels | Ceci est la version 3.0</i>
<br /><span class="pseudo"><a href="infos-legales.php">Voir la mention légale</a></span></p>
<h2>A qui s'adresse ce site ?</h2>
<p>J'ai réalisé ce petit site pour que Darkbane's Web premier du nom ne soit que mon site Perso ! Vous pouvez profitez
pleinement du Planning mais aussi des bonus comme des astuces pour le jeu Kotor 2, des informations sur Star Wars: La
Marine-Impériale et bientôt des fiches livre...</p>

<h2>Mises A jour</h2>
<p><span class="pseudo">Dernière MAJ: 04 juin:</span>

</div>



<?php
// Puis on inclue le pied
include("pied.php");
?>

</body>
</html>

Et mon code CSS correspondant

/* Le menu de gauche*/
#menu1
{
float: left; /* Le menu flottera à gauche */
width: 150px; /* Très important : donner une taille au menu */
background-color:#B92F00;
background:repeat;
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}

.element_menu
{
background-color:#B92F00;
color: #FFFFFF;
text-align:center;
margin-bottom: 10px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

/* Le corps de la page */

#corps
{
margin-left: 154px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
border-right: 2px solid black;
border-top: 2px solid black;
border-bottom: 2px solid black;
color:#000000;
background-color:#FFFFFF; /* Une couleur de fond pour le corps */
margin:auto;
}

/* Le pied de page */

#pied_de_page
{
padding: 5px;
text-align: center;
color:#000000;
background-color:#B92F00;
border-bottom: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
bottom:0;
clear: both;
}

Le problème c'est que le menu ne colle jamais bien au pied de page et aussi, je suis obligé de mettre plein de <br /> pour que le menu descende...
Aidez moi svp
Merci d'avance

Lydriel

24 juin 2006 à 23:23:58

On peut voir ce que sa donne ?

Sinon déja, je remarque que tu peut alleger ton code CSS, comme ceci :

sa fait quelques lignes en moins

. Et quand le background est une couleur, tu n'a pas besoin de mettre de repeat

. Tu peut donc le transformer comme ceci :

/* Le menu de gauche*/
#menu1
{
float: left; /* Le menu flottera à gauche */
width: 150px; /* Très important : donner une taille au menu */
background-color: #B92F00;
border: 2px solid black;
}

AnthonyZéro

4 juillet 2006 à 18:24:34

Me revoilà
Désolé d'avoir abandonné le sujet et de n'avoir plus donner de réponse.
J'ai eu des problèmes d'internet lors du changement de FAI, mais maintenant tout va mieux !

Donc, là je suis en train de refaire en quelque sorte mon site et je vous donnerais l'adresse correspondante pour que vous visualisez mieux le problème que j'ai. Seul hic, je vous demandrais d'attendre un peu puisque je suis occupé ailleurs en ce moment sur la toile...

AnthonyZéro

2 septembre 2006 à 23:08:33

Bonjour,
Me revoici après presque deux mois d'absence
Ces deux derniers jours, je me suis replongé dans la création web
J'ai essayé des 'clear: both;" au menu, au corps et au pied de page
J'ai même essayé de mettre le corps en flottant pour voir si on pouvait faire quelque chose après, mais ça n'a rien donner

Voici donc l'adresse où vous pouvez voir mon site en construction http://localoc.free.fr/v2/index.php
Le corps de la page est rempli de texte du tuto de Mateo comme vous le voyez mais ça c'parce que j'ai rélu son cours il y a peu de temps et j'aimais bien son texte (en fait je savais pas quoi mettre sur cette page d'essai

)

Je vous mets pour la même occasion le code CSS :

/* CSS Document */
/* Fichié créé le 02 septembre 2006 */
body
{
width: 770px;
margin: auto; /* Pour centrer la page */
margin-top: 20px;
margin-bottom: 20px;
background-color:#3366FF;
}
/* L'en-tête */
#en_tete
{
width: 768px;
border-top: 2px solid black;
border-bottom: 2px solid black;
border-right: 2px solid black;
border-left: 2px solid black;
height: 140px;
background-image: url("header1.png");
background-repeat: no-repeat;
}

/* Le menu de gauche*/
#menu
{
float: left;
width: 120px;
background-color:#B92F00;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}

.element_menu
{
background-color:#B92F00;
text-align:center;
margin-bottom: 10px;
}

/* Le corps de la page */
#corps
{
padding: 5px;
margin-left:124px;
border-right: 2px solid black;
border-bottom: 2px solid black;
color:#000000;
background-color:#FFFFFF;
}

/* Le pied de page */
#pied_de_page
{
padding: 5px;
text-align: center;
color:#000000;
background-color:#B92F00;
border-bottom: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
clear:both;
}

p
{
color: #000000;
text-indent:10px;
font-size: medium;
font-family:"Times New Roman", Times, serif;
}

J'aimerais donc que vous m'aidier à ce que le pied de page, le menu et le corps restent unis, collés peu importe la quantité du texte dans le corps ou le menu...
Je m'en remets à vous parce que je me suis torturé l'esprit pour trouver une solution ces deux derniers jours mais aussi il y a 2 mois, en vain..

Merci de votre aide

rei_angel

4 septembre 2006 à 19:49:20

salut darkbane, je me rend compte maintenant que la solution que j'ai citée au dessus est très contraignante. Si jamais tu trouve la solution, j'aimerai bien l'avoir

merci d'avance .

AnthonyZéro

9 septembre 2006 à 11:25:41

Je commence à croire qu'il est impossible de faire ce que je veux faire sans utiliser de tableaux... Il y a forcément un moyen de le faire avec des Divs...
Mais comment ? o_O

Regnareb

11 septembre 2006 à 3:20:54

C'est marrant comme, dès qu'on arrive pas à faire quelque chose, la faute retombe sur la technologie...

Ah... au fait... Cadeau

C'est très simple :
Rajoute un <div id="conteneur"> qui contiendra tout tes éléments. La suite est facilement trouvable après quelques tests.

Ah et aussi, vire moi tout ces 'Doctypes' qui trainent, ça fait sale, merci ;p

AnthonyZéro

11 septembre 2006 à 20:51:53

Citation : Beber

C'est marrant comme, dès qu'on arrive pas à faire quelque chose, la faute retombe sur la technologie...

Mmmh...je ne pensais pas du tout ça m'enfin...

Bref, merci beaucoup, j'vais voir ça tout de suite. Pour les Doctypes je croyais quec c'était indispensable dans mes pages pied.php et menu.php
Voilou!

Edit: j'viens d'essayerr tout ce que j'avais en tête et ça ne marche toujours pas, pourrais mùe dire quelles propriétés CSS as-tu mis pour id conteneur s'il te plait ? J'ai en marrre là! J'ai passé des mois sur ce problème, faut comprendre aussi... :-°

Regnareb

12 septembre 2006 à 1:22:59

Alors pourquoi remettre en cause le positionnement CSS et plaider la cause des tableaux ?

J'ai tout simplement mis le background du conteneur de la même couleur que ton menu et une bordure de 2 pixel, j'ai viré les bordures en général, et je les ais refaites, je crois que c'était à peu près tout.

Les Doctypes ne se mettent qu'une seule fois au début de la page, pas plusieurs fois

AnthonyZéro

12 septembre 2006 à 21:14:37

Merci beaucoup BeBer! J'ai enfin réussi à régler mon problème !
Ca se trouve, j'aurais été désespéré et j'aurais fait le site en tableau !

Mais non! D'ailleurs j'avais essayé en tableau pour voir si c'était facile mais en fait stro la galère !

Bref, je te remercie!
Et au fait....je peux te faire un calin !

Je plaisante bien entendu, allez bonne soirée à toi !

Regnareb

12 septembre 2006 à 21:30:21

Par contre j'utiliserais les bordures plutot que des images pour séparer les différents éléments de ton menu.

Et tu n'as pas enlevé les doctype des fichiers menu.php et pied.php

Et ton header n'est pas aligné avec le contenu à droite, il vaux mieux ne pas mettre une taille fixe pour le header mais que ça prenne toute la taille du conteneur

(comme pour les autres éléments d'ailleurs, comme ça si tu veux changer la largeur générale du site, il suffira de changer juste la taille du conteneur... enfin je pense :p)

De rien ^^