Fumbled up page - Forgetting something

HTML & CSS
1 
<div id="head">
        <h1>Compositing in Ramen</h1>
    </div>
    <div id="bgimagewrap">
    <div id="inner">
        <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="360" width="460" /></a>
        <div class="content right">
            <p>Ramen is an OpenSource Compositor which you can download <a href="">here</a>.
In this tutorial I'm going to show you the fundamentals of Ramen on how
to navigate around in the Interface. There will be follow up Ramen
Tutorials as well as Autodesk Composite tutorials to come.</p>
        </div>
            </div>
        <br class="clear">

The code originally had content to the left and content to the right etc, but I fumbled that up and now the page is a mocking mess because I forgot that behind each anchor was suppose to be a back image. Above is a section of code of the page and below is the CSS which I added I was trying margins but that didn’t help, hoping to get the page how it originally was but with each image anchor with a background image.


#head {
    height:189px;
    background: url(images/header-graphic.gif);
    padding-top: 1px;
}
#head h1 {
  margin: 120px 0 0 225px;
}

#bgimagewrap {
  background: #FFFF33;
  width: 350px;
  height: 350px;
}


#inner {
    width:700px;/*IE6 haslayout*/
    padding-top:32px;
    overflow:hidden;/*contain floated children*/
    background:#b7b7b7;
}
2

^ 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.

3

That tutorialpage2.htm link you just posted needs to be thrown away. It is using <br> tags for clearing and you have inline-elements running loose everywhere.

The tutorialpage3.htm you posted is what you should be using. You have not corrected the <p> tags as I explained in my last post. I don’t know how else to explain it to you, reread my last post and look at how I nested everything in the bolded black <p> tag in the last codebox.

You are still having width problems that I explained back in post #21, your math is not correct. Everything has been explained already, you might want to reread what I have posted from post #18 on. :wink:

4

There are things missed, I’ve played around with the version you modified and things appear to have went so\so. View this page then view this [URL=“http://www.thecreativesheep.ca/videotut/tutorialpage2.htm”]page you’ll see there are parts missing on the second page the background DIV that is represented in yellow won’t align in firefox.

5

where is the page again?

Here:slight_smile:

Paul
I think he wants an image in a div with a yellow bg, with the div bigger that the img so you can see yellow on all 4 sides or just two… then a content box kitty corner??

Correct, so I can see the yellow on all 4 sides :slight_smile:

6

Paul
I think he wants an image in a div with a yellow bg, with the div bigger that the img so you can see yellow on all 4 sides or just two… then a content box kitty corner??

7

where is the page again?

8

Not the best practice but you can position:relative; .bgimagewrap { and use a (-) top margin to move it up. Be sure to z-index it if you want it to lay on top. Or postion:absolute it and sue margin-top: and margin-left: in relation to the first element that’s absolutely positioned. If none exist it positions off the html tag which is 1 1.

9

<img src=“tutorials/ramen/paperpile.jpg” alt=“Highslide JS” title=“Click to enlarge” height=“360” width=“460” align-“left”>

10

Oh you are right :slight_smile: I didn’t realize that upon writing this message. I suppose I can’t have two ID nested correct ?

11

After applying those fixes and doing some adjusting on my own with the styles, take a look at the page I can’t seem to fix it one way or another :mad:

<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);
}
#inner {
    overflow:hidden;/*IE7 haslayout and contain floats*/
    padding:30px 30px 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:55px;
        font-size:1em;
        background:yellow;
    }
    #inner p img {
        display:block;
        width:255px;
        height:255px;
        background:orange;
        text-align:center;
    }
    #inner .content {
        width:305px;
        background: #0099FF;
    }
    #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>

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

    <div id="inner">
        <div class="floatwrap">
        <a href="tutorials/ramen/paperpile.jpg" class="highslide left" onclick="return hs.expand(this)">
        <p class="left"><img src="tutorials/ramen/paperpile.jpg" alt="Highslide JS" title="Click to enlarge" height="250" width="250" /></a>
            <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">
        <p>Footer Stuff</p>
    </div>
