CSS/Webpage Help

OK, I need some CSS help and i didn’t know where else to go. I am currently making a website using Macromedias Dreamweaver for my team and want to do the colored scroll bad (like the ones on here that are orange.) Well, i have NO idea where to start, and i tried copying code and i have no idea where to put it, I try reading texts and asking other people, and no one knows. If anyone can help me, please IM me on aim or just leave a message here, thanks!

-Dave

*Originally posted by Quain *
OK, I need some CSS help and i didn’t know where else to go. I am currently making a website using Macromedias Dreamweaver for my team and want to do the colored scroll bad (like the ones on here that are orange.)

Hi Dave,

I’ve played around with CSS just a little. Nothing fancy, but here is what I have. My CSS file (GWRBoard.css) contains the following:

body {
    background-image: url(/GWRBoard/space.jpg);
    background-color: #000033;
    font-family:Verdana, Arial;
    color: #FFFF33;
    font-size:small;
}

input {  font-family: "Courier New", Courier, mono; font-size: 10pt}

A:link {
    color: #33CC33;
}
A:visited {
    color: #99CC99;
}
A:hover	{
    color: #FF0033;
}

Then in the section of each page I have a line that says:

<LINK type="text/css" rel="stylesheet" href="GWRBoard.css">

If you take a look at the source for one of CD’s pages, you will see that they inline the CSS code inside the block on each page:


<style type="text/css">
BODY {
	scrollbar-face-color: #FF8800; 
	scrollbar-shadow-color: #FF6600; 
	scrollbar-highlight-color: #FF8800; 
	scrollbar-3dlight-color: #FF8800;
	scrollbar-darkshadow-color: #000000; 
	scrollbar-track-color: #dddddd; 
	scrollbar-arrow-color: #000000; }
SELECT {
	FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
	FONT-SIZE: 11px;
	COLOR: #000000;
	BACKGROUND-COLOR: #CFCFCF
}
TEXTAREA, .bginput {
	FONT-SIZE: 12px;
	FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
	COLOR: #000000;
	BACKGROUND-COLOR: #CFCFCF
}
#all A:link, #all A:visited, #all A:active {
	COLOR: #0000AA;
}
#all A:hover {
	COLOR: #FF8800;
}
#sitelink A:hover {
	COLOR: #FFFFFF;
}
#sitelink A:link {
	COLOR: #000000;
}
#cat A:link, #cat A:visited, #cat A:active {
	COLOR: #FF8800;
	TEXT-DECORATION: none;
}
#cat A:hover {
	COLOR: #FF8800;
	TEXT-DECORATION: underline;
}
#ltlink A:link, #ltlink A:visited, #ltlink A:active {
	COLOR: #0000AA;
	TEXT-DECORATION: none;
}
#ltlink A:hover {
	COLOR: #FF8800;
	TEXT-DECORATION: underline;
}
.thtcolor {
	COLOR: #000000;
}

#cdm {
	FONT-WEIGHT: bold;
	FONT-SIZE: 10px; 
	COLOR: #445669; 
	FONT-FAMILY: arial, helvetica, sans-serif; 
	TEXT-DECORATION: none
}
#cdm A.forummenu:link {
	FONT-WEIGHT: bold; 
	FONT-SIZE: 11px; 
	COLOR: #000000; 
	FONT-FAMILY: arial, helvetica, sans-serif; 
	TEXT-DECORATION: underline;
}
#cdm A.forummenu:visited {
	FONT-WEIGHT: bold; 
	FONT-SIZE: 11px; 
	COLOR: #000000; 
	FONT-FAMILY: arial, helvetica, sans-serif; 
	TEXT-DECORATION: underline;
}
#cdm A.forummenu:hover {
	FONT-WEIGHT: bold; 
	FONT-SIZE: 11px; 
	COLOR: #FFFFFF; 
	FONT-FAMILY: arial, helvetica, sans-serif; 
	TEXT-DECORATION: none
}
#cdm A.forummenu:active {
	FONT-WEIGHT: bold; 
	FONT-SIZE: 11px; 
	COLOR: #FFFFFF; 
	FONT-FAMILY: arial, helvetica, sans-serif; 
	TEXT-DECORATION: none
}
#hann {
	FONT-WEIGHT: bold;
	FONT-SIZE: 18px; 
	COLOR: #000000; 
	FONT-FAMILY: arial, helvetica, sans-serif; 
	TEXT-DECORATION: none
}

