[SOLVED] Unable to align link to top

[BrandonE97]

I have a link on my navigation I want to align to the top using divs. I just started working with divs and am trying to replace my current layout using tables. I've tried various bits of code to align my link but have been unsuccessful. Here is my code:

 

Navigation top:

<div id="navtop">
<a href="javascript:website()" class="navtop">BrandonE97</a>
    <div id="navbody" align="center">... navigation menu appears here

I have worked some putting the link in its own div but I'm still unsuccessful with that as well.

Here is some of my css code that the page uses:

 

CSS:

#navtop {
position:absolute;
left:9px;
top:7px;
width:115px;
line-height:75px;
text-align:center;
background-image:url(/theme/navmenutop.gif);
background-repeat:no-repeat;
}
a.navtop:link, a.navtop:visited {
color:#0099FF;
font-size:18px;
font-style:italic;
font-weight:bold;
text-decoration:none;
}
a.navtop:hover {
color:#0000FF;
}

[TheFilmGod]

Why are you using position: absolute? Is really necessary. This usally creates more confusion and problems than it helps you.

 

- Another thing, you should not put classes within the <a >. Although this isn't "bad semantic html" it is harder to read and comprehend. Since < a href=".."> can be rather large, it is recommended to keep it as small and short as possible. I recommend using #navtop a { ... } instead. This is easier to read and style in the long run.

[BrandonE97]

I'm still new to using css and divs instead of tables. I noticed using relative instead of absolute the whole navigation menu moves over the pixels I specified in my code. Absolute moves it back to hug the browser window. The link uses javascript for a little alert message that just says stuff so the link will never get any bigger than that. Using it on the <a...> lets me change the color easy when moused over.

[haku]

If you are new to CSS, I would strongly recommend spending an hour or two going through the tutorials on this page:

 

http://css.maxdesign.com.au/floatutorial/

 

It will show you some ways to do things that often trick newbies into using absolute positioning to get around. Some of the techniques are a little outdated, but will still give you a good solid base of ideas to work and expand from.

[BrandonE97]

Well I'm not that new to a lot of css itself, just css using divs instead of tables.

[haku]

That's where it gets difficult. CSS to add a little padding or a margin, or to change the colors on something is easy. It's layout that is difficult. Check out the tutorials, they are pretty solid.

[ifubad]

Well I'm not that new to a lot of css itself, just css using divs instead of tables.

 

DIV is one of the most used elements with CSS for layout, which is supposed to replace the old table layouts, gotta get used to it sooner or later. Here's another layout tutorial for a fixed layout http://www.subcide.com/tutorials/csslayout/. For your particular need, sounds like there is really no need to use relative or absolute positioning.

[BrandonE97]

I still have not been able to move the link up to the top and I've tried everything I know. Thanks for the links and stuff cause I learned a few things from them. I have looked through the help I have been given but maybe I'm missing something. Can someone please help me.

[ifubad]

Can you post a link to the page?

[BrandonE97]

http://www.brandone97.com/theme/layout/index.php

[haku]

You have a margin of 8 px on the body, which is pushing the whole body and all its contents down 8 px from the top. You also have top set to two px on the navdiv, which is pushing that element down another two px. Delete both of these, and your div will align with the top.

[BrandonE97]

I've looked through my code and cant find the margin of 8px. I did take out the top and left but my link still sits in the middle instead of the top.

[ifubad]

if you do not yet have Firebug add-on for FF, get it and try it out, dissect your page and see where the margins/paddings are coming from.

 

Exactly which link in the middle are you referring to? The "Layout"

[BrandonE97]

Above the navigation menu, the link is over a background image and just says "BrandonE97". Its an old layout and I'm upgrading it to divs and then thinking of doing multiple themes for the site.

[ifubad]

.

[ifubad]

The problem is line-height:75px; within #navtop, it's pushing the a element down about half that px value. Instead of using line-height to push the div navbody down, use margin-top within #navbody instead. Also, you odd to change most, if not all the position property to float instead, within that page, there is really no need to use position relative or absolute.

[BrandonE97]

That worked perfectly, thanks a bunch for all your help. I'll read up on float, haven't used it much except for images. Again thanks lots.