dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: How could I realise a website banner using a frame?

  1. #1
    Join Date
    Feb 2016
    Posts
    4

    Question How could I realise a website banner using a frame?

    I got a picture and want to insert it as a banner into my top frame, so it fits it perfectly and, in the best case, isn't able to be zoomed in or out.

    I've already tried just putting the picture into the body (of the integrated html file), but obviously that isn't a really good solution. If you zoom the website, the banner gets zoomed too, so it doesn't fill the frame anymore. And to get it to fill in the first place, the picture must have exactly the right resolution. And then it will only work for one specific Monitor-Resolution.
    If I'd put the picture as a "background" into the body tag, it may alwasys fill the frame completly, but unfortunately by always repeating the picture instead of scaling it.

    Is there any possibility to put a banner in this frame that fills it completly by being zoomed? If no, what else could you do?

  2. #2
    Join Date
    Mar 2012
    Posts
    3,414
    Frames (if that is actually what you are using) are obsolete and should not be used. To get an image to scale you can set its width as a percentage of the parent div (or body). E.g.
    HTML Code:
    <html>
    <head>
    ...
    <style>
    body {
      width: 100%;
      max-width: 960px;
      min-width: 320px;
      margin: 0 auto;
    }
    #header {
      width: 100%;
      height: auto;
    }
    ...
    </style>
    </head>
    <body>
    <img id="header" src="images/myheader.jpg" alt="">
    ...
    </body>
    </html>
    Then, provided the image is (at least) 960px wide it will be scaled to fit the available width without being enlarged beyond 100%. Also, because the height is set to "auto" the aspect ratio will be preserved. Note: "auto" is the default setting so there is no actual need to specify it. I have simply done so to make it explicit.

    PS This code is untested and may need tweaking...
    Last edited by jedaisoul; 02-24-2016 at 04:29 PM.

  3. #3
    Join Date
    Feb 2016
    Posts
    4

    resolved

    Thanks for answering.
    In the meantime I've found a javascript that will always automatically scale the picture to the size I need.
    [SPOILER]
    Code:
    <html>
    <head>
    <script language="javascript">
    function ScaleSize()
    {
    document.getElementById("banner").style.width = document.body.clientWidth;
    document.getElementById("banner").style.height = document.body.clientHeight;
    }
    </script>
    </head>
    <body text="#000000" bgcolor="#594a3a" link="#FF0000" alink="#FF0000" vlink="#FF0000" scrolling="false" onload="javascript:ScaleSize();" onresize="history.go(0)">
    
    <img id="banner" src="../Pictures/BannerFinal.png"  />
    
    </body>
    </html>
    [/SPOILER]

    Regarding your opinion about frames, I've already heard some times that web developers don't like using frames. Although I wonder what exactly the problem with them is? Anyway, this first website I'm setting up is for a school project, so it should be fine for the moment. The alternative to that would probably be tables, which I will need to practice before implementing.

  4. #4
    Join Date
    Mar 2012
    Posts
    3,414
    That JS code is worthless. It does nothing more than setting width and height of the banner to 100% of the body. Well...

    - 100% of the width is ok, but it is simpler to set the width to 100% in the CSS (as I did).

    - 100% of the body height is NOT useful as a banner (at least, not without Frames)!

    - It does not preserve the aspect ratio of the banner image.

    I'd suggest you try the code I gave. By all means let me know if it does not do what you want...

    AS for frames, I repeat, they are obsolete. They are a feature of early versions of HTML that are not supported in HTML 5. What more need I say? If you are just learning HTML you should not use Frames.
    Last edited by jedaisoul; 02-26-2016 at 05:06 PM.

  5. #5
    Join Date
    Feb 2016
    Posts
    4

    Question

    Okay, I will follow your advice and replace the script.

    And yes, it fills everything up completly (still testing with frames), which wasn't the case with the other script!
    I replaced
    Code:
    #header {
      width: 100%;
      height: auto;
    }
    with
    Code:
    #header {
      width: 100%;
      height: auto;
    }
    So it also scales the picture's height. Is there a reason you set a limit for the body/picture width? Like, is there any problem with the picture being scaled beyond it's usual horizons, except it being slightly stretched?



    You convinced me of removing the frame concept and structuring the page on an other way.

    But what should I do? I know, you could use tables for structuring a website (which my school also has as a requirement for the project by the way "Use tables as main structure for your website" [I]"If you don't use frames, use interleaved tables"[I/]) but I've already heard and read from multiple sources that this is a terrible idea and I guess you won't suggest doing so either.
    I've went to learning CSS, since I heard that this would be the best way to structure things, but all I've found yet is about Universally Managing Fonts or Encasing Texts with Boxes. If you knew a website that explaine the structuring aspect of CSS (if it really has one) specifically, that would be really helpful!

  6. #6
    Join Date
    Feb 2016
    Posts
    4
    Oh, I forgot to put the change in the 2nd code block:
    Code:
    #header {
      width: 100%;
      height: 100%;
    }

  7. #7
    Join Date
    Mar 2012
    Posts
    3,414
    Quote Originally Posted by WebNoob27 View Post
    So it also scales the picture's height.
    Yes you can use percentages for the width as well as the height. However, that means that the picture will be squeezed or stretched to fit. If that distortion is acceptable, then that is the simpler solution.

    Quote Originally Posted by WebNoob27 View Post
    Is there a reason you set a limit for the body/picture width? Like, is there any problem with the picture being scaled beyond it's usual horizons, except it being slightly stretched?
    There are multiple reasons for setting a maximum width for body:

    1. Future proofing. I.e. PC screen sizes (in pixels) have tended to get bigger over time, from 800x600 to 1024x768 and now beyond 1920x1080. It therefore makes sense to specify the maximum width the body of the web site has been designed for. Otherwise the design can collapse if displayed in the future on a larger screen.

    2. Much of the content of a site is often text. A block of text can become difficult to read if the line length goes beyond 800 pixels, or so. Therefore allowing for side bars (if any) you arrive at the maximum width of the body.

    3. As you have found, making graphical images fill a section of the display is not simple. One technique that helps to make it workable is by setting the maximum width of the body.

    Quote Originally Posted by WebNoob27 View Post
    You convinced me of removing the frame concept and structuring the page on an other way. [/U]
    But what should I do? I know, you could use tables for structuring a website (which my school also has as a requirement for the project by the way "Use tables as main structure for your website" [I]"If you don't use frames, use interleaved tables"[I/]) but I've already heard and read from multiple sources that this is a terrible idea and I guess you won't suggest doing so either.
    Using tables structurally is a bad idea, but nowhere near as bad as using frames! Your school is somewhat behind the times, but if that is what is specified, that is what you have to do. In such a circumstance I would tend to do the work as specified (using tables) AND do it the modern way using CSS. It should not take very long to do both, and would show initiative. By the way, we are talking about structuring web pages. Structuring web sites (i.e. how you sub-divide the content into pages and how you link them) is a different subject.

    Quote Originally Posted by WebNoob27 View Post
    I've went to learning CSS, since I heard that this would be the best way to structure things, but all I've found yet is about Universally Managing Fonts or Encasing Texts with Boxes. If you knew a website that explaine the structuring aspect of CSS (if it really has one) specifically, that would be really helpful!
    I can't give you a source specific to the structural aspects of CSS. It is something I have had to learn over a period of time. So I would suggest that you need to use a general resource, such as w3schools, to research:
    - How to use generic block level tags (like DIV and IMG) structurally, instead of using them inside a structure.
    - Understand the natural flow of block level elements, and how to modify it with FLOAT and CLEAR.
    - How to take blocks outside the normal flow with POSITION: RELATIVE and POSITION: ABSOLUTE.
    - Understand how all this relates to building responsive web pages.
    Last edited by jedaisoul; 02-29-2016 at 04:11 PM.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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