Header Image in Liquid Layouts--- Please Help

  • Firemaster
  • Novice
  • Novice
  • Firemaster
  • Posts: 22

Post 3+ Months Ago

I am making my first liquid layout and I want to use a fixed image for my header and footer. My question is if don't set the image as a background in the div, but put the image in the div with html and in the div add a background to match the banner and footer background would this allow my image to look like it is resizing with the layout? The one thing is what about people that Have a smaller screen that the banner is? My banner is currently 960px same goes for the footer, but thinking about resizing to achieve even number percentages for my columns depending how I code my layout.

If some could help me out it would greatly be appreciated.

Thanks,

Chris
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Take a look at the header of this site I'm working on. If you expand and contract the site, you can see it adjust and then stop at the min-width and max-width. Unless you're using IE6, in which case I just made it a static layout.

I took this idea from Transcending CSS by Andy Clarke. Basically, you use a really wide image for the header and then set the overflow to hide.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8397
  • Loc: USA
  • Firemaster
  • Novice
  • Novice
  • Firemaster
  • Posts: 22

Post 3+ Months Ago

Okay! I am following you guys, just a couple things. What if you are using a wrapper div so the page is centered in the browser and lets say the wrapper is 80% so you can see the background image would still set the image width to 100%? Or set the wrapper to 100% put just set margins up so you can see the background? Also would this image trick work if you set it to the background image of the div and set the width to 100%?

Jameson is your site fixed or liquid? Just trying to determine what way I am going to accomplish this. I am trying to stay with liquid because my site is ran by joomla and there is a php code for joomla where I can make one of the columns collapse if I want it to and I am trying to accomplish that for my image gallery and forum. I don't think you can use fixed layout sizes with collapse columns?????

Thanks for your help thus far!

Chris
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8397
  • Loc: USA

Post 3+ Months Ago

Id your wrapper is set to 80% your img is still 100%. THan the image would be 100% of your wrapper. Unless you position the wrapper absolute or something.
  • Firemaster
  • Novice
  • Novice
  • Firemaster
  • Posts: 22

Post 3+ Months Ago

Okay Cool! Thanks for the quick reply! I don't know what I am going to do yet about the wrapper do you have any suggestions?

Chris
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8397
  • Loc: USA

Post 3+ Months Ago

To do for the wrapper as in what? Are you not sure about the width? Height? How to implement the image? What you mean by suggestions... you want me to suggest on width?
  • Firemaster
  • Novice
  • Novice
  • Firemaster
  • Posts: 22

Post 3+ Months Ago

What I mean is what to you suggest me setting the wrap with to in percetage? Like 80%, 100%, etc.


Chris
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8397
  • Loc: USA

Post 3+ Months Ago

It's up to what you want and prefer. If you want your site to be full screen... than do so. If you want it smaller and make the percentage smaller.

This site, for example, has the main container (or wrapper) at 100% and it's a liquid design. If that's what you want, than you can follow suit.

It's more of what you want rather than of what people can suggest for you. If you really want me to suggest... I'd go with like 80-95% to give some room for the browser... even though it's going to be a liquid.
  • Firemaster
  • Novice
  • Novice
  • Firemaster
  • Posts: 22

Post 3+ Months Ago

I went with 80%..Thanks for the help!
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8397
  • Loc: USA

Post 3+ Months Ago

No problem :)
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6809
  • Loc: Martinsburg, WV

Post 3+ Months Ago

Take a look at this design.

http://www.oswd.org/design/preview/id/2828

The way they do the header image is quite fascinating.

Here is the code for the logo part
Code: [ Select ]
<div id="wrapper-header">
<div id="header">
<div id="wrapper-header2">
<div id="wrapper-header3">
    <h1>Nautica 2.2 Liquid</h1>
</div>
</div>
</div>
</div>
  1. <div id="wrapper-header">
  2. <div id="header">
  3. <div id="wrapper-header2">
  4. <div id="wrapper-header3">
  5.     <h1>Nautica 2.2 Liquid</h1>
  6. </div>
  7. </div>
  8. </div>
  9. </div>


