Fumbled up page - Forgetting something

You’ll have to show us the page where this is happening.

You can’t float content after something else. Floats must come first in the html. You would need to float the image to the left and then float the content to the right assuming you have enough room for both (which seems unlikely because you have wrapped it on a container of only 350px width which seems a little small) .

One thing was over looked :slight_smile: Oh no :slight_smile:

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

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

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.

Hi,
I have to give you credit, you did name this thread correctly :slight_smile:

>…you’ll see the border is gone

The border is gone because you stripped the parent <p> tag away from the anchor with the nested image in that first div.

That <p> tag had padding and a BG color on it, as well as a float.

It looks like you need to readjust the width of that .content div since you made your <p> padding 60px. You have floats dropping now because your math is wrong.


    #inner [B].left[/B] {/*class for all #inner > left floats*/
        [COLOR=Blue]float:left;[/COLOR]
    }
    #inner [COLOR=Black][B]p[/B][/COLOR] {
        margin:0;
        [COLOR=Blue]padding:60px;[/COLOR]
        font-size:1em;
        [COLOR=Blue]background:yellow;[/COLOR]
    }

Look at your code again! The <p> tag is missing from the first div.


        <div class="floatwrap">
            [B]<p class="left">[/B]<img src="images/demo.jpg" alt="left image">[B]</p>[/B]
            <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>

No it doesn’t. It does exactly what you asked and you probably didn’t copy the code correctly.

I suggest that you use Rays full version above so that you can’t make the same mistake again

You are probably right & sorry :slight_smile: I have a question hopefully either one of you can answer the code that both of you posted solved the problem :slight_smile: There is something over looked compare this code with either one of yours and you’ll see the border is gone because of the script that was my main problem :slight_smile:

<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:60px;
        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;
}
<body>

<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)">
        <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>

No it doesn’t. It does exactly what you asked and you probably didn’t copy the code correctly.

I suggest that you use Rays full version above so that you can’t make the same mistake again.:slight_smile:

So you want:


| |
| | Some words here right?

Instead you’re getting this:


| |
| |

My words are down here…grrrr…

So on the image put align=“left” and directly after you close it (IE: >) put your <p></p> body of text. That’s it. No div.

Edit: Sorry the boxes messed up. Whitespace is ignored it would appear.

Hi,

That doesn’t really doesn’t help us which is why no one has answered. there’s not enough to work with there and I don;t really know what its supposed to look like anyway.

I can tell you that this section won’t work.


[COLOR=#009900][COLOR=#000066][B]<div[/B][/COLOR] [COLOR=#005500]id[/COLOR]=[COLOR=#CC0000]"bgimagewrap"[/COLOR][COLOR=#000066][B]>[/B][/COLOR][/COLOR] 
    [COLOR=#009900][COLOR=#000066][B]<div[/B][/COLOR] [COLOR=#005500]id[/COLOR]=[COLOR=#CC0000]"inner"[/COLOR][COLOR=#000066][B]>[/B][/COLOR][/COLOR] 


You set bgimagewrap to 350px width but inside it you have #inner which you have set to 700px width!

How can that possibly fit?

Both those options didn’t work :frowning:

The <h1> tag on this page.

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.

I see what you mean :slight_smile:

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 :slight_smile: Another H1 is going to have to be added then !

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.


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

    <div id="inner">
    [B]<h1>Learning the Basics of Ramen[/B][B]</h1> [/B]       
        <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.

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:


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

    <div id="inner">
        [B]<h1>Learning the Basics of Ramen</h1>[/B]
        <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.

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;}

[COLOR=Blue].left {float:left;}
.right {float:right;}[/COLOR]

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

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

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 ?

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

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 :slight_smile:

I’d move it in margins :slight_smile:

It’s almost there :slight_smile:

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 :slight_smile:

It’s almost there :slight_smile:

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 :slight_smile:

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