Professor GIBS

Thanks aurohttp, though I already stated that in my post.

I've leaned a good proportionate size is 960 pixels, and I should use a % width instead of pixels where I can.

Does anybody have anything else to add? Just as a side comment, I notice how other websites use div's/span's/tables and all of that to align it, does any of that actually determain or mess with the sizing of the website? Or is it just a personal preferrance?

One editior I apsolutely love, but didn't see listed, would be Aptana Studio 3, origanally a branch off of Eclipse but now it is a stand-alone version. It is also, free and so easy to use! CLICK HERE TO GET!

Thanks for the reply, is there anything I can do better? I would like to improve as much as possible, thanks.

Also, I know "index.html || index.htm" are usually the default homepages for browser, but if I deleted my index.html, and made a index.php does it load as the default homepage?

I know the sizing of a website, and keeping everything in proportion, is one of the hardest things about web design. I've leaned a good proportionate size is 960 pixels, and I should use a % width instead of pixels where I can. Well, I was wondering if I could use this format for my website online for computers/laptops? As for other technology such as tablets, kindles, minis, and phones I will design a specific application that you can download to access the need to's on my website? I would like your input and advice on this, please.

Thanks to all in advanced.

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

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.

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.

@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

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.

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!

I know I am double posting here, but I just wanted to say I figured it out haha. If you look where my ID "special" is, it's on the ul, when it should of been on the li. Ahah, made that quick change & now my code works! Thanks to all who have helped!

Don't be so disrespectful, Sir. I did look, in fact tried several different things.. One of which would make it appear, only when hovering over anywhere in the first drop down menu, and not just over the last one. I know where you're talking about here:

UPLOADED HERE!: CLICK ME!

/* Drop-Down Navigation */ul#navigation li:hover > ul{/*these 2 styles are very important, being the ones which make the drop-down to appear on hover */	visibility:visible;	opacity:1;}ul#navigation ul, ul#navigation ul li ul {	list-style: none;    margin: 0;    padding: 0;    /*the next 2 styles are very important, being the ones which make the drop-down to stay hidden */    visibility:hidden;    opacity:0;    position: absolute;    z-index: 99999;	width:180px;	background:#f8f8f8;	box-shadow:1px 1px 3px #ccc;/* css3 transitions for smooth hover effect */	-webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 	-moz-transition:opacity 0.2s linear, visibility 0.2s linear; 	-o-transition:opacity 0.2s linear, visibility 0.2s linear; 	transition:opacity 0.2s linear, visibility 0.2s linear; 	}ul#navigation ul {    top: 43px;    left: 1px;}ul#navigation ul li ul {    top: 0;    left: 181px; /* strong related to width:180px; from above */}

But I couldn't get the second menu to work.

I appreciate it! I did view the source code too, just didn't make much out haha. But hey! I made a great working navigational bar with a working dropdown menu. FROM THIS GUIDE!

My only problem is that I cannot get the second drop down menu to appear..? That's all I need, and then I can finally move on!! Thanks guys!

*Sorry to give you a different HTML/CSS each time, I try to keep it clean, and make it from scratch each time so I get it all to stick.*

Just if you need it here is my HTML:

<!DOCTYPE html><html lang="en">	<head>		<title>CodeMode - Home</title>		<link href="index.css" rel="stylesheet" type="text/css">		<meta charset="UTF-8">	</head>	<header>		<a href="index.html"><img src="logo.png" /></a>		<nav>			<ul>				<li><a href="#" id="firstNav">Home</a></li>				<li><a href="#">Forums</a></li>				<li><a href="#">Program</a></li>				<li><a href="#">Development Teams &blacktriangledown;</a>					<ul>						<li><a href="#">Graphic Design</a></li>						<li><a href="#">Game Design</a></li>						<li><a href="#">Web Design</a></li>						<li><a href="#">App Design</a></li>						<li><a href="#">Special »</a>							<ul id="special">								<li><a href="#">Technology Era</a></li>								<li><a href="#">Languages</a></li>								<li><a href="#">Computers</a></li>								<li><a href="#">Phones</a></li>							</ul>												</li>					</ul>				</li>				<li><a href="#">Contact</a></li>				<li><a href="#">Chat</a></li>			</ul>		</nav>	</header>	<body>		<p>BODY GOES HERE BEFORE YOU KNOW IT!</p>	</body>	<footer>		</footer>	</html>

