3 replies [Last post]
Pacaron
Pacaron's picture
Offline
newbie
Colorado
Last seen: 6 years 10 weeks ago
Colorado
Timezone: GMT-6
Joined: 2014-05-23
Posts: 1
Points: 2

I have a fixed background with a table and what to position a logo dead center-top on the table (and stay there regardless what happens to the browser window)
I need to center in the table in the window as well.
here take a look.. and tell me what I need to do.

http://www.alpacahay.com/cinn
Do I need to change the table to a CSS Layout to get this to work?
Thanks...

#maintbl{
position: absolute;
width: 906px;
z-index: 1;
top: 0px;
}
#topimg {
width: 220px;
height: 130px;
z-index: 3000;
position: fixed;
margin-left: auto;
margin-right: auto;

}

Thanks for your help.. got a client that wants this centered.. or else.
Signed ... rookie that needs CSS training

dcaverman
dcaverman's picture
Offline
newbie
Last seen: 6 years 7 weeks ago
Timezone: GMT-5
Joined: 2014-05-28
Posts: 7
Points: 11

I'm new to CSS as well so I

I'm new to CSS as well so I don't have a lot of room to help you but I will say that everything you've done looks like it should be all CSS and no tables.

You need to have a

with a fixed width for all of your content to go into and then set the margin to margin:0 auto or set the margin left/right to auto like you did in your #topimg to get it centered. You'll then add your other divs, spans, and images inside of that.

I've put off learning CSS for years and used tables for my layouts because I was comfortable with tables and never really found anything that explained CSS well to me. Then I found the Head First series of books and picked up a used version of the HTML/CSS/XHTML book for $5 shipped to my door. It has really helped me to understand and now I'm moving forward with CSS without using tables for my layouts. I still have plenty to learn but I really recommend this book since you signed with "rookie that needs CSS training".
http://www.amazon.com/Head-First-HTML-CSS-XHTML-ebook/dp/B009THD6AG/ref=sr_1_1?ie=UTF8&qid=1401591903&sr=8-1&keywords=head+first+html+with

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 56 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

#topimg { position: fixed;

#topimg {
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: 2;
  }

That should do it. You can't robustly center a fixed position element. You can center that element's content, though.

The use of fixed positioning in this case seems particularly inappropriate. Are you sure you want to do this? If the client insists, it is your responsibility to disabuse him of the notion.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 56 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Oops, forgot the table

.twocolorbg {
  background-image: url("../images/2colorbg.gif");
  background-repeat: repeat-y;
  line-height: normal;
  margin: 0 auto;
  width: 900px;
  }

You don 't need a div element to contain the table; a table is, itself, a container. You have other errors, as well.

As dcaverman said, tables are not appropriate for layout purposes, time to relearn old skills. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.