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 6 of 6
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Exclamation Ul positioning question

    Hello I was wondering can use both I static and relative together for positioning in this code.
    #header ul{
    position:static;
    top: 40px;
    left: 20px;
    display: inline;
    margin: 0;
    padding: 0;
    }
    Last edited by cssmaker; 02-15-2012 at 01:45 AM. Reason: spelling

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello cssmaker,
    Did you try that at all?
    Make a test .html and see if the top/left coordinates have any affect on the ul.

    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 {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	position: relative;
    }
    ul {
    	position:static;
    	top: 40px;
    	left: 20px;
    	display: inline;
    	margin: 0;
    	padding: 0;
    }
    </style>
    </head>
    <body>
        <div id="container">
        	<ul>
                <li>linky</li>
                <li>linky</li>
                <li>linky</li>
                <li>linky</li>
            </ul>
        <!--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

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks,
    I just want to know if static and relative positioning can be used together in the code that I posted.
    #header ul{
    position:static;<-- This one how can I change it to use both static and relative?
    top: 40px;
    left: 20px;
    display: inline;
    margin: 0;
    padding: 0;
    }

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    http://www.w3schools.com/cssref/pr_class_position.asp

    relative :
    The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

    In this example the ul is not any different than static (default) with some margin applied -
    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 {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	position: relative;
    }
    #box {
    	height: 200px;
    	width: 200px;
    	background: #f00;
    }
    ul {
    	postion: relative;
    	top: 40px;
    	left: 20px;
    	display: inline;
    	margin: 0;
    	padding: 0;
    }
    </style>
    </head>
    <body>
        <div id="container">
        <div id="box"></div>
        	<ul>
                <li>linky</li>
                <li>linky</li>
                <li>linky</li>
                <li>linky</li>
            </ul>
        <!--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

  • #5
    New Coder
    Join Date
    Jan 2012
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Exclamation

    [QUOTE=Excavator;1193342]Hello cssmaker,
    Did you try that at all?
    Make a test .html and see if the top/left coordinates have any affect on the ul.

    The top/left coordinates do not move it

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    [QUOTE=cssmaker;1193355]
    Quote Originally Posted by Excavator View Post
    Hello cssmaker,
    Did you try that at all?
    Make a test .html and see if the top/left coordinates have any affect on the ul.

    The top/left coordinates do not move it
    That was my point.
    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
    •