En même temps, ton code n'est plus du tout valide ! Tu laisse tout plein de balises ouvertes..
Toutes les balises simples
doivent être
fermées par un slash en XHTML, y compris les <meta>.. La règle XHTML est plus claire que l'ancienne HTML : lorsqu'on ouvre une balise, on la referme.. De plus, aucune balises ne peuvent se trouver enchevêtrées les unes sur les autres, elles ne peuvent qu'être emboîtées à la manière des poupées russes, d'où l'usage efficace des tabulations dans le code pour s'y retrouver..
Le slash de fermeture des balises simples est
toujours précédé d'un espace : <br />, <hr />, etc....
De plus, des attributs comme "align" comme tu utilises dans tes <p> ne font plus partie du vocabulaire XHTML.. Rempacés par la règle CSS
p { text-align: left; }
Toi qui n'entres pas encore dans les subtilités de l'XHTML / CSS (vois le Site du zér0 pour ça, très bien fait !), utilise plutôt cette en-tête HTML :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>Titre du site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
</head>
C'est du HTML 4.01, mais c'est un DOCTYPE valide et qui t'autorisera à continuer d'utiliser du vieux code HTML "à la grand-père".. En attendant mieux, si tu souhaites te plonger dedans
..
Les paragraphes d'une seule phrase de quelques mots chacun ne sont pas des paragraphes.. Inutile, donc, de polluer le code avec des <p> inutiles.. Surtout que ta page "Vidéos" présente en réalité une liste de vidéos.. Pourquoi tu n'utilises pas l'instrument prévu à cet effet : la liste..... <ul> et <li>, dont tu peux spécifier que cette liste là n'affichera pas les puces par la même règle CSS que pour ton menu.. Toujours par la CSS, tu préciseras une marge verticale entre chaque entrée de liste.. Dans ton cas, il s'agit d'une ligne :
#text li { margin-top: 1em; }
Les balises <b> et <i> ne sont plus d'actualité, remplacées respectivement par <strong> et <em>..
<p> </p> pour faire des sauts de lignes et ainsi décaler le contenu qui suit plus bas dans le bloc est devenu au fil du temps et des évolutions technologiques une idiotie : la règle CSS '
margin-top' fait ça très bien..
position: fixed; -> '
fixed' n'est pas une règle CSS connue par IE.. Il faut bidouiller par le JS pour que IE donne cet effet de position fixe à l'écran.. je n'en sais pas plus parceque c'est un positionnement que je n'utilise pas et je n'en n'ai jamais eu l'utilité fondamentale.. De plus, pour un objet positionné en '
float', IE ne sait pas lui attribuer une hauteur à 100% de celle de son contenant.. C'est pour ça que ton menu ne va pas plus bas.. On peut certes bidouiller par des règles CSS spécifiques à MS et particulièrement non standard car incluant des expressions JS, donc fortement non recommandées (c'est pour ça que je n'en parle pas) !! Ou aller consulter les tutos dont j'ai parlé plus haut, qui parlent aussi de comment faire un bloc de menu qui donne l'impression d'aller jusqu'au bas de la page..
Pour faire court, tu peux essayer un <body> qui ait juste la hauteur de l'écran ('height: 100%;'), un bloc de menu en 'position: absolute; top: 0px; left: 0px;', un bloc de contenu en 'position: relative;', d'une hauteur de 100%, avec une marge gauche égale à la largeur de ton menu et un scrolling automatique par un 'overflow: auto'..
Ca te donnerait ceci à essayer d'insérer dans ta CSS :
Code:
body {
height: 100%;
background: #FFFACD;
}
#menu {
position: absolute;
top: 0px;
left: 0px;
width: 12em;
background: #FFFACD;
}
#text {
position: relative;
margin-left: 12em;
height: 100%;
overflow: auto;
background: #FFFFFF;
}
Evidemment, ce n'est qu'une proposition de piste à suivre, pas une soluce pleinement testée.. Je n'ai pas trop le temps de le faire
.. Tu remarqueras cependant que le <body> a la même couleur d'arrière-plan que ton menu et que c'est ton bloc de "text" qui est défini à blanc.. C'est ainsi qu'on donne l'illusion que le bloc de menu "descend" jusqu'au bas de la page..
Courage, prend le temps de faire et d'essayer, c'est ainsi que la "chose" s'apprend et s'apprivoise
... Tu verras aussi que certaines choses qui passent bien avec IE et FF ne passeront peut-être pas aussi bien avec Opera ou Safari sur Mac (ou son frère Konqueror sous Linux).. une question doit te rester quand tu sens que tu pars dans des directions qui te paraissent un peu lourdes : "pourquoi faire simple quand on peut faire compliqué ?".. C'est la question humouristique qui est là pour nous rappeler la vraie, la seule : celle qui est précisément l'inverse et qui doit toujours prévaloir (quand ça peut)..
]
