www.webdeveloper.com
Results 1 to 6 of 6

Thread: website height and relative image positioning

  1. #1
    Join Date
    Oct 2013
    Posts
    32

    website height and relative image positioning

    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
    Code:
    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

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,458
    Hi there McCloud,

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

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

    Code:
    
    <!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>
    coothead

  3. #3
    Join Date
    Oct 2013
    Posts
    32
    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

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,458
    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

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,458
    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...
    Code:
    
    #banner {
    	position: relative;
    	z-index:-1;
    	top: -725px;
     }
    
    coothead

  6. #6
    Join Date
    Oct 2013
    Posts
    32
    sweet lord you're the man!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles