SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 50
  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fumbled up page - Forgetting something

    Code HTML4Strict:
    <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.
    Code CSS:
    #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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <div id="bgimagewrap"> 
        <div id="inner">
    You set bgimagewrap to 350px width but inside it you have #inner which you have set to 700px width!

    How can that possibly fit?

  3. #3
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh you are right I didn't realize that upon writing this message. I suppose I can't have two ID nested correct ?

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I fixed the part of the page I fumbled up. The part I'm trying to fix now is this part of the HTML:

    Code HTML4Strict:
    <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:

    Code CSS:
       #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:
    Code CSS:
    .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:

    Code CSS:
    #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.

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <img src="tutorials/ramen/paperpile.jpg" alt="Highslide JS" title="Click to enlarge" height="360" width="460" align-"left">

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Both those options didn't work

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That didn't work the other parts of the page get fumbled up
    I don't know how to fix this aaarrggh

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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) .

  12. #12
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    where is the page again?

  14. #14
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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??
    Ryan B | My Blog | Twitter

  15. #15
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    where is the page again?
    Here

    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

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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?

    Code:
    .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*/
    }
    .bgimagewrap img{
        margin:40px auto 0;
        display:block;
    }
    #inner .bgimagewrap a.highslide{
        margin:auto;
        display:block;
        float:none;
    } 
    Code:
    <div id="inner">
            <div class="bgimagewrap"> 
    <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>
     </div>
            <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

  17. #17
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  18. #18
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    Here
    Correct, so I can see the yellow on all 4 sides

    ....all I want to do is fix the background behind the image and fix that one section of text.
    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.

    Code HTML4Strict:
    <!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%/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>

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    Paul that makes the other images and text vertically.
    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.

  20. #20
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 I have a question hopefully either one of you can answer the code that both of you posted solved the problem 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

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


    Code HTML4Strict:
    <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>

  21. #21
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    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
    Hi,
    I have to give you credit, you did name this thread correctly

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

    Code:
        #inner .left {/*class for all #inner > left floats*/
            float:left;
        }
        #inner p {
            margin:0;
            padding:60px;
            font-size:1em;
            background:yellow;
        }
    Look at your code again! The <p> tag is missing from the first div.
    Code:
            <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>

  22. #22
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


    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);
    }
    #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>
    Code HTML4Strict:
    <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>

  23. #23
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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
    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.

    Code:
    <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>
    Here is a tabbed out version of what I have been using all along
    Code:
    <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>
    

  24. #24
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 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.

  25. #25
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •