CodingForums.com - Responsive position

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Responsive position (http://www.codingforums.com/showthread.php?t=279028)

ManuelVRC

10-24-2012 08:33 AM

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

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.

All times are GMT +1. The time now is 07:36 PM.