Absolute positioned layout issue on smaller screens

Question

I'm working on a really small splash page that only has two links and a large centered background with some centered text. The text is also part of the image. The links are absolute positioned in a relative positioned container.

The links are positioned fine on screens larger than 1024px which is the size of the container. As soon as the screen gets smaller the position of the links are not in the right place anymore. This because they are related to the container and not the browser window.

This site shouldn't be responsive but it would be nice if the links are still positioned in the right place even when the window gets smaller. Is this even possible or is my current approach not the tight one?

You can see the page at the following link: http://nionwebdesign.com/dev/physical The links on the page are the Facebook link and the logo right at the bottom.

The current markup:

<!DOCTYPE html>
<html>
<head>      
</head>
<body>

<div class="container">

<a class="facebook" href="#"><img src="img/facebook.png"></a>
<a class="logo" href="#"><img src="img/logo-intime.png"></a>

</div>
</body>
</html>

The current css:

body{
background: #000 url('img/bg-leeg.jpg') no-repeat center top;
min-height: 900px;
}

.container{
width: 1024px;
margin: 0 auto;
position: relative;
}

.facebook{
position: absolute;
top: 628px;
right: 62px;
}

.logo{
position: absolute;
top: 778px;
right: 20px;
 }

Answer 1

The links to Facebook and the logo can be placed outside the container. Like that, they don't depend on the container's position (which can't be always in the middle) the way you set it up.

I've placed the links outside the container (before or after doesn't matter), then given them new positions (don't worry, they are exacly the same, just recalculated!)

My code:

HTML

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div class="container"></div>
    <a class="facebook" href="#"><img src="img/facebook.png"></a>
    <a class="logo" href="#"><img src="img/logo-intime.png"></a>
  </body>
</html>

CSS

body{
    background: #000 url('img/bg-leeg.jpg') no-repeat center top;
    min-height: 900px;
}

.container{
    width: 1024px;
    margin: 0 auto;
    position: relative;
}

.facebook{
    position: absolute;
    top: 628px;
    left: calc(50% + 192px);
}

.logo{
    position: absolute;
    top: 778px;
    left: calc(50% + 351px);
}

Absolute positioned layout issue on smaller screens

Question

1 answers

solution1
2 ACCPTED 2014-07-04 00:56:21

Absolute positioned layout issue on smaller screens

Question

1 answers

solution1 2 ACCPTED 2014-07-04 00:56:21

solution1
2 ACCPTED 2014-07-04 00:56:21