Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: Header width

  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Header width

    Hello, I'm a beginner and stumbled upon a question, I hope you could help.

    On my page, I set the header width to be 100% (I made the header using table tag), so that no matter how much you zoom out the browser window, the header stretches across the window.

    The problem however is zooming in - because once the fixed elements on the page go beyond the visible space (so that the horizontal scroll bar appears), the header does not and when you scroll to the right you can see it doesn't extend and cuts off.

    This is a webpage which is very similar to mine, and has the same problem (the header is the black line at the very top): http://www.tema.ru/travel/spain-andorra.2010/

    The other thing I noticed is that if you view the above page using iPhone browser, the browser zooms according to the size of the images (so that there is no horizontal scroll bar), but at the same time you can see the header cuts off a little bit at the right. It doesn't look good this way, and I was wondering if there is a solution to avoid this problem.

    Many thanks for any suggestions you might have
    Last edited by monkey186; 04-05-2011 at 06:14 AM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Hard to say anything with no code or site to look at.

    And you do know tables for layouts are bad right?
    Teed

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi teedoff, thanks for your reply!

    Above I posted the site, it is very similar to mine in that there is a table header on top, and large images as a main content (the reason I cannot post my own site is it is not online yet!)

    http://www.tema.ru/travel/spain-andorra.2010/


    Yes I know the tables are bad I'm not sure whether there is a solution to my problem using css?...

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Then you need to post all your code. Just because the site you posted is similar to yours, doesnt mean the same solution will work for both.
    Teed

  • #5
    New Coder
    Join Date
    Mar 2011
    Posts
    62
    Thanks
    3
    Thanked 2 Times in 2 Posts
    First off, the header on this example site is not being stretched off the side of the page.

    It is the pictures that are large, they are a set pixel length. I am viewing it using my laptop and my laptop's monitor isn't that big.

  • #6
    New Coder
    Join Date
    Apr 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="main.css">
    
        <title>Home</title>
    
      </head>
    
      <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" link="#0055cc" marginheight="0" marginwidth="0" text="#000000" vlink="#990099" alink="#ff0000" bgcolor="#CCD9C8" background="i/bg1.png"> 
    
    
        <table width="100%" background="i/bg3.png" border="1" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td style="padding-left: 22px; padding-top: 10px;" valign="top" width="67%"><br></td>
            <td valign="top" width="33%">
              <table height="50" border="0" cellpadding="0" cellspacing="0">
              <tbody>
                <tr valign="top">
                  <td style="padding-left: 9px;">
                    <a href=" "><img src="i/logo5.png" alt="" height="41" width="90" border="0"></a>
                  </td>
                  <td><br></td>
                </tr>
              </tbody>
              </table>
            </td>
          </tr>
        </tbody>
        </table>
    
       <br>
    
        <table width="100%" border="0" cellpadding="15" cellspacing="2" class="pole"> 
        <tbody>
          <tr valign="top"> 
            <td width="1%"></td>
            <td> 
              <h1 class="title">Cambridge</h1><br> 
              <img src="i/cam_73.jpg" alt="" width="1000" height="690" style="border: 2px solid #93A98F;">
              <p class="text">Description of the picture.</p><br> 
    
              <img src="i/cam75.jpg" alt="" width="1000" height="650" style="border: 2px solid #93A98F;"> 
              <p class="text">Description of the picture.</p><br> 
            </td>
          </tr>
        </tbody>
        </table>  
    
      </body>
    </html>

    Above is the code of my test page.

    It displays fine on my laptop and computer, and it displays fine when i "zoom out" the browser window - the effect is the header stretches across the window as everything becomes smaller, so that there is no gaps in the header. Which is the way I want it to be, and that is why I set the table width "100%"

    However, on both my laptop and computer, if i "zoom in" that is enlarge the browser window, the header does not extend beyond the visible space. You can see this by enlarging the window to the point that the horizontal scroll bar appears, then when you scroll to the right you will see that the header cuts off at the place where it was visible before scrolling. Below I attach the screenshot of the window at normal zoom level, and then at increased zoom level scrolled to the right - you can see the disparity between the width of the header and the image:

    1


    2



    Furthermore, if you view a similar page on the iPhone browser, the browser displays the images in full (in other words, there is no horizontal scroll bar), yet at the same time the header cuts off a little at the right end - there is a white gap at the right, which looks very wrong. Below is the screenshot from iPhone browser, showing the gap:




    My question is whether it is possible to achieve a header which would behave like 100% width when zooming out (that it, remain the header across the whole window), and at the same time stretch together with the images when zooming in, so that there is no disparity between the width of the header and width of the images.

    My second question is how to avoid that gap on iPhone browser

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Well I dont have an iPhone to check your code on, so I worked up a very simple page with a black header that stretches 100% of the browser window.

    I also used two divs instead of tables. No further along than you are with your site, you should go ahead and do things the correct semantic way. And your code above was not valid anyway.

    Try it out and see hwo it works.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    *       {
    	margin:0; padding:0;
    }
    #wrapper {
    	width: 960px;
    	margin: 30px auto;
    }
    
    #header {
    	background-color: #000;
    	background-repeat: repeat-x;
    	height: 75px;
    	width: 100%;
    }
    </style>
    </head>
    
    <body>
    <div id="header">Header Goes Here.</div>
    <div id="wrapper">Content for  id "wrapper" Goes Here Content for  id "wrapper" Goes Here Content for  id "wrapper" Goes Here Content for  id "wrapper" Goes HereContent for  id "wrapper" Goes Here Content for  id "wrapper" Goes HereContent for  id "wrapper" Goes Here Content for  id "wrapper" Goes Here Content for  id "wrapper" Goes Here Content for  id "wrapper" Goes Here Content for  id "wrapper" Goes Here Content for  id "wrapper" Goes Here Content for  id "wrapper" Goes HereContent for  id "wrapper" Goes HereContent for  id "wrapper" Goes HereContent for  id "wrapper" Goes HereContent for  id "wrapper" Goes HereContent for  id "wrapper" Goes HereContent for  id "wrapper" Goes HereContent for  id "wrapper" Goes HereContent for  id "wrapper" Goes Here Content for  id "wrapper" Goes Here Content for  id "wrapper" Goes Here Content for  id "wrapper" Goes Here Content for  id "wrapper" Goes Here Content for  id "wrapper" Goes Here Content for  id "wrapper" Goes Here Content for  id "wrapper" Goes HereContent for  id "wrapper" Goes HereContent for  id "wrapper" Goes Here</div>
    </body>
    </html>
    Teed

  • #8
    New Coder
    Join Date
    Apr 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi teedoff, many thanks for your help. I'm certainly planning to ensure the code is semantically correct and validated. I think when you start its looks a bit too much information, table tag seems so much easier! But I know it is wrong, and I have started using divs for positioning.

    The code you suggested doesn't solve the problem though It appears to behave in the same way, in that the moment the page is zoomed in so that the horizontal scroll bar appears, you scroll the page to the right and see the disparity between the header and the content: the header is shorter than the content. My task is to try to achieve the state of affairs where 1) no matter what the zoom level, the header always stretches across the whole window, and 2) no matter what the zoom level, the header is never shorter than the content even when you have to horizontally scroll the window (that is, the header is always either longer than the content, or is of the equal width with the content). I'm attaching the screenshot showing the problem below:


  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello monkey186,
    You are seeing the normal behaviour of a div. There is a way to fix it though.

    Copy/paste this entire example into a new .hml document and view it in your browser. Be sure to use the attached Untitled-1.jpg.
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6 url(Untitled-1.jpg) repeat-x top;
    	font: 100% Verdana, Geneva, sans-serif;
    	color: #333;
    }
    #nav {
    	line-height: 24px;
    	width: 100%;
    }
    #nav a {
    	color: #fff;
    	font-size: 0.8em;
    	text-decoration: none;
    }
    	#nav a img {margin: 0 10px;}
    #container {
    	width: 1000px;
    	margin: 30px auto;
    }
    </style>
    </head>
    <body>
    <div id="nav">
            <a href="#"><img src="http://www.tema.ru/i/arr.gif" alt="" width="11" height="11" /> Дом-страница Артемия Лебедева</a>
            <a href="#">Veni, Vidi</a>
    <!--end nav--></div>
        <div id="container">
            <p>some text here</p>
            <img src="http://www.tema.ru/travel/spain-andorra.2010/R0010398.jpg" alt="train image" width="1000" height="667" />
    <!--end container--></div>
    </body>
    </html>
    Attached Images Attached Images  
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Apr 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Excavator it works this way! Im sure it should fix the iphone browser behaviour too, since now the header is part of the whole page background and therefore should be displayed wherever the page is. Great


  •  

    Posting Permissions

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