Comment faire cela en CSS

Mon balisage ressemble à ceci:Comment faire cela en CSS

<div class="header-section"> 
    <a href="#" class="logo"><img src="logo.png" /></a> 
    <div class="navigation"> 
     <ul> 
      <li><a href=# class="active">Home</a></li> 
      <li><a href=#>Bakery</a></li> 
      <li><a href=#>Fishery</a></li> 
      <li><a href=#>Casino</a></li> 
      <li><a href=#>Disney Land</a></li> 
     </ul> 
    </div> 
    <div style="clear:both" /> 
</div>

et css qui importe est:

.header-section { 
    margin: 30px 0; 
} 

.header-section .logo { 
    float: left; 
} 
.header-section .logo img{ 
    border: 0; 
} 
.header-section .navigation { 
    float: right; 
    margin-top: 23px; 
} 
.header-section .navigation ul { 
    list-style: none; 
} 
.header-section .navigation ul li{ 
    font-size: 18px; 
    font-family: Tahoma, Arial, Verdana; 
    float: left; 
    margin: 0 20px; 
}

Ainsi, les liens sont mis en forme dans une ligne horizontale à droite de la logo. Au départ, j'ai eu l'idée de les faire emballer quand l'écran ne leur permettait pas d'être dans une ligne, mais ce qui s'est réellement passé, c'est qu'avant l'emballage, ils sont tombés sous le logo. J'étais heureux avec cela jusqu'à ce que je voie que - ironiquement - IE l'a rendu comme je l'avais en tête. Donc, ma question est - comment puis-je obtenir les liens à emballer avant de se caler juste en dessous de l'image du logo?

Source

2011-01-20 jcuenod

Si vous utilisez un div # wrap avec une largeur définie (comme '860px' ou quelque chose comme ça), vous ne rencontrerez pas ce problème car il y aura toujours assez de place. Ensuite, utilisez 'margin: 0 auto;' et votre mise en page sera toujours centrée sur la page. – Andrew

Je ne veux pas une largeur fixe. – jcuenod

tag marque comme élément de bloc:

et ajouter la largeur hauteur & ..

.header-section a { 
display:block; 
width:100px; 
height:100px; 
}

Source

2011-01-20 19:31:40 Abudayah

Cela n'a rien fait. – jcuenod

réessayer avec 100px – Abudayah

mes liens ne sont pas des largeurs fixes - "Disney Land" et "Home" n'ont pas besoin de 100px. – jcuenod

Essayez de mettre <a href="#" class="logo"><img src="logo.png" /></a> après navigation div end et la largeur fixe à la fois la section ... Il devrait fonctionner

Source

2011-01-24 12:07:02 Mahima

Comment faire cela en CSS

Répondre

Questions connexes