Fumbled up page - Forgetting something

**SiberianHuskey** · Oct 23, 2010 19:16

I must be missing something, preview the page (version 3) in FireFox I've fixed up something I did here and redone from your code and the page continues to look not how it should.

**Rayzur** · Oct 23, 2010 19:57

Ok, like I have been saying for the last two posts your nesting procedures are wrong.

Here is what it should be again:

Code:

    <div id="inner">
        <div class="floatwrap">
            <p class="left">
                <a href="tutorials/ramen/paperpile.jpg" class="highslide left" onclick="return hs.expand(this)">
                    <img src="tutorials/ramen/paperpile.jpg" alt="Highslide JS" title="Click to enlarge" height="250" width="250">
                </a>
            </p>
            <div class="content right">
                <p>Ramen is an OpenSource Compositor which you can download here.  In this tutorial I'm going to 
                show you the fundamentals of Ramen by how to move around in the Interface, there will be follow 
                up Ramen Tutorials as well as Autodesk Composite tutorials.</p>
            </div>
        </div>

Now your math was wrong also, you never did adjust the width on the <div class="content right"> . But I have removed the 30px side paddings from the #inner div now also so you can have more room to work with.

I will highlight the CSS changes in the complete code below:

Temporary red BG color has been set on .content so you can SEE where it is

I have also been using a 4.01 Strict Doctype, there is no need to close your images with the trailing forward slash in that case.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Staggered Float Demo</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font:100&#37;/1.2 arial, helvetica, sans-serif;
    background:#b7b7b7;
}
h1 {
    margin:0;
    padding:.5em;
    font-size:1.65em;
    text-align:center;
}

/*=== Begin Layout ===*/
#wrap {
    width:700px;
    margin:auto;
}
#head {
    height:190px;
    width: 700px;
    background-image: url(images/header-graphic.gif);
}
#inner {
    overflow:hidden;/*IE7 haslayout and contain floats*/
    padding:30px 0 0;/*30px 30px 200px;*/
    background:#b7b7b7;
}
* html #inner { /*IE6 haslayout*/
    height:1%;
    overflow:visible;
}
.floatwrap {/*wrap around each pair of floats*/
        float:left;
        width:100%;
        margin-bottom:30px;
        background:#b7b7b7
    }
.floatwrap a {
        width:250px;
        height:250px;
        background:#CC9900;
        text-align:center;
    }
     #inner .left {/*class for all #inner > left floats*/
        float:left;
    }

    #inner .right {/*class for all #inner > right floats*/
        float:right;
    }
    #inner p {
        margin:0;
        padding:60px;
        font-size:1em;
        background:yellow;
    }
    #inner p img {
        display:block;
        width:250px;
        height:250px;
        background:orange;
        text-align:center;
    }
    #inner .content {
        width:295px;/*275px;*/
        background: red;/*#b7b7b7;*/
    }
    #inner .content p { /*resets from #inner p*/
        margin:.5em .5em 2em;
        padding:0;
        background:none;
    }
#foot {
    height:100px;
    overflow:hidden;/*margin clearance*/
    background:#66CC00;
    font-weight:bold;
    text-align:center;
}
</style>
</head>
<body>

<div id="wrap">
    <div id="head">
        <h1>Staggered Float Demo</h1>
    </div>

    <div id="inner">
        <div class="floatwrap">
            <p class="left">
                <a href="tutorials/ramen/paperpile.jpg" class="highslide left" onclick="return hs.expand(this)">
                    <img src="tutorials/ramen/paperpile.jpg" alt="Highslide JS" title="Click to enlarge" height="250" width="250">
                </a>
            </p>
            <div class="content right">
                <p>Ramen is an OpenSource Compositor which you can download here.  In this tutorial I'm going to 
                show you the fundamentals of Ramen by how to move around in the Interface, there will be follow 
                up Ramen Tutorials as well as Autodesk Composite tutorials.</p>
            </div>
        </div>
        
        <div class="floatwrap">
            <div class="content left">
                <p>Left Content</p>
                <p>Left Content</p>
                <p>Left Content</p>
                <p>Left Content</p>
                <p>Left Content</p>
                <p>Left Content</p>
                <p>Left Content</p>
                <p>Left Content</p>
            </div>
            <p class="right"><img src="images/demo.jpg" alt="right image"></p>
        </div>

        <div class="floatwrap">
            <p class="left"><img src="images/demo.jpg" alt="left image"></p>
            <div class="content right">
                <p>Right Content</p>
                <p>Right Content</p>
                <p>Right Content</p>
                <p>Right Content</p>
                <p>Right Content</p>
                <p>Right Content</p>
            </div>
        </div>

        <div class="floatwrap">
            <div class="content left">
                <p>Left Content</p>
                <p>Left Content</p>
                <p>Left Content</p>
            </div>
            <p class="right"><img src="images/demo.jpg" alt="right image"></p>
        </div>
    </div><!--end inner-->

    <div id="foot"></div>
