Need CSS/XHTML/Javascript help.

Factual Questions
1

I’m trying to help a friend set up site.
What I have so far is just something pretty she can look at instead of “Under Construction” while she decides what content she wants.

The problem I’m having is I want an itty bitty tag at the bottom showing I did the site but it just won’t center correctly!

It’s written in XHTML, Javascript and has an attached CSS.
Here’s the site I’ve saved in another folder to work on:
http://205.223.179.81/sampeys0530/Pilates/
“View source” to see the code.
As you can see it looks like it starts in the center, instead of being centered.

Here’s the style sheet layout:


/* CSS Document */
body{
text-align:center;
}

table.box 
{
border-style: solid;
border-color: #007570; 
border-width: thin;
background-color: #EEFFFF;
font-family: sans-serif;
color: #007570;
font-weight: bold;
text-align:center;
margin-left:auto; 
margin-right:auto;

}

a:link {
color: #007570;
}

a:visited {
color: #007570;
}

.one:hover {
background-color: #009999; 
}

a:hover{
color: #ffffff;
}

span#suzi {
position: absolute;
bottom: 30px;
text-align:center;
}

a#design:link {
color: #007570; 
padding: 4px; 
background-color: #c0c0c0;
}

a#design:visited {
color: #007570; 
padding: 4px; 
background-color: #c0c0c0;
}

a#design:hover {
background-color: #c0c0c0; 
padding: 2px;
color: #ffffff;
border: 2px solid #007570;
}

So I just want the Site design by www.suzi-quzi.com to be centered.
That’s all.
I’m not asking for much, but I can’t get it to freakin’ work! :frowning:

Any helps, hints or suggestions would be much appreciated and remember…you just may be saving an innocent computer’s life. :smiley:

2

You shouldn’t use absolute like that. Use padding or a margin instead if you want to keep the credit off the very bottom of the screen.

3

Example?

4

Seem to me you should be using <DIV> rather than <SPAN>.

5

So far I’ve tried <p>, <div>, and finally <span>
No difference.
Trying Padding and Margin isn’t working at all.

6

Okay, a little trickier than I thought you meant. My browser windows are never full screen, so I didn’t realize you were trying to keep is there. So what’s your idea? That it’s always fixed there while the content scrolls? What should be behavior be if the window is resized to a height less than the vertical size of your content?

I thought you were trying to do something that this would fix:


span#suzi {
padding-bottom: 30px;
text-align:center;
}
7

Nah, it won’t be scrollable.
The pages will most likely it will be fitted for 800X600, I just want it to stay at the bottom whether the screen is set that size or bigger.
It’s just that it should be do-able, and it’s not working.
After we get some content to put on the site, I can just plug it in after all the blah, blah.

It’s just the principle, dammit! :mad: :stuck_out_tongue:

8

OK, here goes. Define a class .suzi:



.suzi {
position: absolute;
bottom: 30px;
width:100%;
text-align:center;
}

Note the “width:100%”. This specifies that the block take up the entire width of the page.

Now use the class in a

: 


<div class="suzi">
Site design by <a id="design" target="_blank" href="http://www.suzi-quzi.com/">www.suzi-quzi.com</a>
</div>

Voila!

9

Don’t know how “correct” it is, but if you add

left:0; right:0; width:100%;

to the span properties, it will work in IE and FireFox.

10

Nope, neither of those worked.
I had tried the width earlier and got the same results I’m getting now when I cut and pasted.

11

Wait!
I had to change the divs back to span to match my style sheet, but it seems Library Boy get’s a cookie if it works in Netscape!

12

It does!

Thank you!
I can sleep at night now. :slight_smile:

13

Chocolate chip, if you please.

I’m surprised the DIV one did not work.

14

Hey, whatever works.
I’m :slight_smile:

15

Just for the record, why does that page need JavaScript/DHTML? CSS does everything you’re trying to do.

Also, why would you fit the page to 800x600? That’ll annoy people with low-res (e.g. 640x480) screens because they’ll have to scroll horizontally, and annoy people with hi-res (e.g. 1024x1280) screens because it will leave a pile of empty space on both sides. Why not design the site to fit the window and let it resize gracefully, like HTML is intended to do?

Fixed-width sites are particularly annoying to people who change the text display size in their browsers.

16

I agree for the most part, though personally I find it aesthetically awkward to read paragraph-formatted text in a window that’s 200+ characters wide.

17

How do you know it’ll be 200+ characters wide? Late at night, when the old eyes get tired, I like to enlarge the text setting on my Web browser and use wider windows. That lets me keep the number of characters per line the same as what you designed for. If you limit the pixel width of the screen, then when I enlarge the text I end up with very short hard-to-read lines.

18

The web-friendly thing might be to set the width limit based on the em instead of pixels.