SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: css problems

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Estonia
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css problems

    Hello

    My site

    And the problems:

    1) Is it possible to make the active link to look the same as it looks when it's hover using css?

    2) I would like the #footer to stay always at the bottom of the page. How can I do that? You can see the problem on Page2.

    3) IE shows a little white stripe next to the header pic. How to fix that?

  2. #2
    SitePoint Member
    Join Date
    Nov 2003
    Location
    USA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    3) It seems your image is 1px too short. 775px instead of 776px.

  3. #3
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think if you use this javascript you can fix problem no.2.
    Please let me know if that's what you want (and if it works).

    <script type="text/javascript">
    function fix()
    {
    var x,y;
    if (self.availHeight) // all except Explorer
    {
    y = self.availHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight)
    // Explorer 6 Strict Mode
    {
    y = document.documentElement.clientHeight;
    }
    else if (document.body) // other Explorers
    {
    y = document.body.clientHeight;
    }
    dh=document.getElementById('container').offsetHeight;
    gap=y-dh;
    nh=y-200+"px";
    document.getElementById('content').style.height=(gap>40)? nh : y;

    }

    </script>


    <body onload="fix();" onresize="fix()">


    Cheers.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Estonia
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by swishstudios
    3) It seems your image is 1px too short. 775px instead of 776px.
    It was ment to be 775px. I can't find the place where I have the extra pixel.

    Quote Originally Posted by BonRouge
    I think if you use this javascript you can fix problem no.2.
    Please let me know if that's what you want (and if it works).
    I don't understand anything about javascript, so I don't know if you understood my problem correctly. But this script didn't do anything, though.

  5. #5
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, have a look at

    this page

    and see what you think. If you open it in a small window and then resize it the footer should stay at the bottom.
    I've been testing it here on Firefox and IE and it seems to work OK.
    The only problem (maybe) is that if you open it in a large window and then make it smaller, the footer doesn't follow. Not that that's really a big problem.
    If this isn't what you're after, what is it?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You don't need javascript for a footer on the bottom (have a look at the 3 col demo and the FAQ on footers

    This will work in just as many browers (if not more) than the js version.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title> :) </title>
    <meta http-equiv="content-type" content="text/html; charset=us-ascii" />
    <style type="text/css">
      /* commented backslash hack v2 \*/ 
      html, body{height:100%;} 
      /* end hack */ 
      body {
       margin: 0;
       padding: 0;
       text-align: center;
       font-family: "verdana", "arial", sans-serif;
       font-size: 12px;
       background: #C00 url(http://math.ut.ee/~martin11/bls/bg.gif) repeat-y center;
      }
      a:link {
    	 color: #860d01;
    	 text-decoration: none;
      }
      a:hover {
    	 color: #870b01; 
    	 text-decoration: underline;
      }
      a:visited {
    	 color: #666;
    	 text-decoration: none;
      }
      #container {
       width: 755px;
       margin: 0px;
       margin-left: auto;
       margin-right: auto;
       text-align:left;
       background: #fff ;
       min-height:100%;
       position:relative;
      }
      /* commented backslash hack v2 \*/ 
      * html #container{height:100%}
      /* end hack */ 
      #content {
       padding: 0;
       text-align: justify;
      }
      #left {
       float:left;
       border-right:1px solid #000;
       width:180px;
      }
      #right {
       float:left;
       width:545px;
       margin-left: 10px;
       margin-right: 10px;
      }
      #header {
       height: 100px;
       text-align:left;
       color: #FFF;
       border-bottom: 1px solid #000;
       background: url(http://math.ut.ee/~martin11/bls/header.jpg) no-repeat;
      }
      #footerwrapper{
    	  position:absolute;
       bottom:10px;
       left:0;
       width:100%;
      }
      #footer {
       margin:0 10px;
       height: 20px;
       padding:5px;
       background:#C00;
       color: #FFF;
       text-align:left;
       border: 1px solid #000;
      }
      #menu {
       width: 180px;
       margin: 0px;
       }
      #menu ul {
    	 list-style: none;
    	 width: 180px;
    	 margin: 0px;
    	 padding: 0px;
    	 right: 0px;
      }
      #menu li a {
    	 padding: 12px 0 7px 15px;
    	 height: 20px;
    	 background-color: #C00;
    	 color: #c63;
    	 border-bottom: 1px solid #000;
    	 font-size: 10px;
       } 
       
      #menu li a:link, #menu li a:visited, #menu li a:active {
       color: #FFF;
       display: block;
       background-color: #C00;
       font-weight: bold;
       }
       
      #menu li a:hover {
    	 background-color: #000;
    	 background-image: url(http://math.ut.ee/~martin11/bls/nool.gif);
    	 background-repeat: no-repeat;
    	 background-position: right;
       }
     #clearfooter{height:40px;clear:both;}
     
     
     </style>
    </head>
    <body>
    <div id="container"> 
      <div id="header"></div>
      <div id="content"> 
    	<div id="left"> 
    	  <div id="menu"> 
    		<ul>
    		  <li> <a href="?id=yks">Page1 &raquo;</a> </li>
    		  <li> <a href="?id=kaks">Page2 &raquo;</a> </li>
    		  <li> <a href="?id=yks">Page3 &raquo;</a> </li>
    		</ul>
    	  </div>
    	</div>
    	<div id="right"> 
    	  <h1>Page0</h1>
    	</div>
    	<div style="clear:both"></div>
      </div>
      <div id="clearfooter"></div>
      <div id="footerwrapper"> 
    	<div id="footer"> &copy; Martin Mark 2004 </div>
      </div>
    </div>
    </body>
    </html>
    The pixel space in your image is there in ie and mozilla and is due to a rounding bug in both browers that occurs at different screensizes.

    You need to take you repeating background image out of the body element (because thats where the rounding problem occurs ) and place it in the containert element. You will of course need to make the container element wider to accomodate.

    This simple example shows all techniques.

    http://www.pmob.co.uk/temp/1colcentred.htm

    No javascript and no gap

    Paul

  7. #7
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul, I just want to say - that's great.
    I just didn't know you could do that.
    I think I need to study.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by bonRouge
    I think I need to study
    I think you're doing fine as you've helped quite a bit lately

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Estonia
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul O'B, the footer problem is solved.
    I also got rid of the stripe and everything was working fine in IE. But I made some renewal in the design and messed up the page in IE (works in mozilla). IE shows double right border of the #menu and the #left is not in the right place. And oops there comes the header stripe again.

    I'm going crazy.

    PS: Is it possible to make the #left go behind the #footer to the bottom of the page? Or to I have to make a new div for that?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you want a full length left column then you can't use height:600px as that will only apply when the content happens to be 600px;

    You will have to use another background gif trick. However as we moved the body image into the container that makes things difficult.

    Therefore we need to move the image back into the body but colour the centre bit black so that the 1 pixel jog doesn't notice. Then this leaves us free to repeat the left column on #container which is the only full length container we can use.

    You need to alter your body image and create a new left image. I have created these on my server just to show you how and uploaded your page there.

    here is the example.

    http://www.pmob.co.uk/temp/test4.htm

    When you have grabbed the code (view source) and the images (or make your own) then let me know and I will remove the page.

    I think that's what you were after .

    Paul

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Estonia
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B, you are awesome!

    How long have you been dealing with css? I have always used tables to make the layout of the page, but now I'm trying to go along with the standards. The different browsers are making it very difficult. But I'm not going to give up! I have learnt alot from you. Thank you very much!

    I'm sure you are going hear from me (my problems) soon


Bookmarks

Posting Permissions

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