28172 sujets

CSS et mise en forme, CSS3

Redimensionnement barre de menu

Bonjour,
Tout d'abord je tiens à m'excuser dans le cas ou je ne poserais pas ma question au bonne endroit ou si la réponse à la question a déjà été apporté ailleurs, après avoir cherché brièvement je n'ai pas trouvé de réponse qui me permette de résoudre mon soucis.

Je n'ai que très peu fait du CSS et de l'html, j'essaye de construire une barre de menu qui lorsque j'agrandis la fenêtre il s'agrandisse mais pas au de la de 1000px, (ça c'est OK, le soucis c'est qu'il fait jamais moins de 1000px). Comme il est fixé lorsque la fenêtre est réduite une parti des liens ne sont plus accessible.

La barre de menu ne se redimensionne pas. Je pense que mon problème est lié aux images utilisé pour les boutons qui ne se redimensionne pas. J'ai mis max-width : 100px;

Je vous mets un bout de mon script pour que vous puissez y jeter un coup d'oeil.

<style type="text/css">

/* Barre de Menu*/
#bgHeader{
    position : absolute; 
    left : 0px;
    top : 0px;
    z-index:0;
    width:100%;
    max-height: 200px;
    max-width: 1024px;
}

.btHeaderA{ 
    position : relative;  
    z-index:2;
    top : 5px;
    width: auto;
	height: auto;
}

.btHeaderB{
    position : absolute;
    z-index:1;
    top : 5px;
    width: auto;
	height: auto;
}

.btHeaderC{
    z-index:3;
    position : relative;
    text-align: center;
    width: auto;
	height: auto;    
}

.btHeaderA:hover{
    z-index:1;
}
.btHeaderB:hover{
    z-index:2;
}

img.headerbutton{
    border-style :solid;
    max-width : 100px;
    width: auto;
	height: auto;
}

#Menu {
    width : 100%;
    position : fixed;
    max-width : 1000px;
    top : 15px;
    left : 5%;
    white-space : nowrap;
}

.Item {
    border: 2px solid red;
    overflow: hidden;
    text-align:center;
    display: inline-block;
}

</style>
<!--  here ends the section that changes the default wiki template to a white full width background -->
</head>

<body>
<!--main content -->
<table width="100%" align="center">

<!--navigation menu -->
<div >
<img id="bgHeader" src="http://2014.igem.org/wiki/images/f/f2/Branch_col.png" alt="header background" />
</div>

