24 replies [Last post]
Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 7 years 42 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

been a while.

I've encountered something I can't quite get a hold of. Targets are firefox, IE7 and IE6.

The design is simple. I want a horizontally centered content-div, width 980px. Left of that div should be orange, right of it pink.

Sidenote: a background-image isn't a real solution since you can't predict browser-width, and the image should thus be infinite width.

My idea. 3 divs, left center and right. left and right having a 50% width. div center a width of 980px and margin-left and right of -50%. that doesn't work. In a few ways. First of all, 2x 50% doesn't fit in IE6 and 7? Adding a margin-left of -1px on the right-div fixes that .. weird, as if the viewport is 100% - 1px. Other than this, the -50% margin doesn't really seem like half, though I can't really explain why. I tried something else.

Second idea. Div left and right, 50%, floated left (and -1px on margin-left of div.right), and an absolute positioned div on top of that, centered on the left and right div. well that works, partly. I can't seem to get it right in IE6 at all, it seems as though the div is placed after the div.right, as if it is floated alongside it, the body doesn't create a scroll, so I can't check. no overflows hidden are set ..

I've been toying with it for over an hour now, and I'm not really getting anything of it. If someone could lend me a hand with this apparently so simple but annoying thing, pretty please, with sugar on top Smile

As a rule, I never touch anything more sophisticated and delicate than myself

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 14 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Can we get an image? I'm

Can we get an image? I'm having a hard time visualising this Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 7 years 42 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

of course you can

of course you can Smile

the grey part should be the site. left of the site one colour, on the right of it another

As a rule, I never touch anything more sophisticated and delicate than myself

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

It should be safe to use a

It should be safe to use a single colour background image. Make it very wide, two or three thousand px should be sufficient. If the image is only 1px high and you use a PNG or a JPG the size of the final image will be quite small. I'd expect under 1k.

body { background: url(images/background.png) 50% 0 repeat-y pink; }

#content {
width: 980px;
margin: 0 auto;
background: gray;
}

Whatever you do, you don't need an element for each colour. The outer container (BODY?) can take one background colour. The others will overlay it.

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 7 years 42 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

I consider that to be a kind

I consider that to be a kind of a dirty (but maybe practical) work around, not a solution.

It can be done with tables, so I'd say it should be doable with divs.

As a rule, I never touch anything more sophisticated and delicate than myself

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

Sheesh, can we have a nicer

Sheesh, can we have a nicer attitude. The appropriate response to that post is, "well if you know how it is doable, go do it".

It is a solution. And its one that doesn't introduce fluff elements into your HTML. That is it keeps the background as a background. Some would consider having fluff DIVs polluting your content a work around not a solution.

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 51 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Apologies if I've got the wrong idea

My initial reaction was also to have a left aligned vertically repeating background image of the left colour and a standard background colour beneath that for the right hand side.

The way I see it you know your middle columns width is 980px right? Make the background solid colour image the same width. That way if its centred and there is 1px space either side they will see the appropriate colours either side, but they can afford to stretch their browser window 980px * 3 (2940px) wide before it breaks right?

J

Have YOU said Hello yet?
The CSSCreator Hello Thread

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 7 years 42 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

oh I didn't mean to insult

oh I didn't mean to insult anyone or something Smile english isn't my native language so maybe I didn't bring it very well. sorry.

I still don't see it as a solution. Years ago you would have said it with a 1500px image, but nowadays we already have 2400px resolutions, so it's a time-based solution. Smile

As a rule, I never touch anything more sophisticated and delicate than myself

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

I said 2000 - 3000. Given

I said 2000 - 3000. Given that is 50%, you have quite a few years before monitors hit 4000 or 6000px - and when they do, you still need your visitors to have their browsers set to full screen width. My screen is 1920px wide, I don't use anything at full width. But whatever, make an image and see how much space it takes up. Make it 10000px wide and set the palette to 2 colours if you are really concerned.

Fwiw, its a pretty simple thing to achieve in DIVs that support CSS2.1 properly. However IE6 will cause problems. The problem with your initial attempt are:
- using floats or position - no way to get heights to match.
- using margins of -50%. use -490px.

This is a CSS2.1 solution without a background image. It won't work in IE6 for browser windows widths below 980px. The left hand edge of the content is not visible, which is a pretty serious flaw. I don't know if there is any way to work around that, but then why bother when there is a ready made, simpler solution that does work x-browser!!!

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 7 years 42 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

Thanks much appreciated,

Thanks Smile
much appreciated, I'll see what I can do

As a rule, I never touch anything more sophisticated and delicate than myself

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 7 years 42 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

.. is it me or doesn't this

..

is it me or doesn't this work?

www.iswmetaalconvenant.nl/index3.php

As a rule, I never touch anything more sophisticated and delicate than myself

syrupcore
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Timezone: GMT-8
Joined: 2004-03-10
Posts: 108
Points: 0

what do you mean by work? I

what do you mean by work? I see a grey box with pink all around it. ff2 on xp.

