SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member lookingglass's Avatar
    Join Date
    Oct 2006
    Location
    Lappeenranta, Finland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How can I get a browser wide banner and use a repeating graphic element for it?

    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
    phoenix change
    . . . . . . . . . . . . . . . . systemic interventions
    "contraria non contradictoria sed complementa sunt"
    Neils Bohr

  2. #2
    SitePoint Member lookingglass's Avatar
    Join Date
    Oct 2006
    Location
    Lappeenranta, Finland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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."

    http://skins.gmodules.com/ig/skin_fe...s/louie6pm.png

    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.
    phoenix change
    . . . . . . . . . . . . . . . . systemic interventions
    "contraria non contradictoria sed complementa sunt"
    Neils Bohr

  3. #3
    SitePoint Zealot Michel Merlin's Avatar
    Join Date
    Mar 2005
    Location
    Versailles (France)
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Full-width banner in Fluid Layout

    Full-width banner in Fluid Layout
    Quote Originally Posted by lookingglass View Post
    ...a banner that runs the full width of the page in a browser no matter what that width is set at by the user...
    Example (good e.g. for a typical 728◊90 image):
    Code:
    <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>
    • When you move the right edge of your window or tab so to progressively vary the viewport width, say from 1200px to 400px, this banner keeps you free from horiz scroll bar, of course at the eventual expense of clipping the righ part of the image, which usually has no consequence (most 728◊90 are ads carefully putting the most interesting part in their left part).
    • In ie6, you can't Right-Click and choose "Open in New Window", you can only drag the link to another already open window.
    • Otherwise, the code above works correctly in ie6 and Chrome 15.
    Quote Originally Posted by lookingglass View Post
    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?
    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

  4. #4
    SitePoint Member lookingglass's Avatar
    Join Date
    Oct 2006
    Location
    Lappeenranta, Finland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    phoenix change
    . . . . . . . . . . . . . . . . systemic interventions
    "contraria non contradictoria sed complementa sunt"
    Neils Bohr

  5. #5
    SitePoint Zealot Michel Merlin's Avatar
    Join Date
    Mar 2005
    Location
    Versailles (France)
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lookingglass View Post
    Merci Michel !!
    Thanks for your thanks!
    Quote Originally Posted by lookingglass View Post
    (I think a div got lost in the code you posted?)
    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 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

  6. #6
    SitePoint Member lookingglass's Avatar
    Join Date
    Oct 2006
    Location
    Lappeenranta, Finland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Michel Merlin View Post
    My code has 2 DIVs (one inside the other).
    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.
    phoenix change
    . . . . . . . . . . . . . . . . systemic interventions
    "contraria non contradictoria sed complementa sunt"
    Neils Bohr

  7. #7
    SitePoint Zealot Michel Merlin's Avatar
    Join Date
    Mar 2005
    Location
    Versailles (France)
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Logo + Full-remaining-width Banner

    Logo + Full-remaining-width Banner
    Quote Originally Posted by Michel Merlin View Post
    (Michel Merlin Sat 12 Nov 2011 14:55 GMT #3)
    Full-width banner in Fluid Layout
    Quote Originally Posted by Michel Merlin View Post
    (Michel Merlin Sat 12 Nov 2011 15:51 GMT, #5)
    I have another variant for a long banner (typical 728◊90 again) at the right of a company logo, I will upload it later.
    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):
    Code:
    <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>
    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:
    • "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".
    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:
    Code:
    <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

  8. #8
    SitePoint Zealot Michel Merlin's Avatar
    Join Date
    Mar 2005
    Location
    Versailles (France)
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Logo + Full-remaining-width Banner by Paul O'B

    Logo + Full-remaining-width Banner by Paul O'B

    Quote Originally Posted by Michel Merlin View Post
    DIV version (... I found no way with only standard MARGINs)
    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):

    Code:
    <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

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks for posting Michel

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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).

    Code:
    <h1>
    	<a href="/">
    		Site Title / Logo Text Here
    		<span><!-- image replacement --></span>
    	</a>
    </h1>
    With this for CSS:

    Code:
    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.

  11. #11
    SitePoint Zealot Michel Merlin's Avatar
    Join Date
    Mar 2005
    Location
    Versailles (France)
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fluid-layout Full-width Logo+Banner (3 solutions reloaded)

    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
    Attached Files Attached Files


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
  •