Closed Thread Icon

Preserved Topic: Text that does not change size????? (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=15342" title="Pages that link to Preserved Topic: Text that does not change size????? (Page 1 of 1)" rel="nofollow" >Preserved Topic: Text that does not change size????? <span class="small">(Page 1 of 1)</span>\

 
TheTrixter
Bipolar (III) Inmate

From: Derbyshire, UK
Insane since: Jul 2000

posted posted 08-11-2000 12:36

Hi guys, it's me again. Something that has only just occurred to me when building a site the other day. How do you set the size of text so that it will NOT change when people using IE5 for example change the text size (small, medium, large etc.) This is messing up my design because if text is viewed in large it becomes too big and does not fit in with the background. I tried specifiying the pt size of the text but that does not seem to have made any difference.
Any help would be appreciated.



[This message has been edited by TheTrixter (edited 11-08-2000).]

DocOzone
Maniac (V) Lord Mad Scientist
Sovereign of all the lands Ozone and just beyond that little green line over there...

From: Stockholm, Sweden
Insane since: Mar 1994

posted posted 08-11-2000 18:28

OK; I do this all the time, and it does piss off some folks who prefer their text big as c*****n, due to execcively high resolution on their dinky monitors! You're already specifying text as pt, right, like in "10pt", "11pt", etc... "pt" which is "points" is an old printing standard, that equals approximately an inch. 72 points equal an inch, which is where the 72dpi standard came from, I would think. Microsoft, in their infinite wisdom, decided that 96 pixels would make a great inch, which is why most Mac designeers end up hating Windows for screwing up their beautiful designs! Use the "px" measure instead, which is "px" for "pixels"! You may have to get uysed to bigger nukmbers if you're working on windows, but you can get a font size that is not adjustable in either Netscape or Windows, and will work on both Macs and PCs. Good stuff, IMHO.

Your pal, -doc-

mikey milker
Paranoid (IV) Mad Scientist

From:
Insane since: Apr 2000

posted posted 08-11-2000 23:11

hey there doc...

i just now tried switching my fonts over to use "px" but i'm not really having any luck. first i wanted a smaller text that i usually set with <font size=-1>.. i had to use "1px" to get it the same size though, and i'm noticing your small text on the page is "10px."

plus. when i use the netscape command to resize text, it does change the size for me.. i noticed on your forum that the text always remains the same size within posts by people, how do you do this?

here's an example of the code i was trying to use.. maybe i screwed it up.

div align="center" style="position:absolute; top:640px; left:245px">
<font size=1px face=arial>

- All contents copyright ©2000 by mister mikey milker. -

</font>
</div>


cheers.mikey.milker





jiblet
Paranoid (IV) Inmate

From: Minneapolis, MN, USA
Insane since: May 2000

posted posted 08-11-2000 23:43

Argh, how embarassing, i just posted a big message about how I discovered this by looking at the forum source in the Cross-browser issue section.

I guess it's only fitting that Doc would post the message just hours earlier since his code was what allowed me to make the discovery.

Oh, BTW mikey, px is a CSS standard. So you'll have to learn style sheets. It's not hard though. I'd suggest just looking at the source for these forum pages to start. Or go to http://www.webdeveloper.com and look for the link to CSS info, it's under Advanced HTML on the right side menu bar I believe.

[This message has been edited by jiblet (edited 11-08-2000).]

TheTrixter
Bipolar (III) Inmate

From: Derbyshire, UK
Insane since: Jul 2000

posted posted 08-12-2000 13:30

Okay! Once again Doc comes to the rescue of us mere mortals. I will be giving that a go later today, thank Doc, (and everyone else)

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 08-12-2000 18:54

Yeah, mikey, the px thign doesn't work for the <font> tag....bummer. CSS is the way to go for stuff like that anyway <img border=0 align=absmiddle src="http://www.ozones.com/forum/biggrin.gif">

mikey milker
Paranoid (IV) Mad Scientist

From:
Insane since: Apr 2000

posted posted 08-12-2000 19:13

i got it working pretty easy, i just whipped this up and now i throw it before any text i want.

<font style="font-family: Arial,Helvetica,Verdana; font-size: 10px">

woohoo!

</font>

and it works beautifully =)

cheers.mikey.milker





bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 08-13-2000 00:19

Mikey,

Does that work in Netscape?


