Member Avatar for Member #46692

Lets say I have a banner, which sits and the top of my internet page. I've designed it so it fits perfectly on my screen, given my screen's width.

However, every1 has screen of different widths. How do i get my banner to perfectly fit anybody's screen.

All the big guns appear to do this pretty easily. Like Micro$oft. It always fits gud. How do they do this? Is it difficalt? I'm a nubee.

God bless

:surprised

  • 3 Contributors
  • 3 Replies
  • 113 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by vangraan

Dani AI

Generated

Both and are pointing in the right direction: a banner that adapts needs to be built to scale and the navigation should not be hard-baked into a single raster image. Two modern, practical approaches that avoid distortion and make mouseovers reliable are inline SVG (scales cleanly and supports text/links) and CSS "slicing" via border-image (lets corners/caps stay intact while edges stretch). Use real HTML/CSS for the nav so hover/focus and accessibility work rather than image maps.

Minimal inline-SVG + HTML overlay pattern (keeps nav accessible and scalable):

<header class="banner">
  <svg viewBox="0 0 1200 200" class="banner-art" role="img" aria-labelledby="btitle">
    <title id="btitle">Site banner</title>
    <!-- artwork here: rectangles, gradients, text, shapes -->
  </svg>

  <nav class="banner-nav" role="navigation">
    <a href="/home">Home</a>
    <a href="/products">Products</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

CSS-slice alternative: create a single PNG (or SVG) with fixed corners and an extendable middle, then apply it with border-image so edges stretch without skewing the graphics. This is a good fallback for older toolchains that rely on raster art.

Troubleshooting and best practices: do not use a single large raster for both art and interactive links; place nav links as HTML for hover and keyboard focus. Provide high-DPI assets (or use SVG) for crispness on Retina screens. Test at several breakpoints and with different zoom levels. If supporting ancient browsers, add a simple image fallback and ensure the banner degrades gracefully. For details and examples, see the MDN references on SVG viewBox and CSS border-image and on responsive images: SVG viewBox, CSS border-image, Responsive images.

Recommended Answers

All 3 Replies

Member Avatar for DaveSW

2 options:
1) size your image using percentages.
2) set a div as your top header. put one image in and float it to the left. then put another image in that will sit on the right, using text-align right.
You can also assign your image as a css background, and make it so that the bit that falls off the right is optional...

We really need to see your header to suggest specific strategies.

Member Avatar for Member #46692

the title bar will contain mouse overs for naviagtion.

Here it is...

When u upload u have 2 right click and extract to run proberly.

twee.zip (34.3 KB)
Member Avatar for vangraan

You need to make it so it grows and shrinks with the page.

This means your header should always use 100% of the page width. Then you need a section which will grow and a section that will stay the same(usually the section with the logo).

Check www.intus.co.za for what i mean. The left hand side of the page grows and shrinks but the right hand side always stay the same. The section that stays the same can just be a normal image and the section that changes size can be a background image that repeats.

Say your header will be a table the code will look something like this:

<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="20%"><img src="logo.gif"></td>
<td width="80%" style="background-image:url(repeat.gif);background-repeat:repeat-x;">&nbsp;</td>
</tr>
</table>

Hope this helps

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.