Basic CSS Style [Archive] - Lissa Explains it All: Web Design Forums

Incendio

05-05-2005, 03:16 PM

Hi there!

I was thinking about writing a Style CSS file for my website. But I don't know exactly what I need to include in order to get the style I want.

This is what I want:

A custom scrollbar
A custom Cursor
A font which will be the 'custom' font for all the text on the website
A common colour for all the text that goes on the site
A common colour for all the links
A background
A special link transition

That's all I can think of right now. Do you know what more goes into a CSS Style file?

This is how far I've comed.

<style type="text/css">


A{cursor:default;height:1px;behavior:url(link.htc) ;filter:progid:dximagetransform.microsoft.blinds(d uration=1)}
A:link{color:#000000; text-decoration:none;cursor:"default"}
A:visited{color:#000000;text-decoration:none;font-weight:none}
A:hover{color:#000000;text-decoration:none;background-color:none;font-weight:none;cursor:default}-->

</style>

Is that all correct? Will I now get all text in black, and in tahoma? Will I have a crosshair/help cursor?

The text that is in Sienna, that is for the link transition, which does not work. (http://www.lissaexplains.com/forum/showthread.php?t=74544)

MaGiCSuN

05-05-2005, 03:28 PM

there are a few errors in it:

<style type="text/css">


</style>

make sure
progid:dximagetransform.microsoft.blinds(duration= 1);
has no spaces in it, it has to be one big giant piece :)

Love,
Mirna

Incendio

05-05-2005, 04:12 PM

Thank you Mirna!

I copied your Css, but I'm still having a few problems.

This is what I use now. (I only changed the color of the text, and I took away the hover effect.)

<style type="text/css">


</style>

***

I'm still having problems. For one, the link transition doesn't want to work, and I have no idea why!

Then the help cursor doesn't work either. The crosshair cursor only works when I'm outside the Main IFRAME :confused:

Then, I'm having problem with the text. I thought, that if I specified in my CSS Style file that I wanted the font tahoma or whatever, # size, # color, i wouldn't have to write this everytime I write a something.

<font color="9E7687" face="tahoma"; size="1"> blablabla

Because if I don't include that above, my text'll shows up black ... :/

Check this site http://www.freewebs.com/hpkiddos2/la.htm and you'll see what I mean. The "DAn" text is a link.

Thanks :)

Incendio

05-05-2005, 04:37 PM

Again, sorry for the duble post.

But I'm having another problem. Now it's the IFRAME. In the IFRAME file, which is named main.html, I put this: <link rel="stylesheet" type="text/css" href="style.css">

Int he CSS file, I but # color as a background, but IN the IFRAME MAIN.HTML file, I did indeed link to the CSS; but ALSO used this

<BODY BGCOLOR=#C0A6B3>

Still , it wont change color, but takes the color that was stated in the CSS file.

What can I do ?

Monkey Bizzle

05-05-2005, 05:17 PM

there are still errors in your CSS... you have 2 sets of link CSS when you only need one, so you should combine them:

<style type="text/css">

A
{cursor: default;
height: 1px;
behavior: url(link.htc);
filter: progid:dximagetransform.microsoft.blinds(duration= 1);}

A:link
{text-decoration: none;
color: #9E7687;
cursor: help;}

A:visited
{text-decoration: none;
color: #9E7687;
cursor: help;}

A:active
{text-decoration: none;
color: #9E7687;
cursor: help;}

A:hover
{letter-spacing: 1pt;
color: #9E7687;
text-decoration: none;
background-color: none;
font-weight: none;
cursor: default;}

body
{background-color: #CCBAC3;
font-family: tahoma;
color: #9E7687;
cursor: crosshair;

scrollbar-face-color: #9E7687;
scrollbar-highlight-color: #CCBAC3;
scrollbar-3dlight-color: ;
scrollbar-darkshadow-color: ;
scrollbar-shadow-color: ;
scrollbar-arrow-color: ;
scrollbar-track-color: ;
^^if you aren't going to specify a color for those, then don't use them at all.
}

</style>

so try that... i don't know if it will fix your filter problem or not because i don't know anything about them except they only work in Internet Explorer.

Int he CSS file, I but # color as a background, but IN the IFRAME MAIN.HTML file, I did indeed link to the CSS; but ALSO used this

<BODY BGCOLOR=#C0A6B3>

Still , it wont change color, but takes the color that was stated in the CSS file.
I think that CSS overpowers HTML so you might have to make a different style sheet.

Incendio

05-06-2005, 07:56 PM

I didnt know CSS overpowered HTML, thanks for telling me, I did a separate .CSS file for the frame :)

I've fixed most of the stuff. But still, the link transition wont work and I can't figure out why. I did exactly as you said, but it still won't work ... :(

Thanks for your help!

MaGiCSuN

05-06-2005, 08:05 PM

it's the other way around.
HTML overwrites css

it would be really really good to see your page instead of the codes on here, because the forums puts in spaces that you either didn't take out or the code has a little error in it :)

Love,
Mirna

Monkey Bizzle

05-06-2005, 08:06 PM

Is this your CSS? http://www.freewebs.com/hpkiddos/style.css if so, I don't see a link transistion in there, also, you need to take out the <style> tags. Those are only for internal CSS.

Incendio

05-06-2005, 10:39 PM

it's the other way around.
HTML overwrites css

OK, then it's really weird. Because in my iframe, I linked to the CSS file, but still, in that same IFrame file, I'd specified a different background colour than the colour that I had specified in my CSS file, but still, it wouldn't go after what I had typed in in the Iframe file, but it went after the CSS file ... if that made any sense at all?

Monkey Bizzle that is not my CSS. here (http://www.freewebs.com/hpkiddos2/style.css) and here (http://www.freewebs.com/hpkiddos2/style2.css) are my two CSS files (one for the whole page and one for the IFrame file. I think the CSS files looks correct, but I could be wrong.

Thanks for trying to help, you're so very nice :) You people at LEIA rock!

EDIT: Here are my two CSS files. I hope the forum won't add some extra space or anything, like you said Mirna. Ah well, it's worth a try I guess.

CSS ONE

<style type="text/css">

A
{cursor: help;
height: 1px;
behavior: url(link.htc);
filter: progid:dximagetransform.m icrosoft.blinds(duration= 1);}

A:link
{text-decoration: none;
color: #9E7687;
cursor: help;}

A:visited
{text-decoration: none;
color: #9E7687;
cursor: help;}

A:active
{text-decoration: none;
color: #9E7687;
cursor: help;}

A:hover
{letter-spacing: 0pt;
color: C0A6B3;
behavior: url(link.htc);
filter: progid:dximagetransform.m icrosoft.blinds(duration= 1);}
text-decoration: none;
background-color: none;
font-weight: none;
cursor: help;}

body
{background-color: #CCBAC3;
font-family: tahoma;
font-size: 10 pt
color: #9E7687;
cursor: crosshair;

scrollbar-face-color:#CCBAC3;
scrollbar-highlight-color: C0A6B3;
scrollbar-3dlight-color: ;
scrollbar-darkshadow-color: ;
scrollbar-shadow-color: ;
scrollbar-arrow-color:C0A6B3 ;
scrollbar-track-color: ;
}

</style>

CSS 2

<style type="text/css">

A { cursor: crosshair; height: 1px; behavior: url(link.htc); filter: progid:dximagetransform.m icrosoft.blinds(duration= 1); }
A:link { color: #9E7687; text-decoration: none; cursor: help; }
A:visited { color: #9E7687; text-decoration: none; cursor: help; }
A:hover { color: #9E7687; text-decoration: none; background-color: none;font-weight: none; cursor: help; }
A:active {text-decoration: none; color: #9E7687; cursor: help;}

-->

body
{background-color: #C0A6B3;
font-family: tahoma;
color: #9E7687;
cursor: crosshair;

scrollbar-face-color:#CCBAC3;
scrollbar-highlight-color: C0A6B3;
scrollbar-3dlight-color: ;
scrollbar-darkshadow-color: ;
scrollbar-shadow-color: ;
scrollbar-arrow-color:C0A6B3 ;
scrollbar-track-color: ;
}
</style>

Rosey

05-06-2005, 10:52 PM

you need to take the style tags out.

Incendio

05-06-2005, 10:58 PM

you need to take the style tags out.

OK, I'll do that.

And for the transition, this is what I also tried with without any results.

A { cursor: crosshair; height: 1px; behavior: url(link.htc); filter: progid:dximagetransform.microsoft.zigzag(duration= 1)}
A:link { color: #9E7687; text-decoration: none; cursor: help; }
A:visited { color: #9E7687; text-decoration: none; cursor: help; }
A:hover { color: #9E7687; text-decoration: none; background-color: none;font-weight: none; cursor: help; }
A:active {text-decoration: none; color: #9E7687; cursor: help;}

EDIT: I took the style tags out, <style type="text/css"> and </style>, but still, it doesn't work.

Rosey

05-06-2005, 11:52 PM

your hover color needs to be a different color than your link color.

Incendio

05-07-2005, 11:55 AM

I did that. But it still didn't work.

I got the code form this site here ->http://pixelfx.org/v2.php (go to tutorials > CSS ) and you'll find LINK TRANSITIONS on the first page.

I wonder, maybe she did something in-correctly with her code? So do you know where she originally got the code from?

Incendio

05-07-2005, 12:48 PM

Wrong! Delete

CoolChibi

05-07-2005, 05:33 PM

For the link transition, did you upload link.htc to your freewebs account?

Incendio

05-07-2005, 05:48 PM

For the link transition, did you upload link.htc to your freewebs account?

Thanks for deleting my last post whoever it was.

Yes, of course I uploaded the htc to my main directory. :rolleyes:

I wanted to tell you now that the transitions worked. I don't know why it didn't work , to be honest. It should have, because I'm 100% sure I did it all correctly. I think the code was somewhat hacky, :confusion and had some errors.

Thank you all for trying to help :o

I have another question, but it has nothing to do with CSS. I think it has to do with Iframes (?). In my main frame, which is an iframe, I disabled scrolling. Now I've seen on a couple of other sites, the lenght of their main frame change, depending on the content. If they have much content, then the main frame gets longer (duh) to hold all the content, and when they have little text or content, the main frame gets shorter. Simply, it adapts after the content.

Now my iframe doesn't work that. I specified a size for it, and the size does not change whatsoever. And since I disabled the scrollbar, because I didn't want two scrollbars, some of the content gets cut off, because of the iframe size.

I dont know if the sites that I've told you about in my example, the one that their main frames adjusted after their content, if those really are Iframes, or if it's something else. I was wondering, how I could get something similar.

MaGiCSuN

05-09-2005, 09:21 AM

Incendio

05-09-2005, 06:42 PM

http://www.dynamicdrive.com/dynamicindex17/iframessi.htm
http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

and more here

http://www.google.nl/search?q=iframe+height+body+onload&hl=nl&lr=&start=10&sa=N

Love,
Mirna
Ohhh! thank you Mirna :D

I'm having other problems though, which makes me go MAD! Check the interactive section ...

I switched frmo freewebs to a domain, and now it doesn't work!

http://www.miss-emma.org/magic/main.html