Flotteur css: alignement à droite et à la verticale?

J'expérimente avec html et css et essaye de comprendre comment faire ceci travail ... J'essaye juste de faire flotter le # menu à la droite de la h1 mais être sur la même référence donc ... mais évidemment float: right le fait flotter en haut à droite? un moyen de le faire flotter en bas à droite ou d'aligner avec le fond de la div contenant?Flotteur css: alignement à droite et à la verticale?

ici est le html:

<!doctype html> 
<html> 
    <head> 
     <title>Website.com</title> 
     <link rel="Stylesheet" href="style.css" type="text/css" /> 
    </head> 
    <body> 
     <div> 
      <h1><a href="#" title="Website.com">Website.com</a></h1> 
      <div id="menu"> 
       <ul> 
        <li><a href="#" title="Home">Home</a></li> 
        <li><a href="#" title="Link1 Description">Link1</a></li> 
        <li><a href="#" title="Link2 Description">Link2</a></li> 
        <li><a href="#" title="Link3 Description">Link3</a></li> 
        <li><a href="#" title="About Website.com">About</a></li> 
       </ul> 
      </div> 
     </div> 
     <hr /> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis elit et augue pellentesque fermentum semper urna interdum. Nullam egestas augue ut risus molestie mollis ut sed dolor. Curabitur fermentum, lorem sed suscipit euismod, diam urna vulputate sapien, ac venenatis velit eros sed leo. Duis venenatis, metus at scelerisque fringilla, neque arcu dignissim arcu, quis sodales lorem mauris eget tellus. Phasellus fermentum est eget erat pretium mollis. Cras eu nunc dui, sed fermentum libero. Vivamus posuere pellentesque tellus in interdum. Vestibulum eleifend fringilla enim, in vehicula justo tristique a. Aenean congue vestibulum iaculis. Sed tristique interdum lectus, vel aliquam nisi fringilla ac. Mauris ligula nisl, gravida id consequat in, vestibulum at risus. Vivamus vitae massa lorem, vel molestie tellus. Nulla et magna orci. Nunc turpis ipsum, facilisis eget tristique sit amet, scelerisque quis ligula. Mauris in molestie purus. Cras eget magna vel enim imperdiet aliquam.</p> 
     <p>Vestibulum vel eros lacus, vel viverra magna. Duis mollis nibh ut erat accumsan ut pulvinar ipsum dapibus. Aliquam vehicula tempus fermentum. Morbi ut turpis sem, pretium sodales libero. Vestibulum dapibus, ligula in molestie scelerisque, lacus est aliquam elit, ut vulputate sapien nisl vitae elit. Cras pulvinar mi nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in est orci. Ut rutrum lobortis quam vitae commodo. Maecenas dapibus aliquam ante eget mattis. Proin justo eros, bibendum quis scelerisque eget, fermentum eu purus. Vivamus viverra ligula a dolor iaculis ullamcorper. Aliquam erat volutpat. Nunc libero nulla, sodales at dictum vel, tempus quis est.</p> 
     <p>Nullam pharetra tincidunt lectus ac sollicitudin. Duis in venenatis eros. Phasellus malesuada quam vel sapien ultricies tincidunt. Duis condimentum posuere semper. Vivamus eleifend libero eget ligula egestas adipiscing. Proin dapibus leo non urna pellentesque convallis. Suspendisse massa leo, semper vitae tincidunt at, mattis et sapien. Maecenas consequat hendrerit odio et feugiat. Sed dignissim massa a leo sollicitudin imperdiet consequat purus vehicula. Mauris sit amet nulla a turpis porta accumsan. Morbi interdum pellentesque massa, vel accumsan massa aliquam quis. Sed sed ligula neque. In hac habitasse platea dictumst. Curabitur vehicula scelerisque ligula non tincidunt.</p> 
     <hr /> 
     <p id="footer">Use of this site constitutes acceptance of our <a href="#">User Agreement</a> and <a href="#">Privacy Policy</a>. &copy; 2010 Website.com. All rights reserved.</p> 
    </body> 
</html>

et voici le css:

body 
{ 
    font-family: verdana, sans-serif; 
    min-width: 800px; 
} 

h1 
{ 
    display: inline; 
    font-variant: small-caps 
} 

h1 a 
{ 
    color: #090; 
    text-decoration: none; 
} 

h1 a:hover 
{ 
    color: #0A0; 
} 

#menu 
{ 
    float: right; 
    display: inline; 
    margin: 0; 
    padding: 0; 
    font-variant: small-caps; 
} 

#menu ul 
{ 
    margin: 0; 
    padding-left: 0; 
    float: left; 
    font-weight: bold; 
} 

#menu ul li 
{ 
    float: left; 
    display: inline; 
} 

#menu ul li a 
{ 
    color: #090; 
    background-color: #F3F3F3; 
    padding: 2px 6px 4px 6px; 
    text-decoration: none; 
} 

#menu ul li a:hover 
{ 
    font-weight: bolder; 
    color: #0A0; 
    background-color: #F3F3F3; 
    border-bottom: 4px solid #0A0; 
    padding-bottom: 0; 
} 

#footer 
{ 
    text-align: center; 
    font-size: x-small; 
}

voici ce qui est ressemble maintenant: Website.com

Merci pour l'aide!

Source

2010-07-27 Rakka Rage

Je ne l'ai pas regardé dans ce beaucoup, mais si vous définissez position: relative de la div contenant, vous pouvez simplement faire le ulposition: absolute; bottom: 0; right: 0 et ça devrait aller où tu le veux.

Exemple:

div {position: relative} 
ul {position: absolute; bottom: 0; right: 0} 
li {float: left; list-style: none}

<div> 
    <h1>Header</h1> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Etc...</li> 
    </ul> 
</div>

Source

2010-07-27 17:41:26

Vous n'avez pas besoin de 'right: 0' si vous voulez le faire flotter ... –

cela semble le mettre au bas de la page? il devrait seulement le mettre au fond de l'élément contenant (div)? merci –

http://www.jsfiddle.net/7sjkh/ ... êtes-vous sûr? –

Il n'y a pas de propriété flottant en bas à droite ou en haut à droite. Mais sans changer la structure de votre HTML, vous pouvez simplement ajouter une marge supérieure à votre menu div

#menu { 
    .... 
    margin-top:20px; 
}

Source

2010-07-27 17:39:18 naikus

cela fonctionne et est facile ... c'est juste que si je change la taille du texte sur la gauche je vais devoir changer les pixels sur la gauche ... j'ai une ligne de base (de cette div) que je veux pour s'asseoir déjà mais je ne peux pas l'utiliser? –

-2

Vous pouvez utiliser le tableau:

 
<table id="title"> 
    <tr> 
    <td> 
     <h1><a href="#" title="Website.com">Website.com</a></h1> 
    </td> 
    <td> 
     <div id="menu"> 
      <ul> 
       <li><a href="#" title="Home">Home</a></li> 
       <li><a href="#" title="Link1 Description">Link1</a></li> 
       <li><a href="#" title="Link2 Description">Link2</a></li> 
       <li><a href="#" title="Link3 Description">Link3</a></li> 
       <li><a href="#" title="About Website.com">About</a></li> 
      </ul> 
     </div> 
    </td> 
    </tr> 
</table>

Et ajoutez ceci dans votre fichier CSS:

 
#title 
{ 
    width:100%; 
} 

#title td+td 
{ 
    text-align:right; 
    vertical-align:center; 
}

L'alignement vertical est défini par défaut sur le centre, vous n'avez donc pas besoin de le définir.
Ou si vous ne voulez pas utiliser la table, vous pouvez simplement définir padding-top: 10px; dans #menu ul.

Source

2010-07-27 17:53:10 tomasbelusky

Je suppose qu'il est plus facile d'utiliser les tables mais je suis juste essayer de comprendre comment le faire sans tables et sans une valeur de décalage XXpx spécifique ... je suppose que je devrais avoir fou que clair ... mais merci –

Son vertical-aligner: milieu; pas centre. –

L'utilisation de tables HTML pour aligner des éléments est fortement déconseillée, notamment parce qu'il existe maintenant de meilleures solutions (par exemple, des boîtes flexibles) et qu'elle n'est pas une bonne utilisation sémantique de la balise. – ElementW

Flotteur css: alignement à droite et à la verticale?

Répondre

Questions connexes