By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,220 Members | 1,798 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,220 IT Pros & Developers. It's quick & easy.

Newb questions: centered image; right bottom footer

P: n/a
Hi. I've been using CSS for basic stuff, mostly concerning fonts. I want
to get going with using CSS fully. Two days ago I purchased O'Reilly's
"Cascading Style Sheets" and "CSS Cookbook." I've been reading them and
have tried some really basic stuff and am not having a very good time
(lol). I'm feeling really stupid, to be honest.

I was able to center an image on a page by mucking about with code
primarily from the Cookbook. I only managed to make a footer go to the
right bottom corner of the browser's window by finding something in a
discussion group.

I suspect the code for both is pretty dismal. To make matters worse,
when I tried to set the page margins to 0, and added 12px as the
basefont, the centered logo got whacked and I could no longer control
the footer's size as well as where it was positioned.

Here's the page in question:

http://www.propriocept.com/

and the code which works (which you can see there in full in page
source) is:

..ftext { font-family: Verdana, Helvetica, Arial, sans-serif;
color: #485C88;
font-size: 9px;
position: absolute;
bottom: 1em;
right: 1em;
text-align: right; }

and

..ctrlogo {
position: absolute;
top: 50%;
left: 50%;
margin-top: -142.5px;
margin-left: -302.5px;
height: 285px;
width: 605px; }

These two are most likely not properly written.

When I change the body to:

body {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0; }

the positioning wigs out and I have been unable to find a way to fix the
two with the body like that.

If I add a base font size:

p, table, tr, th, td, ul, ol, li, dd, dl, dt {
font-size: 12px;
font-family: Verdana, Helvetica, Arial, sans-serif; }

my footer loses its size and color.

I've looked online for help and found nothing that addresses my problems.

