SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Cambridge, England
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed Header text?

    I have a two column page with a left hand div which floats left and a right hand div which is fluid and set to relative. In the header div,I have some text, 'INFORMATION ZONE'. The problem is that when the page is resized, the text wraps round to the left hand side beneath the 'exploris' logo. I have also tried setting the header div to 'absolute', but that doesn't work.

    http://www.step-up-to-science.com/exploris8.html

    Does anyone have any ideas?
    Philippa

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

    Why don't you just set the Information Zone text to absolute or have you something else going on there.

    Code:
    #header{ background-image: url(http://www.step-up-to-science.com/gr...background.jpg); 
    		 margin-top: 0px; margin-bottom: 0px; padding: 0px; height: 100px;position:relative; }
    .infoZone   { color: white; font-size: 180%; position: absolute; top: 30px; left:380px}

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Cambridge, England
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thank's for the advice. However although it does look better in IE windows, the register between the side bar background and the header background isn't exact. Also, when the page is made smaller, the 'ZONE' text wraps under 'INFORMATION'.

    In IE mac, the 'Exploris' logo has shifted further to the right and the navigation links on the left have shifted much further up the page.

    What I think I will do, is make one long image which includes both the text and the background to fit into the header.

    http://www.step-up-to-science.com/exploris8.html

    Anyway, thank's very much for your help.
    Philippa

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

    Well first of all you copied the code incorrectly which is why the header alignment is out.
    Code:
    #header { background-image: url(http://www.step-up-to-science.com/gr...background.jpg);
    		 margin-top: 0px; 
    		 margin-bottom: 0px; 
    		 padding: 0px; 
    		 height: 100px 
    		 position: relative}
    You have missed the semi coln out so the position:relative is ignored.
    Code:
    #header { background-image: url(http://www.step-up-to-science.com/gr...background.jpg);
    		 margin-top: 0px; 
    		 margin-bottom: 0px; 
    		 padding: 0px; 
    		 height: 100px ;
    		 position: relative}
    the text wrapping can be cured with white-space:nowrap;
    Code:
    .infoZone { color: white; font-size: 180%; position: absolute; top: 30px; left: 380px;white-space:nowrap }
    I would avoid using images when theres no need as you just make your page heavier

    I don't have ie mac running so I can't check there but you should be able to get it to work without resorting to another image

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Cambridge, England
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoops! Sorry about that! Many thank's. That certainly solved the problem in IE Windows. However, IE Mac 5.1 remains unaffected by the changes. That is, the 'Exploris' logo has shifted well over to the right and the left-hand navigation buttons have also shifted well up the page.

    Netscape 7 Mac also seems to be OK. Any other ideas?

    http://www.step-up-to-science.com/exploris8.html

    Thank's for your time,
    Philippa

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

    Mac occasionally inherits the position of its children somehow so just take the infozone out oif the header and let it be positioned from the viewport instead.

    Code:
      <div id="header"> <img class="explorisPad" src="images/exploris_logo.png" alt="" height="45" width="150" border="0"> 
      </div>
      <div class="infoZone"><strong>INFORMATION ZONE</strong></div>
    
    Hopefully that will solve it

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Cambridge, England
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic, it works! I'm so glad that I asked. At the very least, it would have taken ages.

    http://www.step-up-to-science.com/exploris9.html

    Many thank's,
    Philippa


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
  •