CSS issue

[ph3n0m]

Been battling with some code over the past while - and I literally am just trying to prove to a client that it wont work the way they envision

Site has logo/navigation on top, side nav & content underneath and footer last - as indicated by the crappy image

My question is: can anyone see how it is possible to create the page in such a way that on lower resolutions that div containing the background image (of width 420px) would partially hide the image (say at 800 x 600) and show more/all of it at the higher res.

I have tried a couple of ways but either way it results in the image being forced onto a new line - or scrolling off to the right.

Oh and the kicker is keep in mind that above search form 1 and 2 there is an item of navigation that must remain the same width as the search forms below

 

[davidbehan]

Could be your lucky day. Think I was doing something similar if I understood you correctly. Give me a minute to upload some files... it's still in progress.

 

[davidbehan]

Ok, have a look at www.gprfinance.com/temp/

It's a work in progress so don't mind the incomplete work. The "swoosh" in the top right is put in the background so that it is visible at 1024 width and greater but pretty much hidden at 800x600. The css doing it is:

background: url(../img/swoosh.gif) no-repeat 738px 1px #FFFAF0;

and that's in the body tag. If you did the same and offset the background image, you might be able to pull off the same effect.

I hope that helps but let me know if you have any other questions.

Dave

 

[ph3n0m]

first of all - nice design

Yes and no is the answer - that is what I would intend to do - the problem is that the image is also tied into two divs above that, that have to expand and contract based on resolution - and that the edge of the right most div should not exceed the edge of the image

Kind of like this - if you can visualise this:
___________
|nav3|nav4|
|image---->|

 

[davidbehan]

have you got a design concept I can see? I can usually work out a css layout from an actual concept. A little bit difficult to visualise!

 

[ph3n0m]

http://www.vertigoproductions.biz/amergin/

keep in mind that the image I am talking about is the black and white one

 

[davidbehan]

ok, so at 800x600, you want to cut off the black and white image and have no horizontal scroll bar? And at a higher resolution, just show the entire image?

Then, at a higher resolution, the nav's should only stretch as far as the edge of the image, i.e. they shouldn't stretch any further?

Have I understood that correctly?!?

p.s. this is why I like working with fixed width websites!

 

[davidbehan]

Try this:

.welcome_home {
background:transparent url(images/welcome_home.jpg) no-repeat scroll 0%;
border-left:2px solid #FFFFFF;
display:block;
height:455px;
overflow:hidden;
margin-right:1%;
}


.residential, .commercial, .overseas, .mortgages {
border-left:2px solid #FFFFFF;
font-size:150%;
font-weight:bold;
height:95px;
padding-left:5px;
padding-top:11px;
text-align:left;
width:20.3%;
max-width:204px;
}

How does that work? Is it on the right lines? It seems to be working in FF for me like that!

 

[davidbehan]

any joy?

 

[ph3n0m]

sort of, kind of - still working on it

if all else fails I will do something radical - like kill the designer

 

[ph3n0m]

ok well it didnt work - I dont want the first two blocks to resize - only the last two (Mortgages and overseas) on the lower res

So I have decided to kill the designer

 

[davidbehan]

That's the best suggestion yet!!!