Hi All
Can anyone tell me how to have a banner that runs the full width of the page in a browser no matter what that width is set at by the user/etc. At present I need to set all dimensions, including the width, of it.
If the banner was, for example, a strip transitioning from black to white, this could theoretically be generated by simple repeation of a small slice of it. But could anyione tell me how to do that?
Thanks in advance.
Robin
found this on the WDG website, but it’s three years old now, http://forums.htmlhelp.com/index.php?showtopic=6440:
“Take a look at the header at the top of the igoogle page. There is an image in the middle that is a reasonable width for most people. It’s centered, so if the window is too narrow, the ends get chopped off. And behind it is a background color or a tiled background image (depending on the theme) that blends with the ends of the main image. So if the window is wider, the banner stretches to the full width.”
This is a better description of my question which then becomes how can I tile the elements to the right and left of a centred graphic though. Any help welcome.
Full-width banner in Fluid Layout
Example (good e.g. for a typical 728×90 image):
<DIV class=FullBanner style="BACKGROUND:
url(https://images-na.ssl-images-amazon.com/images/G/01/gift-certificates/consumer/ordering-confirm-email-gc-banner-ad._V163739287_.gif)
white no-repeat; FLOAT: left; WIDTH: 99%; HEIGHT: 90px"><A title="Amazon.com Gift Cards" style="CURSOR: hand"
href="https://www.amazon.com/gp/gc"><DIV style="WIDTH: 99%; HEIGHT: 90px"></DIV></A></DIV>
The example above should work (I haven’t tested) by simply replacing the “no-repeat” with “repeat-x”.
Versailles, Sat 12 Nov 2011 15:55:00 +0100, edited 16:06:20
Merci Michel !!
Fantastique, and it looks very similar to some I just found on doctype.com 
http://doctype.com/igooglelike-banner (I think a div got lost in the code you posted?)
Problem solved it seems 
thanks!
p.s. this is a bit of a more complicated way to do it? http://www.patentgenius.com/patent/6185589.html
Thanks for your thanks! 
My code has 2 DIVs (one inside the other). I built it long ago and used it plenty times without changing anything else than the variables (2 URLs, 1 color, 2 WIDTHs, 2 HEIGHTs, 1 title). The edit I made at 14:06 GMT was only adding the 3 bulleted comments right under the CODE, I changed nothing to the CODE itself. You can paste it into Notepad++ and count and pair the opening and closing DIVs.
I quickly visited your 2 links (iGoogle-like banner mattruma 2009 and [URL=“http://www.patentgenius.com/patent/6185589.html”]6185589 Patent Drawings Automatic banner resizing using variable width TABLE cells). They seem more elaborated than my solution, and they could fill the remaining gap if they find an apt way of resizing-moving-clipping the image adequately when the viewport shrinks, in the case where you want the banner centered. However this remains to be seen (some part of the image has to be dropped anyway, and I don’t see yet a solution simpler and less damageable in general than the one I found). Meanwhile I didn’t read them precisely enough to see what they may add to the classical solutions, DIVs with style=“MARGIN: 0 auto” and TABLE with percentage “widths” or without “widths” at all.
I have another variant for a long banner (typical 728×90 again) at the right of a company logo, I will upload it later.
Versailles, Sat 12 Nov 2011 16:51:00 +0100
Oopsi, what I meant was it was missing a closing div thingummy (it isn’t). I had just misread what you’d pasted but then wondered if something had been truncated/deleted ! No offence meant.
Logo + Full-remaining-width Banner
Here it is:
DIV version (requires underscored-properties, like “_BACKGROUND-POSITION”, that have priority in IE and are ignored in other browsers; I found no way with only standard MARGINs):[INDENT]
<DIV id=logo1_banner1 style="HEIGHT: 90px; TEXT-ALIGN: left"><DIV class=logo_RFI style="PADDING-LEFT: 5px; BACKGROUND: white; FLOAT: left;
MARGIN: 0px 5px 0px 0px; WIDTH: 79px; PADDING-TOP: 5px; HEIGHT: 90px"><A
title=RFI href="http://www.rfi.fr"><IMG alt=RFI
src="http://www.rfi.fr/sites/rfi.fr/themes/rfi/logo.png"></A></DIV>
<DIV style="BACKGROUND: url(http://s0.2mdn.net/1016711/1103_LH_FR_JETTY_WEB_728x90.gif)
#475223 no-repeat left top; WIDTH: 100%; HEIGHT: 90px"><A
title="Destinations de rêve - Lufthansa" style="CURSOR: hand"
href="http://www.lufthansa.com/online/portal/lh/th/specials/booking?nodeid=2011003">
<DIV style="WIDTH: 100%; HEIGHT: 90px"></DIV></A></DIV></DIV>
[/INDENT]
NBMM: this is essentially the previous Full-width banner in Fluid Layout, with the logo added in a “FLOAT: left” DIV, and the little adaptations this needs in fluid layout:
[LIST]
[]“BACKGROUND” and “PADDING” for “normal” browsers, overwritten by different “_BACKGROUND” and “_PADDING” for IE;
[]The BACKGROUND color of the banner extends on full width; in some cases this is fine, but here it needs to be locally overwritten by giving the logo another BG color, “white”.
[/LIST]TABLE version is of course (but don’t tell it, or you will get badly chastised for political incorrectness) easier to write and more reliable:[INDENT]
<DIV id=logobanner-4 style="HEIGHT: 90px; TEXT-ALIGN: left"><TABLE width="99%" border=0><TBODY><TR>
<TD><DIV style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BACKGROUND: white; PADDING-BOTTOM: 5px;
MARGIN: 0px 5px 5px 0px; WIDTH: 79px; PADDING-TOP: 5px; HEIGHT: 90px">
<A title=RFI href="http://www.rfi.fr">
<IMG alt=RFI src="http://www.rfi.fr/sites/rfi.fr/themes/rfi/logo.png"></A></DIV></TD>
<TD width="100%">
<DIV style="BACKGROUND: url(http://s0.2mdn.net/1016711/1103_LH_FR_JETTY_WEB_728x90.gif)
#475223 no-repeat 0px 0px; WIDTH: 100%; HEIGHT: 90px">
<A title="Destinations de rêve - Lufthansa" style="CURSOR: hand"
href="http://www.lufthansa.com/online/portal/lh/th/specials/booking?nodeid=2011003">
<DIV style="WIDTH: 100%; HEIGHT: 90px"></DIV></A></DIV></TD></TR></TBODY></TABLE></DIV>
Versailles, Tue 15 Nov 2011 00:23:00 +0100[/INDENT]
Logo + Full-remaining-width Banner by Paul O’B
Thanks a lot to Paul O’B, who on Fri 18 Nov 2011 00:34 GMT posted (#71 in “HTML WG approve tables for presentational purposes”) the DIV version without underscored properties that I couldn’t find (I usually omit trying “OVERFLOW: hidden” or “POSITION: relative”, that too often fail or draw complications in Fluid layouts or IE). Once duly completed with the links, title and alt, margins, here it is (Note: URLS may be unduly crippled by the forum software, no matter inside CODE or with “Automatically parse links in text” box cleared, hence may have to be restored later, e.g. by right-clicking them and picking the “link” or “Shorcut”, and/or by removing the spaces I inserted around “http” or “www” attempting to workaround):
<STYLE>
A IMG {BORDER: 0}
div.PaulOB {
height:90px;
overflow:hidden;
position:relative;
margin:0 0 1em;
}
div.PaulOB a.logo IMG {
margin: 3px 10px 0 0;
width: 79px;}
div.PaulOB a.banner {
background:#475223 url(http:// s0.2mdn.net/1016711/1103_LH_FR_JETTY_WEB_728x90.gif) no-repeat 0 0;
position:absolute;
width:999em;
height:90px;
bottom:0;
}
</STYLE>
<DIV class=PaulOB><A class=logo title=RFI href="http:// www. rfi.fr"><IMG alt=RFI
src="http:// www. rfi.fr/sites/rfi.fr/themes/rfi/logo.png"></A><A class=banner
title="Destinations de rêve - Lufthansa"
href="http:// www. lufthansa.com/online/portal/lh/th/specials/booking?nodeid=2011003"></A></DIV>
PS. My DIV and TABLE versions of Tue 15 Nov 2011 00:23:00 +0100, and Paul’s DIV version I posted here, are respectively 692, 809 and 660 Bytes.
Versailles, Fri 18 Nov 2011 13:42:00 +0100
Thanks for posting Michel
Mein Gott, there’s some UGLY out of date code in this thread… is this a bump from 1997 or something?
My first question would be… what is the CONTENT you are trying to present. So far we have a bunch of pointless DIV and even more pointless anchors without ANY CONTENT – and I’m sorry, logo’s usually tend to be best handled as image replacements. WHAT IS THE CONTENT is a question that really needs to be asked here.
But again, there’s a reason I advocate completely marking up semantically your content before you even THINK about making a layout or adding appearance/non-content images.
… and I really suspect we’re looking at non-content images here.
I mean, if this is the site’s logo/banner, we’re most likely talking the H1 candidate… so first order of business is to get some HTML that actually makes sense, instead of crapping out a DIV and a IMG (on what’s most likely NOT a content image).
<h1>
<a href="/">
Site Title / Logo Text Here
<span><!-- image replacement --></span>
</a>
</h1>
With this for CSS:
h1 {
position:relative; /* allow APO */
width:100%; /* trip haslayout, fix APO IE */
font:normal 44px/48px arial,helvetica,sans-serif;
background:url(images/h1Background.jpg) top center repeat-x;
}
h1 a {
display:block;
padding:16px; /* 48px line-height + 32px padding == 80px total height */
}
h1 span {
position:absolute;
top:0;
left:0;
width:100%;
height:80px;
background:url(images/h1Logo.jpg) top center no-repeat;
}
Though again, I’d have to see what’s actually being attempted to say for sure… but I’m 99.99% certain that a DIV and IMG tags are NOT the answer… unless we just took a trip with Mr. Peabody and his boy Sherman.
Fluid layout Full width Logo+Banner (3 solutions reloaded)
The CODE blocks in my Logo + Full-remaining-width Banner by Paul O’B of 18 Nov 2011 13:42 GMT were not working properly (some positioning altered), due to the forum software currently in development (and maybe some errors from me when fighting that software), and were using 2 images not my property. So I rewrote them all 3 with more care and more explanations, and I upload them this time in a small zipped attachment (total 12KB) instead of posting them in CODE blocks; this should be more reliable and much more easy to read and use (just extract the 5 little files in a same folder and open the 3 .HTM ones, best in 3 different tabs or windows).
Versailles, Wed 23 Nov 2011 01:05:00 +0100