28220 sujets

CSS et mise en forme, CSS3

Passer la hauteur en parametre / une autre solution

J'ai créé une feuille de style pour mon site.

Ce site est décomposé en plusieurs couches :
Une image de fond fixe
3 Bloques dans un conteneur :
Le logo (horizontal)
Le menu (vertical à gauche)
Le centre (vertical à droite du menu)

Le menu contient une image de fond fixe et le menu proprement dit réalisé en images.
Le centre contient le texte de la page.

Si le texte contenu dans "centre" est plus long que la hauteur de ma fenêtre et que je scrolles l'image de fond de "menu" est tronquée à partir d'un certain moment qui dépend de la hauteur de "menu".

Si je régles la hauteur de menu à une valeur plus élevée que la hauteur de mon texte la barre de défilement n'est plus correcte.

Je voudrais soit pouvoir passer la hauteur à mon "menu".


Voici mon css


Une idée ?
Merci

[I]Le CSS 



html,body {
color:white;
background-color:black;
background-image:url(BackFromHell_Background.png);
background-attachment: fixed;

background-repeat:no-repeat;
}
#conteneur {
 position: absolute;
/* margin-top: 75px;*/
 /*width: 100%;*/
 width: 1024px;
}
#logo {
/*float: right;*/
 margin-left: 675px;
 width: 1000px;
}
#centre {
 /*background-color:blue;*/
 margin-left: 250px;
 margin-right: 25px;
}
#menu {
float:left;
 /*position: absolute;*/
 margin-top: 20px;
 left:0;
 width: 250px;
 height: 950px;
 background-image:url(BackFromHell_Guitar.png);
 background-attachment:fixed;
 background-repeat:no-repeat;
}

.menuitem {
list-style-type: none;
}
.menuitem li {
float: left;
}
.menuitem a {

margin: 0 2px;
width: 190px;
height: 50px;
display: block;
/*text-align: center;*/
border: 1px /*solid gray*/;
text-decoration: none;
/*color: #000;
background: #fff;*/
}
.menuitem a:hover {
/*background: #ccc;
border: 1px solid gray; */


}
.menuitem a:active {
/*background: gray;
color: #fff;*/

}
.menuitem a#accueil{
background-image: url(BackFromHell_Menu_Accueil_No_Focus.png);
background-repeat:no-repeat;

}
.menuitem a#accueil:hover{
background-image: url(BackFromHell_Menu_Accueil_Focus.png);
background-repeat:no-repeat;
}
.menuitem a#moi{
background-image: url(BackFromHell_Menu_Moi_No_Focus.png);
background-repeat:no-repeat;
}
.menuitem a#moi:hover{
background-image: url(BackFromHell_Menu_Moi_Focus.png);
background-repeat:no-repeat;
}
.menuitem a#costume{
background-image: url(BackFromHell_Menu_Le_Costume_No_Focus.png);
background-repeat:no-repeat;
}
.menuitem a#costume:hover{
background-image: url(BackFromHell_Menu_Le_Costume_Focus.png);
background-repeat:no-repeat;
}
.menuitem a#musique{
background-image: url(BackFromHell_Menu_Musique_No_Focus.png);
background-repeat:no-repeat;
}
.menuitem a#musique:hover{
background-image: url(BackFromHell_Menu_Musique_Focus.png);
background-repeat:no-repeat;
}
.menuitem a#linux{
background-image: url(BackFromHell_Menu_Linux_No_Focus.png);
background-repeat:no-repeat;
}
.menuitem a#linux:hover{
background-image: url(BackFromHell_Menu_Linux_Focus.png);
background-repeat:no-repeat;
}
.menuitem a#voitures{
background-image: url(BackFromHell_Menu_Voitures_No_Focus.png);
background-repeat:no-repeat;
}
.menuitem a#voitures:hover{
background-image: url(BackFromHell_Menu_Voitures_Focus.png);
background-repeat:no-repeat;
}
.menuitem a#amis{
background-image: url(BackFromHell_Menu_Amis_No_Focus.png);
background-repeat:no-repeat;
}
.menuitem a#amis:hover{
background-image: url(BackFromHell_Menu_Amis_Focus.png);
background-repeat:no-repeat;
}
.menuitem a#contact{
background-image: url(BackFromHell_Menu_Contact_No_Focus.png);
background-repeat:no-repeat;
}
.menuitem a#contact:hover{
background-image: url(BackFromHell_Menu_Contact_Focus.png);
background-repeat:no-repeat;
}

.menuitem a#separateur{

}
.menuitem a#separateur:hover{

}
/* (Re)définition des Styles */

#signature {
 color: white;
 text-align: right; 
 margin-top: 50px;
 margin-right: 25px;
 font-size: 140%;
 font-style: italic;
}


Le html simplifie

