css homework (Full Version)

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



Message

c1sissy -> css homework (10/13/2003 8:36:03)

Since this is only homework and I would like opnions as to how I am progressing with the css and some guidance as to how to handle things with what I have done so far, I wasn't sure if I should post this in the css area or not.

Here is the link to my homework so far. The third week took me about 2 weeks to get into my head.
http://hwcssvu.tripod.com/week3a.htm


Unfortunatly I can be stubborn when it comes to learning and doing things on my own with it[;)]. I will have to take the course again, but that is ok as I would rather have this embeded into my head then only skiming the surface when a problem should arise as to working this out in other browsers.

I would appreciate any opnions, and please be tough, as this is the only way that I am goign to learn how to do this the right way, and according to the standards that you are supposed to use with all desigining.

Thanks in advance
<edit> i am still getting various differences in mozilla and in IE. I have managed to work out some of them, but not sure about others that are appearing.</edit>



erinatkins -> RE: css homework (10/13/2003 10:15:58)

Ok Debbie - you asked for it. [;)]

I like the gray - I am not sure what that image on the left is. Paintbrush maybe?

The border around the information over load - bugs me a little bit - I almost think that entire section needs to be centered since it looks uncentered/uneven in site. (just my 2 cents)

I am not 100% what is bugging me about it.

Looked at it again - my eyes are drawn to it & that area bugs me.



c1sissy -> RE: css homework (10/13/2003 10:28:25)

Hi Erin:
At this point the styles are those that the homework gets us to play with, such as borders and placement and size, and this is done either with the headings or another part of the template that the instructor recomends.

I have looked at this in mozillla, and it is not that great eitehr.
The grapic on the side, lol is supposed to be a champaigne bottle to celebrate finishing week 3 after week 5 was due! lol[;)]

At this point I think that it is somethign with the positioning that I am geting wrong.

another problem taht I had was the border around the picture down the page a bit. I think it was on week a or b. In mozilla I finally got it to surround the picture, but then in IE it has a very small gap. It was the picture of the wooden file thingie.

We were supposed to combine the inline/embeded/and linked with different over rides etc.... As well as learning the span/div and class.

Also I am soo sure that the code is totally unorgainzed right now.[&o]



Nancy -> RE: css homework (10/13/2003 13:34:27)

quote:

another problem taht I had was the border around the picture down the page a bit. I think it was on week a or b. In mozilla I finally got it to surround the picture, but then in IE it has a very small gap. It was the picture of the wooden file thingie.


From a quick look at your source code and stylesheet, you have applied the above information about a border to a div tag surrounding the img tag, instead of the img tag itself. This is the reason for the gap in IE.

There are a couple of ways you can fix this: first you can set the style for all images on the page, which I would not recommend unless you are sure you want all of them to have a border. Second you can make a class, either embedded or in an external style sheet and apply it to only one image.

1. img {
border: 4px dotted #00FF66;
}

2. .imgborder {
border: 4px dashed #00CCCC;
}

then the class is applied to the img tag: <img class="imgborder" src="filename.gif">

Hope that made sense.

Secondly, I'm not sure where you feel you are having problems with the background. Could you provide a little more detail on that part please?

Nancy



c1sissy -> RE: css homework (10/13/2003 14:06:03)

[sm=kiss.gif][sm=kiss.gif][sm=kiss.gif] thanks Nancy! A dim lightbulb just became a tad bit brighter!! Of course I have to play around with it before it really sinks in.

RE:Backgrounds:

One of the problems that I am having is that when you resize the window all the content sort of moves into the border picture of the window. I have managed to get some of it not to do this, though legally according to style rules I'm not sure about. Of coures color is the designers choice and right now I am playing with gradients and such for backgrounds just to see how they look.

I have tried background-attachment, background-position, etc... but the content still moves over onto the side where I have the graphic.

Also, I have another question in regards to how to position things.Unfortunatly I have to get my thoughts together on this one as how to ask it. I did type it out but it didn't make sense to me so I'll be back with that one.[;)]

