SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 47 of 47
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by noonnope View Post
    Hey Paul,

    One more thing. My CSS solution works for IE8, so it's not

    it's
    Amended (It's not easy to read my scribbled notes when I have a hangover )

  2. #27
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd put "<table><tr><td>" at the start of the content and "</td>" just before the banner, which with some magic of the HTML parser puts the banner on top!
    Simon Pieters

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by zcorpan View Post
    I'd put "<table><tr><td>" at the start of the content and "</td>" just before the banner, which with some magic of the HTML parser puts the banner on top!
    Cheat

  4. #29
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan View Post
    I'd put "<table><tr><td>" at the start of the content and "</td>" just before the banner, which with some magic of the HTML parser puts the banner on top!
    Double Cheat

  5. #30
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bah, so it needs to be valid html? What if I get the spec changed?

    Another idea is to use display:table on a wrapping element and display:table-caption on the banner, which puts it on top. Doesn't work in old IE, though.
    Simon Pieters

  6. #31
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheat, cheat, cheat zcorpan. These are all my solutions Check them out!

  7. #32
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *Looks* ... don't see table-caption there! I see table-header-group, though. Yeah, basically same idea.
    Simon Pieters

  8. #33
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I still wonder if there is a proper cross-browser way of doing this, I mean I got it to work in IE6-7 using a bug with percentages, so IN THEORY, this + potential css2 tables (or even maybe the css3 Flexible Box Module...)

    anyway, I'm happy that I managed to get into this quiz and not miss it like the last one. :P

  9. #34
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    I still wonder if there is a proper cross-browser way of doing this, I mean I got it to work in IE6-7 using a bug with percentages, so IN THEORY, this + potential css2 tables (or even maybe the css3 Flexible Box Module...)

    anyway, I'm happy that I managed to get into this quiz and not miss it like the last one. :P
    The actual solution is cross browser already The fact that the main layout is absolutely placed is of little concern as long as everything else is inside.

    Th css3 flexible box model should do this easily thuogh but we'll have to wait a long while for full support. The display:table properties in noonope (and zcorpans) suggestions will work for most browsers apart from ie7 and under.

  10. #35
    SitePoint Zealot
    Join Date
    Sep 2010
    Location
    Brighton, UK
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, I originally wrote this of as a bit of fun, but thinking about it further, there's actually quite a nifty little idea here. We use nested floats to control the source order of a column layout, so why not use these to create horizontal columns.

    There are limitations to the technique, I could get 321, 312 and 231 working, but not 213. Still though, given the right design, I can imagine this actually being useful for something one day...

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>HTML Challenge</title>
    <style>
    .wrapper {position:relative; width:800px;}
    .top_content {border:1px solid green;}
    .lower_content_wrapper {position:absolute; bottom:0;}
    .lower_content {position:absolute; border:1px solid red;width:800px;}
    .bottom_content {position:absolute; bottom:0; height:1px;}
    </style>
    </head>
    <body>
    <div class="wrapper">
      
      <div class="lower_content_wrapper">
        <div class="lower_content">
          <div class="bottom_content">
            <p>Bottom Content</p> 
            <p>Bottom Content</p> 
            <p>Bottom Content</p> 
            <p>Bottom Content</p> 
            <p>Bottom Content</p> 
          </div>
          <div class="middle_content">
            <p>Middle Content</p>
            <p>Middle Content</p>
            <p>Middle Content</p>
            <p>Middle Content</p>
            <p>Middle Content</p>
          </div>
        </div>
      </div>
      
      <div class="top_content">
        <p>Top Content</p>
        <p>Top Content</p>
        <p>Top Content</p>
        <p>Top Content</p>
        <p>Top Content</p>
      </div>
      
    </div>
    </body>
    </html>

  11. #36
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Yes I played around with something similar and I'm sure there is a use for it somewhere

    I also had the idea that perhaps the technique could be used to completely reverse the order of ten items so that instead of going from one to ten they went from ten down to one. However I gave up after a while of fiddling around as it didn't look possible.

    As an aside you may be interested in this very old demo where I have added the absolute trick at the end of the routine and a basic 3 column layout can be manipulated into at least 14 variations now.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Content Re-organised</title>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    function toggle(el) {
        document.getElementById("swapclass").className = el;
    }
    
    //--><!]]></script>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    p, h1, h2 {
        margin:.5em 0;
        padding:0 10px
    }
    #outer {
        width:750px;
        margin:20px auto;
        border:1px solid #000;
        clear:both;
        position:relative;
    }
    .footer{
        clear:both;
        padding:10px;
     border-top:1px solid #000;
    }
    
    /* version 0 .........*/
    .version0 .col0 {
        width:100%;
    }
    .version0 .col1 {
        float:right;
        width:100%;
        margin-left:-420px;
    }
    .version0 .col1 p, .version0 .col1 h2 {
        margin-left:420px;
    }
    .version0 .col2 {
        width:200px;
        float:left;
    }
    .version0 .col3 {
        width:200px;
        float:left;
    }
    /* end */
    
    
    
    /* version 1 .........*/
    .version1 .col0 {
        width:100%;
    }
    .version1 .col1 {
        float:right;
        width:100%;
        margin-left:-420px;
    }
    .version1 .col1 p, .version1 .col1 h2 {
        margin-left:420px;
    }
    .version1 .col2 {
        width:200px;
        float:right;
    }
    .version1 .col3 {
        width:200px;
        float:right;
    }
    /* end */
    
    /* version 2...........*/
    
    .version2 .col1 {
        float:right;
        width:100%;
        margin-left:-320px;
    }
    .version2 .col1 p, .version2 .col1 h2 {
        margin-left:320px;
    }
    .version2 .col2 {
        width:300px;
        float:left;
    }
    .version2 .col3 {
        width:100%;
        clear:both;
    }
    /* end */
    
    /* version 3...........*/
    .version3 .col0, .version3 .col1, .version3 .col2, .version3 .col3 {
        float:left;
        width:175px;
        margin-right:10px;
    }
    /* end */
    
    /* version 4...........*/
    
    .version4 .col1 {
        float:left;
        width:100%;
        margin-right:-320px;
    }
    .version4 .col1 p, .version4 .col1 h2 {
        margin-right:320px;
    }
    .version4 .col2 {
        width:300px;
        float:right;
    }
    .version4 .col3 {
        width:100%;
        clear:both;
    }
    /* end */
    
    /* version 5...........*/
    .version5 .col0, .version5 .col1, .version5 .col2, .version5 .col3 {
        width:100%;
    }
    /* end */
    
    /* version 6...........*/
    .version6 .col1 {
        float:left;
        width:100%;
        margin-right:-320px;
    }
    .version6 .col1 p, .version6 .col1 h2 {
        margin-right:320px;
    }
    .version6 .col2 {
        width:300px;
        float:right;
    }
    .version6 .col3 {
        width:300px;
        float:left;
    }
    /* end */
    
    /* version 7...........*/
    .version7 .col0 {
        float:left;
        width:49%;
    }
    .version7 .col1 {
        float:right;
        width:49%;
    }
    .version7 .col2 {
        width:49%;
        float:right;
        clear:both
    }
    .version7 .col3 {
        width:49%;
        float:left;
    }
    /* end */
    
    /* version 8...........*/
    .version8 .col0 {
        float:right;
        width:49%;
    }
    .version8 .col1 {
        float:left;
        width:49%;
    }
    .version8 .col2 {
        width:49%;
        float:left;
        clear:both
    }
    .version8 .col3 {
        width:49%;
        float:right;
    }
    /* end */
    
    /* version 9...........*/
    .version9 .col0 {
        float:right;
        width:49%;
    }
    .version9 .col1 {
        float:left;
        width:49%;
    }
    .version9 .col2 {
        width:100%;
    }
    .version9 .col3 {
        width:100%;
    }
    /* end */
    
    /* version 10 .........*/
    .version10 .col0 {
        width:100%;
    }
    .version10 .col1 {
        float:left;
        width:100%;
        margin-right:-420px;
    }
    .version10 .col1 p, .version10 .col1 h2 {
        margin-right:420px;
    }
    .version10 .col2 {
        width:200px;
        float:right;
    }
    .version10 .col3 {
        width:200px;
        float:right;
    }
    /* end */
    
    /* version 11 .........*/
    .version11 h2 {
        font-size:120%
    }
    .version11 .col0 {
        width:120px;
        float:left;
    }
    .version11 .col1, .version11 .col2, .version11 .col3 {
        float:right;
        width:600px;
    }
    /* end */
    
    /* version 11 .........*/
    .version12 h2 {
        font-size:120%
    }
    .version12 .col0 {
        width:140px;
        float:right;
    }
    .version12 .col1, .version12 .col2, .version12 .col3 {
        float:left;
        width:590px;
    }
    /* end */
    
    .version13 .inner{
     position:absolute;
     top:100%;
     width:100%;
     border:1px solid #000;
     left:-1px;
    }
    
    
    
    /* toggle */
    
    ul {
        list-style:none;
        margin:.5em
    }
    li {
        float:left;
        margin:4px;
        font-weight:bold;
    }
    li a {
        float:left;
        width:22px;
        height:20px;
        background:#c1daee;
        color:#000;
        border:#036;
        text-align:center;
        line-height:20px;
        font-size:14px;
        text-decoration:none;
        border:1px solid #036;
    }
    li a:hover {
        background:#ffffcc
    }
    </style>
    </head>
    <body id="swapclass" >
    <ul>
        <li>Layouts: </li>
        <li><a onclick="toggle('version0');return false;" ref="#nogo">1</a></li>
        <li><a onclick="toggle('version1');return false;"href="#nogo">2</a></li>
        <li><a onclick="toggle('version2');return false;"href="#nogo">3</a></li>
        <li><a onclick="toggle('version3');return false;"href="#nogo">4</a></li>
        <li><a onclick="toggle('version4');return false;"href="#nogo">5</a></li>
        <li><a onclick="toggle('version5');return false;"href="#nogo">6</a></li>
        <li><a onclick="toggle('version6');return false;"href="#nogo">7</a></li>
        <li><a onclick="toggle('version7');return false;"href="#nogo">8</a></li>
        <li><a onclick="toggle('version8');return false;"href="#nogo">9</a></li>
        <li><a onclick="toggle('version9');return false;"href="#nogo">10</a></li>
        <li><a onclick="toggle('version10');return false;"href="#nogo">11</a></li>
        <li><a onclick="toggle('version11');return false;"href="#nogo">12</a></li>
        <li><a onclick="toggle('version12');return false;"href="#nogo">13</a></li>
        <li><a onclick="toggle('version13');return false;"href="#nogo">14</a></li>
    </ul>
    <div id="outer">
        <div class="inner">
            <h1>Content re-organised</h1>
            <div class="col0">
                <h2>container 1</h2>
                <p>This is some content in a container : This is some content in a container : This is some content in a container : This is some content in a container : This is some content in a container : </p>
            </div>
            <div class="col1">
                <h2>container 2</h2>
                <p>This is some content in a container : This is some content in a container : This is some content in a container : This is some content in a container : This is some content in a container : </p>
            </div>
            <div class="col2">
                <h2>container3</h2>
                <p>This is some content for another container : This is some content for another container :This is some content for another container :This is some content for another container :This is some content for another container :This is some content for another container : This is some content in a container : </p>
            </div>
            <div class="col3">
                <h2>container4</h2>
                <p>This is some content for another container : This is some content for another container :This is some content for another container :This is some content for another container :This is some content for another container :This is some content for another container : </p>
            </div>
        </div>
        <div class="footer">
        <h2>Footer</h2>
        <p>This is usually the footer content This is usually the footer content This is usually the footer content This is usually the footer content This is usually the footer content This is usually the footer content This is usually the footer content This is usually the footer content</p> </div>
    </div>
    </body>
    </html>

  12. #37
    SitePoint Member
    Join Date
    Oct 2008
    Location
    India
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But I have found these CSS does not work perfectly on IE5 .When I tried on Mozilaa and IE5 and IE6 ,result was quite different.

  13. #38
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rrkjaiswal63 View Post
    But I have found these CSS does not work perfectly on IE5 .When I tried on Mozilaa and IE5 and IE6 ,result was quite different.
    The main solution works fine in Mozilla and IE6. It will also work in IE5 without too much problem either but that is not one of the browsers supported in the quiz anyway. The solution won't work without electricity though.

  14. #39
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Yep, won't work without a computer either.
    Sadly this leaves a significant amount of insignificant people behind.

  15. #40
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very nice!
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  16. #41
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by thierry koblentz View Post
    Very nice!
    Thanks Thierry Nice to see you around here (again).

  17. #42
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Nice to see you around here (again).
    Hi Paul,
    The truth is that fora are not really my thing, I prefer mailing lists.
    But! threads like this one make me think I should make an effort ;-)
    Once again, kudos for this solution!
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  18. #43
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Out of quiz ideas Paul or should I expect a new one up? Maybe I'll keep my word for once and do the next one .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  19. #44
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Out of quiz ideas Paul or should I expect a new one up? Maybe I'll keep my word for once and do the next one .
    I have a couple lined up already but I didn't want to clash with the main forum html/css quiz that's about to start in a few days so I'll wait until that gets going.

  20. #45
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    what "main forum html/css" quiz?

  21. #46
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    See my sig Timo

  22. #47


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
  •