CSS Questions

[Professor GIBS]

Many of you have seen some of my other posts, and have realized I am not the "Go to" one for CSS. Although, I have come a long way from knowing how to change text color to making function websites. With that said please help me understand, and don't just simply tell me.

MY PROBLEMS

1. I was never taught proper CSS syntax, I just picked it up. But, what does a comma do in CSS?
2. Would it be wrong to call some of the same things, in the main call & hover call, to avoid it changing back?
3. Where can I learn about; webkit, moz, and animations for CSS?
4. How can I move things exactly where I want them, like in my website HERE, I want the login/register area to all align. I know I can use a table but I don't always want to relay on tables to do the trick. I want the knowledge of how to place stuff exactly where I want it down to the pixel.

____________________________________________________________________________________________

 

CARE TO HELP

I'm making my own website, and I've been stuck on the navigation bar for awhile now. I have finally got it working, with a double drop down menu, but my issue is when I stop hovering over the drop down menu it disappears instantly. This could be annoying to anyone who uses my website, especially since it is a double drop down menu. I was wondering how to use JUST CSS(No jQuery) to make it fade out slowly, I know it's possible from HERE. I read it all, and tried to figure out where it would go on my menu. I went as far as adding the webkit/moz to every single element inside my CSS. Nothing worked, I was wondering if you could help spot where or how I should implement this into my code. Thanks to anyone who helps in advance!

Edited September 2, 2014 by Professor GIBS

[niche]

Doesn't sound like you've completed the css tutorials:

 

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

 

EDIT:

 

You'll get all the info you'll need on webkit, moz, and animations for CSS through google.

Edited September 1, 2014 by niche

[Professor GIBS]

I'll be honest I never really understood the W3schools tutorials/lessons, but I will definitely look over some more stuff. I'll continue looking around the web for more on webkit/moz. Thanks.

 

It would be nice to get these questions at hand answered though, while they all apply to me at this particular moment.

[Ingolme]

This page explains the comma in the "Grouping Selectors" section: http://www.w3schools.com/css/css_selectors.asp

The comma applies the CSS rules to all the selectors that are separated by commas.

 

I don't really understand your second question. In CSS you can change the same property as many times as you like, there are rules that determine which selector has priority.

 

-webkit- and -moz- are prefixes that browsers put on new CSS properties that are still subject to change in the W3C standards. A quick search on Google leads me to this article explaining them more in detail: http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm

 

You can learn about animations in the W3Schools CSS tutorial: http://www.w3schools.com/css/css3_animations.asp

 

Positioning things is complicated. There are many ways to do things but they all have their drawbacks. Due to the fact that you never know what size your viewer's window is going to be you have to build sites that adapt to all screens. To do this people use percentage sizes, margins, padding, min-width, float and all sorts of other properties. You shouldn't try to make a pixel-perfect page, but rather a page that looks good even when things aren't in exact pixel positions.

 

You should read the tutorials. When you ask questions that are clearly answered in the tutorials you're giving the impression that you're not making an effort to learn.

[Jonathanks]

You can make use of other materials like books (hardcopy and softcopy), video tutorials (if you're a visual learner), etc. Learn everything, but you may not need to use everything. Understand what you study first before sticking it into your brain. I wish you success.

[Professor GIBS]

@Foxy Mod, thanks so much for all of the help, explanations, and links. As for the 2nd answer you gave, could you define that rule or show me where to learn it? Thanks for the advice about making my page designed to fit all screen sizes. Also, I do read over every tutorial I see that applies to me, but sadly to say I don't always pick everything up or understand it. I do strive to learn, as "Amour a Savoir" is my motto. It is very improper french, but it says Love to Learn.

@Jonathanks, where can I get these books? & thanks. *EDIT* Actually, wouldn't books be out of date anyways?

 

All of my questions have been answered, but can someone help me with making the dropdown menu fade away slowly? Thanks. If at all possible also tell me the best way to align items. Like I am trying to do in the top right corner HERE!. Thanks

Edited September 2, 2014 by Professor GIBS

[Jonathanks]

@Jonathanks, where can I get these books? & thanks. *EDIT* Actually, wouldn't books be out of date anyways?[/size][/center]

Those books are still relevant. There are new books too. And for css, it hasn't changed much relative to those books. You need them. Css3 doesn't make those books irrelevant. There are books on css3.

[Wolverine]

some but not all of your questions professor are in the book that you can order at this site: http://www.elizabethcastro.com/html6ed/

[Professor GIBS]

Thanks to both of you.

I've been trying to get this drop down menu to work, but it simply won't the way I want it too. I've studied the other guide, I don't understand.

[niche]

Here's everything you need for a drop down menu:

 

http://cssdeck.com/labs/another-simple-css3-dropdown-menu

 

However, you'll still need to do the tutorials to be able to ask questions.

Edited September 3, 2014 by niche

[dsonesuk]

First thing you should do learn is produce valid html and css code, you can check these here

 

html = http://validator.w3.org/

 

css = http://jigsaw.w3.org/css-validator/

 

You should not use span, which is inline element to wrap block elements paragraphs, or table.

span should be used within block elements mainly paragraph elements or other inline elements such as anchor element only. (Note: AS of html5 inline anchor element can wrap block elements)

Paragraph elements should be used as the name suggests for paragraphing text, for dividing areas of website into separate sections you would use block element div (division).

When you use :hover it should only contain the styling that will change on hover, NOT the complete styling that are already defined in its normal state.

 

nav a {display: block; padding:0 20px; text-decoration: none; color: black; line-height: 30px; color: white;}

 

nav a:hover {display: block; padding:0 20px; text-decoration: underline; color: black; line-height: 30px; color: black;} = BAD

 

nav a:hover {text-decoration: underline; color: black;}= GOOD

 

EDIT: In bold

 

login section

Change the elements to correct valid elements, float inputs right and adjust margin on right, wrap input descriptions in labels and float these left, you will still need to make further adjustments probably using clear: both; and margins of other input elements, and remember to validate.

Edited September 3, 2014 by dsonesuk

[Professor GIBS]

WOW! Both of those posts should get me where I need to be! Thank you both! I've got some studying to do now haha! Thanks again.

 

If I have any more questions in the future I'll just post on this topic again, but I doubt it.

[Professor GIBS]

Just out of curiosity, since my website is going to be very user active, should I switch my website over to PHP?