Newb questions: centered image; right bottom footer

Richard Shewmaker

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, "Ghostbuste rs"

Dec 12 '05 #1

Subscribe Reply

1929

Jim Moe

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:absolu te 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

Richard Shewmaker

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

Jim Moe

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

Richard Shewmaker

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

jeff 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

Similar topics

2497

body and viewport puzzler

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 line stretches from one side of the screen to the other and is not 680 pixels long. Why isn't the bottom margin 680 pixels? body { ... width: 680px; margin-top: 1em;

HTML / CSS

2305

rounded corners with one image

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 be right. How are these corners made ? Here is the part of the css for the footer http://www.blogger.com/profile/12345910 /* Footer

HTML / CSS

1229

Giving up Tables for DIVs... 2 questions though

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. Here's the link to my page with the first problem... http://levelwave.com/dev/ 1) You'll notice that the body of the page in the <div id="rh-col"> section, is scrolling down past the footer <div id="footer"at the

HTML / CSS

2026

Master Pages: Why is all of my content centered?

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 content page seems to ignore any attempts to manually align right. So what's the deal?

ASP.NET

3535

Box with Image + Footer; how to avoid max-width, max-height?

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 should fill up all the space left in the #container. <html><head></head><body><style type="text/css"> #image { max-width: 200px; max-height: 90px; } #container { position: fixed; width: 200px;

HTML / CSS

3192

100% header and 100%footer image

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 the header, a container a 20% wide box for a list, two 80% wide boxes for content, a footer with the same image set up to end it. It was looking almost there for white but the footer image could now be viewed. ?= <!DOCTYPE HTML PUBLIC...

HTML / CSS

4657

image change on mouseover

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. Within the area, i would like to display an image and some text, overriding a few words with an inline style. i would like the image to change once the mouse is placed over it. and when the mouse is removed from the image the image should...

Javascript

4937

Centering background-image in list menu

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 "background" or "background-image", the positioning only works with specifying pixels. If I specify the vertical position in pixels, the image gets cut-off at the bottom. I don't know what to do and would appreciate anyone's help. Specifically the code...

HTML / CSS

1912

CSS Image Navigation Bar Help...

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 practice using tables...tee hee. Anyways, this should be EXTREMELY simple...as I want NO rollovers, no fancy hovers, no current-page differences...I just want the navigation bar image to be "click-able" where the words are. You can see the...

HTML / CSS

9480

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10315

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10147

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

8968

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6737

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5379

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5511

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4045

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

2877

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General