Add to this having TopStyle Pro 3.11 (which I've barely used) and it
hating the code directly from O'Reilly, and I'm really not enjoying my
attempt to fire up with CSS.

All advice appreciated. If anyone knows sites, groups, whatnot that
would help I'd obviously appreciate that greatly.

Oh, yeah. PS: I'm using Firefox 1.0.7 as my default browser on Windows
2000. All the following browsers are up-to-date: IE 6x, Opera 8x, Aol's
Netscape 8 and some older Netscape versions. On the Mac I have Safari,
Firefox and the old IE. The code works in all the Windows browsers. I
have not checked on the Mac yet.

I have not moved to Firefox 1.5 yet because I've heard too many
complaints about it.

--
"Excuse me, Egon. You said crossing the streams was bad. You're going to
endanger us. You're going to endanger our client, the nice lady who paid
us in advance, before she became a dog."
-- Venkman to Spengler, "Ghostbusters"
Dec 12 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Richard Shewmaker wrote:

I was able to center an image on a page by mucking about with code
primarily from the Cookbook. I only managed to make a footer go to the
right bottom corner of the browser's window by finding something in a
discussion group.
Is that what you wanted to do?
body {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0; }

the positioning wigs out and I have been unable to find a way to fix the
two with the body like that.
What does "wigs out" mean in terms of layout?
Why are you applying position:absolute to <body>?
I've looked online for help and found nothing that addresses my problems.
Nowhere in your post have you said what problem(s) you are hoping to
solve. You only mentioned a few failed experiments.
All advice appreciated. If anyone knows sites, groups, whatnot that
would help I'd obviously appreciate that greatly.

- Do not use HTML 4.01 Transitional for new pages. Use an appropriate DTD
spec like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
- Do not use px or pt for font sizes. They are not scalable in IE. Use %
or EMs.
- Try this as a start for your CSS:

* { margin: 0; padding: 0; border: 0; }
body { color: #???; background: <whatever>;
font: normal 100% sans-serif; }

The "*" applies to everything, overriding any defaults the browser may
think is appropriate. It also means you must explicitly specify margin and
padding for all elements, but you end with a page that looks the same in
most browsers.

- Set up your footer like this:
..ftext { /* Use the div to position the block. */
width: 100%;
position: absolute;
bottom: 1em;
}
..ftext p { /* Use the p to style the content. */
color: #485C88;
text-align: center; /* Or "right", wherever you want it. */
}

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Dec 12 '05 #2

P: n/a
Thank you! Sorry about the way I "described" my problems. You hit them
on the head anyway.

As far as what I was using, it came either from one of the O'Reilly
books or from information I found online (and I doubtlessly mixed all
that up as I tried to get (a) the image to center in the browser's
window and (b) the footer to sit in the lower right of the window.

I'll go back with what you've provided and perhaps with the right start
I'll get somewhere instead of nowhere and frustrated. Heh.

<snip>

rest removed since no longer important
Dec 13 '05 #3

P: n/a
Richard Shewmaker wrote:
Thank you! Sorry about the way I "described" my problems. You hit them
on the head anyway.
You're welcome.
As far as what I was using, it came either from one of the O'Reilly
books or from information I found online (and I doubtlessly mixed all
that up as I tried to get (a) the image to center in the browser's
window and (b) the footer to sit in the lower right of the window.

If all you want is a centered logo, you could place it as a background
image rather than centering it in the foreground:

background: #fff url("./prologo.gif") no-repeat center center;

Either in <body> or <html>.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Dec 13 '05 #4

P: n/a
Jim -- big irony for this centered logo deal.

Client takes a look at it ... is *puzzled.* Turns out he's using a Mac
with OS 8 on it.

Back to tables and spacer images.

I think I'll stick to my own stuff for CSS for a while.
Dec 20 '05 #5

P: n/a
Richard Shewmaker wrote:
Hi. I've been using CSS for basic stuff, mostly concerning fonts. I want
to get going with using CSS fully. Two days ago I purchased O'Reilly's
"Cascading Style Sheets" and "CSS Cookbook." I've been reading them and
have tried some really basic stuff and am not having a very good time
(lol). I'm feeling really stupid, to be honest.

I was able to center an image on a page by mucking about with code
primarily from the Cookbook. I only managed to make a footer go to the
right bottom corner of the browser's window by finding something in a
discussion group.

I suspect the code for both is pretty dismal. To make matters worse,
when I tried to set the page margins to 0, and added 12px as the
basefont, the centered logo got whacked and I could no longer control
the footer's size as well as where it was positioned.

Here's the page in question:

http://www.propriocept.com/

and the code which works (which you can see there in full in page
source) is:

.ftext { font-family: Verdana, Helvetica, Arial, sans-serif;
color: #485C88;
font-size: 9px;
position: absolute;
bottom: 1em;
right: 1em;
text-align: right; }

and

.ctrlogo {
position: absolute;
top: 50%;
left: 50%;
margin-top: -142.5px;
margin-left: -302.5px;
height: 285px;
width: 605px; }

These two are most likely not properly written.

When I change the body to:

body {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0; }

the positioning wigs out and I have been unable to find a way to fix the
two with the body like that.

If I add a base font size:

p, table, tr, th, td, ul, ol, li, dd, dl, dt {
font-size: 12px;
font-family: Verdana, Helvetica, Arial, sans-serif; }

my footer loses its size and color.

I've looked online for help and found nothing that addresses my problems.

Add to this having TopStyle Pro 3.11 (which I've barely used) and it
hating the code directly from O'Reilly, and I'm really not enjoying my
attempt to fire up with CSS.

All advice appreciated. If anyone knows sites, groups, whatnot that
would help I'd obviously appreciate that greatly.

Oh, yeah. PS: I'm using Firefox 1.0.7 as my default browser on Windows
2000. All the following browsers are up-to-date: IE 6x, Opera 8x, Aol's
Netscape 8 and some older Netscape versions. On the Mac I have Safari,
Firefox and the old IE. The code works in all the Windows browsers. I
have not checked on the Mac yet.

I have not moved to Firefox 1.5 yet because I've heard too many
complaints about it.


I just recently started with css and most of the books were beyond my
skill level until I found this one.

http://www.bookpool.com/ss?qs=stylin&x=0&y=0
Feb 4 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.