CSS Centering

design

#1

Hello! I’m wondering if anyone out there can help me on this frustrating problem:

Problem:
My web page has a header that spans the width of my webpage at the top. This header is the first cell in a table. The rest of the table holds the rest of the webpage. The header cell contains only an image that is 750px X 100px.
The entire table(which contains whole page) is centered using:

...

I want to put a button on top of the header image using CSS. So I add the code for an image that will be my button:

...

But if the browser is resized and made a width narrower than the header the button floats accross the header image. I’ve tried using the other positioning styles such as ‘absolute’, ‘fixed’, and ‘static’ but they don’t work with the centering style. I also tried to fix the width of the centering div tag but that takes away the centering style.

To Conclude
I’m not sure what to do besides splicing the header image and making it a table of images. I am wondering if a more experienced CSS user could maybe guide me on whats possible here.

Thanks so much!


#2

what doctype are you using and what size is the top image in the div?

any particular reason to be using divs, or/and tables?

several ways to get there from here more than likely

[color=#0000CC]jason[/color]


#3

First off, it would be a good idea to visit the W3C and read up on the visual formatting model in CSS 2.0.

What you need to do is create a containing block for the button and header images, with the button image as the first element. This containing block will need to be of a fixed size. The button image will need an absolute position.

[code]

CSS 2.0 body { color: silver; background-color: gray; font-family: "Bitstream Vera Sans Mono", "Courier New", monospace; }

#page {
width: 750px;
border-spacing: 0;
border-width: 0;
padding: 0;
margin: auto;
background-color: black;
}

#page td {
padding: 0;
}

#container {
position: relative;
width: 750px;
height: 100px;
margin: 0;
padding: 0;
border: none;
}

#button {
position: absolute;
top: 16px;
left: 128px;
padding: 0;
margin: 0;
}

#header {
padding: 0;
margin: 0;
}

The header. A button.

This is an example of how to position an element on top of another in CSS.

The button and the header are both inside a containing block of a fixed size.

The button is placed at an absolute position within the containing block.

The button will stay in the same place relative to the header even if the containing block moves.

[/code]

:cool: Perl / MySQL / HTML+CSS