website height and relative image positioning

This site is best viewed in a modern browser with JavaScript enabled.

website height and relative image positioning

McCloud

Hey guys,

so after bringing my test site to a finish I've still got 2 unsolved issues (even after long time of me thinking about them - it really gets on my nerves when I can't solve a problem on my own ).

Here's the site: http://fld.php5.sk/gym/

1st problem - the site is too high (of course in the meaning of dimensions, not a pleasant state of mind )

Here's the code for the background

body{	
	background: #dddddd url('../images/bg.png') no-repeat;
	background-position: -135px -110px;	
}

I would expect the site to end as the image height ends (if you look closely you can see the bottom edge of the image, because I wasn't bothered to erase the edges properly). But instead the color continues down.

2nd problem - at first sight it's not visible. But by resizing the site you can see it. The situation here is, that I wanted to make the logo as a link (to 'home' site). But because the whole header was one image I decided to cut out another image as just the logo and place it over the original (the whole site is basically just a practice on image overlapping and positioning).
With absolute positioning it didn't interfere with the layout but with resizing the website, it keeps a stationary position obviously.
With relative positioning on the other hand it completely destroys other elements of the layout.. and I don't understand why

If anyone has an answer to either of my questions I'd be really grateful.

If you need more code or any other info, just ask for it

coothead

Hi there McCloud,

I noticed that your body "bg.png image is over 1MB in size. :eek:
Change it to a jpg and you could get it down to 41.6KB.

Here is a possible solution to your coding problems...

[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://fld.php5.sk/gym/">
<meta charset="utf-8">

<title>PowerHouse Gym - Reach your potential</title>

<link rel="shortcut icon" href="images/favicon.png" type="image/png">

<style>
* {
    padding:0;
    margin:0;
    list-style-type:none;
 }
body{
    background-color:#ddd;	
    background-image:url(images/bg.png);
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-position:-135px -110px;
    font-family:helvetica,verdana,arial,sans-serif;
 }
#container {
    width:924px;  

    padding-top:30px;
    margin:auto;
    background-image:url(images/image1.jpg);
    background-repeat:no-repeat;
    background-position:0 193px;
 }
#nav {
    position:relative;
    z-index:2;
    height:304px;
    background-image:url(images/logo.png);
 }
#nav li {
    float:left;
 }
#nav a{
    display:block;
    padding:6px 0 2px;
    font-family:boton;
    font-size:1.3em;
    color:#231f20;
    text-decoration:none;
    text-transform:uppercase;
    text-align:center;
    letter-spacing:1px;
    transition:0.3s;
 }
#nav a:hover{
    color:#ff4100;
    background-color:#231f20;
 }
#nav #hom:hover {
    background-color:transparent;
 }
#abo {
    width:92px;
    margin:118px 30px 0 0;
 }
#pop{
    width:156px;
    margin:118px 30px 0 0;
 }
#nav #hom,#nav #hom span {
    position:relative;
    width:304px;
    height:304px;
    padding:0;
    margin-right:50px;
 }
#nav #hom span {
    position:absolute;
    top:0;
    left:0;
    margin-right:0;
    background-image:url(images/logo.png);
    background-position:-308px 0;
 }
#pri {
    width:96px;
    margin:118px 50px 0 0;
 }
#con {
    width:116px;
    margin:118px 0 0;
 }
#content{
    position:relative;
    z-index:0;
    height:568px;
    margin-top:-141px;
    background-color:rgba(255,255,255,0.4);
 }
#banner {
    position:absolute;
    top:196px;
    left:-10px;
    width:944px;
    height:220px;
    padding-top:137px;
    background-image:url(images/banner.png);
 }
#banner p {
    width:800px;
    margin:auto;
    color:#efefef;
    letter-spacing:2px;
    text-align: center;	
 }
#footer{
    width:924px;
    padding:30px 0 80px;
    margin:auto;
 }
#copyright li {
    float:left;
    margin:0 30px;
    text-transform:uppercase;
 }
#followus {
    float:right;
    line-height:35px;
 }
#followus li {
    float:left;
    margin:0 5px;
    text-transform:uppercase;
 }
#follow a {
    margin-right:20px;
 }
#twitter img {
    margin-right:25px;
 }
#footer ul li a {
    color:#231f20;
    text-decoration:none;
 }
#copyright {
    line-height:35px;
 }
#footer a {
    transition:color 0.3s;
 }
#footer a:hover {
    color:#a7a7a7;
 }
#fb span {
    display:block;
    width:32px;
    height:31px;
    background-image:url(images/social.png);
    background-position:0 31px;
    transition:0.2s;
 }
#twitter span {
    display:block;
    width:37px;
    height:31px;
    background-image:url(images/social.png);
    background-position:37px 31px;
    transition:0.2s;
 }
#fb span:hover {
    background-position:0 0;
 }
#twitter span:hover {
    background-position:37px 0;
 }
</style>

</head>
<body>

<div id="container">

<ul id="nav">
 <li><a id="abo" href="#">About</a></li>
 <li><a id="pop" href="#">Power Plan</a></li>
 <li><a id="hom" href="#">Home<span></span></a></li>
 <li><a id="pri" href="#">Prizes</a></li>
 <li><a id="con" href="#">Contact</a></li>
</ul>

<div id="content">

<div id="banner">
<p>
Praesent tristique mauris ante, vel sagittis libero 
accumsan id. Nulla porttitor volutpat erat sed posuere. 
Curabitur eleifend nec ipsum id mollis. Donec molestie 
tellus non quam condimentum, id consectetur lorem 
hendrerit. Curabitur placerat bibendum orci, iaculis 
congue sem ullamcorper quis. Sed sapien neque, tempor 
at varius nec, sollicitudin sed nisi. Duis nulla urna, 
ultricies vel ultrices sed, tempor et felis. Ut pharetra 
sapien eget nisl viverra eleifend.
</p>
</div><!-- end #banner -->

</div><!-- end #content -->

</div><!-- end #container -->

<div id="footer">
<ul id="copyright">
 <li id="cr"><a href="#">Copyright 2013 PH GYM</a></li>
 <li id="faq"><a href="#">faq</a></li>
 <li id="services"><a href="#">services</a></li>
</ul>
<ul id="followus">
 <li id="follow"><p>follow us</p></li>
 <li id="fb"><a href="http://www.facebook.com"><span></span></a></li>
 <li id="twitter"><a href="http://www.twitter.com"><span></span></a></li>
</ul>	
</div><!-- end #footer -->

</body>
</html>[/color]

coothead

McCloud

Ye, I didn't even realize that it was png.. good point.

Took me a while to analyze your code. Some new techniques I haven't seen before
I still didn't completely understand all of it. But the one thing I am most curious about - what is the thing you have changed in order to fix the website height?

Anyhow, thanks again for your awesome work

coothead

Hi there McCloud,

....what is the thing you have changed in order to fix the website height?

Unfortunately, I cannot answer that, as I did not examine
your coding as I knew that I was going to rewrite it.

coothead

coothead

Hi there McCloud,

I had a little spare time, so I tracked down the CSS that
causes the unwanted space at the bottom of your page.

This is the miscreant little bugger...

[color=navy]
#banner {
	position: relative;
	z-index:-1;
	top: -725px;
 }
[/color]

coothead

McCloud

sweet lord you're the man!