Closed Thread Icon

Preserved Topic: alignCenter problems (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=20555" title="Pages that link to Preserved Topic: alignCenter problems (Page 1 of 1)" rel="nofollow" >Preserved Topic: alignCenter problems <span class="small">(Page 1 of 1)</span>\

 
Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-22-2002 18:00

Hey Emp...I decided to take this to a new topic since it has nothing to do with lists and stuff hehe.

Okay, so here's a code that isn't working to center the top stuff...and I don't get why.

code:
<html>
<head>
<title>
Page 5
</title>
<style>
.alignCenter {text-align:center; margin: auto;}
</style>
</head>
<body>
<p class="alignCenter">
<h1>An Introduction to Gravity Probe B</h1><br>
<h2>Examining The Fundamental Structure<br>
of the Universe</h2><br></p>

<div style="margin-left:10px;">
<b>G</b>ravity Probe B is a <b>relativity gyroscope experiment</b> developed by NASA's



Am I writing it wrong? The first two lines (in h1 and h2's) should be centered but they aren't coming up that way.



Genevieve Hokanson
Student Intern, GPB
http://einstein.stanford.edu
http://www.geocities.com/genevievescu/

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted posted 08-22-2002 19:24

Well Genevieve, now we enter the fun relm of CSS! And yes, it can be quite fun.

Here is how this can work, or at least you can think of it this way I guess. It helps me.

Whenever your set a class to a particular element, in your case the <p> tag, then you have the ability to set the attributes of the class to that particular element. So, you have the attributes "{text-align:center; margin: auto;}" set to your clas ".alignCenter" right? Right.

Now, when you are going to set these attributes to a particular element (<p> ) then that is all it is going to set it to. Not the <h1> or <h2> OK. The <h1> and <h2> are sepearte elements and once you put these in your HTML, the attributes that you set in your class are no longer available.

Now, how do we get around this? One of two ways. Set the attributes to a class for the <h1> and <h2> in your CSS or you can take out the class="alignCenter" and place that in a div.

If you want to set the attributes for <h1> or <h2> in CSS, then there doesn't have to be any "." Just: h1 {text-align:center;} then every <h1> will have centered text.

Or:

code:
<div  class="alignCenter">
<p>
<h1>An Introduction to Gravity Probe B</h1><br>
<h2>Examining The Fundamental Structure<br>
of the Universe</h2><br></p>
</div>




Later,
C:\


~Binary is best~

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 08-22-2002 19:55

No... she shouldn't have to wrap it in a surrounding div. A paragraph should work fine.

text-align:center *shouldn't* center a block-level element (like div or p). Some old browsers (NN4.x, etc), however, implement it incorrectly and center an element with it set. Nonetheless, they *shouldn't* do this, and newer browsers don't.

margin:auto, however, *should* center block level elements. For this to work, however, you need a correct DOCTYPE tag to take the browser out of "quirks" mode. See http://alistapart.com/stories/doctype/ .

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted posted 08-22-2002 20:48

Well I checked in Moz 1.1 and it didn't work. So . . . hmmmmmm. . .

Later,
C:\


~Binary is best~

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-22-2002 23:21

Alrighty so I added

code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


to the top of my page, BEFORE the html tag (is that right?) but I still don't see alignCenter centering the text I need it to. Did I add it to the wrong place? Am I using the wrong one? How do I determine that? The article wasn't clear.

Thanks so much!

Genevieve Hokanson
Student Intern, GPB
http://einstein.stanford.edu
http://www.geocities.com/genevievescu/

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 08-23-2002 01:31

Make sure it's absolutely the very first line.

Beyond that, this has always been a troublesome issue, but I've made it work in the past. There's probably some silly detail we're forgetting. Perhaps, for instance, there's a containing element that *isn't* centered, and it's being centered inside *that*, which makes it not centered as you would expect. Can you give us a link to the page (or a similar page with the same problem if you dont want to show us the current page)?

A couple other things you might try...

put "color:red; font-size:100px;" or something else wacky in there to make sure that the CSS is, in fact, being applied to the paragraph tag.

try explicitly setting margin-left:auto; margin-right:auto; separately.

Put 1px borders around almost everything on the page so that you can see the edges of your boxes, and see if that helps you figure out where it's going wrong.

brucew
Paranoid (IV) Inmate

From: North Coast of America
Insane since: Dec 2001

posted posted 08-23-2002 05:23

First, let's encourage valid coding by removing those P tags enclosing the H1 and H2 tags. This is a no-no.

Next, as intended, "text-align: center;" centers the text inside the DIV, whereas "margin: auto;" centers the DIV itself. This is why margin: auto; when used by itself appears not to work (except in Gecko, see below).

Since we've not given the DIV a specific width, it uses the entire window for its width and centers the DIV within it. The effect is noticeable when we set the div's width to, say, 250px. Unfortunately, in the Windows world, only the Gecko-based browsers get this right.

Either way, for the text *inside* the div to also be centered, and we have to add back in the text-align.

To see what I mean, compare this code in IE, Opera or NN4, to the correct behavior in Netscape 6, 7, or Mozilla 1. Gecko correctly centers the div, leaving the text within it flush left.

<html>
<head>
<style type="text/css">
.alignCenter {margin: auto;}
</style>
</head>
<body>
<div class="alignCenter" style="width: 250px;">
<h1>An Introduction to Gravity Probe B</h1>
<br>
<h2>Examining The Fundamental Structure<br>of the Universe</h2>
<br>
</div>
</body>
</html>

The best solution to avoid the differences in handling the centering of divs, is remove it entirely and substitute this style block:

<style type="text/css">
H1, H2 {text-align: center;}
</style>

This works the same in them all.


"the most incredible feats are often accomplished by
those who have had the most incredible challenges"

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 08-23-2002 12:35

I think brucew's answer is probably the best for what you want. My favourite CSS centring advice is here:
http://bluerobot.com/web/css/center1.html

___________________
Emps

FAQs: Emperor

Dufty
Paranoid (IV) Inmate

From: Where I'm from isn't where I'm at!
Insane since: Jun 2002

posted posted 08-23-2002 14:18

Call me old fashioned but what's wrong with the following:

<H1 class="yourClass" align="Center">Text here</H1>
<H2 class="yourOtherClass" align="Center">Text here</H2>

brucew
Paranoid (IV) Inmate

From: North Coast of America
Insane since: Dec 2001

posted posted 08-23-2002 14:53

Okay. You're old fashioned.

Still, there's nothing wrong with your approach either.

"the most incredible feats are often accomplished by
those who have had the most incredible challenges"

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-23-2002 17:48

::falls over at all the replies:: Thanks peoples!! On Friday's no one starts to actually work (except maybe my cube-mate) before the 10 am breakfast of bagels lovingly provided by the lab, SO since it's only 8:46 am...I'll do this later hehe. I'll come back and let ya know how it goes.

As for using <align=center> well, advice I was given in a previous thread was to use the CSS stuff instead...so I did. Hehe. :-p

PS: the reason I used the </p> up there was because I WAS using a <p > beginning to something in my original code : oints up::: and was ending it w/ the </p>

Ladida! Huggles peoples! I'm so glad it's friday! THAT MEANS I GET TO SLEEP IN TOMORROW!! I don't think I'll wake up until 7!! YAY!!! (I usually get up at 5:30 so gimmie a break peoples hehe)

Genevieve Hokanson
Student Intern, GPB
http://einstein.stanford.edu
http://www.geocities.com/genevievescu/

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-23-2002 18:16

I don't want to work and still....I can't pull myself away from this stuff so I'm back and yes, I haven't had the bagel's yet ^_^

Okay.

Slime: You were right. When I applied color:red; font-size:100px; like you said, absolutely nothing happened. Yes, the <!Doctype> thing IS the very first line.

AND everything is indexed by at least 10px, some 20... (on the left side). Anywho, it's not on the webbie yet, but I'll add it to my geocities page and get back to you on the link. Just note, it's very rough. I'm trying to get all the text to work before I add pics and bgs and stuff like that. This is all a pre-made booklet that I'm making pages of so I'm trying to get the format to match exactly the actual booklet so people can print it and get a fairly complimentary page. Does that make sense?

BRB w/ the link.

[edit: Here we go! http://www.geocities.com/genevievescu/Page5.html Interesting note: For some reason Geocities didn't upload the <!Doctype> line. Hmm...I'll have to readd it. Give it a moment. Thanks Slime!! Other posts after Slimes, I'll read in a few min...]

Genevieve Hokanson
Student Intern, GPB http://einstein.stanford.edu http://www.geocities.com/genevievescu/

[This message has been edited by Genevieve (edited 08-23-2002).]

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-23-2002 18:27

Okay Bruce. Just read your note. Question: Can you give me the rest of that code used? I mean, I see what needs to be w/in the <style> things, but then how do I USE it?

Thanks!

Genevieve Hokanson
Student Intern, GPB
http://einstein.stanford.edu
http://www.geocities.com/genevievescu/

brucew
Paranoid (IV) Inmate

From: North Coast of America
Insane since: Dec 2001

posted posted 08-24-2002 00:26

I'll go one better: http://www.brucew.com/ozone/Page5.html

Before we look at the style block, note the changes I made to the code.

- All the divs are gone.
- P tags are enclosing only their relevant paragraphs.
- All text is within a structural container of some sort -- headline, paragraph or list items -- this includes the <br> tags, (although technically they can stand on their own).
- You have an Ordered List in there. So I used the specific tags for that structural element. The list itself is contained between OL tags (Ordered List). Each item in the list is contained within LI (List Item) tags. This structure supplies the numbers and indent for each item. There are variations on this theme for different numbering shemes or, for a bullet list, where you'd use UL instead of OL.

Okay. Now the styling.

Following your cues, I gave the entire page body a 10px margin. I centered the headlines. (Styles can be applied to multiple elements. Just separate the elements with commas.) Finally, like you, I prefer a "double-space" between list items, so I added some margin to the bottom of them. (The bottom margin of the last list item overlaps teh top margin of the following paragraph, thus, no extra white space there.)

This code now validates, which basically means that not only does it display properly (as yours did) it is coded "according to Hoyle." Think of it as a spelling and grammar quality check for your code.

N'est pas?

By the way, it's nice to see you're pursuing the web's original design intention -- publishing physics papers. How retro!

Everything else that's come since then is simply, "Oh yeah. You can do that with it too."

Hope this helps!

"the most incredible feats are often accomplished by
those who have had the most incredible challenges"

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-26-2002 20:30

Bruce,

Thanks so much for your help! I'll be checking that out and learning ^_^ Yay!! I love that. BTW: hehe. I actually work for a Physics project for NASA at the moment. There's a lotta cool stuff if you're interested, and what I'm putting up is an html version of one of our education pamphlets. Check out the webbie listed in my sig if you're interested. I know nothing about Physics but still find the whole project quite facinating.

Well toodles! Thanks for all your help everyone!! I'm just so glad I found this place!! ^^ Fun and informative...my kinda board.

Genevieve Hokanson
Student Intern, GPB
http://einstein.stanford.edu
http://www.geocities.com/genevievescu/

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-26-2002 21:08

So I just looked it over and it looks great! Thank you so much for your help! I do have a question though. I've seen this "verified" thing around a few times. How do you make sure you have a verified page? What does it look for? Thanks so much once again!!!

Genevieve Hokanson
Student Intern, GPB
http://einstein.stanford.edu
http://www.geocities.com/genevievescu/

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 08-26-2002 21:27

Do you mean "validation"?
http://validator.w3.org is a good starting place. The CSS validator is somewhere else. It basically makes sure that your page conforms to the specification for whatever language it's written in, and that you wrote it correctly without using any 3rd party "extensions."

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-26-2002 21:34

Thanks Slime : okes herself:: That's exactly what I meant. : okes herself again, sets to writing validate 100 times on the chalk board:::


Validate validate validate validate....

{Petskull Edit} ...slimies...


Genevieve Hokanson
Student Intern, GPB
http://einstein.stanford.edu
http://www.geocities.com/genevievescu/

[This message has been edited by Petskull (edited 08-27-2002).]

Petskull
Maniac (V) Mad Scientist

From: 127 Halcyon Road, Marenia, Atlantis
Insane since: Aug 2000

posted posted 08-27-2002 01:15

don't host your sigs with Geocities...

see http://faq.ozoneasylum.com/238 and http://faq.ozoneasylum.com/244 for details

btw, Genevieve... you gotta do something about your site..


Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342

[This message has been edited by Petskull (edited 08-27-2002).]

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 08-27-2002 01:42

Points down at the 'Site Reviews' link in sig

___________________
Emps

FAQs: Emperor

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-27-2002 17:20

:: pokes them both:: I know my site really sucks. That was a given. I haven't done anything with it in almost two years except add a few links here and there and change my sig. Now that I'm learning more I'll be doing stuff once I have more time. But I'm not exactly the most creative person on the planet.... so don't expect much lol.

But...if it helps any, the site was created originally my freshman year of college....and I'm a junior now. So. hehehe.

So... ::: pokes again::: I'll get the "site review" once I have more than a half-assed site, k?

Genevieve Hokanson
Student Intern, GPB
http://einstein.stanford.edu http://www.geocities.com/genevievescu/

Petskull
Maniac (V) Mad Scientist

From: 127 Halcyon Road, Marenia, Atlantis
Insane since: Aug 2000

posted posted 08-27-2002 20:21

read.
http://www.webmasterbase.com/subcats/49


Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

posted posted 08-27-2002 23:00

Oh, neato! ^_^ ::jumps up and down:: Lots of fun links for me to look at on that page! My friend Danny, who's good at art and stuff, said he might be able to help me out with that aspect, and I've been reading w3school's info on xhtml and how to get your site right. Just reading the html portion made me change a huge chunk of what I've been doing for work because my original teacher (ya, I did take a class my freshman year of college...thus the site was first created) sucked. lol. She didn't tell us a lot of this stuff, like closing paragraphs and junk like that.

I can't wait to get started...unfortunately, that has to wait until after work. It's gonna be a while coming too because school starts soon and that's always busy-busy....and I have an idea of what I want design-wise already so I'll be working on it and won't put it up until I need feedback..from all of you guys of course hehe.

Thanks so much everyone!! You're awesome!

Genevieve Hokanson
Student Intern, GPB
http://einstein.stanford.edu
http://www.geocities.com/genevievescu/

« BackwardsOnwards »

Show Forum Drop Down Menu