</div> <!--end wrap-->

</body>
</html>

**SiberianHuskey** · Oct 24, 2010 12:55

I see what you did, and the mistake I had done in the HTML. Thank you

**SiberianHuskey** · Oct 24, 2010 14:00

One thing was over looked

Oh no

I've tried margins and relative positioning to move the #head h1 style it's over lapping the background graphic !

**Rayzur** · Oct 24, 2010 14:39

^ I can't see what is wrong with your h1 because you have not updated your page with any of the corrections I have given you.

Update your page and post the link again so we have it on page #2 of this thread.

**SiberianHuskey** · Oct 25, 2010 19:18

The <h1> tag on this page.

**Rayzur** · Oct 25, 2010 19:52

As you can tell that h1 text is from the demo I was using. I would suggest that you use an image replacement method for the h1 since your page does need a heading.

Or move the h1 down below the header.

What is the title of the page? "Ramen Tutorial" or something like that!
Okay, looking at it again I see that the actual page <title> might go something like this:

<title>Ramen Tutorials | The Creative Sheep</title>

Now the question is: what would your h1 be?

"Introduction to Ramen"
"Learning the Basics of Ramen"

You see where I am going with this now.

Here is an example of the Gilder/Levin image replacement, the h1 is actually the logo image in the top left on that page. When images are off there is still text that defines the h1.

**SiberianHuskey** · Oct 25, 2010 21:14

I see what you mean

Learning the Basics of Ramen. I bought up the problem because it was over lapping the background graphic instead of it being placed below the header background graphic

Another H1 is going to have to be added then !

**Rayzur** · Oct 25, 2010 22:02

it was over lapping the background graphic instead of it being placed below the header background graphic

Okay, so you just want it below the header BG image. That's easy, just move the h1 into the #inner div as the first element.

Code:

<div id="wrap">
    <div id="head">
    </div>

    <div id="inner">
    <h1>Learning the Basics of Ramen</h1>        
        <div class="floatwrap">
            X
            X
            X
        </div>

Now, going back to what I was say earlier about replacement text. You have an empty header that is nothing but a BG image. At this point it is basically just serving as a logo. You might want to consider having the text in the image as "actual hidden text" below the header image.

**Rayzur** · Oct 25, 2010 23:52

Following up where I left off about the replacement text in the header I have reworked the live demo that I posted earlier.

http://www.css-lab.com/test/husky/husky-tut.html

If you view that page with images disabled you will still get descriptive text in your header. I don't consider all that text as a heading that would require an h1, nor would I want to cram it all in there and try to call it an h1. The h1 is pointed out in my last post and it does not even reside in the #head div.

We have to be able to style the replacement text somehow and we need it in a container to do that. The closet element we have for containing generic text is a <p> tag. Some will argue the semantics and say that it is not paragraph content, it is a well debated subject and there are several threads running around about it.

Now the #head BG image is moved to the absolute positioned span which lays over all that text for viewers with images on.

Having said that here is what I have done:

Code:

<div id="wrap">
    <div id="head">
        <p class="left">The Creative Sheep <br><small>Animator / Digital Artist</small></p>
        <p class="right">Learning to Basics <br><small>3D &amp; Graphic Design Tutorials</small></p>
        <p id="center">Tutorials</p>
        <span>&nbsp;</span>
    </div>

    <div id="inner">
        <h1>Learning the Basics of Ramen</h1>
        <div class="floatwrap">
            X
            X
            X
        </div>

Now I have set up some left and right float classes to use throughout the entire page. I had them targeting the floats on the #inner div earlier but I removed those and set up general classes.

Code:

body {
    margin:0;
    padding:0;
    font:100%/1.2 arial, helvetica, sans-serif;
    background:#555;/*#b7b7b7;*/
}
h1 {
    margin:0;
    padding:.5em;
    font-size:1.65em;
    text-align:center;
}
p {margin:0;}