I don't really see how a background image isn't a solution for a GRAPHICAL design problem. css is neat and all but it's not at all in a place to meet all visual demands of a web page without using images. that's why it supports them. Wink

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 7 years 42 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

check the link it's all

check the link Wink
it's all pink, there's no orange.

however, it is as neat as defining a height for a div containing text. you can be pretty sure the text won't overflow, but it _can_ overflow, and when it does your design is broken. same goes for this solution.

I do consider the image a better solution than the negative margins, because IE6 might hide some content which is, as chris stated, a bigger flaw.

but anyway Smile

I tried the code chris gave me, but it doesn't seem to work.. for one reason or another the background-image won't move 50% from the left..

As a rule, I never touch anything more sophisticated and delicate than myself

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

Ooops. Err sorry -50%.

Ooops. Err sorry Smile

-50%. image for right hand colour.

syrupcore
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Timezone: GMT-8
Joined: 2004-03-10
Posts: 108
Points: 0

I see that there is only

I see that there is only pink. that's why I asked. Wink looks like there's a big pink bg image applied so one would expect to see only pink. edit: now I see the other orange...

I'm not sure that I'd compare defining container heights to width of backgrounds on the extremities. I mean, what does broken mean? some colors on the edges of your 3000px monitor not lining up? c'mon. a 2 color, 8192px wide gif is 215bytes. go for it.

Chris' code is fine. with a 2 color gif, divided up the center, keep the bg transparent and set the left at 50%. should work fine.

Will

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

My code isn't for a two

My code isn't for a two colour image, but for a single colour image. The background-colour provides the other colour. Background position moves the image so that it only covers half the element.

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 7 years 42 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

-50% works better, but the

-50% works better, but the end of the image doesn't seem to center:
http://iswmetaalconvenant.nl/index3.php

As a rule, I never touch anything more sophisticated and delicate than myself

syrupcore
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Timezone: GMT-8
Joined: 2004-03-10
Posts: 108
Points: 0

I caught that difference

I caught that difference after my post. I mean, "chris' code almost works fine..." Smile I noticed the non-centering while messing with it in firebug. couldn't really suss out why. the centering percentage changed based on the browser width. I wonder if applying it to the HTML element would work.

pardon me, I missed the 'challenge' part of this. now I'll have to play.

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

My

My misinterpretation/misrecollection of the spec. x% refers to x% of image dimension matched to x% of element dimension. I was thinking it matched x% of image dimension to left edge of element. Syrupcore was right, use a two colour image and 50% (or center) for the background-position.

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 7 years 42 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

Chris..S wrote:My

Chris..S wrote:
My misinterpretation/misrecollection of the spec. x% refers to x% of image dimension matched to x% of element dimension. I was thinking it matched x% of image dimension to left edge of element. Syrupcore was right, use a two colour image and 50% (or center) for the background-position.

ok Smile yeah I already did that in the original one, just was curious about how it should have been.

thanks

As a rule, I never touch anything more sophisticated and delicate than myself

syrupcore
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Timezone: GMT-8
Joined: 2004-03-10
Posts: 108
Points: 0

I actually had trouble

I actually had trouble getting a 2 color image to work last night. if the image was wider than the browser viewport, it wouldn't center. I'm not sure what I was doing wrong. If I made a new image that was say, 600px wide, centering worked fine. I feel like I've done it a bunch before but couldn't get it to work. I tried using a strict doc type and all manner of things but still it came up off center. bizzaro.

I meant to play around with a wide border-left/right in a wrapped container where the wrapper container was 100% width + overflow: hidden. sprinkle in some negative margins and perhaps it could be done without images... I dunno.

will

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 14 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

syrupcore wrote:I actually

syrupcore wrote:
I actually had trouble getting a 2 color image to work last night. if the image was wider than the browser viewport, it wouldn't center. …

Can you show us what you tried? There shouldn't be an issue in any browser that I'm aware of.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

syrupcore wrote:I meant to

syrupcore wrote:
I meant to play around with a wide border-left/right in a wrapped container where the wrapper container was 100% width + overflow: hidden. sprinkle in some negative margins and perhaps it could be done without images... I dunno.

Good luck with that, but I reckon you're back where I was with the padding method. You have to wrap the content element to match height. If you wrap the element, you can't center it, at least not without messing with element widths. If you mess with element widths you have to use min-width - and therefore IE6 compatibility is not possible.

syrupcore
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Timezone: GMT-8
Joined: 2004-03-10
Posts: 108
Points: 0

hrmmmm. Not sure what I'm

hrmmmm. Not sure what I'm doing wrong.

http://luktown.org/random/50percent/

syrupcore
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Timezone: GMT-8
Joined: 2004-03-10
Posts: 108
Points: 0

syrupcore wrote:hrmmmm. Not

syrupcore wrote:
hrmmmm. Not sure what I'm doing wrong.

http://luktown.org/random/50percent/

doh. the images weren't actually centered. working now... I thought I was losing my mind!