PDA

View Full Version : Float header over background?


scifin
10-14-2010, 05:22 AM
I am building a new site for this I Love Lucy cruise and I want to use a large background pic; I would like the header to center itself when the screen is small or maximized. Can I use a transparent .png or is there a better way to do it?

This is a picture of what the site will look like with the exception that there will actually be content in the middle ;).
http://scifinmusic.com/lucy.html

edbr
10-14-2010, 05:28 AM
use margins left and right auto. providing you give an element a size it will centre

edbr
10-14-2010, 05:32 AM
hold the phone,i just looked at your link do you mean the 1800px wide banner?

scifin
10-14-2010, 05:38 AM
imagine what you see now but with all of the text and graphics removed; that will be the background @1800x with the beach pic being part of the background.

If I didn't have an image (the beach) under the lucky logo and went with a solid color it wouldn't matter but since the background of the part where the logo/header will be is an image I need the logo/header to float over the beach background when people resize their screens. That way the logo/header will always be centered over the beach regardless of how much of the beach is showing.

edbr
10-14-2010, 05:44 AM
right if the logo is relative position with auto margins it will centre .

gentleone
10-14-2010, 05:49 AM
It is possible to center that header image without getting a horizontal scrollbar for lower screen resolutions, but I can only explain how to do that with code. Are you working in code view or in design view?

scifin
10-15-2010, 12:02 AM
I am gonna need to make an annotated image to explain what I mean because I think I am sucking at it so far.

Corrosive
10-15-2010, 06:16 AM
I am gonna need to make an annotated image to explain what I mean because I think I am sucking at it so far.

I think I understand you but I'm going to have to have a think about it. In the meantime, do your sketch :)

gentleone
10-15-2010, 07:09 AM
There are two ways to achieve want you want. I'll explain the simplest but I don't know the exact widths and heights, but for the examples it doesn't matter.

The markup:

<body>

<div id="top">

<!-- ul navigation centered -->

</div>

<div id="header">

<a id="logo" href="index.html">go home</a>

</div>

<div id="content-wrapper">



</div>

</body>
The CSS:

* {margin: 0; padding: 0}

html, body {
width: 100%;
height: 100%
}

body {
background: #7C0B0B /* that reddish background color */
}

#top {
height: 65px;
background: #222;
border-bottom: 5px solid #666
}

#header {
width: 100%;
height: 200px;
background: url(../images/banner.jpg) no-repeat center
}

a#logo {
display: block;
width: 200px;
height: 200px;
margin: 0 auto;
background: url(../images/logo.gif) no-repeat;
text-indent: -9999px;
}

#content-wrapper {
width: 960px;
margin: 0 auto
}
Something like this.... didn't test it, but should be okay

scifin
10-18-2010, 02:16 AM
Here is a pic that might explain better.
http://www.scifinmusic.com/lucy2.html

If I made the X a png with a transparent background I would need the X to be able to move when the browser window is resized while the background would be static.

gentleone
10-18-2010, 05:30 AM
Use the code the code I gave you and you have what you want. You only have to change the heights, widths and colors to the real ones, because I didn't know them.

scifin
10-18-2010, 06:28 AM
But if the X or the Lucy logo is floating over the beach background doesn't it need to be saved with a transparency? Either a png or gif? The logo is a separate object from the beach background.

gentleone
10-18-2010, 07:22 AM
But if the X or the Lucy logo is floating over the beach background doesn't it need to be saved with a transparency? Either a png or gif? The logo is a separate object from the beach background.

Yes, has to be transparent!

d a v e
10-18-2010, 08:37 AM
you could use an 8-bit png with alpha transparency - either through fireworks or there are ways of doing it in photoshop or gimp
http://www.ethanandjamie.com/blog/37-user-interface/81-png8-transparency-without-fireworks

scifin
10-18-2010, 11:18 PM
OK, I will give it a shot; I use Illustrator CS5 so I'll look and see if I can save with the transparency there and if not then I'll try fireworks.

d a v e
10-19-2010, 05:20 AM
fireworks would be your best bet

scifin
11-05-2010, 01:04 PM
The Alpha channel is seriously my new favorite thing!