0

When the browser gets stretched from its width, the header doesn't move, but the content of the page does. It's driving me nuts. If you stretch it far enough, the banner eventually ends. IE: it doesnt repeat further the banner.

Any advice? I'm not sure which part of the source code would control this. I'll put the CSS up and if needed, I can throw up part of my HTML.

Image Examples

Web

  • 1
    It would help if you highlighted the header parts of your CSS... Are you making sure to set `width: 100%` for the banner? What about `margin: 0px auto` to center the header content of the page? – TMan Sep 20 '12 at 03:57
  • ^ The #mast is the main bar on top and #primary-nav is the words/links –  Sep 20 '12 at 04:04
  • Can you make a jsFiddle and just show us what you're working with so we can actually fix this? Too much speculation on our end... http://jsfiddle.net/ – TMan Sep 24 '12 at 17:41
  • ^ I added the website to look at live. I've tried changing a bunch of CSS and fiddling. I just cant figure it out. –  Oct 06 '12 at 02:28
  • OK! Progress! I got the stuff centered, but now the banner wont expand. The banner is located in header #mast.short h1 a, however the space constraints seem to be messing with it in #mast h1 a. –  Oct 11 '12 at 02:21
  • Why not just keep the banner where it was before? :-) – TMan Oct 11 '12 at 05:26
  • Because the banner was not stretching properly. Still isn't. –  Oct 17 '12 at 21:36
  • 1
    Set the background of the `sizefix` div to the background for the banner and then change the height of the element to get the effect you're looking for. I'm sure you can change some settings as to if the overflow is hidden or adjust the margins and positioning of other relevant elements, you'll get what you're looking for. I just got the banner to repeat just by changing what I told you in the Chrome Inspector so despite the fact that the structure of your current page isn't very conducive to the effect you're going for, it can be done. – TMan Oct 17 '12 at 22:08
  • ^ I'd like to know where you made those changes because I cannot get them to work. Right now the banner is a tiny square behind my logo and name. If I set the width, it only stretches to the right but completely leaves the left margin empty. I went back to the things you said earlier and I already have margin: 0px auto set. I also have width: 100%. As for "sizefix" div, please elaborate as I don't recall making a div like that. –  Oct 19 '12 at 03:11
  • I got it ~partially~ there. Its just that left margin that is weird. And weirder still is that the right side there is a "sliver" of banner that doesnt render unless you pull the page –  Oct 19 '12 at 03:37
  • Did you write this code yourself or pull it from somewhere? When I view the source of your page, there is a `sizefix` div that wraps the `
    ` tag.     – TMan Oct 19 '12 at 06:26
  • The framework itself I pulled from some repository. I forget the name exactly at the moment, however if crucial, I can find it. I fixed the right side margin by increasing the width 100% to 200%. A friend of mine pointed it out. However, now I just have the left side margin that is still a big empty block if I stretch the browser window out to the right. Do you know of any way I could basically tell my mast banner to expand to the right? or do I need to just offset it to the right by a lot? –  Oct 20 '12 at 20:50
  • Ok everything seems good now. The main issue remaining is that the image "Anthony Barranco" is now suddenly overshadowing my text links. In other words, you can't click them. The image Anthony Barranco has a .png height in order to get it to float above the text. That is making the links unclickable now, when they were before. Odd. –  Oct 20 '12 at 23:32
  • 1
    Check this out to fix the links: http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements – TMan Oct 21 '12 at 01:17

3 Answers3

0

Without seeing your markup (which would be helpful to share), it looks like line 9 is your problem:

header#mast{margin:0 0 0 0px;width:1200px;position:fixed;top:0px;left:0%;z-index:100;}

Update it to:

header#mast{margin:0 0 0 -600px;width:1200px;position:fixed;top:0px;left:50%;z-index:100;}

(Note the left:50% and -600px left margin (half the width of the element).

Nathan Anderson
  • 6,768
  • 26
  • 29
  • Ok, now it moves with the text. However, there is a huge gap to the banner to the right. If I increase the -600px to like -900px, that closes the gap. HOWEVER, now all my buttons and title is off centered. Does that mean my other CSS needs to be readjusted? –  Sep 23 '12 at 17:22
  • Can you please share a working version of the page, as is, from some URL? It would make these issues far easier to troubleshoot. – Nathan Anderson Sep 25 '12 at 00:56
  • http://lssclan.urldownload.com/anth/ Thank you for the assistance ahead of time, really appreciated. Its killing me. :p –  Oct 01 '12 at 21:20
0

If you wrap your #mast and #primary-nav' elements in adivthat has a style ofmargin: 0px auto` this should cause everything to continue to center with the rest of the page as your expand the window.

As far as the banner ending is concerned, add the style width: 100% to the element that is responsible for it for the resulting infinite expansion as you widen the window.

EDIT

Since you've added the website, put the contents of the header in the following tag:

<div class="container container-twelve">...</div>

This will center your image, text, and links.

TMan
  • 1,775
  • 1
  • 14
  • 26
  • if you mean "header#mast.short h1 a{width:100%;height:170px;background:url(images/header.png);" That still treats the 100 as px. –  Sep 23 '12 at 17:27
  • 1
    Are you sure you're using the right tag then to manipulate the width? Any time you have `width: 100%`, that should never be taken as px unless 100px is the max width of the parent container. – TMan Sep 23 '12 at 17:39
  • yeah. And I tried it in other tags too just to see if it would change, but nothing did. –  Sep 24 '12 at 03:15
0

It was a large combination of difference changes that were answers. Basically it came down to a number of width changes.

If I set width 100% in one place, it had to go in multiple ones because the entire mast div was nested divs. Also, to get the banner to expand further to right, it had to be 200% for width.

The proper code is reflected in the website, at least for my solution. Thank you everyone, and specifically TMan.