Walking the Earth like Kane

DarkGarden
Paranoid (IV) Inmate

From: in media rea
Insane since: Jul 2000

posted posted 08-13-2000 01:07

The method Mikey used is cross browser, and cross platform....but it could be cleaner. <img border=0 align=absmiddle src="http://www.ozones.com/forum/wink.gif">

The best way to set style tags that you'll use multiple times, is either in the head, defining a class, or in a reference .css file so that you can use the same style for your entire site.

EXAMPLES:------------------

In between your <head> </head> tags, inserting your styles saves you from using "inline" styles over and over through the document (pesky <font> tags everywhere are ugly, and tend to smear if left unclosed). So we try defining in the head, instead.

For this example, we'll define our style for the <p> tag (we are all formatting in paragraphs right?..hehe) So in the head area, we put:

code:
<style type="text/css">
<!--
p { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FF6633}
-->
</style>


ALWAYS set the style type first, then comment tagging for older browsers and then the style setup. For this style, we start with the tag, or class being defined (p) then our open bracket, the font face we want to use (always choose a PC and a MAC face just to be sure, and then add the font family type). Then we set our font size, and colour (simple to see how to break each style command).

Now, what all that will do, is make any and all text within the <p> tags on your page adhere to those style properties (as mentioned ad nauseum lately, always use px instead of pt for size...ask Doc why..hehehe)

BUT WHAT IF MIKEY DOESN'T WANT TO USE THE STYLE ON EVERY PARAGRAPH?

Well then, he can set a distinct "class" for styles.

Setting a class is simple, it's the creation of a non standard tag that you can throw into any normal tag (or span tag if none else are available where you want) that will cause the following text etc. to adhere to the set styles for that class, until you close the tag it's added to.

Confused?..good...just look here. We'll set a special .mikey class (custom classes always start with a . in front in the styles, but are referenced on the page without it):

code:
<style type="text/css">
<!--
.mikey { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px}
-->
</style>



Now, on the page, anywhere that you want to use your custom "mikey" class, you just use:
<anytag class="mikey">TEXT HERE</anytag>
Of course, "anytag" is...well..any tag <img border=0 align=absmiddle src="http://www.ozones.com/forum/biggrin.gif">

Want to have multiple style references? Just set them together in the head.

code:
<style type="text/css">
<!--
p { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FF6633}
.mikey { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px}
-->
</style>



And once you've wrapped your brain around that concept, you can expand it to referenced .css files.

Let's say you like the styles for your <p> tag, and your custom "mikey" class so much...that you want to use them on your entire website. However, your keen Batman-like mind realizes that if you want to change the style colour sometime, you'll be hacking away at every single page to change one little line. Au Contraire Boy(Girl) Wonder! Use a referenced .css file that has all your styles already in place.

Create a file with all your style definitions. Just a notepad file that has:

code:
p {  font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FF6633}
.mikey { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px}


in it.

Name it "styles.css" or..since we're picking on him..hehe "milker.css". Save it wherever you want on your site, and now, just a simple line of reference to it in each page head.

<link rel=stylesheet href="milker.css" type="text/css">

Just that simple. Now when you have a paragraph on any page it will set the <p> tag styles...or if you want it to have the "mikey" class styles, just set the class="mikey" in place.

Hope that helps a little guys..it's fast and dirty for an explanation, but maybe it will give that little bit of starter knowledge. I'll try and hunt up a couple good links for all the style definitions that you can have (text decoration, fixed backgrounds, borders, indents etc.) so there's more for you to go on than just font styles and sizes.

Peter



ICQ:# 10237808

[This message has been edited by DarkGarden (edited 13-08-2000).]

Dan
Paranoid (IV) Mad Scientist

From: Calgary, Alberta, Canada
Insane since: Apr 2000

posted posted 08-13-2000 01:20

Thanks DG! I haven't ran into that problem yet, but that post taught me a HELL OF A LOT.

Absolutely awesome!

- Dan -

DarkGarden
Paranoid (IV) Inmate

From: in media rea
Insane since: Jul 2000

posted posted 08-13-2000 01:31

Dan:
Glad it helps <img border=0 align=absmiddle src="http://www.ozones.com/forum/biggrin.gif">

by the way..what's with the missing "a" in Cowtown, under your handle, anyway?

heh