Here is the CSS for it
Code: [ Select ]
#wrapper-header {
    background: transparent url('images/bg.png') top center repeat-x;
}

#header {
    background: #eee url('images/banner_mountains.jpg') no-repeat center top;
}

#wrapper-header2 {
    background: transparent url('images/bg02-blue-left.png') top left no-repeat;
}

#wrapper-header3 {
    background: transparent url('images/bg02-blue-right.png') top right no-repeat;
}

#header h1 {
    margin: 0 20px;
    padding: 0;
    height: 192px;
    line-height: 3em;
    color: #ccc;
    font-size: 130%;
}
  1. #wrapper-header {
  2.     background: transparent url('images/bg.png') top center repeat-x;
  3. }
  4. #header {
  5.     background: #eee url('images/banner_mountains.jpg') no-repeat center top;
  6. }
  7. #wrapper-header2 {
  8.     background: transparent url('images/bg02-blue-left.png') top left no-repeat;
  9. }
  10. #wrapper-header3 {
  11.     background: transparent url('images/bg02-blue-right.png') top right no-repeat;
  12. }
  13. #header h1 {
  14.     margin: 0 20px;
  15.     padding: 0;
  16.     height: 192px;
  17.     line-height: 3em;
  18.     color: #ccc;
  19.     font-size: 130%;
  20. }


Very slick. The image size is 1600x192.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Firemaster wrote:
Jameson is your site fixed or liquid?

The site I showed you is liquid.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Bogey wrote:

Might have to try that sometime... Doesn't the image resolution suffer when it changes sizes?
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

grinch2171 wrote:
Take a look at this design.

http://www.oswd.org/design/preview/id/2828

The way they do the header image is quite fascinating.

That's the same thing I was talking about in the site I listed earlier. Of course, you have to have an image where it's ok that you don't see all of it all the time.
  • Firemaster
  • Novice
  • Novice
  • Firemaster
  • Posts: 22

Post 3+ Months Ago

grinch2171 wrote:
Take a look at this design.

http://www.oswd.org/design/preview/id/2828

The way they do the header image is quite fascinating.

Here is the code for the logo part
Code: [ Select ]
<div id="wrapper-header">
<div id="header">
<div id="wrapper-header2">
<div id="wrapper-header3">
    <h1>Nautica 2.2 Liquid</h1>
</div>
</div>
</div>
</div>
  1. <div id="wrapper-header">
  2. <div id="header">
  3. <div id="wrapper-header2">
  4. <div id="wrapper-header3">
  5.     <h1>Nautica 2.2 Liquid</h1>
  6. </div>
  7. </div>
  8. </div>
  9. </div>


Here is the CSS for it
Code: [ Select ]
#wrapper-header {
    background: transparent url('images/bg.png') top center repeat-x;
}

#header {
    background: #eee url('images/banner_mountains.jpg') no-repeat center top;
}

#wrapper-header2 {
    background: transparent url('images/bg02-blue-left.png') top left no-repeat;
}

#wrapper-header3 {
    background: transparent url('images/bg02-blue-right.png') top right no-repeat;
}

#header h1 {
    margin: 0 20px;
    padding: 0;
    height: 192px;
    line-height: 3em;
    color: #ccc;
    font-size: 130%;
}
  1. #wrapper-header {
  2.     background: transparent url('images/bg.png') top center repeat-x;
  3. }
  4. #header {
  5.     background: #eee url('images/banner_mountains.jpg') no-repeat center top;
  6. }
  7. #wrapper-header2 {
  8.     background: transparent url('images/bg02-blue-left.png') top left no-repeat;
  9. }
  10. #wrapper-header3 {
  11.     background: transparent url('images/bg02-blue-right.png') top right no-repeat;
  12. }
  13. #header h1 {
  14.     margin: 0 20px;
  15.     padding: 0;
  16.     height: 192px;
  17.     line-height: 3em;
  18.     color: #ccc;
  19.     font-size: 130%;
  20. }


