I Need Help! CSS has my Brain Twisted into a Pretzel. (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

RemodelingGuy -> I Need Help! CSS has my Brain Twisted into a Pretzel. (1/14/2004 14:17:48)

I'm using Verdana, Arial and Tahoma fonts.

Want to place a CSS in the code, but everytime I do what the short courses and literature tel me to do, my site goes south!

HELP!

Jimmy



ellipisces -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/14/2004 14:36:49)

post some code or a URL and we'll see what's going on...



RemodelingGuy -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/14/2004 14:42:16)

quote:

ORIGINAL: ellipisces

post some code or a URL and we'll see what's going on...



OOPS! [8|]

http://www.StartRemodeling.com

Thanks! I get in those whiny modes and forget my own name - lol



bobby -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/15/2004 13:15:53)

If you want to use three different font families on the site at the same time, you need to define a class for the P tag

Basically, the one you use the most can be assigned to P like this:

p {
font-family: Tahoma;
}

Then you would use a class for the other two:

p.oompa {
font-family: Arial;
}

p.loompa {
font-family: Verdana;
}

Then you simply use <p> for Tahoma, <p class="oompa"> for Arial, and <p class="loompa"> for Verdana in your page HTML.

Does that help?



Peppergal -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/15/2004 16:38:26)

quote:

If you want to use three different font families on the site at the same time, you need to define a class for the P tag

Basically, the one you use the most can be assigned to P like this:

p {
font-family: Tahoma;
}


Can't he just do this:

p {
font-family: verdana, arial, tahoma, sans-serif;
}

That's what I do....

I like the title to this thread. LOL Been there, felt the same way!



gorilla -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/15/2004 16:50:02)

Actually you're far better off declaring all your fonts at the start of your style sheet like this:

* {
font: Verdana, Arial, Tahoma, sans-serif;
}


And then applying fonts or a differnt font order to anything below that as needed.

The one caveat is IE has an infuriating bug where it does not cascade the font down into the <td> element so if you're using tables you need a fix.

The fix is:

* , td {
font: Verdana, Arial, Tahoma, sans-serif; sans-serif;
}

or to explicitly declare the properties for the td element. :

td {
font: Verdana, Arial, Tahoma, sans-serif;
}

It's a good idea to set the font metrics at the same time btw.

Mhaircaish



c1sissy -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 7:06:32)

quote:

It's a good idea to set the font metrics at the same time btw.


Also if you are grouping your font sizes along with your font families, don't forget that there is an order for doing so. You need to declaire the font size etc.. before you declaire the font family.



Peppergal -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 9:13:54)

quote:

You need to declaire the font size etc.. before you declaire the font family.


Wow. Learn something new every time I visit this board! LOL. I had no idea!?! Now, wondering...

I have learned to eliminate "Vertical-align: Top" from my styles...it really makes it look weird in Mozilla, and since it will start at the top by default, I guess it's rather a redundant command, anyway.



Giomanach -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 9:15:32)

quote:

You need to declaire the font size etc.. before you declaire the font family.


I don't, oops, and you checked through one of my stylesheets for me!!! [:D]



c1sissy -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 9:42:14)

Dan, and Peppergal,
I'll post later what I have been reading about it. If I take it right from the source, then I know that I have it correct.

dan, tired eyes looking at your code, lol



Giomanach -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 9:46:06)

quote:

ORIGINAL: c1sissy
dan, tired eyes looking at your code, lol

Get some sleep then Mom, you need it, now back to sorting out these friggin div layers [:D][:D]



RemodelingGuy -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 10:03:26)

quote:

ORIGINAL: Peppergal

quote:

If you want to use three different font families on the site at the same time, you need to define a class for the P tag

Basically, the one you use the most can be assigned to P like this:

p {
font-family: Tahoma;
}


Can't he just do this:

p {
font-family: verdana, arial, tahoma, sans-serif;
}

That's what I do....

I like the title to this thread. LOL Been there, felt the same way!


Sounds simple!

Now where in the world would I put it. What will it do for me and why am I told I need it?

[X(]



RemodelingGuy -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 10:04:12)

quote:

ORIGINAL: gorilla

Actually you're far better off declaring all your fonts at the start of your style sheet like this:

* {
font: Verdana, Arial, Tahoma, sans-serif;
}


And then applying fonts or a differnt font order to anything below that as needed.

The one caveat is IE has an infuriating bug where it does not cascade the font down into the <td> element so if you're using tables you need a fix.

The fix is:

* , td {
font: Verdana, Arial, Tahoma, sans-serif; sans-serif;
}

or to explicitly declare the properties for the td element. :

td {
font: Verdana, Arial, Tahoma, sans-serif;
}

It's a good idea to set the font metrics at the same time btw.

Mhaircaish


You're killing me!



RemodelingGuy -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 10:07:56)

Oh Yeah!

Can I pay someone to do it for me?

Does it have to be done on all 2000 pages?

Is my left ear lower than my right? :)

- Jimmy



Giomanach -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 10:10:03)

create an external stylesheet, make it something like this (this is mine, there are errors but anyway): 

body, th, td{
	background: #003A22;
	font-family: Verdana, Tahoma, Arial;
	font-size: 12px;
	color: #FFFFFF;
}

a:link{
	font: bold;
	color: #FFFFFF;
	text-decoration: none;
}

a:visited{
	font: bold;
	color: #FFFFFF;
	text-decoration: none;
}

a:hover{
	font: bold, italics;
	color: #00F0FF;
	text-decoration: underline;
}

.content{
	position: absolute;
	padding: 0px 0px 0px 0px;
	margin: 0px 50px 0px 5px;
	width: 700px;
}

.sectionlinks{
	position: relative;
	float: left;
	width: 100px;
}

.sectionlinks a:link{
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	padding: 1px 0px 1px 10px
	background: #003A22;
	display: block;
}

.sectionlinks a:visited{
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	padding: 1px 0px 1px 10px;
	background: #003A22;
	display: block;
}

.sectionlinks a:hover{
	border-top: 1px solid #003A22;
	border-bottom: 1px solid #003A22;
	padding: 1px 0px 1px 10px;
	background: #FFFFFF;
	color: #003A22;
	text-decoration: none;
}

.top{
	font-size: 16px;
}

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}


ul ul ul{
 list-style-type: none;
}
.footer{
	position: absolute;
	bottom: 10px;
	right: 5px;
}


call it whatever.css

then in the <head> tag of every page put: 

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


Simple, or is it?



Peppergal -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 10:10:13)

You put it in your style sheet (I'm assuming you're using a seperate style sheet and linking to it - an external sheet?)

The reason you need it is to control the font display. If you don't declare a font, each person's browser will show their default font, usually Times New Roman. Most people don't know that they can control that stuff , so they leave their browsers at their default settings.

Using several different -but similar- fonts ensures that you can get them "all covered." Not all browsers have Tahoma installed...so if you declare only Tahoma, and they don't have it, the browser will display the default font. Not all have Verdana, or helvetica, or arial...so then, you just put "sans-serif" and that will have the browser choose it's default sans serif font...instead of Times.

Clear as mud?



RemodelingGuy -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 10:42:48)

quote:

ORIGINAL: Giomanach

create an external stylesheet, make it something like this (this is mine, there are errors but anyway): 

body, th, td{
	background: #003A22;
	font-family: Verdana, Tahoma, Arial;
	font-size: 12px;
	color: #FFFFFF;
}

a:link{
	font: bold;
	color: #FFFFFF;
	text-decoration: none;
}

a:visited{
	font: bold;
	color: #FFFFFF;
	text-decoration: none;
}

a:hover{
	font: bold, italics;
	color: #00F0FF;
	text-decoration: underline;
}

.content{
	position: absolute;
	padding: 0px 0px 0px 0px;
	margin: 0px 50px 0px 5px;
	width: 700px;
}

.sectionlinks{
	position: relative;
	float: left;
	width: 100px;
}

.sectionlinks a:link{
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	padding: 1px 0px 1px 10px
	background: #003A22;
	display: block;
}

.sectionlinks a:visited{
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	padding: 1px 0px 1px 10px;
	background: #003A22;
	display: block;
}

.sectionlinks a:hover{
	border-top: 1px solid #003A22;
	border-bottom: 1px solid #003A22;
	padding: 1px 0px 1px 10px;
	background: #FFFFFF;
	color: #003A22;
	text-decoration: none;
}

.top{
	font-size: 16px;
}

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}


ul ul ul{
 list-style-type: none;
}
.footer{
	position: absolute;
	bottom: 10px;
	right: 5px;
}


call it whatever.css

then in the <head> tag of every page put: 

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


Simple, or is it?


You're Killing me! This stuff is SIMPLE once you figure out WTF you are doing.

Am i RIGHT?



Giomanach -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 10:45:33)

You don't do hard coding then?



RemodelingGuy -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 10:54:11)

quote:

ORIGINAL: Giomanach

You don't do hard coding then?


I do FRONT PAGE



Giomanach -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 10:55:04)

Oh Boy lol. What version of FP?



c1sissy -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 10:58:27)

quote:


1.Sounds simple!

2.Now where in the world would I put it. What will it do for me and why am I told I need it?


1. Remodeling Guy, Css is simple! If you look at the css links in the forum here you will find tons of information.

2. Why would you need it?
First of all, large savings on bandwidth.
Next, site design easier. One style sheet linked and you have all your pages designed with this. Need to do changes to your large site? Just change the style sheet.

CSS is about seperating style and content. Do your content of the site first, then do your styles.

quote:

You're Killing me! This stuff is SIMPLE once you figure out WTF you are doing.

Am i RIGHT?

Trust me, you are not going to get far if you act like this [;)]

Patience is the virtue of life[;)]

If I can do this, someone who is teaching herself all of this web design stuff through tutorials online, then I am sure that you can do this.

Also, I can't stress enough to use xhtml. Pay attention to standards and being compliant. In the long run it will benefit you. Also use the valadation services that are out there. they also help you to learn.

If you are interested in books, let me know and I'll send you a list of books that are great for learning.



Giomanach -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 11:05:24)

quote:

If I can do this, someone who is teaching herself all of this web design stuff through tutorials online, then I am sure that you can do this.


With a little help from me and Mhaircaish lol. Jimmy, before I started using this forum, I knew nothing bout CSS, I formatted my pages the old, hard way. Trust me, and the rest of us, if you want it to be easy, learn CSS, it's makes formatting a whole site structure easy.

I gave that CSS coding for you to use, if you don't take, tough luck. Due to CSS my web design capabilities have gone from this to this. With a few tips picked up here and ther, I have dramamtically increased in skills. I also hard code. So if you refuse to learn what we give you, your loss, your just makeing life hard for yourself.

I sound older than you there Mom lol

<edit> First site is for a friend she asked me to do it for her, Second one is in production stages</edit>



RemodelingGuy -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 11:18:13)

quote:

ORIGINAL: c1sissy

quote:


1.Sounds simple!

2.Now where in the world would I put it. What will it do for me and why am I told I need it?


1. Remodeling Guy, Css is simple! If you look at the css links in the forum here you will find tons of information.

2. Why would you need it?
First of all, large savings on bandwidth.
Next, site design easier. One style sheet linked and you have all your pages designed with this. Need to do changes to your large site? Just change the style sheet.

CSS is about seperating style and content. Do your content of the site first, then do your styles.

quote:

You're Killing me! This stuff is SIMPLE once you figure out WTF you are doing.

Am i RIGHT?

Trust me, you are not going to get far if you act like this [;)]

Patience is the virtue of life[;)]

If I can do this, someone who is teaching herself all of this web design stuff through tutorials online, then I am sure that you can do this.

Also, I can't stress enough to use xhtml. Pay attention to standards and being compliant. In the long run it will benefit you. Also use the valadation services that are out there. they also help you to learn.

If you are interested in books, let me know and I'll send you a list of books that are great for learning.



You're gonna make a Grown man Cry!



Giomanach -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 11:19:52)

I forgot the mention, mind your language, there's kids present [:)][:D]



RemodelingGuy -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 11:21:54)

quote:

ORIGINAL: Peppergal

You put it in your style sheet (I'm assuming you're using a seperate style sheet and linking to it - an external sheet?)

The reason you need it is to control the font display. If you don't declare a font, each person's browser will show their default font, usually Times New Roman. Most people don't know that they can control that stuff , so they leave their browsers at their default settings.

Using several different -but similar- fonts ensures that you can get them "all covered." Not all browsers have Tahoma installed...so if you declare only Tahoma, and they don't have it, the browser will display the default font. Not all have Verdana, or helvetica, or arial...so then, you just put "sans-serif" and that will have the browser choose it's default sans serif font...instead of Times.

Clear as mud?


I get that!

I've been on pooters that show the site really FUGLY>

Where do i enter the code and how do I change fonts on demand?

Do i have to edit myhtml every time I change font styles?????



Giomanach -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 11:23:22)

If you use an external style sheet then all you need to edit is the font-family coding, and it will change the font all over the site. See why it's so easy to use external ones?



bobby -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 13:17:54)

quote:

Can't he just do this:

p {
font-family: verdana, arial, tahoma, sans-serif;
}


This tells the browser to select Verdana font for all P tags, if the visitor doesn't have it loaded it will move to Arial, then Tahoma. If they don't have any of those installed it will select the default sans-sarif font.

This does not allow you to chose which of the fonts to display... in order to declare multiple fonts (or use more than one) you have to declare each one seperately via a class or id.

Hope that clarifies...



RemodelingGuy -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 13:24:59)

quote:

ORIGINAL: bobby

quote:

Can't he just do this:

p {
font-family: verdana, arial, tahoma, sans-serif;
}


This tells the browser to select Verdana font for all P tags, if the visitor doesn't have it loaded it will move to Arial, then Tahoma. If they don't have any of those installed it will select the default sans-sarif font.

This does not allow you to chose which of the fonts to display... in order to declare multiple fonts (or use more than one) you have to declare each one seperately via a class or id.

Hope that clarifies...



I was under the impressiojn that VERDANAQ, ARIAL and TAHOMA were in the same "family' .

c\COULD YOU please TELL how to put this CSS into my HTML.



bobby -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 13:40:56)

Check this out, see if it's helpful:

http://www.w3schools.com/css/css_howto.asp



c1sissy -> RE: I Need Help! CSS has my Brain Twisted into a Pretzel. (1/16/2004 13:57:46)

Also try HERE this is an excellent tutorial. I find that this guy teaches really good. I took the advanced and learned a ton of things from this site.

bobbys is a excellent one as well.

Best advice I can give you right now, Don't rush it, learn it. We are here to help guide you as you learn this. It is not hard to learn, but you have to understand the concept of CSS as well as learn how to do this. And use the validation to make sure that you have this validated well.

Look through the homework thread that is in here, you'll find some helpful things in there as well.

And stay calm as you learn. Don't get upset or use some language that is not appropriate for this forum.[;)]



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.1411133