I'm off to print out lesson 4 so that I can start studying it and working on the next things that are there.



Nancy -> RE: css homework (10/13/2003 15:15:10)

The shifting is not related to the background you have set as the page background in the body tag.

Your style sheet names an image to use for the page, and the image you are using is 1200 pixels wide and 50 pixels. I think using background-attachment is a property you won't want to use for this size of an image. Normally background-attachment would be when you want to glue it down to stay, or you're using a larger image. You might try using background-repeat instead, and set it for repeat-y which will set it to tile vertically. You should also then set the background color in the body tag to use the gray that is close to your image instead of white.

Now as for things shifting, that is being done by properties you've applied to your div's. For example the style for the div surrounding the "Information Overload" has both left and right margins. Each time the browser window is changed, that div needs to find the appropriate margins.

Hope this helps. If not, fire away with more questions.

Nancy



Long Island Lune -> RE: css homework (10/13/2003 15:34:23)

Hi Debbie,

I wish I was a CSS programmer. Can't really offer to much technical advice... Viewed your source code... Impressive.... I really have to take a CSS class and "get with the program"

But on the other hand, I like looking at the pages. Loved the wine bottle and cork. Physcedelic man.... (If I spelt that right). I liked the grey / white background. Nice.

Put my email address in so Tripod notfies me when your page changes. Your doing GREAT. [:)][;)]



c1sissy -> RE: css homework (10/13/2003 15:36:59)

Thanks LIL, but the email feature might not work, Erin and i tested it. Lots of changes but no notifications! go figure! lol

Nancy, thanks for the information. You are bringing up things that the instructor hasn't brought up. But then, I am behind so what can I expect, lol. Main thing to me though right now is getting it right so that I know this productivly.

Now I am off to read my homework.



c1sissy -> RE: css homework (10/27/2003 7:16:48)

I thought that I would keep this thread updated with different things that I am working on right now with css.

At this point, the class that I was in is over for now, though I plan on re-taking the class to get the credits for it.

I'm on my own again in learning and thought that maybe some of these posts could help someone else learning css, or even myself [;)]

Feel free to tear apart anything in these pages that would help me or someone else to learn better.

The following 3 links I have placed on two different servers. Reason for this, the first host, tripod, caused the 3 example of boxes to not show correctly due to the adds that tripod places on the pages. In order to see if I had them done correctly I loaded them up to another host that does't place adds on the pages.

http://hwcssvu.tripod.com/boxexample1.htm
http://hwcssvu.tripod.com/boxexample2.htm
http://hwcssvu.tripod.com/boxexample3.htm

The same pages placed on domaindlx.com (which btw is a pretty good free host)
http://e.domaindlx.com/hwcssvu/boxexample1.htm
http://e.domaindlx.com/hwcssvu/boxexample2.htm
http://e.domaindlx.com/hwcssvu/boxexample3.htm

boxexample3 has a scrollbar that I have added color to. This is not a css standard thing. However, I enjoy playing with this to get the color of the scrollbar to match the page. To validate this page though it won't validate. Also this only shows up in IE, not in the other browsers. lol, but it is soooo much fun to play with[;)]



Nancy -> RE: css homework (10/27/2003 9:35:42)

Try changing this in your boxes class and see if that makes a difference:

position: absoulte;

*S* Don't ya just hate those typos?

Nancy



c1sissy -> RE: css homework (10/27/2003 9:51:14)

quote:

ORIGINAL: Nancy

Try changing this in your boxes class and see if that makes a difference:

position: absoulte;

*S* Don't ya just hate those typos?

Nancy


EEEK!!!! Did the change, only to example 1!!!

Look what happened!!

My page is out of control! (LOL I had a better layout with a typo![;)], even did a look up on dictionary.com to make sure i had the correct spelling !)

<edit> Hmm, this is interesting, if I change it from absolute to float, it lines up like it is supposed to? re:example1, same thing for example2. However, spelling is correct on example 3 and the position absolute appears to be working on this one?</edit>