Here is my CSS:

* {	margin: 0 auto;	background-color: black;}header {	width: 960px;	background-color: black;	padding: 10px 0 50px 0;}body {	width: 960px;	color: #999;	background-color: black;}/*<NAVIGATION BAR>*/nav li:hover ul {	display: block;}nav li ul:hover ul {	display: inline;}nav {	display: block;	position: relative;	background-image: url("background_logo.jpg");	border: 1px solid black;	font-weight: bold;	font-size: 16px;	font-family: Arial, Helvetica, sans-serif, Georgia, serif;	height: 38px;	width: 100%;	margin: 0 auto;}nav li a:hover {	color: white;	background-image: url("background_logo_hover.jpg");	-webkit-transition:opacity 0.4s linear, visibility 0.4s linear; 	-moz-transition:opacity 0.4s linear, visibility 0.4s linear; 	-o-transition:opacity 0.4s linear, visibility 0.4s linear; 	transition:opacity 0.4s linear, visibility 0.4s linear;}nav li a {	text-decoration: none;	display: block;	padding: 10px 25px;	border-right: 3px solid #222;	color: #888;	text-shadow: 1px 1px 0px #777;	background-image: url("background_logo.jpg");	-webkit-transition: color 0.4s linear, background 0.4s linear;		-moz-transition: color 0.4s linear, background 0.4s linear;	-o-transition: color 0.4s linear, background 0.4s linear;		transition: color 0.4s linear, background 0.4s linear;}#firstNav {	border-left: 3px solid #222;}nav ul {	margin: 0px;	padding: 0px;}nav li {	position: relative;	float: left;	list-style-type: none;}nav ul ul {	position: absolute;	display: none;	left: 45px;	margin: 0;	width: 175px;	background-color: green;}nav ul ul li {	border: 1px solid #222;	width: 175px;}#special {	position: absolute;	display: none;	left: 0px;	width: 0px;}#special:hover {	display: block; /* THIS DOESN'T WORK! */}/*</NAVIGATION BAR>*/

My CSS is obviously wrong since nothing is working properly. Explain what's wrong with my HTML?

QUESTION: True or False; Everything including; header, and footer is supposed to be within the body tags?

You know what they say about assumptions, right? They make an ###### out of you and me. So before you assume I don't bother to read, study, or validate, please oh please get some of your facts straight. I guarantee I work harder than you or anybody you know, I am simply just trying to understand CSS a little bit better. Okay, thank you sir. Dismissed.

@dsonesuk , you may be smart man, but the way you go about things in useless to me. You expect people who are new to just know these types of things, all you did to my code there is take out what YOU didn't like to see, and what YOU thought had no purpose. My HTML is fine, my CSS needs help that's the only programming languages I've ever had trouble with. So, if you not actually going to talk me though it, or give me somewhere I can legitimately get help for CSS, or correct something that is completely wrong then please just don't post. Thanks for trying though.

Could you link me to a good easy to use one? I found a few, but they all are like webs.com or something they create it all for you.

Thanks. I'll fix it. So everything is inside the body other than the <head> then?

Ah, well could you give me a better hoster? I want to help you, help me. You can obviously see that I am completely ignorant to some things that I haven't encountered yet.

I mean for now here is my HTML:

<!DOCTYPE html><html id="CodeMode"><head><link href="home.css" rel="stylesheet" type="text/css"/><link href="css/layout.css" rel="stylesheet" type="text/css" /><link href="css/menu.css" rel="stylesheet" type="text/css" /><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script type='text/javascript' src='home.js'></script><title>CodeMode - Home</title><meta name="author" content="Kevin Micheal Cox" /><meta name="description" content="CodeMode is an online way of learning anything technological, including programming, game designing, and graphic design with so much more to offer!"><meta name="keywords" content="HTML, CSS, JavaScript, Java, Python, Boo, C++, C#, C Sharp, Programming, Coding, CodeMode, Code Mode, Graphic, Design, Graphic Design, Kevin Micheal Cox, Game, Development, Game Development, Chat, Fourms, Fun, Learning, College, School, Home, home, Free"><meta charset="utf-8" /></head><body><header><!--logo--></header>        <nav>         <div id="navlist">           <ul>            <li>|</li>               <li id="home"><a href="..homeindex.html" title="Home"><span> Home </span></a></li>               <li>|</li>               <li id="forums"><a href="..forumsforums.html" title="Forums"><span> Forums </span></a></li>               <li>|</li>               <li id="prog"><a href="..progprog.html" title="Programming"><span> Programming </span></a></li>               <li>|</li>               <li id="des_teams"><a href="#" title="Design Teams"><span> Design Teams </span></a>               <ul>               <li id="game_dev"><a href="..game_devgame_dev.html" title="Game Design"><span>Game Design</span></a></li>               <li id="web_des"><a href="..web_desweb_des.html" title="Web Design"><span>Web Design</span></a></li>               <li id="grap_des"><a href="..grap_desgrap_des.html" title="Graphic Design"><span>Graphic Design</span></a></li>               </ul>               </li>               <li>|</li>               <li id="chat"><a href="..chatchat.html" title="Chat"><span> Chat </span></a></li>               <li>|</li>           </ul>            </div>        </nav>        <script src="home.js"></script></body><footer><p class="center">CodeMode - Copyright © 2014 - All Rights Reserved.</p><p><a href="..aboutUsaboutUs.html">About Us</a> ♦ <a href="..contactUscontactUs.html">Contact Us</a> ♦ <a href="..applyapply.html">Join Us</a> <br> <a href="..termsOfServicetermsOfService.html">Terms of Service</a> ♦ <a href="..privacyPolicyprivacyPolicy.html">Privacy Policy</a></p></footer></html><!--|=======================================|| Developer's Note || Creation Date: 7/28/2014 || Creator: Kevin Michael Cox - 4518 || Date Released: N/A || File type: HTML || Current Progress: 5% || Online Date: N/A ||=======================================||_______________________________________|-->

/*|=======================================| | Developer's Note   | | Creation Date: 7/28/2014   | | Creator: Kevin Michael Cox - 4518 | | Date Released: N/A   | | File type: CSS   | | Current Progress: 5%   | | Online Date: N/A   | |=======================================| |_______________________________________|*/#CodeMode {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 1em;color: black;border: 0;padding: 0;text-align: center;background-color: black;margin: 0 auto 0;}header {/**/}body {background-color: #696969;margin: 0 auto 0;border-top: 1px solid black;border-bottom: 2px dotted black;border-left: 1px solid #01P;border-right: 1px solid #01P;padding: 0;width: 960px;text-align: left;overflow-y: scroll;}footer {border-top: 1px dashed black;font-family: arial black;clear: all;text-align: center;}a {text-decoration: none;font-family: Impact;color: black;border: 0;padding: 0;margin: 0;}nav {background-color: #999;}#navlist {width: 960px;margin: 0 auto;text-align: left;}#navlist ul {list-style-type: none;padding: 0;margin: 0;position: relative;}#navlist ul li {display: inline-block;}#navlist ul li:hover {background-color: #777;}#navlist ul li:visited {color: #ccc;display: block;padding: 5px;}#navlist ul li:hover {color: ccc;text-decoration: none;}

Why don't you help me then, that hosts the files doesn't it? I can't read you mind, and do exactly as you please unless you actually help me.

Okay I searched, and Uploaded Here.

Well, I don't have it up yet? Because it cost money to host it, and it is still being designed so it's not ready? Which is why I've asked in previous posts if someone would look over team-viewer or something.

Okay so these are some of the problems I am having, that is just utterly pissing me off:

• I remove the "border-top" from my body, and it takes away about 10px from the top when the border was 1px.
• I try to set a "background-image" for my whole html wrapper (behind the body) and it just stretches the color of the body.
• I tried again to set the "background-image" for my body, navbar, and more and all it does is stretch or delete something.
• I tried to make my "ul" have no bullet points with "text-decoration: none;" and it just simply doesn't remove the bullets.
• I cannot get my navigation bar to line up horizontally like it is supposed to, and make the box I hover over change background colors & more.

Will someone please help me, I've learned 4 languages in the past month so I know for the most part what I am doing.. All of my troubles come from CSS -.-.

I understand that, but does it go any deeper than that?

Alright understanding now, I tried something similar to "-9999em", so I guess were both on the right track there. I see that that example navbar I linked to you guys, uses div's and spans. Okay, that is understood. But, why does nobody use <nav> if it's offered to us? Is there a difference?

Also, alright thanks for telling me the difference and about web-kit/moz.