Jump to content

Page Resizing Issues


seaweed

Recommended Posts

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;
  }

 

screen1.jpg

 

screen2.jpg

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.