472,985 Members | 2,568 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,985 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 1870
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: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
1
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
0
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
4
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

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.