I'm seeing a really long, skinny paragraph followed by some empty <div>s and then the 'under construction' image to the left beneath those. The paragraph only has a span of 2 columns and is called pic-1???
I got lost trying to figure out what's within <div> tags, what's missing closing tags, why some stuff is within rows and other things seem to be floating between rows......
Quite a mess to deal with.

And that two span column span is only 16 point something % wide...

I couldn't figure it out, I think I had too many things going on. I just scrapped it and started over.. i'm using Mansour's video to help with a newer fresher looking website!

Matt, have you tried starting with one of the ready-made RLM layouts? That might help you keep things in place while you're getting familiar with the CSS and RLM grid system.

That nails the problem with you, Matt You always seem to have too many things going on.

Believe me, we have all started out as newbies at one time or another, and we were proud of just being able to write basic code so that something showed up in a browser on the web. When I started, nearly 20 years ago, with Notepad, I knew nothing about css, and doctypes and charset declarations were non-existent (at least to my mind), and I did not have this wonderful forum to help me out. It took me about 4 years to realize that there was something called css that could help me getting things straightened.

I'm telling you this because I want you to realize that nobody will come out as the 'world champion' of coding websites just like that. It takes some learning time. I still maintain that you should practise, and master, some simple and straight-forward coding before jumping at the more advanced stuff.

Mansour's header effect is very good, no doubt about that, and I may try it myself some day. But first of all I have to ask myself what kind of site I'm creating, what design and coding elements are needed to achieve what the punters want, or to get the message/aim of the site across to the visitors to it. A website with too many effects is not always the best solution.

@PB yeah i've tried one before, but I seem to get those messed up worse than if I try and code myself hehe..


@Inger, yeah I know it takes time to learn, I just wanted to progress a little further each day and until now with (treehouse) I haven't really nailed down the basics of HTML. The videos are helping me a lot and the people on the forums are just as courteous as over here, so i'm going to give it a go with them for a while until i'm ready to start again. Until that day comes though i'll probably be browsing through here to see how everyone is doing. I really have got to get this website done along with my school work and it's been a rough couple of weeks over here, I haven't had time to get my head straight. With everything you've guys helped me with it does make it A LOT easier to get familiar with the basics of HTML5 and CSS3 cause I already know a little bit. Until then i'm going to sign off for a while and try to get things taken care of on my end. So i'll talk to you all later guys, I need some rest lol.

As long as we know you're working hard on your lessons, we'll forgive your absense!

From: CSS3 The Missing Manual 3rd Edition by David Sawyer McFarland

<div> and <span> explained

http://youtu.be/gih3utjXO4M
And
http://youtu.be/qFk2Tqhaa6M

Understanding the <div> and <span > tags

The <div> tag and the <span> tag are like empty vessels that you fill with content. A
div is a block, meaning it has a line break before it and after it, while a span appears
inline, as part of a paragraph. Otherwise, divs and spans have no inherent visual
properties, so you can use CSS to make them look any way you want. The <div>
(for division) tag indicates any discrete block of content, much like a paragraph or
a headline. But more often it’s used to group any number of other elements, so
you can insert a headline, a bunch of paragraphs, and a bulleted list inside a single
<div> block. The <div> tag is a great way to subdivide a page into logical areas,
like a banner, footer, sidebar, and so on. Using CSS, you can later position each area
to create sophisticated page layouts (a topic that’s covered in Part III of this book).
The <span> tag is used for inline elements; that is, words or phrases that appear
inside of a larger paragraph or heading. Treat it just like other inline HTML tags
such as the <a> tag (for adding a link to some text in a paragraph) or the <strong>
tag (for emphasizing a word in a paragraph). For example, you could use a <span>
tag to indicate the name of a company, and then use CSS to highlight the name by
using a different font, color, and so on. Here’s an example of those tags in action,
complete with a sneak peek of a couple of attributes—id and class—frequently used
to attach styles to parts of a page.
<div id="footer">
<p>Copyright year xxxx, <span class="bizName"> mydomain.com</span></p>
<p>Call customer service at xxx-xxx-xxxx for more information</p>
</div

Additional tags in HTML5
The <div> tag is rather generic—it’s simply a block-level element used to divide a
page into sections. One of the goals of HTML5 is to provide other, more semantic
tags for web designers to choose from. Making your HTML more semantic simply
means using tags that accurately describe the content they contain. As mentioned
earlier in this section, you should use the <h1> (heading 1) tag when placing text that
describes the primary content of a page. Likewise, the <code> tag tells you clearly
what kind of information is placed inside—programming code.
HTML5 includes many different tags whose names reflect the type of content they
contain, and can be used in place of the <div> tag. The <article> tag, for example,
is used to mark off a section of a page that contains a complete, independent composition…
in other words, an “article” as in a blog post, an online magazine article,
or simply the main text of the page. Likewise, the <header> tag indicates a header
or banner, the top part of a page usually containing a logo, site-wide navigation,
page title and tagline, and so on.

Many of the new HTML5 tags are intended to expand upon the generic <div> tag,
Here are a few other HTML5 tags frequently used to structure the content on a page:
• The <section> tag contains a grouping of related content, such as the chapter
of a book. For example, you could divide the content of a home page into three
sections: one for an introduction to the site, one for contact information, and
another for latest news.
• The <aside> tag holds content that is related to content around it. A sidebar in
a print magazine, for example.
• The <footer> tag contains information you’d usually place in the footer of a
page, such as a copyright notice, legal information, some site navigation links,
and so on. You’re not limited, however, to just a single <footer> per page; you
can put a footer inside an <article>, for example, to hold information related
to that article, like footnotes, references, or citations.
• The <nav> element is used to contain primary navigation links.
• The <figure> tag is used for an illustrative figure. You can place an <img> tag
inside it, as well as another new HTML5 tag—the <figcaption> tag, which is
used to display a caption explaining the photo or illustration within the <figure>.

Mansour,

When you copy major sections from a book and post them here, you may want to provide the source (title, author, website, etc.) for context and proper credit

Sure No problem. I am fan of The Missing Manual books.

CSS3 The Missing Manual 3rd Edition by David Sawyer McFarland