473,324 Members | 2,257 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

Newb questions: centered image; right bottom footer

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
5 1887
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Haines Brown | last post by:
I want a centered body, 680px wide, having a red bottom margin. The following works well in galeon, but not in IE5, where the bottom margin steals the full width of the viewpoint. That is, the red...
2
by: meltedown | last post by:
I noticed that the footer menu on the bottom with rounded corners only uses one image of a rounded corner:img/round15_bot.gif This one image seems to be used for all four corners, but that can't...
6
by: ~john | last post by:
I'm using DIVs in a test site for my page layout. It's working fairly well so far but there's 2 problems I'm having that I didn't have with tables. I'm sure it's just something small in my CSS. ...
7
by: TheLongshot | last post by:
I just recently converted a few pages of my application to using master pages. Problem is, in all of my content pages, the contents are centered. I can't figure out why. The markup in the...
3
by: Sven C. Koehler | last post by:
Hello, the html below displays a box (#container) with a #footer and an #image inside. Is there any way how I could get rid of declaring max-width and max-height for the #image? The #image...
2
by: darkzone | last post by:
Looked almost ok in my editor but not so good in fire fox. I was going for a layout that was elastic some what. A header with one image repeating 100%, an there image slightly to the left also in...
5
by: studentofknowledge | last post by:
hi guys im new to javascript and need some guidence please.. im trying to display a 400x400 pixel coloured area in the middle of a webpage that stays in the middle with a browser window resize....
16
by: stevedude | last post by:
CSS newbie again. I have a problem trying to get coffee mug images within anchor tags to center with my link text for a vertical list menu. If I use the horizontal/vertical properties of...
0
by: tom59593 | last post by:
Hi there. I have been attempting (for a few days on end, sadly) to get a navigation section of my new site to work. Granted, this is the first time I've ever written CSS...although I had PLENTY of...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.