...

View Full Version : Need to align url top right corner of browser above header



mers
01-07-2010, 08:08 PM
Hi,
I need to align my top right url in the corner of the browser, but currently my body is set to certain width percentages for the content, so I am a little stumped on how to exclude the body properties from the div I need to have in the top right so it is 100%. Any help would be wonderful. thank you! :o

Here is the page: http://www.semanticweb.com/research/

this is the css I have for the body:

body {
background: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin:0 15% 0 17%;
padding: 0;
min-width: 870px;
max-width: 1260px;
background-image: url(/research/images/tabs_research_background_ff.gif);
background-position: top;
background-repeat: repeat-x;

}

And the css for the #login url:


#login {
float: right;
position: relative;
z-index: 1;
}

Excavator
01-07-2010, 08:26 PM
Hello mers,
You have some errors with your markup that need fixed first. See what the validator finds here. (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.semanticweb.com%2Fresearch%2F)
See the links about validation in my sig below.

Then, instead of using the body tag to size your site to min-width: 870px; max-width: 1260px;, put your site in a containing div sized like that. Once you do that, you can put your #login outside of the containing div that holds your site but still inside of the body tags where it belongs.

Also, you should know that floats require a width.

mers
01-07-2010, 09:11 PM
Thank you this helped a lot :thumbsup:. I did run it through W3C and there's a lot to go through, which I will do.

I edited to css and the markup, but now the header image is pushed down. I can't figure out why.

Excavator
01-07-2010, 10:10 PM
That's much better now that #login is in the body where it belongs. Still needs a width if you want to float it though, this is one case where absolute positioning will come in handy.
AP takes the element out of the normal flow of the document. That means it won't push your header down and mess up the alignment of your tabs_research_background_ff.gif.

Make your CSS for #login look like this -

#login {
height: 38px;
width: 171px;
position: absolute;
top: 0;
right: 0;
background: #f00; /*just for demonstration so we can see the size of it*/
}

mers
01-07-2010, 11:19 PM
doy, I needed the margin and padding in the body.



body {
margin: 0;
padding: 0;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum