how to center a wider-than-browser banner graphic?

  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jul 07, 2005
  • Posts: 266
  • Loc: Canada
  • Status: Offline

Post June 19th, 2009, 6:34 am

Can I center a banner graphic, that's wider than the browser, without expanding the width of my website?

The banner is 1280 pixels wide. I want it centered even if the visitor's resolution is 1024 or 800 pixels wide, plus I want the website to not introduce a left-right scroll bar.

Is this possible?
Matthew Doucette, Xona Games
Award winning indie game studio.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post June 19th, 2009, 6:34 am

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post June 19th, 2009, 6:35 am

You have an example up of what you're looking at? I don't understand what you mean by centering it up if it's wider than the targer resolution width?
I'd love to change the world, but they won't give me the source code.
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post June 19th, 2009, 6:38 am

Set the image as the background of a <div>, give the <div> a centered CSS background-position and a width of whatever you like.
Strong with this one, the sudo is.
  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jul 07, 2005
  • Posts: 266
  • Loc: Canada
  • Status: Offline

Post June 19th, 2009, 6:40 am

I don't have an example. But I want a banner graphic that's really wide (1280p) that stays centered as you scale the browser larger and smaller. What happens now is it stays centered when the browser is wider than the graphic, but it left-aligns when the browser is smaller than the graphic (as well as introduces the left-right scroll bar, which means the website is forced to be 1280 pixels wide).

I hope that explains it.

I don't have an example running, I just know this is how it works from squishing my own website: http://dualityzf.com/ Imagine if that center logo graphic was supposed to stay centered when I squish the website's width very small. That's a perfect example of what I want.
Matthew Doucette, Xona Games
Award winning indie game studio.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post June 19th, 2009, 6:54 am

joebert's got the right suggestion for you then. Maybe something like this...

Code: [ Select ]
 
<style>
body {
     margin: 0px;
}
 
#myDiv {
     background:url(/path/to/img.jpg) no-repeat center;
     width: 100%;
     height: [specify this to same as image height]px;
     position: absolute;
     top: 0px;
     left: 0px;
}
</style>

[and then at top of body]
<div id="myDiv">&nbsp;</div>
  1.  
  2. <style>
  3. body {
  4.      margin: 0px;
  5. }
  6.  
  7. #myDiv {
  8.      background:url(/path/to/img.jpg) no-repeat center;
  9.      width: 100%;
  10.      height: [specify this to same as image height]px;
  11.      position: absolute;
  12.      top: 0px;
  13.      left: 0px;
  14. }
  15. </style>
  16. [and then at top of body]
  17. <div id="myDiv">&nbsp;</div>
I'd love to change the world, but they won't give me the source code.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post June 19th, 2009, 9:39 am

provided the div is in the correct place in the page flow you don't really need the position, top, or left values.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jul 07, 2005
  • Posts: 266
  • Loc: Canada
  • Status: Offline

Post June 19th, 2009, 1:40 pm

This is working. Thanks. I'll let you know the results soon!
Matthew Doucette, Xona Games
Award winning indie game studio.
  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jul 07, 2005
  • Posts: 266
  • Loc: Canada
  • Status: Offline

Post June 21st, 2009, 7:10 pm

This works great. I'll show you the result soon.

How would I make the image (the div) clickable? Wrapping it with an "a href" makes it clickable, but the mouse cursor does not change when it hovers over. Is there a better way to do this?
Matthew Doucette, Xona Games
Award winning indie game studio.
  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jul 07, 2005
  • Posts: 266
  • Loc: Canada
  • Status: Offline

Post June 21st, 2009, 7:30 pm

Ok, here's the result:
http://xona.com/

The "XONA GAMES" banner at the top, with the eight fighters, should fill a 1280p wide browser, and stay centered with both a larger and smaller sized browse... and it works! :)

Next, I just want to make it clickable where you can see the mouse cursor change on the mouseover.
Matthew Doucette, Xona Games
Award winning indie game studio.
  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jul 07, 2005
  • Posts: 266
  • Loc: Canada
  • Status: Offline

Post June 21st, 2009, 7:50 pm

Turns out wrapping that div with an "a href" works in IE 8.0 but not in Firefox, which simply links that non-breaking space, not the whole div. If you know of an elegant solution to making that div clickable, let me know! Thanks...
Matthew Doucette, Xona Games
Award winning indie game studio.
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Joined: Mar 28, 2009
  • Posts: 305
  • Loc: AFK
  • Status: Offline

Post June 21st, 2009, 9:33 pm

put this in your css file

#bannerTop span {
position: absolute;
width: 100%;
height: 242px;
}

Then in your html in you bannerTop div... add

<a href="addalinkhere.com"><span></span></a>

There might be an easier way, but it works for me
Custom Web Design
  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jul 07, 2005
  • Posts: 266
  • Loc: Canada
  • Status: Offline

Post June 22nd, 2009, 6:59 am

Thanks for the suggestion, I'll try it...

What's the difference between div and span? How should I use one and another? I know they can be used the same way but they are meant for different things. div is for small things and span for big things? I just read up on it and it said span also includes paragraph formatting of its own, where span does not. So it seems to me that div would be used for large block of html code and span for small peice of html, like even formatting a single word in a sentence. Am I on the right track?
Matthew Doucette, Xona Games
Award winning indie game studio.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post June 22nd, 2009, 7:43 am

well the difference in this case is that your allowed to wrap a span tag with an anchor tag to make it a link. Most browsers don't like it if you try to enclose container elements like a div inside an anchor (like you discovered).

However I should point out that you don't really need the span tags to make the whole thing click able.

You can essentially turn your entire header div into an anchor tag with a little bit of css trickery.
The HTML
Code: [ Select ]
<a class="header" href="someURL"></a>
and the CSS
Code: [ Select ]
a.header{
display:block;
background:url(/path/to/img.jpg) no-repeat center;
width: 100%;
height: [specify this to same as image height]px;
}
  1. a.header{
  2. display:block;
  3. background:url(/path/to/img.jpg) no-repeat center;
  4. width: 100%;
  5. height: [specify this to same as image height]px;
  6. }


the "display:block" basically turns your anchor tag into an object that will change the flow order just like the div you have currently.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Joined: Mar 28, 2009
  • Posts: 305
  • Loc: AFK
  • Status: Offline

Post June 22nd, 2009, 7:47 am

Thanks Graphixboy. Learn something new every day. Always more than one way to skin a cat.
Custom Web Design
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post June 22nd, 2009, 8:08 am

The method in the example I attached has been working well for me in browsers, screen readers, and search engines for quite some time now.

I know I suggested a <div> earlier, but that was under the assumption that this was a generic function-less banner and not a header. :)
Attachments:
banner.html.zip

(540 Bytes) Downloaded 294 times

Example

Strong with this one, the sudo is.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post June 22nd, 2009, 8:08 am

Post Information

  • Total Posts in this topic: 23 posts
  • Users browsing this forum: No registered users and 80 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.