Results 1 to 12 of 12

Thread: HTML/CSS problem

  1. #1
    Senior Member
    Join Date
    Aug 2004
    Location
    W Yorkshire
    Posts
    5,668
    Thanks
    85
    Thanked
    13 times in 11 posts

    HTML/CSS problem

    I had a problem with overlapping divs, but basically I figured out it was because in CSS I was using "position:absolute", if I changed that to.. static for example, the div would stop overlapping. However, I need the attribute absolute to make a div stick to the bottom of the page (as a footer).


    Any help? (I haven't posted the source as it's getting a bit long.. can provide a screenshot if required)


    Cheers


    Edit: God I hate it when this happens.. I search for ages.. can't find the answer, so I post a thread.. then a minute later I figure it out.

    Using position:relative appears to be working, for now >_<.

    Sorry!
    Last edited by XA04; 23-08-2006 at 01:42 PM.

  2. #2
    Senior Member
    Join Date
    Aug 2004
    Location
    W Yorkshire
    Posts
    5,668
    Thanks
    85
    Thanked
    13 times in 11 posts
    OK.. well I decided to start doing more of the website, and the footer isn't sticking to the bottom now. I haven't changed anything since the last time I used it. The footer div is still set to relative... it doesn't overlap but it won't stick to the bottom. The only attribute that makes it stick is absolute... but I can't use that because it will overlap.

    So I'm in the same situation as I was when I started this thread... agh!


    Any help is appreicated,
    Thanks

  3. #3
    Spinal Pap Tomahawk's Avatar
    Join Date
    Jul 2003
    Location
    Bristol/Manchester Uni
    Posts
    1,002
    Thanks
    8
    Thanked
    13 times in 8 posts
    If you post the code I'll have a look for you.. have a few ideas but depends on the current rules you have defined.



    [ iTomaHawk | My Music MySpace ]

  4. #4
    Senior Member
    Join Date
    Aug 2004
    Location
    W Yorkshire
    Posts
    5,668
    Thanks
    85
    Thanked
    13 times in 11 posts
    Thanks for the reply.

    Screenshot of how it looks on a higher resolution:


    Screenshot of how it looks at 1024x768:



    CSS:
    Code:
    html,body
    {
    height:100%;
    min-height:100%;
    background-image:url(images/bg.gif);
    background-color:#e9f1f4;
    background-repeat:repeat-x;
    margin:0px;
    padding:0px;
    }
    
    a:link
    {
    color:#c50000;
    text-decoration:underline;
    }
    
    a:visited
    {
    color:#990000;
    text-decoration:underline;
    }
    
    a:hover
    {
    color:#0000FF;
    text-decoration:none;
    }
    
    .maincontent
    {
    margin-left:auto;
    margin-right:auto;
    background-color:#eeeeee;
    width:800px;
    height:100%; /* Leave in! fixes IE from breaking div */
    min-height:100%;
    border-left:1px;
    border-right:1px;
    border-top:0px;
    border-bottom:0px;
    border-style:solid;
    }
    
    .content
    {width:760px;
    margin-left:auto;
    margin-right:auto;
    }
    
    .mainmenu
    {
    border-left:0px;
    border-right:0px;
    border-top:0px;
    border-bottom:1px;
    border-style:solid;
    }
    
    .footer
    {
    text-align:center;
    width:100%;
    border-bottom:0px;
    border-top:1px;
    border-left:0px;
    border-right:0px;
    border-style:solid;
    position:absolute;
    bottom:0;
    width:800px;
    }

    HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>xxxxxxxxxxx</title>
    <?php include('yyyyyy') ?>
    </head>
    
    <body>
    		<div class="maincontent">
    				<?php include('xxxx') ?>
    				<!-- Content Start -->
    					<div class="content">
    						<br>
    						
    						<h2 align="center">Where am I located?</h2><br><br>
    						<p><br><br> yyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
    
    <b>Map</b><br>
    <a href="images/map.gif" target="_blank"><img src="images/map.gif" width="300" height="202" border="0" alt="Map"><br></a>
    <i>Map courtesy of <a href="jjj">Google Maps</a></i>
    
    </p>
    												
    					</div>
    
    				<!-- Content End -->
    				<?php include('ooooo') ?>
    		</div>
    </body>
    </html>

    HTML for footer too if it helps:
    Code:
    <div class="footer">
    <font size="-1">Copyright &#169; xxxxxx <? echo date('Y') ?><br>
    All logos and trademarks on this site are property of their respective owners
    
    
    </font>
    </div>
    Thanks,
    Adrian
    Last edited by XA04; 25-08-2006 at 10:21 AM.

  5. #5
    Custom User Title
    Join Date
    Oct 2005
    Location
    Wirral UK
    Posts
    1,168
    Thanks
    10
    Thanked
    14 times in 14 posts
    • cougarslam's system
      • Motherboard:
      • Asus Maximus Formula SE (ROG)
      • CPU:
      • Core 2 Duo E6600 @ 3ghz
      • Memory:
      • 4gb Corsair DDR2
      • Storage:
      • 1TB
      • Graphics card(s):
      • BFG Nvidia 8800GT OC 512MB
      • PSU:
      • Corsair HX520
      • Case:
      • Zorro
      • Operating System:
      • Vista Business 32
      • Monitor(s):
      • 2 x 17" crt
      • Internet:
      • adsl max (entanet)
    you tried using valign="bottom"

  6. #6
    Senior Member
    Join Date
    Aug 2004
    Location
    W Yorkshire
    Posts
    5,668
    Thanks
    85
    Thanked
    13 times in 11 posts
    Yes. Doesn't change anything.

    (I presume you meant on the footer)

  7. #7
    Spinal Pap Tomahawk's Avatar
    Join Date
    Jul 2003
    Location
    Bristol/Manchester Uni
    Posts
    1,002
    Thanks
    8
    Thanked
    13 times in 8 posts
    So do you want it to stay at the bottom of the browser with the main 'content' section of your site scrolling behind the footer should it exceed the height of the browser window?.. Or do you wish the footer to go with the content and always stay right at the bottom of the page, even if the user has to scroll down to see that footer?

    ..


    [ iTomaHawk | My Music MySpace ]

  8. #8
    Senior Member
    Join Date
    Aug 2004
    Location
    W Yorkshire
    Posts
    5,668
    Thanks
    85
    Thanked
    13 times in 11 posts
    I want the footer to stick to the bottom. If content is larger than the viewers screen then I want them to scroll down.. so they cannot see the footer until they go to the very bottom of the screen.


    Cheers,
    Adrian

  9. #9
    Spinal Pap Tomahawk's Avatar
    Join Date
    Jul 2003
    Location
    Bristol/Manchester Uni
    Posts
    1,002
    Thanks
    8
    Thanked
    13 times in 8 posts
    Ok Adrian, here you go.

    This works fine for me in IE/FF and on multiple resolutions.. hope this is what you are after.

    Mainly edited the #footer code and added 2% padding to the content to stop it breaking the design on lower resolutions, or if the browser window is resized and made sure the footer wasn't wrapped within the maincontent.

    CSS
    Code:
    html,body
    {
    height:100%;
    min-height:100%;
    background-image:url(images/bg.gif);
    background-color:#e9f1f4;
    background-repeat:repeat-x;
    margin:0px;
    padding:0px;
    }
    
    a:link
    {
    color:#c50000;
    text-decoration:underline;
    }
    
    a:visited
    {
    color:#990000;
    text-decoration:underline;
    }
    
    a:hover
    {
    color:#0000FF;
    text-decoration:none;
    }
    
    .maincontent
    {
    margin-left:auto;
    margin-right:auto;
    background-color:#eeeeee;
    width:800px;
    height: 100%;
    min-height:100%;
    border-left:1px;
    border-right:1px;
    border-top:0px;
    border-bottom:0px;
    border-style:solid;
    }
    
    .content
    {width:760px;
    margin-left:auto;
    margin-right:auto;
    padding-bottom: 2%;
    }
    
    .mainmenu
    {
    border-bottom: 1px solid #000;
    }
    
    #footer {
    bottom: 0;
    background-color: #eee;
    color: #000;
    width: 800px;
    text-align: center;
    padding: 0.5% 0%;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    margin: 0 auto;
    }
    HTML
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>xxxxxxxxxxx</title>
    <link rel="stylesheet" type="text/css" href="global.css" />
    <?php include('yyyyyy') ?>
    </head>
    
    <body>
    		<div class="maincontent">
    				<?php include('xxxx') ?>
    				<!-- Content Start -->
    					<div class="content">
    						<br>
    
    						<h2 align="center">Where am I located?</h2><br><br>
    						<p><br><br> yyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
    
    <b>Map</b><br>
    <a href="images/map.gif" target="_blank"><img src="map.gif" width="300" height="202" border="0" alt="Map"><br></a>
    <em>Map courtesy of <a href="jjj">Google Maps</a></em>
    </p>
    					</div>
    
    				<!-- Content End -->
    				<?php include('ooooo') ?>
    		</div>
    		
    		<div id="footer">
    <font size="-1">Copyright © xxxxxx <? echo date('Y') ?><br>
    All logos and trademarks on this site are property of their respective owners
    </font>
    </div>
    		
    </body>
    </html>
    Hope this helps!



    [ iTomaHawk | My Music MySpace ]

  10. #10
    Senior Member
    Join Date
    Aug 2004
    Location
    W Yorkshire
    Posts
    5,668
    Thanks
    85
    Thanked
    13 times in 11 posts
    Hi,
    Thanks for helping, but it doesn't really seem to be working.




    Pretty self explanitory.. but, it's not sticking to the bottom, and the div breaks when resized. I haven't tested this in IE (want to get it working with at least FF and IE though).

    Cheers,
    Adrian

  11. #11
    Ah, Mrs. Peel! mike_w's Avatar
    Join Date
    Oct 2003
    Location
    Hertfordshire, England
    Posts
    3,326
    Thanks
    3
    Thanked
    9 times in 7 posts
    My advice? Don't bother trying to get a footer to always be at the bottom of the screen. I did, and spent ages looking on the Internet for a decent solution, and couldn't find one. Just make the central div fluid i.e. don't set a height or width, and get the footer div to follow on. Yes, this means that the footer will always be just below the main content, but that's the best you'll probably be able to get. (At least without a lot of effort)

    So far as I can see, there are two main approaches to what you want.

    1) Stick the footer on the end of the main content, and make sure the main content div fills most of the length of the page. Problems?

    min-height:xx% won't work for IE. Even if it did, it's not so nice since it means that when you reduce the window size of the browser, the main content div is now longer than the window.

    height:xx% won't work since it'll break the div rendering when the main content div is too long (as you've found out)

    2) Deal with the footer directly, and make sure it's always at the bottom of the page

    You could try using top:xx% while making the footer div position:absolute, but that suffers from the problems of using percentages e.g. inconsistent application between browsers, changing window size, plus, if memory serves, it doesn't work if the main content div is too long. Essentially, anything that directly tells the footer to be at the bottom of the page is liable to break when the main content div gets too long, meaning that one of the divs will cover the other.
    Last edited by mike_w; 26-08-2006 at 12:39 AM.
    "Well, there was your Uncle Tiberius who died wrapped in cabbage leaves but we assumed that was a freak accident."

  12. #12
    Senior Member
    Join Date
    Aug 2004
    Location
    W Yorkshire
    Posts
    5,668
    Thanks
    85
    Thanked
    13 times in 11 posts
    Fair enough, might be worth getting rid of the footer so I can just get it finished!

Thread Information

Users Browsing this Thread

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

Similar Threads

  1. DVI problem, pc won't start! help needed.
    By snowwolf in forum Graphics Cards
    Replies: 1
    Last Post: 09-04-2010, 04:11 PM
  2. Extigy USB problem
    By Tamster in forum PC Hardware and Components
    Replies: 1
    Last Post: 14-02-2004, 09:26 PM
  3. Wierd Ati driver problem
    By Skii in forum PC Hardware and Components
    Replies: 5
    Last Post: 20-01-2004, 06:59 PM
  4. Keyboard Problem
    By Craig in forum PC Hardware and Components
    Replies: 0
    Last Post: 16-11-2003, 01:15 PM
  5. Problem with 8KRA2+ mobo and "C1" memory?
    By stryda in forum PC Hardware and Components
    Replies: 0
    Last Post: 14-10-2003, 01:04 PM

Posting Permissions

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