Search the Community
Showing results for tags 'overflow'.
Found 8 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>
