Page Resizing Issues

[seaweed]

How do I lock down my page so that when a user re-sizes their browser window the content doesn't shift left? I don't want the content to slide over the background. See screenshots. My logo is actually on the background and when I re-size the window, my search form slides over it. No bueno.

 

body {
  height: auto;
  width: auto;
  margin: 0;
  padding: 0 0 20px 0;
  overflow: auto;
  background-color: #29281c;
  background-image: url('images/treebgbrn.gif');
  background-repeat: no-repeat;
  background-position: 0 30% 0 20%;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 10px;
  color: #000000;
}

.wrap {
  height: auto;
  width: 800px;
  display: block;
  background-color: #d9d8d0;
  }

 

 

[Floydian]

Why not make the logo an image by itself?

 

You say you don't want the content to shift left, but if it doesn't, the content would go off of the screen...

 

Therefore, to compensate, you would need to change the background-position of the background image using a negative number that gets lower and lower as the viewport gets smaller.

 

Javascript can accomplish this.

 

But simply putting the logo into an image of it's own solves the problem.

[seaweed]

It's not just the logo I am concerned with, it's the search form moving over and the entire site sliding left to keep up with the window. The 800px part of the page, the content, slides left and covers up the tree in the background. I can put the tree in its own div but I was hoping there was a simple css fix to lock the page, I see them all the time that do not resize, the right side of the page just gets cut off, which is fine. I think this is one of those issues that's simple but hard to explain LOL.

 

 

[Floydian]

I'm not sure exactly how you're centering the content, but it looks like you're making the body element auto adjust to the size of the content in it (the 800px wrap)

 

Normally a css rule like

 

width: 800px;

margin: 0 auto;

 

is used to center a div, but I don't see that on your wrap, so I'm assuming the body is what is centered.

 

To fix that, remove that width: auto from the body and add to the  wrap this

 

margin-left: 130px;

 

That 130px might need to be adjusted to push your content left/right to suit.

 

Hope that helps...

[haku]

min-width: ____px;

 

Using this sets a minimum width so that even if the user's browser shrinks below that size, it will not shrink past that size.

[dbrimlow]

This stuff is actually basic wireframe layout 101.

 

The search box is not moving, good. But you designated a relative value -  "background-position: 0 30% 0 20%;" - for the background img. That is why the logo will not stay to the left ... you are specifically telling it not to.

 

You don't need min_width because you are NOT using a flexible (liquid or elastic) layout in the first place ... YOU ARE DESIGNATING THE WRAP TO BE 800PX!

 

That's called a "fixed" size for a reason.

 

It is NOT going to re-size itself based on the browser size or monitor resolution - it will always stay 800px wide.

 

Where your logic is going wrong is that you are expecting a "background image" to act upon "markup content" ...  not going to happen ... that's why it is a "background" image; it is NOT part of the flow of the html.

 

You need to revise how you created the page's wireframe layout. And this is where the basics come into play.

 

A standard, basic, run-of-the-mill, simple css layout has a "header", "column(s)", "footer". That's it. Every css layout - of any complexity - is all variations upon that initial concept.

 

What you are missing is your "header".

 

In your case it consists of three containers - #header, #logo and #search.

 

I recommend using IDs for wireframe elements because they are always part of your page layout and therefore only used once per page.

 

Widths for the header is 100%, the others are determined by the logo width itself - avoid using paddings or margins and make the widths relative to the logo graphic (if it is 275px wide, make the logo box something like 360px and the search 420px). The idea is to have the logo box create the look of padding by being wider than the logo. Then adjust the width of the search box to fit side by side with the logo box - leave a 20px difference to account for cross-browser box sizing adjustments (play with these yourself and check it in FF and IE6 & 7).

 

body {
  margin: 0;
  width:100%;
  padding: 0;
  background: #29281c url('images/backgroundimage.gif') 0 no-repeat;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 10px;
  color: #000000;
}
#wrap {
  width: 800px;
  background: #d9d8d0 url('images/logo.gif') 0 no-repeat;
  background-color: #d9d8d0;
  }
#header {display:block;width:100%; margin:0; padding:0}
#logo {float:left; width:380px;background: #d9d8d0 url('images/logo.gif') 0 no-repeat;}
#search {float:right; background:#d9d8d0 ;width:410px}

<body>
<div id="wrap">
    <div id="header>
       <div id="logo></div>
       <div id="search"></div>
    <div>
    /* all other divs and content */
</div>
</body>

[seaweed]

Thanks for the input. I actually do have a header div, footer div and a few columns, I used no tables The header has a transparent background and is rendered before the wrap, so that the background shows through. I see what you're saying though, and I think the solution is to take the tree from the background and put it in its own column, or create a column of that width with a transparent background.

 

On min-width, if you applied that to the entire document, to vody, wouldn't it do the exact same thing? The body is outside of wrap.

 

Sorry for needing lessons, i am a php programmer not a designer  :-\