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 Coder
    Join Date
    Sep 2011
    Location
    Seveso, Italy
    Posts
    20
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Responsive position

    Hi everyone...

    I am creating a responsive website, but I've a problem with the positions, when I convert the top property or the left/right property the position is not exactly equal at the pixel equivalent. Why?

    e.g. I've top -250px and left -250px, I want transform the two properties in percentual and the result is ~-18% but still not working T.T

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can we have your full HTML+CSS of that page ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Sep 2011
    Location
    Seveso, Italy
    Posts
    20
    Thanks
    1
    Thanked 2 Times in 2 Posts
    This is a snippet of my HTML
    Code:
    <body>
    		<header>
    			<hgroup>
    				<h1>space web design</h1>
    			</hgroup>
    			<nav>
    				<ul>
    					<li>Home</li>
    					<li>Portfolio</li>
    					<li>Contact me</li>
    				</ul>
    			</nav>
    		</header>
    	</body>
    and this is the css:
    Code:
    header{
    	text-align: center;
    }
    header h1{
     	width: 32.94289897510981%; /*450*/
    	font-family: 'null', sans-serif;
    	font-size: 90px;
    	margin: 0 auto;
    }
    nav{
    	position: relative;
    	top: -18.30161054172767%; /* -250 / 1366 */
    	left: -18.30161054172767%; /* -250 / 1366 */
    }

  • #4
    Regular Coder
    Join Date
    Jun 2011
    Location
    CA
    Posts
    105
    Thanks
    0
    Thanked 10 Times in 10 Posts
    I appears that your hgroup is centered on the page and your nav is off-center to the left below the header. Is this what you intended?

    Note that if this is a responsive site, then you'll want to change the font size from pixels to a percentage like you do with the hgroup, otherwise it breaks out of the header when resized smaller.

    It's not really clear what you want to do. Percentages are not the same as pixels, period.

  • #5
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    Perhaps set the body to width: 100%;. Percentage is relative to the parent element, sometimes it acts up when it doesn't have a reference of the parent element's width.


  •  

    Tags for this Thread

    Posting Permissions

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