ANNOUNCEMENT:
____________________________________
I'd like to take this time to urge everyone to ask Doc in individual topics, the reasoning behind using px instead of pt in your styles.

Feel free to post it in every random forum as well. He loves it.

~cough~

~runs~


Peter



ICQ:# 10237808

Dan
Paranoid (IV) Mad Scientist

From: Calgary, Alberta, Canada
Insane since: Apr 2000

posted posted 08-13-2000 01:36

Holy F*cking Cow.. When did the 'a' disapear?
I'm sure I've looked at that a billion times, and never noticed it missing before. Hmmph. I think I fixed it now though. Thanks again man <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">

- Dan -

DocOzone
Maniac (V) Lord Mad Scientist
Sovereign of all the lands Ozone and just beyond that little green line over there...

From: Stockholm, Sweden
Insane since: Mar 1994

posted posted 08-13-2000 13:04

Yes, I must point out that there are several threads that still do not properly address the pixel versus point controversy! That was a weird noght, I'd go away, do different things, and here'd be that post again, didn't I just answer this? To reiterate one more time, pixels are better than points. Please read throughout the forum, I'm sure I've mentioned the thoughts behind this assertion someplace around here! <g>

Your pal, -doc-

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

posted posted 08-13-2000 16:22

I think DG just volunteered to write a CSS tutorial! <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">

Pat Richard
Web weenie
http://www.gurusnetwork.com
ICQ 23113317

mikey milker
Paranoid (IV) Mad Scientist

From:
Insane since: Apr 2000

posted posted 08-13-2000 19:42

good god peter.. that's insanity!

"The method Mikey used is cross browser, and cross platform....but it could be cleaner."

so on that note.. i can technically ignore your 5 page post and keep doing it my way, hahaha ;P

i have a nagging feeling that i should print out this page for future reference, but i'm.. uuhhh... lazy.

cheers.mikey.milker





DarkGarden
Paranoid (IV) Inmate

From: in media rea
Insane since: Jul 2000

posted posted 08-13-2000 20:39

~looks around~

Uh...like an alcoholic...I had a "moment of clarity" which is the only reason I knew anything about CSS for just those two minutes it took to write that post....

Not buying it huh? Demmit. I'll see about writing a tut when I have spare time. So glad you're back Pugz... <img border=0 align=absmiddle src="http://www.ozones.com/forum/tongue.gif"> hehe

MIKEY: Yes print it out dammit. <img border=0 align=absmiddle src="http://www.ozones.com/forum/wink.gif"> Look at it like this, if you wanted to use the pixel sizing and font face for almost all the text on an entire site, by using the methods I laid out for you, you could accomplish it by writing only one line of styles, and one line of lin code on each page, instead of hundreds of lines using archaic <font> tags.

Now get with the program boy....that five page post is going to let you be EVEN LAZIER. See that? Isn't that nice? Now thank uncle DarkGarden...ungrateful b*****d.

<img border=0 align=absmiddle src="http://www.ozones.com/forum/tongue.gif">...hehehehe


Peter



ICQ:# 10237808

[This message has been edited by DarkGarden (edited 13-08-2000).]

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 08-13-2000 22:23

Actually,

My question was more along the lines that I was pretty sure all style info has to be in the head and then referenced by either tag, class, or id.

I know IE will allow you to put style information inside of tags and it will try to parse it however NN doesn't usually like this method.


Walking the Earth like Kane

DarkGarden
Paranoid (IV) Inmate

From: in media rea
Insane since: Jul 2000

posted posted 08-14-2000 00:10

bit:
Actually inline styles are allowed by both 4.X and above, browsers. Netscape just handles it poorly at times, as it also handles any type of CSS poorly in comparison to IE.

But referencing a subclass inline ultimately gives the same effect as typing the style inline itself. I just prefer cleaner code...hehe.


Peter



ICQ:# 10237808

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 08-14-2000 05:03

Yeah I just know I had a lot of problems using Style Sheet Positioning with in-line styles but I wasn't sure if it worked or not for stuff like font info (ergo the earlier question)

Anyway that is why I usually put all my style info in the top. I pretty much use CSS-P accross the board these days instead of large and un-wieldy tables. Of course that only works on my personal site. Professionally we need more cross-browser compatibility requiring annoying tables and archaic font tags.



Walking the Earth like Kane

« BackwardsOnwards »

Show Forum Drop Down Menu