DarkxPunk Posted May 30, 2017 Share Posted May 30, 2017 (edited) Hey there, So I am toying around with a slideshow sort of display and discovered a strange result when I use position absolute in conjunction with overflow hidden on its parent. If any of you know why this is happening Id love to know, and possibly either a way around it or a better overall solution, that be great! To explain the issue I left it as overflow visible so you can see how it should function in theory, then you can see how it breaks when I attempt to hide it. HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Slideshow Test"> <base href=""> <title>Slideshow Test</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/slidertest.css" type="text/css" media="screen" charset="utf-8"/> </head> <body> <header></header> <section> <ul> <li> <a class="imageAnchor" href="#test-image-one">•</a> <a class="imageAnchor" href="#test-image-two">•</a> <a class="imageAnchor" href="#test-image-three">•</a> <a class="imageAnchor" href="#test-image-four">•</a> </li> </ul> <div class="gallary"> <div class="container"> <div id="test-image-one" class="image"></div> <div id="test-image-two" class="image"></div> <div id="test-image-three" class="image"></div> <div id="test-image-four" class="image"></div> </div> </div> </section> <footer></footer> </body> </html> CSS: html,body { background-color: #363434; } a { color: red; text-decoration: none; } ul,li,.imageAnchor { list-style: none; display: inline-block; vertical-align: middle; } .gallary { width: 120px; height: 120px; position: relative; background-color: maroon; overflow: visible; } .gallary .container { width: 1000px; position: relative: } .image { width: 50px; height: 50px; margin: 35px; background-color: grey; display: inline-block; position: absolute; left: 120px; transition: left .1s linear; } #test-image-one { background-color: pink; } #test-image-two { background-color: green; } #test-image-three { background-color: purple; } #test-image-four { background-color: blue; } .image:target { left: 0; } Thanks for any help! Edited May 30, 2017 by DarkxPunk Link to comment Share on other sites More sharing options...
dsonesuk Posted May 30, 2017 Share Posted May 30, 2017 .gallary .container { width: 1000px; position: relative: } Link to comment Share on other sites More sharing options...
dsonesuk Posted May 30, 2017 Share Posted May 30, 2017 Strange? it seems to cause container to move left , which messes up positioning? Link to comment Share on other sites More sharing options...
DarkxPunk Posted May 31, 2017 Author Share Posted May 31, 2017 Upon further investigation it seems to be a designed effect as outlined in box model (scratches head) Does anyone have any ideas on another way to achieve the effect I'm looking for? Thanks for the help. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 31, 2017 Share Posted May 31, 2017 I can get it to work, BUT! without the sliding effect, just instant swap. Link to comment Share on other sites More sharing options...
DarkxPunk Posted June 3, 2017 Author Share Posted June 3, 2017 Yeah that is exactly where I stand... I have been researching like crazy trying to understand how some people have achieved this, except then we start getting into ill explained messy code and fancy animations when all I am trying to gather is the basics XD. Any ideas or resources you can think of? My endgame is I wanna build a slideshow with forward and backwards arrows while targeting anchors and I keep running into the same brick wall, overflow hidden crams everything in, or starts causing a scroll! Ill keep fighting. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 4, 2017 Share Posted June 4, 2017 (edited) Soooo close but the return box seems quick of the mark THIS version looks better <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Slideshow Test"> <base href=""> <title>Slideshow Test</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/slidertest.css" type="text/css" media="screen" charset="utf-8"/> <style> html,body { background-color: #363434; } a { color: red; text-decoration: none; } ul,li,.imageAnchor { list-style: none; display: inline-block; vertical-align: middle; } .gallary { width: 120px; height: 120px; position: relative; background-color: maroon; overflow: hidden; } .gallary > div {position: absolute; left: 120px !important; height: 100%; width: 100%;} .container { width: 1000px; position: relative; height: 120px; vertical-align: middle; font-size: 0; } .image div { background-color: grey; display: inline-block; height: 50px; margin: 35px 0; width: 50px; position: absolute; right: -120px; transition: right 0.1s linear 0s; z-index:10; } #test-image-one div { background-color: pink; } #test-image-two div { background-color: green; } #test-image-three div { background-color: purple; } #test-image-four div { background-color: blue; } .image:target { right: -120px;} .image:target div { right: 35px; z-index: 20; } </style> </head> <body> <header></header> <section> <ul> <li> <a class="imageAnchor" href="#test-image-one">•</a> <a class="imageAnchor" href="#test-image-two">•</a> <a class="imageAnchor" href="#test-image-three">•</a> <a class="imageAnchor" href="#test-image-four">•</a> </li> </ul> <div class="container"> <div class="gallary"> <div id="test-image-one" class="image"><div></div></div> <div id="test-image-two" class="image"><div></div></div> <div id="test-image-three" class="image"><div></div></div> <div id="test-image-four" class="image"><div></div></div> </div> </div> </section> <footer></footer> </body> </html> Now you might be able to strip it down, but I'm not touching it. Edited June 4, 2017 by dsonesuk Changed to better version which looks spot on Link to comment Share on other sites More sharing options...
DarkxPunk Posted June 4, 2017 Author Share Posted June 4, 2017 (edited) I managed to slim it out a bit further, but how does that work <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Slideshow Test"> <base href=""> <title>Slideshow Test</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/slidertest.css" type="text/css" media="screen" charset="utf-8"/> <style> * { box-sizing: border-box; } html,body { background-color: #363434; } a { color: red; text-decoration: none; padding: 4px 10px; border: 1px solid red; } .slideshow { margin: 35px 0; width: 120px; height: 120px; border: 1px solid red; position: relative; overflow: hidden; } .slide div { margin: 35px 0; height: 50px; width: 50px; position: absolute; transition: all 0.5s ease; } #slide1 div { background-color: pink; } #slide2 div { background-color: green; } #slide3 div { background-color: blue; } #slide4 div { background-color: fuchsia; } .slide:target div { left: 35px; } .slide:not(:target) div { left: 120px; } </style> </head> <body> <header></header> <section> <a class="slideAnchor" href="#slide1">•</a> <a class="slideAnchor" href="#slide2">•</a> <a class="slideAnchor" href="#slide3">•</a> <a class="slideAnchor" href="#slide4">•</a> <div class="slideshow"> <div id="slide1" class="slide"> <div></div> </div> <div id="slide2" class="slide"> <div></div> </div> <div id="slide3" class="slide"> <div></div> </div> <div id="slide4" class="slide"> <div></div> </div> </div> </section> <footer></footer> </body> </html> My only guess is we are "glitching/hacking" the box model by taking the nested "div" out of the box(model). <-- Decode that gibberish But hey! It works! I appreciate it. If you are interested on trying to decode why this works, what exactly we are breaking, that be great. Edited June 4, 2017 by DarkxPunk Link to comment Share on other sites More sharing options...
dsonesuk Posted June 5, 2017 Share Posted June 5, 2017 Yes! with mine you create a nested div, exactly same size as parent gallery, You can't position a div outside the gallery parent as overflow:hidden will force it back into the boundary of this parent element and the positioning/margins forces the container element beyond left boundary edge and it becomes difficult to position the small div correctly. By using nested div within gallery, you force the smaller inner div out beyond the overflow: hidden parent, the container and gallery remain at fixed location, so its easier to position the smaller inner div correctly now. Link to comment Share on other sites More sharing options...
DarkxPunk Posted June 5, 2017 Author Share Posted June 5, 2017 I get it, but my brain still hurts Once I finalize the design and effect ill post it here Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now