.left {float:left;}
.right {float:right;}

/*=== Begin Layout ===*/
#wrap {
    width:700px;
    margin:auto;
}
#head {
    position:relative;/*containing block for AP span*/
    overflow:hidden;
    width: 700px;
    height:190px;
    background:#66CC00;
}
    #head p {
        margin:0;
        padding:20px 10px 10px;
        font:bold 1.4em/1 arial;
    }   
    p#center {
        text-align:center;
        font:bold 1.6em/1.6 arial;
        color:#FFF;
    }    
    #head p small {
        font:bold .6em/1.2 arial;
    }
    #head span { /*hide replacement text*/
        position:absolute;
        width: 700px;
        height:190px;
        top:0;left:0;
        background: url(images/header-graphic.gif) no-repeat;
        font-size:0;
    }

/*=== Begin Main Content ===*/

**SiberianHuskey** · Oct 26, 2010 23:15

Something that I overlooked if the BG images were disabled, nothing would be shown. I didn't copy the HTML from your snippets, to understand here is the current snippet of HTML code from the same page we are both working from what I have currently. What needs to be added or taken away ?

Also is it safe to assume a relative positioning would enable me to position the #inner h1 on the page ?

Code HTML4Strict:

<div id="wrap">
    <div id="head">
    <p class="left">The Creative Sheep <br><small>Animator / Digital Artist</small></p>
        <p class="right">Learning to Basics <br><small>3D &amp; Graphic Design Tutorials</small></p>
        <p id="center">Tutorials</p>
        <span>&nbsp;</span>
    </div>
 
    <div id="inner">
    <h1>Staggered Float Demo</h1>
        <div class="floatwrap">
            <p class="left">
                <a href="tutorials/ramen/paperpile.jpg" class="highslide left" onclick="return hs.expand(this)">
                    <img src="tutorials/ramen/paperpile.jpg" alt="Highslide JS" title="Click to enlarge" height="250" width="250" />
                </a>
            </p>
            <div class="content right">
                <p>Ramen is an OpenSource Compositor which you can download here.  In this tutorial I'm going to show you the fundamentals
            of Ramen by how to move around in the Interface, there will be follow up Ramen Tutorials as well as Autodesk Composite tutorials.</p>
            </div>
        </div>

Code CSS:

<style type="text/css">
body {
    margin:0;
    padding:0;
    font:100%/1.2 arial, helvetica, sans-serif;
    background:#b7b7b7;
}
h1 {
    margin:0;
    padding:.5em;
    font-size:1.65em;
    text-align:center;
}
 
/*=== Begin Layout ===*/
#wrap {
    width:700px;
    margin:auto;
}
#head {
    height:190px;
    width: 700px;
    background-image: url(images/header-graphic.gif);
}
#head h1 {
 margin-bottom: 200px;
}
 
 
#inner {
    overflow:hidden;/*IE7 haslayout and contain floats*/
    padding:30px 0 0;
    background:#b7b7b7;
}
* html #inner { /*IE6 haslayout*/
    height:1%;
    overflow:visible;
}
.floatwrap {/*wrap around each pair of floats*/
        float:left;
        width:100%;
        margin-bottom:30px;
        background:#b7b7b7
    }
.floatwrap a {
        width:250px;
        height:250px;
        background:#CC9900;
        text-align:center;
    }
     #inner .left {/*class for all #inner > left floats*/
        float:left;
    }
 
    #inner .right {/*class for all #inner > right floats*/
        float:right;
    }
    #inner p {
        margin:0;
        padding:60px;
        font-size:1em;
        background:yellow;
    }
    #inner p img {
        display:block;
        width:255px;
        height:255px;
        background:orange;
        text-align:center;
    }
    #inner .content {
        width:295px;
        background: #b7b7b7;
    }
    #inner .content p { /*resets from #inner p*/
        margin:.5em .5em 2em;
        padding:0;
        background:none;
    }
#foot {
    height:100px;
    overflow:hidden;/*margin clearance*/
    background:#66CC00;
    font-weight:bold;
    text-align:center;
}
</style>

**RyanReese** · Oct 27, 2010 09:20

Of course it will let you position the H1 in the page, though I wouldn't position text with RP. It would only move the element visually and not physically. So if you are using it as a header then some text overlap might occur