<div id="Menu" style="background-color:transparent;">

    <div class="Item"><center>  
        <a href="http://2014.igem.org/Team:Toulouse"style="color:#000000">
        <div class="btHeaderA"><img class="headerbutton" alt="header buton" src="http://2014.igem.org/wiki/images/8/83/LeafG_1.png"/></div>
        <div class="btHeaderB"><img class="headerbutton" alt="header buton" src="http://2014.igem.org/wiki/images/4/48/LeafG_2.png"/></div>
        <div class="btHeaderC" align="center">Home</div> 
        </a></center> 
    </div>
    
    <div class="Item"> 
        <a href="http://2014.igem.org/Team:Toulouse/Team"style="color:#000000"> 
        <div class="btHeaderA"><img class="headerbutton" alt="header buton" src="http://2014.igem.org/wiki/images/b/b2/LeafObis_1.png" /></div>
        <div class="btHeaderB"><img class="headerbutton" alt="header buton" src="http://2014.igem.org/wiki/images/c/cf/LeafObis_2.png" /></div>
        <div class="btHeaderC" align="center">Team</div> 
        </a>
    </div>

    <div class="Item">  
        <a href="http://2014.igem.org/Team:Toulouse/Project"style="color:#000000">
        <div class="btHeaderA"><img class="headerbutton"  alt="header buton" src="http://2014.igem.org/wiki/images/a/a3/LeafC_1.png" /></div>
        <div class="btHeaderB"><img class="headerbutton"  alt="header buton" src="http://2014.igem.org/wiki/images/4/48/LeafC_2.png" /></div>
        <div class="btHeaderC" align="center">Project</div>
        </a>
    </div>

    <div class="Item" > 
        <a href="http://2014.igem.org/Team:Toulouse/Parts"style="color:#000000">
        <div class="btHeaderA"><img class="headerbutton" alt="header buton" src="http://2014.igem.org/wiki/images/2/2c/LeafP_1.png" /></div>
        <div class="btHeaderB"><img class="headerbutton" alt="header buton" src="http://2014.igem.org/wiki/images/8/85/LeafP_2.png" /></div>
        <div class="btHeaderC" align="center">Parts</div>
        </a>
    </div>

    <div class="Item" > 
        <a href="http://2014.igem.org/Team:Toulouse/Modeling"style="color:#000000"> 
        <div class="btHeaderA"><img class="headerbutton" alt="header buton" src="http://2014.igem.org/wiki/images/5/5e/LeafO_1.png" /></div>
        <div class="btHeaderB"><img class="headerbutton" alt="header buton" src="http://2014.igem.org/wiki/images/8/8e/LeafO_2.png" /></div>
        <div class="btHeaderC" align="center">Modeling</div>
        </a>
    </div>
    
    <div class="Item" >  
        <a href="http://2014.igem.org/Team:Toulouse/Notebook"style="color:#000000"> 
        <div class="btHeaderA"><img class="headerbutton" alt="header buton" src="http://2014.igem.org/wiki/images/e/e1/LeafB_1.png" /></div>
        <div class="btHeaderB"><img class="headerbutton" alt="header buton" src="http://2014.igem.org/wiki/images/7/70/LeafB_2.png" /></div>
        <div class="btHeaderC" align="center">Notebook</div>
        </a>
    </div>

    <div class="Item" > 
        <a href="http://2014.igem.org/Team:Toulouse/Safety"style=" color:#000000"> 
        <div class="btHeaderA"><img class="headerbutton" alt="header buton" src="http://2014.igem.org/wiki/images/8/83/LeafG_1.png"/></div>
        <div class="btHeaderB"><img class="headerbutton" alt="header buton" src="http://2014.igem.org/wiki/images/4/48/LeafG_2.png"/></div>
        <div class="btHeaderC" align="center">Safety </div>
        </a>
    </div>

    <div class="Item" > 
        <a href="http://2014.igem.org/Team:Toulouse/Attributions"style="color:#000000"> 
        <div class="btHeaderA"><img class="headerbutton" alt="header buton" src="http://2014.igem.org/wiki/images/3/39/LeafY_1.png"/></div>
        <div class="btHeaderB"><img class="headerbutton" alt="header buton" src="http://2014.igem.org/wiki/images/7/7e/LeafY_2.png"/></div>
        <div class="btHeaderC" align="center">Attributions</div>
        </a>
    </div>

    <div class="Item" align ="center"  width="60px" > 
        <a href="http://2014.igem.org/Main_Page"> 
        <img src="http://igem.org/wiki/images/6/60/Igemlogo_300px.png" width="55px">
        </a>
    </div>

</div>
</table>

<!--end navigation menu -->
Bonjour,
pour commencer à rendre accessible tes liens, il faut retirer la déclaration white-space:nowrap pour qu'ils passent dessous lorsqu'on réduit la largeur du viewport., mais évidemment, étant donné que c'est un bloc en fixed, il faut utiliser les media queries pour qu'en dessous d'une certaine largeur, tu décale le contenu se trouvant dessous.

Il est normal que tes lien ne se redimensionnent pas puisque leur largeur n'est pas exprimée en %.

PS: ça a l'air un peu tarabiscoté comme structuration (3 div dans un lien...) et l'élément center est obsolète.
Modifié par Hermann (08 Jul 2014 - 19:23)
Sujet clos
Aller à