.nf { font-family: verdana, arial, helvetica, sans-serif; font-size: 10pt }
.sf { font-family: verdana, arial, helvetica, sans-serif; font-size: 10px }
.lf { font-family: verdana, arial, helvetica, sans-serif; font-size: 10pt; font-weight:bold }

</style>

You can do it either way, but I prefer the linked style sheet so if I decide to change my style, I only have to change it in one place.

Does that answer your question?

Yup. Thats how I would’ve answered.

You can get help on CSS at webmonkey.com (as well as HTML, JavaScript, and more)…

or dont hesitate to ask here, someone will know the answer :slight_smile:

http://www.hthsfury.org, just steal my source code and change the colors as you want them!

OK… so all u CSS Guru’s… i need some help… where wut i’m pasting into my html…


<style type="text/css">
BODY {
    scrollbar-face-color: #781276; 
    scrollbar-shadow-color: #FFFFFF; 
    scrollbar-highlight-color: #781276; 
    scrollbar-3dlight-color: #781276;
    scrollbar-darkshadow-color: #000000; 
    scrollbar-track-color: #56527A; 
    scrollbar-arrow-color: #000000; }

that makes it purpley and such, yea… grand… now… my problem is… I put it after the title and meta tags… and when its in there… it stops after it loads the scroll bar. It dosn’t load any of the content after that… I have no idea wut i did wrong? any suggestion…

If its easier, feel free to im me on the aim SN: SnoManX

did you close the style tag?

  </style> 

*Originally posted by Brandon Martus *
did you close the style tag?

That was going to be my guess too.:slight_smile:

hah… no… i’m a fool… but i’m learning… i forgot u gotta close stuff like that… thx guys… :smiley:

Alright… Can you link in the code for the scroll bar? My example code is below…


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

I got the link to work with other type of css such as the body and the headers… but not the scroll bar… i’m not sure if its possible?? shrug Not many sites are available to help with the scroll bar problems…

It should work the same way, with all CSS in the same file.

Only certain browsers support the scroll-bar modifications though.
I’m pretty sure older 4.x versions of Netscape do not support it, along with Macintosh browsers.

[weird, this is a reply to the post below … interesting how he posted in the future…]

it dosn’t work… I have NO idea why… i’ve heard it should work… but i don’t know… :mad:

*Originally posted by Quain *
**it dosn’t work… I have NO idea why… i’ve heard it should work… but i don’t know… :mad: **

The difference between linking an external stylesheet and inlining it is the <style> tag. You only need it if it is inlined.

If i have the style tag… it dosn’t work… if i don’t have the style tag, it dosn’t work. Heres the exact process i’m doing…

-I’m making it in Macromedias Dreamweaver 4. It has a CSS tab… i import the file as a Link Rel and the file only describes the scroll bar colors. The colors don’t change… they stay normal. I took the code from another site and changed it to my specs… my paths. .etc… and it still dosn’t work… Tho… if i paste the code inline, it works fine… shrug

post a link and I’ll take a look at it…

it’ll be easier to help with something to look at

alright… i’ll try and get one soon… I unfortunately can’t upload to our normal comp server… sigh but i’m workin on it… thx in advance for helping…

OK… On your site, www.pubarso.com, you have the box in the middle… It isn’t a frame… i think… i think u did it with CSS… i’m currently trying to do that with another site i’m making… (which currently isn’t uploaded either.) Umm, how did you place that? I read the section on webmonkey.com but it didn’t help too much. Thx…

I think what you’re talking about are IFRAMEs. They are basically framed windows nestled within a normal web page layout. IFRAME stands for Inline Frame (kind of like inline images).

The W3C specification is here: Inline frames: the IFRAME element. If you prefer something not as dry as the W3C specs, here is an article from Webmonkey that you might enjoy reading: The IFrames lowdown.

Yes.

older Netscape does not support IFRAME though, so … try to visit pubarso.com with Netscape, and you’ll get booted to a “sorry, use a newer browser” message.

Yes, I lose a little traffic, but not enough that I care enough to not use an IFRAME :slight_smile:

Ok, so what’s the difference between Iframe’s and layers inside of Dreamweaver? Or are they the same thing?

I know that with the Layers in DW… you can’t name them and you can’t load up an external html file like an IFrame… (or a regular frame.)