I'd move it in margins

**SiberianHuskey** · Oct 27, 2010 10:25

It's almost there

Except the space see in at the top from the header ?(link).

The text over lapping the background image, which I'm hoping Rayzur or someone could answer as Rayzur mentioned about having text in if the background images are turned off. And I'd like to strip the page of any IE6 fixes as I won't be supporting IE6

**SiberianHuskey** · Oct 27, 2010 10:27

It's almost there

Except the space see in at the top from the header ?(link).

The text over lapping the background image, which I'm hoping Rayzur or someone could answer as Rayzur mentioned about having text in if the background images are turned off. And I'd like to strip the page of any IE6 fixes as I won't be supporting IE6

**RyanReese** · Oct 27, 2010 10:34

The extra space is caused by the default margin on the <p> element pushing through the parent

. You can either control the top margin of the <p>'s or stop the margin collapse via a 1px top margin on "#head"

**Rayzur** · Oct 27, 2010 11:38

Originally Posted by SiberianHuskey

It's almost there

Except the space see in at the top from the header ?(link).

The text over lapping the background image, which I'm hoping Rayzur or someone could answer as Rayzur mentioned about having text in if the background images are turned off.

It looks like you haven't even read #post35, it was all explained in detail.

You have not included any of the new #head styles that I posted. The BG image is set on the span now.

You are also missing the closing tag </div> for the #head div.

GO BACK and read post #35, pay attention to the code. I have color-coordinated the CSS and HTML highlights so you could see how they work together.

I also had overflow:hidden; set on both the #head and #inner divs which took care of all collapsing margin issues.

EDIT:
The complete CSS can be seen by viewing the page source of the link in post #35.

**SiberianHuskey** · Oct 27, 2010 14:14

I rechecked message #35 and my styles are in a bit of a mess, if you view the comment this snippet of code I just want to know where the main content styles begin so I can arrange everything.

Code CSS:

<style type="text/css">
body {
    margin:0;
    padding:0;
    font:100%/1.2 arial, helvetica, sans-serif;
    background:#b7b7b7;
}
h1 {
    margin:0;
    padding:.5em;
    font-size:1.65em;
    text-align:center;
}
p {
  margin: 0;
}
.left {
  float: left;
}
.right {
  float:right;
}
 
 
/*=== Begin Layout ===*/
#wrap {
    width:700px;
    margin:auto;
}
#head {
    position: relative;
    overflow: hidden;
    height:190px;
    width: 700px;
    background: #66CC00;
}
#head h1 {
 margin-bottom: 200px;
}
#head p {
  margin: 0;
  padding: 20px 10px 10px;
  font: bold 1.4em / 1 arial;
 
}
p#center {
  text-align: center;
  font: bold 1.6em / 1.6 arial;
  color: #FFF;
}
 
/* Does the main content begin here ??? */
 
#inner {
    overflow:hidden;/*IE7 haslayout and contain floats*/
    padding:30px 0 0;
    background:#b7b7b7;
}
* html #inner { /*IE6 haslayout*/
    height:1%;
    overflow:visible;
}
.floatwrap {/*wrap around each pair of floats*/
        float:left;
        width:100%;
        margin-bottom:30px;
        background:#b7b7b7
    }
.floatwrap a {
        width:250px;
        height:250px;
        background:#CC9900;
        text-align:center;
    }
     #inner .left {/*class for all #inner > left floats*/
        float:left;
    }
 
       #inner h1 {
      margin: -45px -50px 60px 222px;
    }
 
 
    #inner .right {/*class for all #inner > right floats*/
        float:right;
    }
    #inner p {
        margin:0;
        padding:60px;
        font-size:1em;
        background:yellow;
    }
    #inner p img {
        display:block;
        width:255px;
        height:255px;
        background:orange;
        text-align:center;
    }
    #inner .content {
        width:295px;
        background: #b7b7b7;
    }
    #inner .content p { /*resets from #inner p*/
        margin:.5em .5em 2em;
        padding:0;
        background:none;
    }
#foot {
    height:100px;
    overflow:hidden;/*margin clearance*/
    background:#66CC00;
    font-weight:bold;
    text-align:center;
}
</style>

**SiberianHuskey** · Oct 27, 2010 17:03

I did the changes but the page is still somewhat broken, post #39 has the link to view the update.