</div> <!--end wrap-->

</body>
12

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

Here is what it should be again:

    <div id="inner">
        [B]<div class="floatwrap">[/B]
            [B]<p class="left">[/B]
                [COLOR=Blue]<a href[/COLOR]="tutorials/ramen/paperpile.jpg" class="highslide left" onclick="return hs.expand(this)">
                    [COLOR=DarkGreen]<img src[/COLOR]="tutorials/ramen/paperpile.jpg" alt="Highslide JS" title="Click to enlarge" height="250" width="250">
                [COLOR=Blue]</a>[/COLOR]
            [B]</p>[/B]
            [COLOR=Blue]<div class="content right">[/COLOR]
                <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>
            [COLOR=Blue]</div>[/COLOR]
        [B]</div>[/B]

Now your math was wrong also, you never did adjust the width on the [COLOR=Blue]<div class=“content right”> . [COLOR=Black]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 :wink:

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.
[/COLOR][/COLOR]


<!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*/
    [B]padding:30px 0 0;[/B][COLOR=Red]/*30px 30px 200px;*/[/COLOR]
    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;
        [B]width:250px;
        height:250px;[/B]
        background:orange;
        text-align:center;
    }
    #inner .content {
        [B]width:295px;[/B]/[COLOR=Red]*275px;*/[/COLOR]
        [B]background: red;[/B]/*#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">
            [B]<p class="left">[/B]
                [B]<a href[/B]="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">
                [B]</a>[/B]
            [B]</p>[/B]
            <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>


13

After applying those fixes and doing some adjusting on my own with the styles, take a look at the page I can’t seem to fix it one way or another :mad:
You are not paying attention to your nesting procedures. In the html you posted above you tried to nest the <p> tag inside the anchor which is invalid to start with. Then you did not close the <p> tag either.

[B]<a href[/B]="tutorials/ramen/paperpile.jpg" class="highslide left" onclick="return hs.expand(this)">
[COLOR=Red]<p class="left">[/COLOR]<img src="tutorials/ramen/paperpile.jpg" alt="Highslide JS" title="Click to enlarge" height="250" width="250" />[B]</a>[/B]

Here is a tabbed out version of what I have been using all along


[B][COLOR=Black]<p class="left">[/COLOR][/B]
    [B][COLOR=Blue]<a href[/COLOR][/B]="tutorials/ramen/paperpile.jpg" class="highslide left" onclick="return hs.expand(this)">
        [B][COLOR=DarkGreen]<img src[/COLOR][/B]="tutorials/ramen/paperpile.jpg" alt="Highslide JS" title="Click to enlarge" height="250" width="250"[B][COLOR=DarkGreen] />[/COLOR][/B]
    [B][COLOR=Blue]</a>[/COLOR][/B]
[B][COLOR=Black]</p>
[/COLOR][/B]
14

I fixed the part of the page I fumbled up. The part I’m trying to fix now is this part of the HTML:

<div class="bgimagewrap">
        <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="360" width="460" /></a>
        <div class="content right">
            <p>Ramen is an OpenSource Compositor which you can download <a href="">here</a>.
In this tutorial I'm going to show you the fundamentals of Ramen on how
to navigate around in the Interface. There will be follow up Ramen
Tutorials as well as Autodesk Composite tutorials to come.</p>
        </div>
            </div>

The DivClass=Content Right P tag is resting below the image tag I want to position it at the side of the image tag here is the CSS for the <P> tag:

   #inner .right {/*class for all #inner > right floats*/
        float:right;
        margin:0 32px 32px 0;
        display:inline;/*fix IE6 float margin bug*/

    }

and the CSS for the Class=bgimagewrap:


.bgimagewrap {
  background: #FFFF33;
  width: 350px;
  height: 350px;
}

The Problem also is that the <class=bgimagewrap> I can’t move it vertically towards the top of the browser it will hit this style sheet:

#inner {
    width:700px;/*IE6 haslayout*/
    padding-top:32px;
    overflow:hidden;/*contain floated children*/
    background:#b7b7b7;
}

I don’t want to destroy how this style is, I want the <class=bgimagewrap> to push it up a little towards the top of the browser.

15

I’m not sure what you are doing on that page. Why have you wrapped a 350px div around the right and left side elements? That will never fit as I said in my original post.

Why didn’t you just wrap the div around the image itself and not the text as well?


.bgimagewrap {
    background: #FFFF33;
    width: 350px;
    height: 350px;
    float:left;
}
#inner {
    width:700px;/*IE6 haslayout*/
    padding-top:32px;
    overflow:hidden;/*contain floated children*/
    background:#b7b7b7;
}
#inner .left {/*class for all #inner > left floats*/
    float:left;
    margin:0 0 32px 32px;
    display:inline;/*fix IE6 float margin bug*/
}
#inner .right {/*class for all #inner > right floats*/
    float:right;
    margin:0 32px 32px 0;
    display:inline;/*fix IE6 float margin bug*/
}
[B].bgimagewrap img{
    margin:40px auto 0;
    display:block;
}
#inner .bgimagewrap a.highslide{
    margin:auto;
    display:block;
    float:none;
} [/B]



<div id="inner">
      [B]  <div class="bgimagewrap">[/B] 
<a href="tutorials/ramen/paperpile.jpg" class="highslide left" onclick="return hs.expand(this)"> <img src="http://www.thecreativesheep.ca/videotut/tutorials/ramen/paperpile.jpg" alt="Highslide JS" title="Click to enlarge" height="360" width="460" /></a>
[B] </div>
[/B]        <div class="content right">
            <p>Ramen is an OpenSource Compositor which you can download <a href="">here</a>.
                In this tutorial I'm going to show you the fundamentals of Ramen on how
                to navigate around in the Interface. There will be follow up Ramen
                Tutorials as well as Autodesk Composite tutorials to come.</p>
        </div>
        <br class="clear">
        <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>
        </div>
        <a href="/tutorials/ramen/paperpile.jpg" class="highslide right" onclick="return
16

Hi,
I remember helping you set up that template once before. I found it in my files and reworked it so you can have padding around the images with a BG color showing.

http://www.css-lab.com/test/float-stagger.html
Should do what you are wanting.

Just adjust the margins/paddings and dimensions to suit yourself.

<!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:#CDF;
}
h1 {
    margin:0;
    padding:.5em;
    font-size:1.65em;
    text-align:center;
}

/*=== Begin Layout ===*/
#wrap {
    width:700px;
    margin:auto;
}
#head {
    height:200px;
    background:#66CC00;
}
#inner {
    overflow:hidden;/*IE7 haslayout and contain floats*/
    padding:30px 30px 0;
    background:#AAA;
}
* html #inner { /*IE6 haslayout*/
    height:1%;
    overflow:visible;
}
    .floatwrap {/*wrap around each pair of floats*/
        float:left;
        width:100%;
        margin-bottom:30px;
        background:#BBB
    }
    #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:25px;
        font-size:1em;
        background:yellow;
    }
    #inner p img {
        display:block;
        width:255px;
        height:255px;
        background:orange;
        text-align:center;
    }
    #inner .content {
        width:305px;
        background: #0099FF;
    }
    #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"><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>
            </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">
        <p>Footer Stuff</p>
    </div>
</div> <!--end wrap-->
  
</body>
</html>
17

No, you can, but you can’t have the inside be larger than the outside :). Like fitting a bus inside a VW Bug. Not going to work.

18

Paul that makes the other images and text vertically all I want to do is fix the background behind the image and fix that one section of text.

19

Here is the page. There is a yellow box behind the image I want to position that so that the top of the yellow box is not perfectly aligned with the image and also the content below the image is to the right hand side :slight_smile:

20

That didn’t work the other parts of the page get fumbled up :frowning:
I don’t know how to fix this aaarrggh :nono::mad: