YouTube CSS Tutorial Discussion Thread

lisa · #1 (**permalink**) 04-25-2009, 01:07 PM

coosbaytv suggested I stick a thread here for those who want to discuss the recent CSS Tutorial I posted on YouTube. I thought it was a great idea. If you haven't seen my 4-part tutorial, you can view the playlist here.

As a caveat/disclaimer, I'd like to say that these videos provide a very quick overview of how CSS works and what you can do. I would HIGHLY, HIGHLY recommend you learn the basics of CSS by going to sites like http://www.w3schools.com and http://www.htmldog.com first. I must admit, I learned CSS backward -- by viewing other sites and templates so my foundation is not as strong as I would like. Learning the basics will help you with troubleshooting and going beyond the basics when it comes to design.

DTB · #2 (**permalink**) 04-25-2009, 01:36 PM

Fabulous! Going to check it out now.

Xfactor · #3 (**permalink**) 04-25-2009, 08:06 PM

In part2, when I went to create a link for my header(everything works) but now, my left and right navbar extends, all the way into my header, and I cant figure out what's causing it.

Any suggestions?

lisa · #4 (**permalink**) 04-25-2009, 09:11 PM

Hmmm.... did you adjust any of the other parameters of the other sections of the site?

Xfactor · #5 (**permalink**) 04-25-2009, 09:31 PM

Quote:

Originally Posted by lisa

Hmmm.... did you adjust any of the other parameters of the other sections of the site?

Im double checking everything right now, so we'll see. It seems to have to do something with the positioning of the "index file." For example, after completing all of tutorial Part2, it just slighty extends into the header.

Here are the current params:

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="container">

<div id="header">
<a href="http://www.ebay.com">This is the header</a>

<div class="Horizlinks">
<ul>
<li><a href="http://www.ebay.com">Header Link 1</a><li>
<li><a href="http://www.ebay.com">Header Link 2</a><li>
<li><a href="http://www.ebay.com">Header Link 3</a><li>
<li><a href="http://www.ebay.com">Header Link 3</a><li>
</ul>
</div>

<p>Header Text</p>

<div id="leftnav">This is the leftnav</div>

<div id="rightnav">This is the rightnav</div>

<div id="body">This is the body</div>

<div id="footer">This is the footer</div>

</div>

</body>
</html>

lisa · #6 (**permalink**) 04-25-2009, 09:41 PM

Figured it out. You lost a closing </div> at some point. Add one after the line

HTML Code:

<p>Header Text</p>

Xfactor · #7 (**permalink**) 04-25-2009, 09:49 PM

Quote:

Originally Posted by lisa

Figured it out. You lost a closing </div> at some point. Add one after the line

HTML Code:

<p>Header Text</p>

Awesome

coosbaytv · #8 (**permalink**) 04-26-2009, 08:26 AM

Lisa:

Thanks so much for doing this!

I hope it is mearly the beginning.

As I have been at CSS off and on for a couple of years now, I have had a rough time wrapping my head around it and have been through 4 or 5 sources for help.

Since I am a media creator and not a coder, most sources that I have found turn out to be of a different mentality than I am. (Coding is one side of the brain and content creation is the other).

I am not sure if it is because I have been over this stuff and now it is finally starting to sink in or if you have the ability to get through in a relatable way that actually works. I have a feeling it is both!

That said, I am giving you the credit for the breakthrough of it starting to make sense.

As I see in a post above, I knew that this thread would eventually turn into a "here is my code, what am I doing wrong?" thread. I am sure that this is due to the fact that creating a VERY BASIC page with CSS and using it for a real world site are two different things.

So, my hope here is that this thread and your tutorials are the tools that get those of us that have been trying to learn CSS the real way to a point that we are an "intermediate" user.

Anyway, enough on that for now!

Thanks again as always, Nice work...

More later!

lisa · #9 (**permalink**) 04-26-2009, 11:56 AM

Thanks coosbaytv,

Glad the tutorials helped. I'm still learning a lot myself so my motto is "When I learn, I teach"

so I hope to continue to expand the tutorials at a later date. There's so much more I could/should have included but I was hoping it was a good starting point for people who have always been intimidated by learning CSS. It's such an important part of web design and I don't want people to ignore it for as long as I did.

coosbaytv · #10 (**permalink**) 04-26-2009, 10:07 PM

Lisa: That is good to hear! I am finding that the more info you can share, the more you show your expertise and in turn create value in the eyes of your audience. Once you have the value, you can then start to ask that audience for feedback and eventually sales of products you create.

So, the first question I have is on relative positioning as far as page width in percentages as opposed to a fixed value. Is this something that can be easily done given the info in the four lessons so far or is this something fairly "intermediate" as a skill is concerned?

Second; Any thought to doing the same Tuts for Java Script? It seems that this is so intertwined with real sites these days that we have to know the basics of it as well.

Third: Is there a list of the CSS top 50 or 100 Attributes and definitions (like a spreadsheet) that we can grab the syntax from?

That's it for now! Trust me, there will be more later...

Xfactor · #11 (**permalink**) 05-04-2009, 11:36 PM

Ive prepared my folders in preperation for SBI! and now my images arent showing up, when I preview my site in my browser.

Ive renamed all my images in my style-sheet accordingly as follows>
background-image: url(images-files/header.jpg); but they're still not showing-up. The background-color does, but not the images.

I noticed this after I added the support-files(text) folder, to my index page. Or after I put my style.css file into my support-files folder.

<link href="support-files/style.css" rel="stylesheet" type="text/css">

Any suggestions of what im doing wrong?

lisa · #12 (**permalink**) 05-05-2009, 02:10 PM

Did SBI! prompt you to re-upload those images since they are now saved in a new folder? The first time you upload your site with the "Upload Your Own HTML" method you should be prompted to re-upload those images again because SBI! recognizes they are located in a new place.

Xfactor · #13 (**permalink**) 05-06-2009, 07:54 PM

At first SBI! wouldnt even prompt me, but for some reason after several attempts it finally propmted me.

But it still came as no surprise too me, that my images werent showing up in SBI! as well as in my Browser, which lead me to believe the problems were one of the same, therefore it must be a reference problem right, right.

After posting in the SBI! Forums, I found my answer...... Turns out, you have to reference your images, exactly like this in your style sheet.

url(../image-files/header.jpg)

I never would of figured this out by myself

coosbaytv · #14 (**permalink**) 05-06-2009, 08:39 PM

OK Lisa!

Here is the result of the fruits of your labor!

http://www.weloveournorthbendschools.com

This is my first ever hand coded html/CSS site!

It is to help our local community and school board to have more of a dialogue with our budget cuts!

Thanks

lisa · #15 (**permalink**) 05-06-2009, 11:34 PM

Very nice! Looks like you took the reigns and ran with it!! I like how you made your own design instead of just going with the template.

WB Sponsors