15 replies [Last post]
Nick_NP
Nick_NP's picture
Offline
newbie
Last seen: 16 years 21 weeks ago
Joined: 2005-07-03
Posts: 7
Points: 0

Here's a picture of what I'm trying to do...

The idea is to overlay an image on the background in such a way that this image stays fixed relative to the main column, which is centered.

This can be done in quite a few ways but I'm looking to do it using background images, cutting my overlay into 4 areas then positioning them top-left/bottom-left/etc... This is because the width of the main column is to be around 750px, ie: the most you can get away with for users using 800x600, and I want to fill some of the empty space for users using higher resolutions without giving their browser an excuse to display the dreaded horizontal scrollbar.

Can this be done in pure CSS???

Tables are tools of evil, please help me before I revert to them!!!!!![/url]

drhowarddrfine
Offline
Leader
Last seen: 11 years 51 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Layout challenge : Does CSS hold all the answers?

I'm walking out the door so I can't show you how but I have to comment about questions like these. ANYTHING that can be done in tables can be done using CSS. It is the nature of the beast! It's what it is supposed to do. CSS is what creates the look of a page. Tables are not designed to create the looks of a page.

Now, onto my holiday trip to the country.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

Nick_NP
Nick_NP's picture
Offline
newbie
Last seen: 16 years 21 weeks ago
Joined: 2005-07-03
Posts: 7
Points: 0

Layout challenge : Does CSS hold all the answers?

Anything to get you motivated!! Laughing out loud

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Layout challenge : Does CSS hold all the answers?

If I understand you correctly (and I'm not sure that I do), you want the background image (overlay as you call it) to always be in line with the content left margin (40% out of content and 60% in)? So that if the browser window shrunk to fit just the content the background image would actually be partly off screen - is this correct? If so, the only way I can think to do this is to create an image that is wider than the content. It would need to be 750px wide plus double the amount the image sticks out the left side. You can then place this image in the body background at 50% and it would always be in line with the centered content. There's no reason to cut the image into 4 slices...

Anonymous
Anonymous's picture
Guru

Layout challenge : Does CSS hold all the answers?

You could easily adapt this technique: http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html

I'm not so sure it works in IE/Win though.

Nick_NP
Nick_NP's picture
Offline
newbie
Last seen: 16 years 21 weeks ago
Joined: 2005-07-03
Posts: 7
Points: 0

Layout challenge : Does CSS hold all the answers?

Wolf,

Yep, that sounds good!

The header, midsection & footer all have different textured backgrounds, but I can see a workaround to that.

Also makes the image a bit larger than I would have liked (can't use transparency with jpg's...), for the 10k difference I may just load that pic with onLoad().

Thanks for the suggestion!

Triumph,

The example there isn't what I'm after, imagine the same thing but with the whole thing smaller, at a fixed-width, centered, and the hidden left hand side of the shell visible for as far as your browser goes.

Anonymous
Anonymous's picture
Guru

Layout challenge : Does CSS hold all the answers?

Nick_NP wrote:
The example there isn't what I'm after, imagine the same thing but with the whole thing smaller, at a fixed-width, centered, and the hidden left hand side of the shell visible for as far as your browser goes.
So you want the same thing as the example but with different pictures? Laughing out loud

Well then, there's your answer.

Nick_NP
Nick_NP's picture
Offline
newbie
Last seen: 16 years 21 weeks ago
Joined: 2005-07-03
Posts: 7
Points: 0

Layout challenge : Does CSS hold all the answers?

hummm.... nope!

I've updated the picture at the top of the post to give you a better idea.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Layout challenge : Does CSS hold all the answers?

let's see your code. Your updated pic is what I pictured and my suggestion should work. Wait - I just noticed you stated that the header and midsection have different textured backgrounds. Those will cover the body background. You may have to slice the image after all. Well, you could leave it as is for the body background (so the portion left of content will show as you want), and put the other portion in the header and midsection backgrounds (or an element therein).

Anonymous
Anonymous's picture
Guru

Layout challenge : Does CSS hold all the answers?

Nick_NP wrote:
I've updated the picture at the top of the post to give you a better idea.
The update really doesn't change my suggestion. It is what I would use in this situation.

Nick_NP
Nick_NP's picture
Offline
newbie
Last seen: 16 years 21 weeks ago
Joined: 2005-07-03
Posts: 7
Points: 0

Layout challenge : Does CSS hold all the answers?

Triumph,

...? Ok, but that's not what I want to do...

Wolf,

Got it sorted : Haven't sliced the picture, just used it in the header, clipped by the fixed height, AND in the midsection, offset from the top by the height of the header.

Using an interlaced gif format actually cut down the size of the pic by a bit ( "only" 15k now versus 9k for the 4 jpegs ), still a tad slow to my liking so I'll soon be making an effort to trim that down.

Here's how the template is looking so far : http://nick.byethost22.com/template.html
(comments welcome, of course!)

Thanks for the help!

Anonymous
Anonymous's picture
Guru

Layout challenge : Does CSS hold all the answers?

Nick_NP wrote:
Triumph,

...? Ok, but that's not what I want to do...I was just going by your pictures. Sorry. I though I was helping.

http://www.imaginekitty.com/lesigh/Triumph76599.html

Nick_NP
Nick_NP's picture
Offline
newbie
Last seen: 16 years 21 weeks ago
Joined: 2005-07-03
Posts: 7
Points: 0

Layout challenge : Does CSS hold all the answers?

Hey, that's it! -> http://www.imaginekitty.com/lesigh/Triumph76599.html

Seems to be a bit of confusion somewhere...

The page at the 1st url you posted had quite a different layout, is that the page you wanted to link to or should I have been reading something between the lines?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Layout challenge : Does CSS hold all the answers?

Are you sure? If you continue to reduce the size of that page the watermark image continues to move to the left, eventually disappearing altogether.

You could try splitting the image into three. The left portion of the globe, the right portion of the globe, and a slice to repeat outside of those two portions (that isn't quite true to your original images as the left and right hand tri-colours are slightly different, but its not a big alteration).

Sample page
Summary of code:

css - 
html {
  height: 100%;
}

body {
  background: #ffffde url(/images/background-right.gif) repeat-x;
  height:100%;
  margin: 0;
  padding: 0;
}

#page {
  width: 588px;   /* the width of the background-middle.gif */
  margin: 0 auto;
  background:  #ffff94 url(/images/background-middle.gif) no-repeat;
  height: 100%;
  position:relative;
}

#innerwrap {
  margin: 0;
  padding: 1px;    /* prevent unwanted margin collapsing */
  background:  #ffff94 url(/images/background-middle.gif) no-repeat;
}