Very slick. The image size is 1600x192.


grinch2171 I kind of an idea what you are talking about can you maybe explain it in more detail? I have attached the images that I am trying to use for this layout for the header and footer. If someone could give me something that would work for this images it would be great.

Image
Header

Image
Footer

jameson5555 wrote:
grinch2171 wrote:
Take a look at this design.

http://www.oswd.org/design/preview/id/2828

The way they do the header image is quite fascinating.

That's the same thing I was talking about in the site I listed earlier. Of course, you have to have an image where it's ok that you don't see all of it all the time.


Jameson555 I guess is what you are saying is that this images would not work? Because they are different pieces from the left to the right?
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Firemaster wrote:
Jameson555 I guess is what you are saying is that this images would not work? Because they are different pieces from the left to the right?

These probably wouldn't work as-is because of the text: you can't hide the sides or you wouldn't be able to read it.

Have you tried Bogey's idea of using 100% width?
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6809
  • Loc: Martinsburg, WV

Post 3+ Months Ago

If I get some time I'll see what I can do to come up with a solution.
  • Firemaster
  • Novice
  • Novice
  • Firemaster
  • Posts: 22

Post 3+ Months Ago

jameson5555 wrote:
Firemaster wrote:
Jameson555 I guess is what you are saying is that this images would not work? Because they are different pieces from the left to the right?

These probably wouldn't work as-is because of the text: you can't hide the sides or you wouldn't be able to read it.

Have you tried Bogey's idea of using 100% width?


Yes I did and that seemed to work well, but now I am trying to figure out how I am going to get my columns to extend all the way down to the footer.

grinch2171 wrote:
If I get some time I'll see what I can do to come up with a solution.


Thanks grinch2171 I would appreciate it.


Chris
  • Firemaster
  • Novice
  • Novice
  • Firemaster
  • Posts: 22

Post 3+ Months Ago

Hey I was thinking about this issue over the past couple days and I was wondering if there is some kind of javascript or other script that could be used to pull up the correct image for the browser size. For example you would have several images that script would pull up based on the screen resolution. Is this possible? I am still trying to get this to work. There has to be some way how to do this and just jet get it to work. I have been working on this layout for a month now and just want to get it done.

Another question was could you do collapsable columns with fixed width layouts? If worse comes to worse I might have to do a fix width layout.

Chris
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8397
  • Loc: USA

Post 3+ Months Ago

Firemaster wrote:
jameson5555 wrote:
Firemaster wrote:
Jameson555 I guess is what you are saying is that this images would not work? Because they are different pieces from the left to the right?

These probably wouldn't work as-is because of the text: you can't hide the sides or you wouldn't be able to read it.

Have you tried Bogey's idea of using 100% width?


Yes I did and that seemed to work well, but now I am trying to figure out how I am going to get my columns to extend all the way down to the footer.

What do you mean "...columns to extend all the way down to the footer."?

I doubt that it's the 100% width's fault if I get you correctly. Are you saying that certain columns don't reach the footer and just leave a gap in between?
  • Firemaster
  • Novice
  • Novice
  • Firemaster
  • Posts: 22

Post 3+ Months Ago

Quote:
What do you mean "...columns to extend all the way down to the footer."?



I doubt that it's the 100% width's fault if I get you correctly. Are you saying that certain columns don't reach the footer and just leave a gap in between?[/quote]
  • Firemaster
  • Novice
  • Novice
  • Firemaster
  • Posts: 22

Post 3+ Months Ago

Hey Everyone!

I just wanted to let you know I resolved the issue with my layout and get it to work. I used the width of 100% method and got it to work. I also got faux columns working too. Thanks everyone for all your help!

Chris
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8397
  • Loc: USA

Post 3+ Months Ago

Glad you got it fixed :D

Post Information

  • Total Posts in this topic: 24 posts
  • Users browsing this forum: No registered users and 86 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.