Long Island Lune -> RE: css homework (10/27/2003 12:16:43)

Whoa. Your boxes went loco. [:D]



c1sissy -> RE: css homework (10/27/2003 17:37:01)

quote:

ORIGINAL: Long Island Lune

Whoa. Your boxes went loco. [:D]

[:D][:D][:D]

They actually got a mind of their own!

Anyhow, look for a few more pages soon[;)]

<edit> I still havn't figured out why the pages went crazy like they did, but am working on trying to figure out why they did this</edit>



c1sissy -> RE: css homework (10/28/2003 7:02:44)

additonal links.
some of the pages have a brief description of what I am doing as I go along with the things

http://c.1asphost.com/c1sissy/div%20test%20pages/divsboxexmple5b.htm

http://c.1asphost.com/c1sissy/div%20test%20pages/divsboxexmple5.htm

http://c.1asphost.com/c1sissy/div%20test%20pages/divsboxexmple4.htm

http://c.1asphost.com/c1sissy/div%20test%20pages/boxexample1.htm
http://c.1asphost.com/c1sissy/div%20test%20pages/boxexample2.htm
http://c.1asphost.com/c1sissy/div%20test%20pages/boxexample3.htm

currently am working on an index page, complelty css in order to organize this better[;)]



Long Island Lune -> RE: css homework (10/28/2003 12:48:46)

Whoa!!!!! I'm at a loss for words!!! (Rare for me).
These sites look great.
I see your shooting for "Grand High Exalted Mytic Ruler of CSS".
You got my vote. [:)]

I saw a trailing pop-up on exit.
[:D][:D][:D] That commerical expertise is growing!!! [:D][:D][:D]

Crafts.... That's great. Glad to see it got started.
I got my credit card ready.
Do you take checks??? (Say "NOOOO" to checks) [;)]

Mark



Nancy -> RE: css homework (10/28/2003 13:28:37)

I took a look in IE6 and was thrilled - very nice.

but then I decided to take a peek in NN 7.1 [:(] and am attaching a screenshot.

Not as good, but I'm not posting this as a criticism. I am posting it so we can all learn more - how css is not the same in all browsers.

I have no answers as to why these looks so different, except that from what I understand, NN is much more compliant that IE, so as browsers (hopefully) move to more standard CSS, we'll all have to learn how to make the boxes work properly.

Nancy

[image]local://upfiles/7/Yw67676.gif[/image]



c1sissy -> RE: css homework (10/28/2003 14:24:13)

quote:

ORIGINAL: Nancy

I took a look in IE6 and was thrilled - very nice.

but then I decided to take a peek in NN 7.1 [:(] and am attaching a screenshot.

Not as good, but I'm not posting this as a criticism. I am posting it so we can all learn more - how css is not the same in all browsers.

I have no answers as to why these looks so different, except that from what I understand, NN is much more compliant that IE, so as browsers (hopefully) move to more standard CSS, we'll all have to learn how to make the boxes work properly.

Nancy

[image]local://upfiles/7/Yw67676.gif[/image]

I got the same results in NN. What I am following right now gives work arounds for NN on some things but not on this. Not sure HOW to fix it yet. But know that there has to be a fix out there somewhere. Just have to find it. I'm sure that it must be the borders settings?, maybe?

I had to go to a meeting for my "paying" job today, so didn't get much of a chance to search for things or work on this today. I'm also sure if I look at this in mozilla as well, I would get basically the same thing as I got here in NN.

I have heard about, but don't know anything about it, but border collapse? Sounds like maybe this might be an answer?

I appreciate all your comments Nancy. I or others won't learn unless we do this and do find that things aren't going how we think that it should look. And as I am finding out, even though it might be CSS Standard, some browsers are still not handling things the same as others.

One of the borders, I think it is the dots, is not supported by NN. What would appear would be just a solid line.

Later on I'm going to do some searching to see if I can find an answer to what is going on with this.

And, btw, I wouldn't get upset with anything that you post for help or what you might see that I don' t see.[;)] That is the reason for posting here with this. To learn, and have the information out there for others that are teaching themselves.

quote:

ORIGINAL: Long Island Lune

Whoa!!!!! I'm at a loss for words!!! (Rare for me).
These sites look great.
I see your shooting for "Grand High Exalted Mytic Ruler of CSS".
You got my vote. [:)]

