CSS? I dunt know enuuff, enyolehow

[Sharron]

Trying to be cute! But since I know nothing about css, except that I don't get it! at all. I down loaded those recomended templates, managed to change font sizes and colors, but nothing else. Containers (their editable information), are they hidden on another form somewhere? Can't change their colors or how to make them.

Oh Well, I like Jonra's new page, so I emmulated somewhat. But used the tools that I know how to use. My question is this, can this be accomplished some by some other method?

Please don't tell me it is slow to load, cause I know. Please don't tell me it wiggles a bit on roll over, cause I know. Please don't tell me I trimmed a tad bit high on my fade image, cause I know. Please don't tell me I don't know what I am doing, cause I know. lol

Please take a gander and let me know if it can be done another way, while still using the angled images and so forth.

I threw this example together so I could ask you, so feel special, you all are! Roll over the slide images to see roll over.

http://home.att.net/~alexupload/test2_rb.html

ps: do you think I am a sweet talkin you grand fellows, cause I am.

[jonra01]

I love what you are doing here. You have a great eye for design.

It can be a little confusing figuring out css in the beginning, because most page design tools, including dreamweaver, aren't consistent in how they handle styles. It's best not to put your styles in the code tags. Instead, put them in an attached stylesheet. This makes it really simple to edit the styles once you understand a little about css.

Now that I've confused you I'll try to explain it a little. Try to stay with me, because I frequently use class and style when talking about the same thing.

A class is a collection of style statements which can be assigned to almost any named element. A style can be either inline or assigned through class.

The page I just put up does both, but not for long. I'm going to pull all of the style elements out and put them in a stylesheet. That file is called blog.css on my site. The code to include the file is - <link href="blog.css" rel="stylesheet" type="text/css">. If you want to make it xhtml compliant you would add /> instead of just > on the right end.

This loads the stylesheet just like a javascript included file. Here's a sample of an inline style -
style="position:absolute; width:200px; height:288px; z-index:7; left: 168px; top: 42px; visibility: visible;" This is really just a positioning style used for one of the images on the page. You can include other elements if you are mixing in text.

And here's a sample style from blog.css -

.footer {
position:absolute;
width:750px;
height: 24px;
z-index:25;
left: -1px;
top:480px;
background-color: #666666;
border: 1px solid #FFCC99;
visibility: visible;
}

You can see at a glance that it contains all of the elements in the inline example as well as a new one - border. The border refers to the gold border around the div. To assign this style to a div you simply use - <div id="footer" class="footer"> The id can be anything and in this case should probably be different from the class for the sake of making the code easier to understand.

Since the words in this div are all links I had to create a style for them also. Otherwise they would have inherited the body link style, which I never defined.

.footerlink {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 25px;
font-weight: normal;
color: #FFFFFF;
text-decoration: underline;
}

Now I have underlined white text that is 12px tall. I simply apply it to each link like this <a href="contact.html" class="footerlink">

Now for mouseover effects to give feedback to the user. That requires one more style.

a.footerlink:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 25px;
font-weight: normal;
color: #FFCC99;
text-decoration: underline;
}

The 'a' is for the default html anchor tag. 'footerlink' is the style I just explained above. ':hover' is a subset of the anchor tag and can be assigned using this method 'a.footerlink:hover'. Now when someone mousesover the links they will be assigned the new class and the user will see the color change.

If you are using mozilla you can see blog.css file by clicking here - http://www.jonra.com/blog/blog.css.

If you use IE right click on the link and save it to your computer then open it in notepad.

Thus endth lesson #1,

John

[Sharron]

Jon, thanks, but it won't let me right click on the link, IE won't and it is the only browser I have.

Sorry to say I am completely lost, I think I am hopelessly stuck with possible good designs, but completely unable to use them for any consistant, accepted web manner.

My husband is casting eyes at me and researching that middle aged woman thing. He thinks I am out of my mind! lol He just does not understand my need to be awake at 3 in the morning and still messing with this stuff.

I taught myself all that I do know about this stuff in the process I may have limited myself in the processes other then what I learned. Does that make sense. Kind of like a rechargable battery that has been "taught" a limit for recharge, and it won't budge past that.

I will keep plugging onward, but still can't grasp how to get the sliced adobe style into a site without it or the tables. Heck I can't even manage to draw a table that does not have cells, of different sizes next to each other.

[Nomad]

the thing to remember about css is how or where id and class are used.

Generally you id divs and class other elements globally like tables.

So first you create your container div in your page generally after the body tag like so

<body id="body">

<div id="container"></div>

Now, as jonra explained we have two ways to style this with css. The older form is inline, or written in your page between the head tags but after the meta tags. Or, it may be called via the css href link as exampled by jonra.

so you create a document called whatever.css and open it.
in there you would write some thing like this;

#body {
            font-family: Verdana,Arial, sans-serif;
            color: #5E86C3;
            line-height: 1.166;	
            margin: 0px;
            padding: 0px;
            background-color: #BCD6FE;
}

then for your container div