<html>
		<body>
			<div id="conteneur">
				<div id="logo">
					<img src="Resources/Look/BackFromHell_Logo.png" class="logo" alt="logo" >
			      </div>
			      <div id="menu" height=950px>
					
					<ul class="menuitem">
						<li><a id="accueil" href=""></a></li>
						<li><a id="moi" href=""></a></li>
						<li><a id="costume" href=""></a></li>
						<li><a id="musique" href=""></a></li>
						<li><a id="linux" href=""></a></li>
						<li><a id="voitures" href=""></a></li>
						<li><a id="separateur" href=""></a></li>
						<li><a id="amis" href=""></a></li>
						<li><a id="contact" href=""></a></li>
                                        </ul>
				</div>
				
				<div id="centre">
					<h1>Moi</h1>
                                </div>

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

Modifié par BackFromHell (15 Aug 2005 - 10:26)
Salut.
Premièrement, bonjour. Je crois que tu as oublié de le préciser.
Deuxièment, n'oublie pas de mettre ton code dans les balise "[ code ]".
Troisièment, n'oublie pas de lire les règles du forum.

Merci à toi et bienvenue sur le site!!

(désolé, j'ai fais mon modo Smiley murf )
Modifié par tidanone (15 Aug 2005 - 01:42)
Bonjour BackFromHell,

Pourrais-tu baliser ton code CSS et indiquer rapidement quel est ton code HTML ? Ou mieux, fournir une url.
Ah, on y vous plus clair, maintenant Smiley cligne

Mais du coup, mauvaise nouvelle : avant de régler ce problème d'image d'arrière-plan du menu, il y a un problème nettement plus grave à corriger.

En l'état, les liens de ton menu n'ont pas de texte, n'est-ce pas ? Tout passe par les background-image CSS ?

Si c'est bien le cas, ce menu est inutilisable en dehors des quelques navigateurs graphiques dans lesquels tu l'a peut-être testé. Il sera inutilisable pour un utilisateur de navigateur non graphique, de navigateur non CSS2, de lecteur d'écran, potentiellement pour un moteur de recherche, un traducteur, etc.

La première chose à faire serait donc :
- de remettre "dans le HTML" les images par défaut de tes différents liens (éléments <img src="..." alt="ici, un texte alternatif utile"),
- ou de rétablir des intitulés de lien texte, éventuellement masqués via CSS.
Effectivement, je n'avais pas pensé à cas de figure :
- Lynx, on n'y pense jamais.
- Les moteurs de recherche, je n'oses même pas imaginer qu'ils référence mon site.
- A la base, il existe comme "vitrine".

J'ai donc tenté de modifier mon code comme suit

Pour le CSS

.menuitem a#accueil{
 /*background-image: url(BackFromHell_Menu_Accueil_No_Focus.png);*/
}
.menuitem a#accueil:hover{
 background-image: url(BackFromHell_Menu_Accueil_Focus.png);
}


Le background-repeat est maintenant placé au niveau du parent

Mon HTML devant 

<li><a id="accueil" href=""><img src="Resources/Look/BackFromHell_Menu_Accueil_No_Focus.png"  alt="Accueil" ></a></li>


Malheureusement, comme pour la méthode hover, l'image est toujours définie en Background, le résultat n'est plus correct. Smiley decu

Par contre, je viens de découvrir le style "display:none" qui sera très partique si le navigateur ne supporte pas les CSS Smiley smile . Mais pas dans le cas d'un navigateur un mode texte supportant les CSS Smiley decu .

En réfléchissant un peu, j'ai remis mon image de fond dans mon bouton :

Pour le CSS

.menuitem a#accueil{
 background-image: url(BackFromHell_Menu_Accueil_No_Focus.png);
}
.menuitem a#accueil:hover{
 background-image: url(BackFromHell_Menu_Accueil_Focus.png);
}


Et j'ai simplement ajouté alt="......" dans l'appel au niveau du html


<li><a id="accueil" href=""  alt="Accueil"></a></li>


Cela semble fonctionner Smiley biggrin . En graphique, j'ai le résultat désiré. Mais avec Lynx Smiley decu

Je ne vois pas comment faire ?

J'ai un peu regardé les exemples de menu :
Dans le G03 (celui avec le visage du gamin) l'item du menu est appelé comme suit : 

<li><a id="menu1" title="menu1" accesskey="1" href="#"></a></li>

Alors que dans le menu du modele6 de "blocs sans tableau" il est appelé par :

<li><a href="">Menu 1</a></li>


Pq cette diffèrence ?


J'ai aussi intégré la guitare qui me posait problème dans l'image de fond principale (celle de body) et enlevé l'appel au niveau du bloc menu.

Déjà merci pour ton aide.
BackFromHell
Modifié par BackFromHell (15 Aug 2005 - 20:51)
Sujet clos
Aller à