Search the Community
Showing results for tags 'overflow'.
Found 9 results
-
In the webpage two_sections.html I tried to use two scrollbars and cancel the browser scrollbar. However the lower scrollbar does not work at all. I know the bug might rest in the body section `overflow:hidden` But it is the only way I know to split the two sections without a scrollbar on browser. Any walk-around? common.css two_sections.html -
Hello. I don't understand, why ul element has a style overflow: hidden? And if I delete it, then background-color won't work, why? Could you tell please how does it work? Thank you in advance for your help. This example is from here: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu <head> <style> ul { list-style-type: none; overflow: hidden; background-color: #333333; } li { float: left; } li a { display: block; color: white; text-align: center; text-decoration: none; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> -
I have many lines of text. <div style="max-height:400px; overflow:scroll;"> many lines of text </div> How do I get my css to display a div at the bottom instead of the top of a scrollable div?
-
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!
-
guys i need your help. .a {width:500px; height:300px; overflow-x:hidden; overflow-y:auto; } i have a div which shows messages like facebook. i want to open the page with overflow-y but it wont up it will show end of div. Scroll should be down when page opens.
-
This is about the overflow-x and overflow-y properties, which are explained here: http://www.w3schools.com/cssref/css3_pr_overflow-y.asp I thought I would understand the explanations, but when I used the "try it" editor, setting the overflow-y property in the example provided, to either 'scroll' or 'visible', produce both the same effect: A vertical scrollbar is shown. From the explanation, I expected to see a scrollbar in the example when overflow-y is set to scroll, but not when it is set to visible I tried this on fairly new versions of Chrome, Firefox, Opera, and on IE11
-
Hello everyone i made this site for a client and im using a new standard to create the site so there are some issues with itThe one i wanted to address was that i created the banner content for the home page (and smaller banners for other pages) to be 2000px in length in order to have a clearer feel on larger screensthis works for every computer and mac screen however when you switch to the phone or any tablet, the tablet browser registers it as content and scales the page in a very odd fashionI have attached both screenshots so you can see the problem but the address is: mrmartusa.comMy goal is to make it appear centered on mobile platforms just as it is on PCthe way i get it to stay this way is through the following CSS code: (page banner then home banner respectively) It's not the width because the home page has a width of 970 while the other one has 2000 yet they are both having that problem.bannerimage{position:absolute;left:0px;width:2000px;z-index:-1;}.home_banner{width:970px;margin:0px 5px 5px 5px;padding:0px 5px 5px 5px;float:left;height:400px;z-index:-1;}Thank you everyone very much for your help in advance!PC: PHONE:
-
I have an overflow tag set in body element that is working on one div element, but not the other. Could it be caused by the fact that the second div has a z-index? I've tried placing the overflow directly in the <div id="column3">, which is where the overflow, is happening to no avail. Does anyone see the problem or have any tips? Thanks. I've posted a junk site, so you can see the problem. http://aphoniastudios.com/TestSite/test.html Here's the css: @charset "UTF-8";/* CSS Document */ <style type="text/css">html {height:100%}body {background: #CCC;width: 90%;height: 90%overflow: hidden;}a:link {color:#FFF; text-decoration:none;}a:visited {color:#FFF; text-decoration:none;}a:hover {color:#FFF; text-decoration:underline;}a:active {color:#FFF; text-decoration:underline;}#container {float: left;font-family: Helvetica, Arial, sans-serif;font-size: .7em;text-align: left;height: 100%;width: 100%;padding: 0px;margin: 1px 50px;background-image:url(Images/junk.png);background-size: 100%;background-repeat:no-repeat;}.stretch { width:100%; height:100%;}#column1 {float: left;width: 230px;height: 100%;margin: 0px 4px 0px 49px;color: #FFF;font-size: .9em;overflow: hidden;}#column1 #header {padding-right: 8px;padding-left: 8px;padding-top: 276px;padding-bottom: 16px;}#p {font-size:13px;line-height: 17px;}#column1 #footer {background-color: #E1231E;padding: 8px;box-shadow:0px 3px 5px 0px #333333;margin-right: 5px;color: #FFF;}h1 {display:none}h3 {display:none}#column2 {float: left;width: 0%;height: 100%;color:#4D4D4D;font-size: .75em;}nav {background-color: #999;position: relative;z-index: 2;width: 120px;height: 100px;margin-left: 0px;margin-right: 0px;margin-top: 54px;margin-bottom: 0px;padding: 2px 0px 5px 2px;box-shadow:3px 3px 5px 0px #333333;color: #FFF;}nav ul {margin: 10px;padding: 0px;}nav ul li {color: #FFF;text-decoration: none;list-style-type: none;line-height: 0.6em;font-size: 0.8em;font-style: normal;font-weight: 900;background-position: 0px 0px;}#column3{float:left;margin-top: 54px;margin-bottom: 0px;background-color:#FFF;position: relative;z-index: 1;width: 20%;padding-top: 30px;padding-right: 20px;padding-bottom: 20px;padding-left: 140px;box-shadow:3px 3px 5px 0px #333333;}.aboutlinks {word-spacing: 2px;color: #E1231E;}#column4 {float: right;width: auto;height:100%,padding: 0px;}</style>
-
Ok so I made a little scrolly box thing for my stories on my websites little html slide show thingy with all the link buttons right. Well on the first slide it worked, but on the 2nd, the scroll box wouldn't show up. I tried it again with the 3rd. Same thing, yet the first one shows up, and the page is perfect. Help please. Ill post the code. <html> <head> <title> Picture Five </title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body> <table class="SS"> <tr> <td class="navigation"> <p id="text"> Slide Show Navigation:</p> <p><a href="SSPicturefour.htm" alt="Back"> <img border="0" src="backward.png" alt="back" width="32" height="32" /> </a> <a href="SSInstructions.htm" alt="Restart"> <img border="0" src="restart.png" alt="Restart"> </a> <a href="SSPicturesix.htm" alt="Next"> <img border="0" src="forward.png" alt="next" width="32" height="32" /></a> </p><hr/> </td> </tr> <tr> <td class="picture"> <h1>Old</h1> <hr/> <img src="old.png" width="10%" height="20%> </td> </tr> <tr> <td> <div id="scroll"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis blandit mattis. Maecenas vel tortor sed nisl blandit sollicitudin ut ut nunc. Quisque elementum cursus urna. Suspendisse porttitor mattis metus, eget consequat urna congue id. Aenean at tempor sapien. Sed sollicitudin enim sagittis tellus tincidunt tempor. Quisque nec eros mi, a sodales tellus. Nunc condimentum, ligula sed porttitor lacinia, quam justo interdum est, aliquam varius dui tellus pellentesque sapien. Integer in dui risus. Duis hendrerit libero in dui scelerisque ut consequat velit laoreet. Pellentesque nec urna nisl, eleifend ullamcorper libero. Phasellus ligula dolor, interdum varius imperdiet nec, consequat aliquam orci. Donec tempor tempor elit, vel pretium neque aliquam sed. Vivamus ut elementum nulla. Praesent sollicitudin ultrices leo, consequat sagittis justo egestas sed. Donec eu leo risus, id sollicitudin risus. Suspendisse augue mi, ornare sit amet sollicitudin non, malesuada non urna. Maecenas pulvinar dignissim diam, ac fringilla leo commodo ut. Donec viverra sodales mauris at mollis. Integer et quam mollis nisi hendrerit venenatis quis et arcu. Morbi sollicitudin congue enim in facilisis. Cras id pharetra ligula. Vivamus sed ipsum a quam feugiat auctor at eu erat. Ut tempor consequat enim in tincidunt. Nulla massa ipsum, rhoncus id malesuada ac, pulvinar ut massa. Suspendisse ac ante ut ante fermentum vestibulum. Cras sed mauris in sem hendrerit ultricies in at massa. In vestibulum vestibulum turpis ut aliquet. Integer facilisis ullamcorper ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc in sapien et felis luctus vulputate. Cras aliquet metus ac magna imperdiet pellentesque. Curabitur sed turpis ac nisi porta fringilla in non ligula. Mauris id dolor eget velit adipiscing scelerisque vitae nec nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Sed at magna et nisi vestibulum mollis id a nibh. Aenean sollicitudin vestibulum diam, nec faucibus lorem tempor non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum pellentesque ipsum venenatis malesuada. Suspendisse ullamcorper, enim eget sollicitudin dictum, ante odio commodo odio, vitae aliquet est mi imperdiet enim. Sed nec massa a turpis adipiscing adipiscing. In hac habitasse platea dictumst. Nunc vitae magna tellus, sit amet vehicula orci. Duis ac sagittis tortor. Vestibulum ac tortor a velit tristique porta. Vivamus eu auctor nisi. Fusce sodales, eros non pharetra fringilla, risus neque imperdiet nulla, quis consectetur orci nisl at nisl. Maecenas augue est, porttitor vel tristique non, tincidunt ut nunc. Donec tincidunt odio in sapien euismod suscipit. Sed dictum dictum vulputate. Morbi a molestie nulla. Nunc venenatis rhoncus dolor ac faucibus. Donec tincidunt fermentum tortor, et eleifend sapien accumsan eu. </p> </div> </td> </tr> </body></html> Style Sheet- a:link {text-decoration:none;} a:visited {text-decoration:none;} body {background-image:url('background.png');} table{border-color:white; width:80%; height:100%; background-color:black;} table, tr, td{ border-collapse:collapse; color:grey;} h1 {text-align:center; color:#800000 ;} h2{text-align:center; color:#A00000;} h3{text-align:center; color:#E00000;} p{font-family: courier new; color:white;text-align:center; font-size:20px;} div{background-color:black;} p.story{font-family:arial; font-size:14px; text-indent:50px;text-align:left;} ul.a {list-style-type:circle;} div.scroll{width:100%; height:20%; overflow:scroll;} iframe#bg{background-color:black;}#text{color:grey; font-family:georgia; font-size:14px; text-align:center;} #title{border-color:white; height:1%;} #nav1{width:5%; height:70%;} td.navigation{border-color:white; width:100%; height:1%;} td.picture{ width:885px; height:1%;} table.SS{width:100%;height:100%;} table.ssp{width:10%;}
