Re: [WSG] CSS Liquid Design Header

[Charles Eaton]

i not source! i think that refers to a page with 'fixed' sidebars (left 
& right) and 'flexible' center.
Anyway, i updated the sample as a whole flexible page that you can look 
at:


In fact i have not tested it Windows Explorer, so if you spot a 
'prickly', tell me.

-chuck

On Feb 22, 2006, at 9:00 PM, Geoff Deering wrote:

Thanks for the suggestions and also the code corrections and 
improvements.  This is like the jello mold that Tom suggests isn't it?


**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] CSS Liquid Design Header

[Geoff Deering]

Tom Livingston wrote:



On 2/22/06 5:04 AM, "Geoff Deering" <[EMAIL PROTECTED]> wrote:

 


Can any one point me to a good example of how to do a css header with a
background image 100% wide, while having two distinct images on the far
left and right and they behave in a liquid manner as the browser window
is resized, so that both images maintain being far left and far right.
   



Have you tried jello mold? You can set a min width, so your images won't
crash together. And have a bg color in between for wide pages.

Just a thought...
 



Yes, tracked that down.  Think it's the same principle as what Charles 
recommended.


Thanks for that.

Regards
Geoff
**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] CSS Liquid Design Header

[Geoff Deering]

Charles Eaton wrote:



On Feb 22, 2006, at 4:50 AM, Geoff Deering wrote:


I wish it was that simple.

I need something like



How's this:


Note: "Float" in your setup worked against the nature order of how 
computers read code, top down - left to right.




Thanks for the suggestions and also the code corrections and 
improvements.  This is like the jello mold that Tom suggests isn't it?


It doesn't quite fit what I wanted, but I can actually achieve the same 
result with a bit of image manipulation, and will be able to be close to 
back on track with being close to the clients design (which has a lot of 
image layering).


Nothing like a trip to the dentist in the morning to distract one from 
web challenges.  Highly recommended when in need of other perspectives 
(on anything).



Thanks
Geoff
**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] CSS Liquid Design Header

[Tom Livingston]

On 2/22/06 5:04 AM, "Geoff Deering" <[EMAIL PROTECTED]> wrote:

> Can any one point me to a good example of how to do a css header with a
> background image 100% wide, while having two distinct images on the far
> left and right and they behave in a liquid manner as the browser window
> is resized, so that both images maintain being far left and far right.

Have you tried jello mold? You can set a min width, so your images won't
crash together. And have a bg color in between for wide pages.

Just a thought...

-- 

Tom Livingston
Senior Multimedia Artist
Media Logic
www.mlinc.com




**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

Re: [WSG] CSS Liquid Design Header

[Charles Eaton]

On Feb 22, 2006, at 4:50 AM, Geoff Deering wrote:


I wish it was that simple.

I need something like


How's this:


Note: "Float" in your setup worked against the nature order of how 
computers read code, top down - left to right.



*{
padding:0;
margin:0;
height:auto;
width:auto;
font-size:100%;
}

/* = */

#headerbanner {
   position: absolute;
   color: ;
   background: #1C3959 url(/images/banner.jpg) repeat-x top;
   display: block;
   height: 145px;
   width: 100%;
   border: 0;
   z-index: 0;
  }

#bannerleft {
   position: relative;
   background: #1C3959 url(/images/lbanner.jpg) no-repeat top;
   width: 20%;
   height: 143px;
   background-color:green;
   z-index: 0;
}

#bannerright {
   position: absolute;
   background: #1C3959 url(/images/rbanner.jpg) no-repeat top;
   top: 0%;
   right: 0%;
   width: 20%;
   height: 143px;
   z-index: 0;
   background-color:blue;
}

#headerbanner h1  {
   position: relative;
   margin:2em 2em 0em 2em;
   font-size: 1.4em;
   text-align: center;
   color: #F0;
   background: transparent;
   z-index: -1;
}

**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] CSS Liquid Design Header

[Geoff Deering]

russ - maxdesign wrote:


Do you mean like this?
http://www.maxdesign.com.au/presentation/liquid-background/

Russ
 



I wish it was that simple.

I need something like



#headerbanner {
   color: ;
   background: #1C3959 url(/images/banner.jpg) repeat-x top;
   display: block;
   height: 145px;
   width: 100%;
   border: 0;
  
}


#bannerleft {
   padding: 0;
   margin: 0; 
   float: left;

   background: #1C3959 url(/images/lbanner.jpg) no-repeat top;
   clear: both;
}

#bannerright {
   padding: 0;
   margin: 0; 
   float: right;

   background: #1C3959 url(/images/rbanner.jpg) no-repeat top;
   clear: both;
}

#headerbanner h1  {
   padding: .5em 1em .5em 1em;
   font-size: 140%;
   text-align: center;
   color: #F0;
   background: transparent;
}


So #headerbanner has a 1 pixel width image and the left and right banner 
have to sit on top of that so they behave in a liquid way keeping to the 
left and right.  There's probably a simple solution, but it's something 
I normally don't deal with.


G.
**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] CSS Liquid Design Header

[russ - maxdesign]

Do you mean like this?
http://www.maxdesign.com.au/presentation/liquid-background/

Russ

> Hi,
> 
> Can any one point me to a good example of how to do a css header with a
> background image 100% wide, while having two distinct images on the far
> left and right and they behave in a liquid manner as the browser window
> is resized, so that both images maintain being far left and far right.
> 
> Regards
> Geoff
> **
> The discussion list for  http://webstandardsgroup.org/
> 
> See http://webstandardsgroup.org/mail/guidelines.cfm
> for some hints on posting to the list & getting help
> **
> 

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

[WSG] CSS Liquid Design Header

[Geoff Deering]

Hi,

Can any one point me to a good example of how to do a css header with a 
background image 100% wide, while having two distinct images on the far 
left and right and they behave in a liquid manner as the browser window 
is resized, so that both images maintain being far left and far right.


Regards
Geoff
**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**