I saw a trailing pop-up on exit.
[:D][:D][:D] That commerical expertise is growing!!! [:D][:D][:D]

Crafts.... That's great. Glad to see it got started.
I got my credit card ready.
Do you take checks??? (Say "NOOOO" to checks) [;)]

Mark


quote:

Grand High Exalted Mytic Ruler of CSS


lol!

My secret is out![;)]



Long Island Lune -> RE: css homework (10/28/2003 14:28:31)

Deb - could it be the version of CSS your using? Are there many different versions (like HTML)? Or doesn't that matter? [8|]



Nancy -> RE: css homework (10/28/2003 15:54:38)

Here's one thing that probably will make a difference:

borer-width: 200px;

the above line in your stylesheet for mybox3 and mybox4

I'm sure the spelling error makes a big difference. I think once you make that correction, IE isn't going to like you either. *S* Be prepared. You're going to be adding a 200pixel border and everything is going to shoot out of control.

As for the differences between IE and NN, you'll probably find more information on workarounds for IE than for NN.

As for the dotted borders, they do fine in NN7, however IE 5.+ will show a solid line, a difference that most of us can live with. In fact IE5.+ is the one that could be determined to be more of a problem browser, more so than NN7 or IE6.

Nancy



c1sissy -> RE: css homework (10/28/2003 16:19:28)

quote:

ORIGINAL: Nancy

Here's one thing that probably will make a difference:

borer-width: 200px;

the above line in your stylesheet for mybox3 and mybox4

I'm sure the spelling error makes a big difference. I think once you make that correction, IE isn't going to like you either. *S* Be prepared. You're going to be adding a 200pixel border and everything is going to shoot out of control.

As for the differences between IE and NN, you'll probably find more information on workarounds for IE than for NN.

As for the dotted borders, they do fine in NN7, however IE 5.+ will show a solid line, a difference that most of us can live with. In fact IE5.+ is the one that could be determined to be more of a problem browser, more so than NN7 or IE6.

Nancy


[sm=icon_redface.gif][sm=icon_redface.gif][sm=icon_redface.gif]

Now I know why it seemed like no matter how many pixels I added the border didn't seem to be moving![sm=icon_redface.gif] Fixing this right now. grin. very sheepishly I might add as well[;)]

I thought that I might have figured out the moving probs with the boxes, but not sure if what I am thinking is correct.

Even if I nest the divs (if this is possible?) inside of one larger div that is given a pixel size instead of percentage, or an absolute position, when the window sizes down, it most likely would still cause those two boxes to go under each other?

<edit>I'm getting ready to load up what I have done. I just need to do a few more things to make sure that both 5 and 5b are in sync with each other since they are sort of a comparison of a few things. I have it looking great in NN but in IE, wow what a difference in how things look now!</edit>



Nancy -> RE: css homework (10/28/2003 18:50:00)

whooo hoooo no more overlap in NN - good job.

There is not quite as much space in between the turquoise boxes with NN, but I don't think that is anything you can control. It has to do with how NN reads the box size versus how IE does. One figures the width of the box including padding, borders and margins, while the other adds the padding, borders, and margins separately.


Nancy



c1sissy -> RE: css homework (10/28/2003 18:54:15)

quote:

whooo hoooo no more overlap in NN - good job.

[:D][;)]
Thanks Nancy.

I wasn't sure if you could nest the divs. But I figured go for it and see what happens. It seemed to work out great, LOL, and just figure not long ago, ID's were confusing me! (though caught on to them much faster then fp includes lol!)

I'm sure that there is a work around somewhere in regards to the positioning.

