Back To Website Design Forum

Header Image in Liquid Layouts--- Please Help

  • Firemaster
  • Novice
  • Novice
  • No Avatar
  • Joined: Apr 19, 2008
  • Posts: 22
  • Status: Offline

Post April 24th, 2008, 11:02 am

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. }
  5. #header {
  6.     background: #eee url('images/banner_mountains.jpg') no-repeat center top;
  7. }
  9. #wrapper-header2 {
  10.     background: transparent url('images/bg02-blue-left.png') top left no-repeat;
  11. }
  13. #wrapper-header3 {
  14.     background: transparent url('images/bg02-blue-right.png') top right no-repeat;
  15. }
  17. #header h1 {
  18.     margin: 0 20px;
  19.     padding: 0;
  20.     height: 192px;
  21.     line-height: 3em;
  22.     color: #ccc;
  23.     font-size: 130%;
  24. }


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?
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 24th, 2008, 11:02 am

  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post April 24th, 2008, 11:14 am

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?
phoenix web design
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Joined: Feb 11, 2004
  • Posts: 6737
  • Loc: Martinsburg, WV
  • Status: Offline

Post April 24th, 2008, 11:38 am

If I get some time I'll see what I can do to come up with a solution.
‎"Be polite, be professional, but have a plan to kill everybody you meet." Maj. Gen. James Mattis
  • Firemaster
  • Novice
  • Novice
  • No Avatar
  • Joined: Apr 19, 2008
  • Posts: 22
  • Status: Offline

Post April 24th, 2008, 11:48 am

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
  • No Avatar
  • Joined: Apr 19, 2008
  • Posts: 22
  • Status: Offline

Post April 29th, 2008, 7:35 pm

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
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post April 29th, 2008, 7:39 pm

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?
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Firemaster
  • Novice
  • Novice
  • No Avatar
  • Joined: Apr 19, 2008
  • Posts: 22
  • Status: Offline

Post April 30th, 2008, 12:57 pm

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
  • No Avatar
  • Joined: Apr 19, 2008
  • Posts: 22
  • Status: Offline

Post May 2nd, 2008, 1:41 pm

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
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post May 2nd, 2008, 1:52 pm

Glad you got it fixed :D
"Bring forth therefore fruits meet for repentance:" Matthew 3:8

1, 2

Post Information

  • Total Posts in this topic: 24 posts
  • Users browsing this forum: No registered users and 123 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.