Menu qui s'allonge en fonction du contenu
11 messages
• Page 1 sur 1
-
Ron56 - WRInaute impliqué
- Messages: 708
- Inscription: 20 Nov 2005
Menu qui s'allonge en fonction du contenu
le Mer Mar 22, 2006 16:46
Voila je développe un site actuellement mais j'ai un soucis au niveau du CSS !
Voila le CSS posant problème :
menu_v_g étant le menu vertical gauche
contenu étant le contenu
Mon code HTML étant le suivant :
Quand j'ajoute du contenu le bloc "contenu" s'allonge, et , j'aimerai bien que le menu s'allonge de la même façon !
Comment faire ?
EDIT :
Voila l'allure du site :
Voila le CSS posant problème :
- Code: Tout sélectionner
#menu_v_g {
background-image: url(../images/menu_v_bg.jpg);
width: 151px;
float: left;
}
#contenu {
width: 649px;
margin-left:151px;
}
menu_v_g étant le menu vertical gauche
contenu étant le contenu
Mon code HTML étant le suivant :
- Code: Tout sélectionner
<div id="menu_v_g">
</div>
<div id="contenu">
</div>
Quand j'ajoute du contenu le bloc "contenu" s'allonge, et , j'aimerai bien que le menu s'allonge de la même façon !
Comment faire ?
EDIT :
Voila l'allure du site :
Dernière édition par Ron56 le Mer Mar 22, 2006 17:21, édité 2 fois.
-
fabor - WRInaute discret
- Messages: 152
- Inscription: 17 Mar 2005
le Mer Mar 22, 2006 16:57
- Code: Tout sélectionner
<div id="menu_v_g">
<div id="contenu">
</div>
</div>
peut etre non?
-
Ron56 - WRInaute impliqué
- Messages: 708
- Inscription: 20 Nov 2005
le Mer Mar 22, 2006 17:02
Nickel ! merci
Mais maintenant le footer reste en haut !
Code HTML
Code CSS du footer :
Mais maintenant le footer reste en haut !
Code HTML
- Code: Tout sélectionner
<div id="menu_v_g">
<div id="contenu">
Contenu global
</div>
</div>
<div id="footer">
</div>
Code CSS du footer :
- Code: Tout sélectionner
#footer {
background-image: url(../images/footer_bg.jpg);
width: 800px;
height: 19px;
}
-
Ron56 - WRInaute impliqué
- Messages: 708
- Inscription: 20 Nov 2005
le Mer Mar 22, 2006 17:32
Un autre problème !
Compatibilité IE/mozilla !
La j'ai tout corrigé mais il y a un probleme avec le menu horizontal du haut ( juste en dessous de la bannière) :
Sous IE :
Sous FF :
Au niveau CSS ca donne :
menu_h_g : menu horizontal partie gauche
menu_h_d : menu horizontal partie droite
Au niveau du html :
Si jamais j'imbrique comme tout a l'heure comme ceci :
C'est impec sous IE :
MAis sous FF ca déconne :
Compatibilité IE/mozilla !
La j'ai tout corrigé mais il y a un probleme avec le menu horizontal du haut ( juste en dessous de la bannière) :
Sous IE :
Sous FF :
Au niveau CSS ca donne :
- Code: Tout sélectionner
#menu_h_g {
background-image: url(../images/menu_h_g.jpg);
background-repeat: no-repeat;
width: 154px;
height: 35px;
float:left;
}
#menu_h_d {
background-image: url(../images/menu_h_d.jpg);
background-repeat: repeat-x;
height: 35px;
width: 646px;
margin-left:154px;
}
menu_h_g : menu horizontal partie gauche
menu_h_d : menu horizontal partie droite
Au niveau du html :
- Code: Tout sélectionner
<div id="menu_h_g">
</div>
<div id="menu_h_d">
</div>
Si jamais j'imbrique comme tout a l'heure comme ceci :
- Code: Tout sélectionner
<div id="menu_h_g">
<div id="menu_h_d">
</div>
</div>
C'est impec sous IE :
MAis sous FF ca déconne :
-
narayana - WRInaute impliqué
- Messages: 835
- Inscription: 28 Jan 2005
le Mer Mar 22, 2006 17:44
#menu_h_d { float:right;
<div id="menu_h_g"></div>
<div id="menu_h_d"></div>
Je te conseillle une lecture du site de référence sur les css alsacreations
A mon avis tu n'as pas tout compris à ce qu'est le flux de données dans un document html
<div id="menu_h_g"></div>
<div id="menu_h_d"></div>
Je te conseillle une lecture du site de référence sur les css alsacreations
A mon avis tu n'as pas tout compris à ce qu'est le flux de données dans un document html
-
Ron56 - WRInaute impliqué
- Messages: 708
- Inscription: 20 Nov 2005
le Mer Mar 22, 2006 17:46
J'ai lu mais la c'est la première fois que je pratique 
Avec un float right , marche pas , ca empire , j'ai ca sous IE et sous FF :
http://img364.imageshack.us/my.php?image=temp9vt.jpg
Avec un float right , marche pas , ca empire , j'ai ca sous IE et sous FF :
http://img364.imageshack.us/my.php?image=temp9vt.jpg
-
Ron56 - WRInaute impliqué
- Messages: 708
- Inscription: 20 Nov 2005
le Mer Mar 22, 2006 18:04
- Code: Tout sélectionner
<body>
<div id="global">
<div id="header">
</div>
<div id="menu_h_g">
</div>
<div id="menu_h_d">
</div>
<div id="menu_v_g">
test
test
<div id="contenu">
Contenu global
</div>
</div>
<div id="footer">
</div>
</div>
</body>
- Code: Tout sélectionner
body {
margin: auto; /* pour éviter les marges */
text-align: center; /* pour corriger le bug de centrage IE */
}
#global {
margin-left: auto;
margin-right: auto;
width: 800;
text-align: left; /* on rétablit l'alignement normal du texte */
}
#header {
background-image: url(../images/banniere.jpg);
width: 800px;
height: 123px;
}
#menu_h_g {
background-image: url(../images/menu_h_g.jpg);
background-repeat: no-repeat;
width: 154px;
height: 35px;
float:left;
}
#menu_h_d {
background-image: url(../images/menu_h_d.jpg);
background-repeat: repeat-x;
height: 35px;
width: 646px;
margin-left:154px;
}
#menu_v_g {
background-image: url(../images/menu_v_bg.jpg);
background-repeat: repeat-y;
width: 151px;
float: left;
}
#contenu {
width: 649px;
margin-left:151px;
}
#footer {
background-image: url(../images/footer_bg.jpg);
width: 800px;
height: 19px;
clear:both;
}
ET la sous FF c'est OK , mais sous IE ca merde ! :s
IE :
http://img364.imageshack.us/my.php?image=temp9vt.jpg
11 messages
• Page 1 sur 1
Lectures recommandées sur ce thème :
- Menu en fonction de la page visitée
- Comment profiter d'un titre allongé dans AdWords
- [Résolu]Problème menu en fonction du naviguateur
- Le contenu avant le menu
- Intérêt du menu après le contenu ?
- Placer le contenu avant le menu ?
- Menu avant contenu ou aprés.
- Liens menu en php et contenu flash
- Menu de navigation: contenu et postionnement dans la page
- Comment ré-écrire un lien en fonction du contenu...
- Référencement d'un site en frames - 04-08-2008
- Le titre allongé des annonces premium Google Adwords - 14-02-2011
- La toolbar pour Firefox de Google - 23-09-2005
- AdWords API Version 3 - 02-02-2006
- Google ouvre un weblog pour mieux communiquer - 11-05-2004
- Afficher le PageRank en entier dans Firefox (barre d'outils Google) - 16-01-2008
- Google veut connecter votre frigo à Internet - 01-04-2010
- Google Webmasters Tools indique le nombre d'abonnés à vos flux RSS/Atom - 17-09-2007
Consultez la description détaillée des produits ou services de Google suivants : Google Related Links
- Calcul du taux de liens profonds
Cet outil vous permet de calculer le taux de liens profonds vers un site web. Un lien profond est un lien qui ne pointe pas vers la page d'accueil mais au contraire vers une page interne du site. Les sites dont l'essentiel du référencement vient de leurs inscriptions dans des annuaires ont un taux de liens profonds faible ; à l'inverse, les sites de référence ont souvent un taux de liens profonds plus important, signe que leur contenu a suscité de nombreux liens spontanés.
Qui est en ligne
Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 2 invités
Contact
Confidentialité