#container {
	right: 2%; 
        left: 2%; 
        width: 95.6%; 
        position: relative; 
        top: 5px;
        bottom: 5px; 
        background-color: #ffffff;
}

To exclude text or notations from being read by the browser such as in html you use /** Text here **/. use this to give yourself notes like navigation - basic notes that will help you identify what your looking for more quickly. It's ignored by browsers so no speed reduction by there use.

Now here I have uniquely identified to divs. Now say inside the container div I place a table set such as you have on your linked page there.

I would do this and use the class element

<body id="body">
<div id="container">
<table class="namea">
<tr><td></td><td></td><td></td></tr>
<tr><td><table class="nameb><tr><td></td></tr></table>
<tr><td><td/><td></td></tr>
</table>
</div>
</div>
</body>
</html>

Ok here I have nested a table inside of another table set up I give them different names..in the css I would do some thing like

.namea {
           width: 100px;
           height: 50px;
           border-top: 1px solid;
           border-left: 1px solid;
           border-bottom 1px solid;
           border-right: 1px dashed;
           margin: 0px auto;
           padding: 0px 0px 0px 0px;
           background-color: #ffffbb;
}

.nameb {
           width: 100px;
           height: 50px;
           border-top: 1px solid;
           border-left: 1px solid;
           border-bottom 1px solid;
           border-right: 1px dashed;
           margin: 0px auto;
           padding: 0px 0px 0px 0px;
           background-color: #ffffdd;
}

So there I have given global values to any thing that is identified as class=namea or nameb. Basically what you used to apply as values in html 4/0/4.01 and lower to tables etc is now handled via a css inclusion.

remember id you use hash and for class elements you use full stop in the css document.

[jonra01]

You've probably got headache from looking at what nomad and I wrote. Nomad is much more knowledgeable about css and xhtml than I am, but I'm learning fast. And, I'm a fairly good teacher.

I've cleaned up the code and commented it in both the html file and the css file. I was going to send the css file to you in an email and then I thought perhaps other people would like to see it so I added a link on the web page. It's in the footer on the far right end of the text links. You should be able to right-click on it and save it. If not, just click on the link and it should open or you should be prompted for what to do.

You can also just go to the page and click on the file menu and then on 'save as' to get all of the assocciated files. IE will put everything in the same folder so you will have to create an image folder and move the images there for it to work.

Take a look at the css file and the html file. Start out by changing colors in the css file or changing the left and top values to see what happens.

http://www.jonra.com/blog/newndx.html

Hope this helps,

John

[jonra01]

Nomad, when you get a chance could you take a look at the code and tell me what you think? Right now, I've got the doc type as 4.01 transitional. I think it's probably at least xhtml transitional. I don't know how the javascript would affect that.

http://www.jonra.com/blog/newndx.html

Thanks,

John

[Sharron]

I got both items saved, thanks. Really all of you who councel and teach go way beyond being unselfish. Codeing in like art, a talent and a gift, that you have chosen to share with us, the when we show an interest. Thank You.

I opened the html file in front page, then previewd, and got an error message:
An error has occurred in the script on tis page

Line: 3
Char: 1
Error: Syntax error
Code: 0

Then it asks if I want to continue to run scripts

Spoke to soon, went out of preview mode back to edit, and tried to follow the link to your bio from there. Then I got a weird screen asking for a password to your site? Honest wasn't trying to do anything other then to read about you!


I wonder if this has occured as a result of my placement or saving in folders and not a real script error. I know I developed the same error message (?) when I tried placing my roll over menue page inside another page using front pages, insert web component. I got it fixed but can't remember now how I did it. It had something to do with the folder and were it went looking for the roll over images..............I think.

And Yes I have a headache, but more of a heart ache thinking this stuff may be beyond me.

Thanks again

hey you know I think it is trying to read from the temp file and not the folder I actually saved it to. don't know will investigate



DON'T KNOW WHAT IT IS DOING NOW, BUT I TRIED AGAIN TO FOLLOW ONE ON YOUR LINKS USING CONTROL ENTER ON ONE OF YOUR PAGES LINKS, IT OPENED SOMETHING i DON'T THINK IT SHOLD HAVE. YOU MIGHT WANT TO FIX THAT. Or I just nuts?

[Sharron]

Never mind. I am just nuts.

[jonra01]

LOL - take a break. Tomorrow is soon enough.

And yes, you can teach an old dog new tricks. Just look at me. I'm not one of these grandparents who have to ask their grandchildren how to use a computer. Just the opposite. The kids come to me to find out how to do it.

You'll get it figured out. FrontPage is part of the problem, tho. Don't know what you can do about that unless you have a friend with broadband that can download some programs for you.

John

[JWJ]

I've been following this thread with much interest .... and my head aches more than anyone's. Sharron, you're doing great. I'm doing my best to try and keep up but it's hard. But all things are relative and when you want a short break from playing 'student' please do me a favour and turn teacher to explain how you managed to create that fabulous test page using Frontpage. I use Frontpage (in a primitive way) and am looking for a new way of displaying my watercolours ... what you have just created is just the sort of thing I want to experiment with. If you're not earning big bucks with your design skills then you should be.