Menu qui s'allonge en fonction du contenu

Répondre

Consultez la formation au référencement naturel Google de WebRankInfo / Ranking Metrics


Ron56
WRInaute passionné
WRInaute passionné
 
Messages: 706
Inscription: Dim Nov 20, 2005 20:05

Menu qui s'allonge en fonction du contenu

Message 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 :

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 :

Image
Dernière édition par Ron56 le Mer Mar 22, 2006 17:21, édité 2 fois.
Haut

fabor
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 137
Inscription: Jeu Mar 17, 2005 12:56

Message le Mer Mar 22, 2006 16:57

Code: Tout sélectionner
<div id="menu_v_g">
  <div id="contenu">
  </div>
</div>

peut etre non?
Haut

Ron56
WRInaute passionné
WRInaute passionné
 
Messages: 706
Inscription: Dim Nov 20, 2005 20:05

Message le Mer Mar 22, 2006 17:02

Nickel ! merci

Mais maintenant le footer reste en haut ! :oops: :lol:

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;
     }
Haut

narayana
WRInaute passionné
WRInaute passionné
 
Messages: 835
Inscription: Ven Jan 28, 2005 12:53

Message le Mer Mar 22, 2006 17:04

#footer{
clear:both;
...
Haut

Ron56
WRInaute passionné
WRInaute passionné
 
Messages: 706
Inscription: Dim Nov 20, 2005 20:05

Message le Mer Mar 22, 2006 17:07

Merci bcp !

Problème résolu !
Haut

Ron56
WRInaute passionné
WRInaute passionné
 
Messages: 706
Inscription: Dim Nov 20, 2005 20:05

Message le Mer Mar 22, 2006 17:32

Un autre problème !

Compatibilité IE/mozilla ! :oops:

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 :

Image

Sous FF :

Image


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 :

Image

MAis sous FF ca déconne :

Image
Haut

narayana
WRInaute passionné
WRInaute passionné
 
Messages: 835
Inscription: Ven Jan 28, 2005 12:53

Message 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 ;-)
Haut

Ron56
WRInaute passionné
WRInaute passionné
 
Messages: 706
Inscription: Dim Nov 20, 2005 20:05

Message le Mer Mar 22, 2006 17:46

J'ai lu mais la c'est la première fois que je pratique :roll: :wink:

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
Haut

narayana
WRInaute passionné
WRInaute passionné
 
Messages: 835
Inscription: Ven Jan 28, 2005 12:53

Message le Mer Mar 22, 2006 17:56

Donne le code source de ta page
et celui de ta css que l'on voit cela ;-)
Comme c'est en construction cela devrait pas être trop long
Haut

Ron56
WRInaute passionné
WRInaute passionné
 
Messages: 706
Inscription: Dim Nov 20, 2005 20:05

Message 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
Haut

Ron56
WRInaute passionné
WRInaute passionné
 
Messages: 706
Inscription: Dim Nov 20, 2005 20:05

Message le Mer Mar 22, 2006 20:44

Je comprend pas pq IE interprète comme ca :x :?
Haut
Répondre

Formation recommandée sur ce thème :

Formation Référencement naturel Google : apprenez une méthode efficace pour optimiser à fond le référencement naturel dans Google de façon durable... Formation animée par Olivier Duffez et Fabien Facériès, experts en référencement naturel.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :

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 0 invités

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group , traduction par phpBB-fr.com, mod SEO par phpbb-seo.com