lol, and to think that they call web design work! [;)]



pageoneresults -> RE: css homework (10/29/2003 10:48:02)

CSS Validation

Before going any further with your homework, one of the very first things you should do is validate your CSS. All those typos and any other blatant issues will come to light through validation.

Once you've validated the CSS, then you can effectively start breaking down the styles to see where problems are.



c1sissy -> wahooo, nancy/pageone (10/30/2003 9:43:13)

quote:

ORIGINAL: pageoneresults

CSS Validation

Before going any further with your homework, one of the very first things you should do is validate your CSS. All those typos and any other blatant issues will come to light through validation.

Once you've validated the CSS, then you can effectively start breaking down the styles to see where problems are.


Thanks pageone, appreciate the imput. Sometimes the spelling is ok, others ick, it lacks. I love how the css validator picks up on those as well.

<edit> never mind about below paragraph[:@][:@], now it isn't working!</edit>[:@][:@]
btw, I did find out how to solve the NN & IE thingie. @import!!! wahoooo!



c1sissy -> RE: wahooo, nancy/pageone (10/31/2003 11:25:14)

http://c.1asphost.com/c1sissy/div%20test%20pages/divsboxexmple5c.htm

I have this working for now, only problem that I am runing into, when I validated the css on my machine, it validated. On site, it is failing validation for the @import. Which, I thought was part of css standard?

Now, onto more tries at things. I would like to attempt to get boxes same height in the teal area, and to als add more divs to this area. Just to see how it works.



c1sissy -> RE: css homework (11/2/2003 20:45:13)

http://c.1asphost.com/c1sissy/div%20test%20pages/borders1.htm

another page completed. Here I have tried to nest divs to see how they turn out. This page managed to display correctly in NN and in IE.



Long Island Lune -> RE: css homework (11/2/2003 20:54:33)

Looking GOOD Deb.

I like the color scheme your using. I see the multiple Divs in the boxes. Covering all options aye... Looks good. I see your keeping up with that homework. That's the way to do it. You are definitely a high panjandurum alpha female. A rare breed. Ahh Ahh Uee Ueeeee!

http://c.1asphost.com/c1sissy/div%20test%20pages/divsboxexmple5.htm
I loved the kangaroo on this page. Fisty, Funky, Cute. [;)]

Keep up the good homeowrks!!!
Your site critic, - the LLLuneeeee [:)]



c1sissy -> RE: css homework (11/2/2003 20:56:50)

quote:

http://c.1asphost.com/c1sissy/div%20test%20pages/divsboxexmple5.htm
I loved the kangaroo on this page. Fisty, Funky, Cute.

[;)]
That little bugger represents my fighting spirit! Let em at me! roflol[8D][;)][:D]



Long Island Lune -> RE: css homework (11/2/2003 21:01:47)

ROFLOL - That's the high panjandurum SPIRIT!!!
Go get'um. [:@]
Take no coding prisioner's. [:)]



gorilla -> RE: css homework (11/3/2003 13:30:51)

The advantage to use @import is that noncompliant browsers don't understand it.

You can take advantage of this and (almost) get a btrowser sniffer. Do like this:

1. Create the stylesheet that you want for example Netscape 4 to use and write the standard <link> tag into the HEAD section of the HTML to bring it in.

2. Create the stylesheet that you want all the more compliant browsers to use (EG Netscape 6 and up, IE5.5 and up. Opera 5.12 and up, Mozilla).

3. Bring the stylesheet you created in step 2 AFTER the first one, and use the @import method -

a. Either by @import "stylesheet2.css" or

b. @import url("stylesheet2.css") - ( DO NOT use another <link> tag.

Doing this makes that more compliant browsers will get the second set of styles, because the cascade
will "overwrite" the first, linked stylesheet. IOW as Netscape 4.x doesn't support @import, it "sees" only the first set of rules. Soyou've tricked @import into working like browser sniffer that zeros in on a very buggy browsers



Page: [1] 2 3 4 5   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.203125