#leftmargin {
  position:absolute;
  width: 155px;  /* the width of the background-left.gif */
  height: 100%;
  right:100%;
  top:0;
  background:  url(/images/background-left.gif) no-repeat top right;
}

html -
<div id='page'>
  <div id='leftmargin'></div>
  <div id='innerwrap'>
  <!-- main content goes here -->
  </div>
</div>

[edit, added fixes to support IE and Opera]
Fixes explanation:
ideally, #page should have min-height:100% to ensure the central background keeps repeating downwards along with the contents of long pages. IE doesn't support min-height. Opera doesn't correctly support height:100% on position:absolute elements when the display context height is controlled by min-height.

fix, give #page height:100%. create an extra inner wrapper div apply the same background as #page, leave height set at auto. If the page has long content the background will now continue correctly with the content. If there is not much content the background will show through from the height:100% #page element.

Nick_NP
Nick_NP's picture
Offline
newbie
Last seen: 16 years 21 weeks ago
Joined: 2005-07-03
Posts: 7
Points: 0

Layout challenge : Does CSS hold all the answers?

Yes, Triumph's demo does illustrate what I'm trying to do.

Well, actually I've just checked again, and Triumph's method seems to disable the horizontal scrollbar in IE... Seeing this I re-checked FF : no problems there. Hadn't checked Opera 1st time round so I did : Nothing displays.....?

Sorry Triumph!

I've opted to go with what Wolf suggested, it seems to do the trick!

--> http://nick.byethost22.com/template.html

...or the same but in pink...

--> http://nickpearson.atspace.com/

(Just dud templates)

1 html file, 1 psd file and 2 css files Laughing out loud
(or at least will be!)

I'll do another completely different layout template at a later stage, just to see if I can make a pure-css website stand up to everything it's supposed to (This is my first).

I appreciate the merits of css, but often the real impact seems too small compared with the time and effort spent on juggling between backward compatibility (forward compatibility of course is granted) and browser incoherancies...

...I feel like ranting but you all know the story!

Thanks for the help!

Anonymous
Anonymous's picture
Guru

Layout challenge : Does CSS hold all the answers?

Nick_NP wrote:
The page at the 1st url you posted had quite a different layout, is that the page you wanted to link to or should I have been reading something between the lines?
I wasn't talking about the layout I was talking about the technique.
Quote:
You could easily adapt this technique: http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html

Nick_NP wrote:
Yes, Triumph's demo does illustrate what I'm trying to do. Well, actually I've just checked again, and Triumph's method seems to disable the horizontal scrollbar in IE... Seeing this I re-checked FF : no problems there. Hadn't checked Opera 1st time round so I did : Nothing displays.....?
Sweet Louise! I'm not going to do all the work for you. Laughing out loud I just flipped a quickie up with the layout generator here, I did not debug. I was just adding an option (as I usually do) and not claiming to have the be all end all. At least you see what I was talking about now and that gives me warm fuzzy feelings all over.