Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Location
    New York
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question Need to align url top right corner of browser above header

    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!

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

    this is the css I have for the body:
    Code:
    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:

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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello mers,
    You have some errors with your markup that need fixed first. See what the validator finds here.
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    mers (01-07-2010)

  • #3
    New to the CF scene
    Join Date
    Feb 2008
    Location
    New York
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    thank you!

    Thank you this helped a lot . 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.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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 -
    Code:
    #login	{
    height: 38px;
    width: 171px;
    position: absolute;
    top: 0;
    right: 0;
    background: #f00; /*just for demonstration so we can see the size of it*/
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Feb 2008
    Location
    New York
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    I fixed teh header image...

    doy, I needed the margin and padding in the body.

    Code:
    body { 
    	margin: 0;
    	padding: 0;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •