Align bottom right

bam720 · Apr 20, 2007

All right this is probably easy and I am over thinking it. My boss bought a template, and wants me to use the general idea to make out site. The template has a menu in the upper right of the page. It's in a div that has a space holder image 37px tall. The div also has a bg image to "highlight" the menu. Furthermore it has spacer images between each link for alignment. I have changed all of this to:

Code:

#top {background:url(images/header.gif) top left;
margin: 0px 0 0 0;
padding:0;
width:699px;
height:75px;
text-align:left;
display:table;
}

#nav {
float:left;
background-color: #FFFF99;
height: 3em;
width: 9em;
display: block;
text-align: center;
font-weight: bold;
line-height: 3em;
border: .1em solid #dcdce9;
}
<div id="top">
<span id="nav"><a href="index.html" class="menu a">Home</a></span>
<span id="nav"><a href="index-1.html" class="menu a">Company</a></span>
<span id="nav"><a href="index-2.html" class="menu a">Services</a></span>
<span id="nav"><a href="index-3.html" class="menu a">Products</a></span>
<span id="nav"><a href="index-4.html" class="menu a">Contacts</a></span>
</div>

(I removed the 37px tall spacer image.)
As of right now it is aligned to the top left of the "top" div it is in. How do I make it align to bottom right? floating right reverses the link orders.

Code:

bam720 · Apr 20, 2007

so I changed apdding the top to this:
padding: 27px 0 0 30%;

Is there a better way?

monksnake · Apr 20, 2007

I put the menu items in a div that I floated right and put a top margin on.

This is what I come up with, also since I see you are using spans with display:block, it's just simpler to use a div.

Code:

div#bottomRight {
   float:right;
   margin-top:37px;
}

</style>

</head>

<body>

<div id="top">
   <div id="bottomRight">
      <div id="nav"><a href="index.html" class="menu a">Home</a></div>
      <div id="nav"><a href="index-1.html" class="menu a">Company</a></div>
      <div id="nav"><a href="index-2.html" class="menu a">Services</a></div>
      <div id="nav"><a href="index-3.html" class="menu a">Products</a></div>
      <div id="nav"><a href="index-4.html" class="menu a">Contacts</a></div>
   </div>
</div>

<.

bam720 · Apr 20, 2007

monksnake · Apr 20, 2007

Are you seeing the extra div I put in?

Code:

<div id="bottomRight">

I've tested this in FF and IE6 and it does not reverse the menu items.

[monkey]

<.

monksnake · Apr 20, 2007

I notice something else that should be pointed out, id is a unique value, all ids must be different. You may want to make "nav" a class instead of using an id selector in your CSS.

[monkey]

<.

bam720 · Apr 23, 2007

So let me see if I understand... in my css file anything prepended with a . is for classes and # is for id's. Id's must be unique and can only be applied to a single object, once per page?

monksnake · Apr 23, 2007

Yes, that is correct bam.

[monkey]

<.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Align bottom right

bam720

Technical User

bam720

Technical User

monksnake

Programmer

bam720

Technical User

monksnake

Programmer

monksnake

Programmer

bam720

Technical User

monksnake

Programmer

Similar threads

Part and Inventory Search

Sponsor