Responsive position

ManuelVRC · 10-24-2012, 08:33 AM

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

abduraooft · 10-24-2012, 09:36 AM

Can we have your full HTML+CSS of that page ?

ManuelVRC · 10-24-2012, 09:42 AM

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 */
}

StevenHu · 10-25-2012, 06:55 PM

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.

Custard7A · 10-26-2012, 03:50 AM

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.