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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with alignments

    I'm trying to align some content & my menu to a certain spot. (more or less center)

    I'm using this code:
    #menu {
    position:absolute;
    top:211px;
    left:15.3%;

    <div id="menu">
    (menu content here)
    </div>

    And it aligns perfectly in the resolution I configured it on (1152x864), but on higher resolutions it's off to the left a fair bit, originally I had the left defined as pixels, I thought this was the problem and switched it to a % to find nothing changed.

    Can anyone help me align this content to a certain spot for ALL resolutions?

    Thanks in advance
    -Luneth

  • #2
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    if you want to position or align your div at same position on all resolutions then you need to use absolute positioned div inside relative positioned div.

    then you need to set position of your relative div, and your absolute position div will automatically move acording to it.

    vineet

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Are you trying to align your menu centered? Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's a link to the page, I'm not going to include the images, but it shouldn't matter.

    -

    At the moment, the content, menu, and bottom links are mis-aligning on higher resolutions, basically anything with a left value.
    Last edited by Luneth; 01-02-2010 at 09:29 PM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Luneth,
    The first thing you should do is get a DocType. Check out the link in my sig about doctypes.
    Also look at the links about validation, they will help you.

    I downloaded your code but it's not clear to me what you're trying to accomplish. That is a lot of absolute positioning and may not be the best way to do what you want done.
    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

  • #6
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    All I want to know is how to float content in a certain spot on the background no matter what resolution one is using..

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    In the example below, the gray box will be 30px from the top and 150px from the left of the viewport no matter what resolution the viewer is using.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #container {
    	height: 600px;
    	width: 800px;
    	float: left;
    	margin: 30px 0 0 150px;
    	background: #999;
    	font-size: 0.8em;
    }
    </style>
    </head>
    <body>
        <div id="container">
        <!--end container--></div>
    </body>
    </html>
    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

  • #8
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, Excavator.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    No problem Luneth, Happy New Year!
    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


  •  

    Posting Permissions

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