SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)

    What is "impossible" in CSS?

    In the spirit of getting the CSS quizzes back on track, perhaps some ideas can be posted in this thread.


    Ideas/layouts thought to be impossible (even if it wasn't working in a lone browser). Give any and all suggestions you can think of, even if you don't know if a solution is found for it already .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Server-side CSS.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Server-side CSS.
    Something tried and failed .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    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)
    A bottom aligned float in a fluid height container, it has never been accomplished across all modern browsers.

    We all know there is not a bottom value for floats but we have dubbed this attempt as "float bottom". I have spent many hours on this myself and I have finally given up on it.

    What's needed is a child element that can set it's height to 100% of the parents unknown/fluid height. That's how the scripted versions work.

    In the code below: Paul O'B had got close using display:table, but it only works in FF3+.

    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>Float bottom in Firfefox 3+ only</title>
    <style type="text/css">
    h1 {
        text-align: center;
    }
    #wrap {
        width: 50%;
        height: 1px;
        display: table;
        margin: 0 auto;
        padding: 0 0 0 5px;
        border: 2px solid #000;
        background: #EEF;
        text-align: justify;
    }
    .push {
        float: right;
        display: table;
        width: 2px;
        height: 100%;
        background: red;
        margin-bottom: -115px;
    }
    .float {
        float: right;
        clear: right;
        width: 100px;
        height: 100px;
        margin: 10px 0 10px 10px;
        background: lime;
    }
    p {
        margin: 0;
        padding: 5px;
        line-height: 1.5;
    }
    </style>
     
    </head>
    <body>
    <h1>Float bottom in Firfefox 3+ only</h1>
    <div id="wrap">
        <div class="push"></div><div class="float">Float</div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nisl metus, vehicula id, tincidunt at, 
        aliquet et, sem. Duis pretium justo. Aenean tortor lectus, laoreet et, fermentum quis, volutpat nec, tortor. 
        Integer et velit in mi viverra sagittis. Cras vitae massa. Praesent porttitor. Cum sociis natoque penatibus 
        et magnis dis parturient montes, nascetur ridiculus mus. Aliquam diam magna, faucibus et, tempus in, viverra 
        nec, eros. Sed egestas. Mauris adipiscing urna ut nulla. Pellentesque habitant morbi tristique senectus et 
        netus et malesuada fames ac turpis egestas. Cras pharetra accumsan magna. Integer iaculis. Suspendisse potenti. 
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin odio eros, eleifend 
        ac, rutrum eget, ullamcorper a, sem. Vestibulum quis magna. Nullam vulputate massa non massa. Fusce lectus 
        ipsum, placerat vitae, hendrerit nec, interdum eu, odio. Nullam id tortor.</p>      
    </div>
    </body>
    </html>

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Interesting code . Thanks for your input Rayzur.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Flying? Teleportation (although visually, no)? Oh you meant code wise?

    One thing I'd like to see is a hover effect where there are maybe 10-100 images stacked on top of each other. On hover, the top flies to the right, revealing the next which is then given the hover (at least, visually) and flies out to reveal the next one which gains the hover, etc. etc. etc.

    ~TehYoyo

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    Flying? Teleportation (although visually, no)? Oh you meant code wise?
    What other -wise is there?
    One thing I'd like to see is a hover effect where there are maybe 10-100 images stacked on top of each other. On hover, the top flies to the right, revealing the next which is then given the hover (at least, visually) and flies out to reveal the next one which gains the hover, etc. etc. etc.

    ~TehYoyo
    Interesting effect/idea . Although everything would collapse again after hover is done.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by RyanReese View Post
    What other -wise is there?

    Interesting effect/idea . Although everything would collapse again after hover is done.
    Yeah Would be a cool effect, I think. More of a flash thing, really. Could lead to a real nice 'floating in space' image gallery.

    ~TehYoyo

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    Yeah Would be a cool effect, I think. More of a flash thing, really. Could lead to a real nice 'floating in space' image gallery.
    Some things are probably better left to JavaScript.

  10. #10
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,578
    Mentioned
    62 Post(s)
    Tagged
    3 Thread(s)
    >>> What is "impossible" in CSS?

    Activate conditional statements depending on browser and/or screen size.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by John_Betong View Post
    Activate conditional statements depending on browser and/or screen size.
    To some extent that's possible. You can detect IE, and @media queries can be used to target screen sizes.

  12. #12
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,578
    Mentioned
    62 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ralph.m View Post
    To some extent that's possible. You can detect IE, and @media queries can be used to target screen sizes.
    PHP can interrogate $_SERVER['HTTP_USER_AGENT'] and generate a browser specific CSS file but CSS cannot detect which browser is being used (or simulated).

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Yes, I should have specified that it's not CSS that detects the browser, so I should just have mentioned @media queries for detecting viewport dimensions.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    Flying? Teleportation (although visually, no)? Oh you meant code wise?

    One thing I'd like to see is a hover effect where there are maybe 10-100 images stacked on top of each other. On hover, the top flies to the right, revealing the next which is then given the hover (at least, visually) and flies out to reveal the next one which gains the hover, etc. etc. etc.

    ~TehYoyo
    You can get pretty close with css3 transitions.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    .box {
    	width:100px;
    	height:100px;
    	position:absolute;
    	left:100px;
    	top:400px;
    	-webkit-transition-property:all;
    	-webkit-transition-duration: 2s;
    	-webkit-transition-delay: 1s;
    	-moz-transition-property:all;
    	-moz-transition-duration: 2s;
    	-moz-transition-delay: 1s;
    	transition-property:all;
    	transition-duration: 2s;
    	transition-delay: 1s;
    	-webkit-transition:all 1s ease-in-out;
    	-moz-transition: all 1s ease-in-out;
    	transition:all 1s ease-in-out;
    }
    .b1 { background:red }
    .b2 {
    	background:green;
    	-moz-transition-delay: 2s;
    	-webkit-transition-delay: 2s;
    	transition-delay: 2s;
    }
    .b3 {
    	background:yellow;
    	-moz-transition-delay: 3s;
    	-webkit-transition-delay: 3s;
    	transition-delay: 3s;
    }
    .b4 {
    	background:blue;
    	-moz-transition-delay: 4s;
    	-webkit-transition-delay: 4s;
    	transition-delay: 4s;
    }
    .b5 {
    	background:orange;
    	-moz-transition-delay: 5s;
    	-webkit-transition-delay:5s;
    	transition-delay: 5s;
    }
    .b6 {
    	background:teal;
    	-moz-transition-delay: 6s;
    	-webkit-transition-delay: 6s;
    	transition-delay: 6s;
    }
    .wrap:hover div {
    	left:500px;
    	top:100px;
    }
    .wrap {
    	position:relative;
    	width:600px;
    	height:600px;
    	border:1px solid #000
    }
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<div class="box b1">Box1</div>
    		<div class="box b2">Box2</div>
    		<div class="box b3">Box3</div>
    		<div class="box b4">Box4</div>
    		<div class="box b5">Box5</div>
    		<div class="box b6">Box6</div>
    </div>
    </body>
    </html>
    Last edited by Paul O'B; Mar 26, 2012 at 09:11.

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Wow Paul, a little buggy but that's pretty savvy .

    And to clarify for everyone, I mean stuff that was thought to be impossible (IE6 dropdown w/o Javascript for example)

    Rayzur has provided a good example.
    Quote Originally Posted by Paul O'B View Post
    You can get pretty close with css3 transitions.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #16
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You can get pretty close with css3 transitions.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    .box {
    	width:100px;
    	height:100px;
    	position:absolute;
    	left:100px;
    	top:400px;
    	-webkit-transition-property:all;
    	-webkit-transition-duration: 2s;
    	-webkit-transition-delay: 1s;
    	-moz-transition-property:all;
    	-moz-transition-duration: 2s;
    	-moz-transition-delay: 1s;
    	transition-property:all;
    	transition-duration: 2s;
    	transition-delay: 1s;
    	-webkit-transition:all 1s ease-in-out;
    	-moz-transition: all 1s ease-in-out;
    	transition:all 1s ease-in-out;
    }
    .b1 { background:red }
    .b2 {
    	background:green;
    	-moz-transition-delay: 2s;
    	-webkit-transition-delay: 2s;
    	transition-delay: 2s;
    }
    .b3 {
    	background:yellow;
    	-moz-transition-delay: 3s;
    	-webkit-transition-delay: 3s;
    	transition-delay: 3s;
    }
    .b4 {
    	background:blue;
    	-moz-transition-delay: 4s;
    	-webkit-transition-delay: 4s;
    	transition-delay: 4s;
    }
    .b5 {
    	background:orange;
    	-moz-transition-delay: 5s;
    	-webkit-transition-delay:5s;
    	transition-delay: 5s;
    }
    .b6 {
    	background:teal;
    	-moz-transition-delay: 6s;
    	-webkit-transition-delay: 6s;
    	transition-delay: 6s;
    }
    .wrap:hover div {
    	left:500px;
    	top:100px;
    }
    .wrap {
    	position:relataive;
    	width:600px;
    	height:600px;
    	border:1px solid #000
    }
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<div class="box b1">Box1</div>
    		<div class="box b2">Box2</div>
    		<div class="box b3">Box3</div>
    		<div class="box b4">Box4</div>
    		<div class="box b5">Box5</div>
    		<div class="box b6">Box6</div>
    </div>
    </body>
    </html>
    I meant a continual hover effect, like when the red box flies out, the box below it gains the hover...as far as I know, that's impossible.

    ~TehYoyo

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    I meant a continual hover effect, like when the red box flies out, the box below it gains the hover...as far as I know, that's impossible.

    ~TehYoyo
    That demo was a continual hover effect Hover long enough and all the boxes fly out.

    You can't move an element out of the way by hovering on the element itself because as soon as it moves it its not hovered any more and takes its place back in the stack. All you get is a flicker effect.

    You have to hover on a parent and then make the children move so that way the effect is constant as in my demo.

    I did have a very old z-index demo here that I did for an old article.

    Quote Originally Posted by Ryan
    And to clarify for everyone, I mean stuff that was thought to be impossible (IE6 dropdown w/o Javascript for example)
    Which was solved in a previous css quiz in case anyone didn't know

  18. #18
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Transform the select element with its options into a horizontal menu. That is, make the list box entries "explode" into independent little options. Having anchors, preferably.

    Much like what Google does on Google Translate with the "From" and "To" selects for languages, but it does it with JavaScript, as a progressive enhancement.

    I mean, you can make something like this:
    Code html:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #sel{
        background-color:#FF0;
        width:40px;
        }
    #sel optgroup{
        background-color:#CFF;
        display:table;
        width:20px;
     
        }
     
      #sel optgroup option{
        background-color:#deF;
        display:table-cell;
        width:20px;
     
        }
    </style>
    </head>
     
    <body>
    <select name="sel" id="sel">
    <optgroup label="group1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </optgroup>
    <optgroup label="group2">
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    </optgroup>
    </select>
    </body>
    </html>

    but you can't do so much more. You can play with inline-table and such, but it's a far cry from what a classic menu looks like. Nevermind the lack in behavior. Oh, and don't mention lists. I know...


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
  •