**Rayzur** · Oct 27, 2010 17:42

Code:

/* Does the main content begin here ??? */

#inner {
    overflow:hidden;/*IE7 haslayout and contain floats*/
    padding:30px 0 0;
    background:#b7b7b7;
}

Yes, that is where it begins.

I did the changes but the page is still somewhat broken, post #39 has the link to view the update.

Here is the main problem. You keep copying and pasting bits into the page and everytime you do that you break the page.

On that link you just gave you are missing this opening div tag below in red.

Code:

    <div id="inner">
        <h1>Tutorial</h1>
        <div class="floatwrap">
            <p class="left">
                <a href="tutorials/ramen/paperpile.jpg" class="highslide left" onclick="return hs.expand(this)">
                    <img src="tutorials/ramen/paperpile.jpg" alt="Highslide JS" title="Click to enlarge" height="250" width="250">
                </a>
            </p> 
            <div class="content right">
                <p>Ramen is an OpenSource Compositor which you can download here.  In this tutorial I'm going to show you the fundamentals
            of Ramen by how to move around in the Interface, there will be follow up Ramen Tutorials as well as Autodesk Composite tutorials.</p>
            </div>
        </div>

You don't need these float classes on the #inner anymore either. I told you that back in post #35. And what is with the negative margins on the h1, all you need to do is give it text-align:right and add some side padding if you want the text on the right. It does not need a -45px top margin either, you did that because your page was FUMBLED UP!

Code:

     #inner .left {/*class for all #inner > left floats*/
        float:left;
    }

       #inner h1 {
      margin: -45px -50px 60px 222px;
    }


    #inner .right {/*class for all #inner > right floats*/
        float:right;
    }

You need to just go back to this link:
http://www.css-lab.com/test/husky/husky-tut.html

Right click it and "SAVE PAGE"

Then you will have all the correct CSS/HTML since I have already cleaned out the old styles.

And you will have NO REASON TO FUMBLE UP THE PAGE ANYMORE!

After that have a good long read through the SitePoint CSS Reference to learn more about how CSS works.

**SiberianHuskey** · Oct 27, 2010 20:03

I successfully manually changed it

Don't worry I'm trying to understand it more, when I can I'm trying.

This CSS stuff seems a little un-logical to me, it's like trying to ride a bike backwards in a maze best how I can describe it. The HTML although I'm not perfect at it makes more sense.

I would like to place the #inner h1 someone else, as I want the H1 tag to be not where it is currently, can I place it within the #head or the .p class=right ? I want it above the graphic but position it from the top.

**Rayzur** · Oct 27, 2010 22:16

I would like to place the #inner h1 someone else, as I want the H1 tag to be not where it is currently, can I place it within the #head or the .p class=right ? I want it above the graphic but position it from the top.

Yes you can move it back to the head div. We will have to move the hidden text around a little bit so the h1 is not laying on top of the other text with images off.

The h1 will need to have position:relative; set on it so we can layer it above the AP span (head BG image).

Keep in mind though that your h1 should be describing the content and leading into any sub-headings on each page. That means the h1 will be changing from page to page.

Personally I don't think it belongs up in your header div, it serves it purpose well where it is right now.

**SiberianHuskey** · Oct 28, 2010 06:29

The H1 will be changing from tutorial to tutorial

Within the #head h1 I set position: relative and padding to position, no other rule ?

#head h1 {
position: relative;
padding: 200px -50px 200px;
float: none;
}

**Rayzur** · Oct 28, 2010 11:21

Originally Posted by SiberianHuskey

The H1 will be changing from tutorial to tutorial

Which is why I said that it needs to be visible to the user.

Personally I don't think it belongs up in your header div, it serves it purpose well where it is right now.

Originally Posted by SiberianHuskey

I would like to place the #inner h1 someone else, as I want the H1 tag to be not where it is currently, can I place it within the #head or the .p class=right ? I want it above the graphic but position it from the top.

Honestly I don't know what you are wanting to do at this point. You say you want to position it from the top of the header but then you give it 200px top padding to push it out of the header.

Code:

#head h1 {
position: relative;
padding: 200px -50px 200px;
float: none;
}

You are still not reading or understanding my posts, I suspect it is the later. That is because you will not commit yourself to learning basic CSS. I will help you one more time and then I will have to leave you with it. It has gotten to the point that you are unable to make any changes on your own.

I have already said that you don't need a negative right margin to position your h1 to the right. At this point it will probably be best to absolute position the h1 to the bottom of the head div. That will auto stack it above the span's BG image and shrinkwrap the h1 box. That will also keep it from laying on top of the hidden text if images are turned off.

Here is my updated example
(once again: right click > "SAVE PAGE" for complete code)

You only need one h1 on a page, there is no need to say "#head h1" when all you need to say is "h1".

Here are the #head styles:

Code:

#head {
    position:relative;
    overflow:hidden;
    width: 700px;
    height:190px;
    background:#66CC00;
}
    #head p {
        padding:20px 10px 10px;
        font:bold 1.4em/1 arial;
    }   
    #head p.cntr {
        text-align:center;
        font:bold 1.6em/1.6 arial;
        color:#FFF;
    }    
    #head p small {
        font:bold .6em/1.2 arial;
    }
    #head span { /*hide replacement text*/
        position:absolute;
        width: 700px;
        height:190px;
        top:0;left:0;
        background: url(images/header-graphic.gif) no-repeat;
        font-size:0;
    }
    h1 {
        position:absolute;
        bottom:5px; right:5px;
        margin:0;
        padding:0 .25em;
        font:bold 1.3em/1.3 arial;
        border:1px dotted red;
    }

The html:

Code:

<div id="wrap">
    <div id="head">
        <p class="left">The Creative Sheep <br><small>Animator / Digital Artist</small></p>
        <p class="right">Learning to Basics <br><small>3D &amp; Graphic Design Tutorials</small></p>
        <p class="cntr">Tutorials</p>
        <span>&nbsp;</span>
        <h1>Learning the Basics of Ramen</h1>
    </div>

**SiberianHuskey** · Oct 28, 2010 20:27

I was reviewing what you had changed. Sorry I don't quite understand CSS, I over look when you have to make the changes in the HTML for it to reflect. What threw me off the most but I know it is important is when you added the background text for the background images. I know that CSS is styling each HTML tag but what throws me out of the loop is the positioning of the elements and things like overflow, the rest I somewhat understand.

**Rayzur** · Oct 28, 2010 21:22

I know that CSS is styling each HTML tag but what throws me out of the loop is the positioning of the elements and things like overflow, the rest I somewhat understand.

The page is pretty basic but yes there are some techniques being used that may be above your current skill level. It just takes time to learn this stuff and no one learns it overnight.

I am mainly just using the overflow:hidden; to fix collapsing margins and contain floats.

As far as the positioning goes I will try to explain some of it to you. First we have position:relative; (RP) and overflow:hidden; set on the #head div. The RP is just to establish a containing block for the absolute positioned (AP) children, that is the <span> which has the head BG image applied to it and the h1. AP elements position themselves from the the nearest ancestor whose position property has one of the values absolute, fixed, or relative.

Code:

#head {
    position:relative; /*containing block for AP children*/
    overflow:hidden; /*uncollapse margins*/
    width: 700px;
    height:190px;
    background:#66CC00;
}

Next we have some auto stacking levels taking place with the AP'd span and h1 due to the order of the html. The <span> with the BG image layers over the hidden text since it is a positioned element that comes lower in the source order. The same principle is happening wit the h1, it is auto stacking above the span. By allowing them to auto stack I did not need to set z-index on them.

Code:

<div id="wrap">
    <div id="head">
        <p class="left">The Creative Sheep <br><small>Animator / Digital Artist</small></p>
        <p class="right">Learning to Basics <br><small>3D &amp; Graphic Design Tutorials</small></p>
        <p class="cntr">Tutorials</p>
        <span>&nbsp;</span>
        <h1>Learning the Basics of Ramen</h1>
    </div>

Just start with the basic stuff first in the CSS Reference, if you don't learn the basics you will get in over your head if you try to jump into advanced methods without having basic knowledge.

I know you were struggling with the Box Properties also. Margin, Padding and Borders must all be taken into account when you set dimensions. That is why you had floats dropping half way through this thread.

Sorry I don't quite understand CSS, I over look when you have to make the changes in the HTML for it to reflect.

You will need to understand how the HTML elements match up to the CSS Selectors that are styling them. You should be able to look at the css and then find each corresponding element in the html.

One step at a time and you will begin to understand these things as you put them into practice on your own.

User Tag List

Thread: Fumbled up page - Forgetting something

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions