Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 10-24-2012, 08:33 AM   PM User | #1
ManuelVRC
New Coder

 
Join Date: Sep 2011
Location: Seveso, Italy
Posts: 15
Thanks: 1
Thanked 0 Times in 0 Posts
ManuelVRC is an unknown quantity at this point
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
ManuelVRC is offline   Reply With Quote
Old 10-24-2012, 09:36 AM   PM User | #2
abduraooft
Supreme Master coder!

 
abduraooft's Avatar
 
Join Date: Mar 2007
Location: N/A
Posts: 14,678
Thanks: 158
Thanked 2,182 Times in 2,169 Posts
abduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really nice
Can we have your full HTML+CSS of that page ?
__________________
Quote:
The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)
abduraooft is offline   Reply With Quote
Old 10-24-2012, 09:42 AM   PM User | #3
ManuelVRC
New Coder

 
Join Date: Sep 2011
Location: Seveso, Italy
Posts: 15
Thanks: 1
Thanked 0 Times in 0 Posts
ManuelVRC is an unknown quantity at this point
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 */
}
ManuelVRC is offline   Reply With Quote
Old 10-25-2012, 06:55 PM   PM User | #4
StevenHu
Regular Coder

 
Join Date: Jun 2011
Location: CA
Posts: 105
Thanks: 0
Thanked 10 Times in 10 Posts
StevenHu is an unknown quantity at this point
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.
StevenHu is offline   Reply With Quote
Old 10-26-2012, 03:50 AM   PM User | #5
Custard7A
Regular Coder

 
Custard7A's Avatar
 
Join Date: Jul 2010
Location: Australia
Posts: 269
Thanks: 32
Thanked 32 Times in 32 Posts
Custard7A is an unknown quantity at this point
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.
Custard7A is offline   Reply With Quote
Reply

Bookmarks

Tags
position, responsive

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 08:41 PM.


Advertisement
Log in to turn off these ads.