I tried css to customize the scrollbar in the java Swing embedded javafx webview, I use the same css for displaying two web pages, the scrollbar cannot be customized as expected as in css, but the other one can be customized very well, do anybody know if there is some limit on the web page display? Thanks!
Html is the third party web page:
Here follows the css scripts:
body {
overflow-y: scroll;
overflow-x: scroll;
width: 1000px;
height: 1000px;
position: absolute;
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 120px !important;
height: 120px !important;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(255,0,0,0.8);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Your scrollbar CSS is right but you put the wrong CSS in body and inner HTML.
body{display: block; overflow: auto; height: 1000px; width: 100%; box-sizing:border-box;}
body::-webkit-scrollbar {width: 5px; height: 8px; background-color: red; }
body::-webkit-scrollbar-thumb {background: #000; }
<body>
this just test for scroll
</body>
Related
So, I've been trying to make a div go straight across a webpage. Although, it still has space on the left side.
Here's my css:
div.transbox {
width: 100%;
background-color: black;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
width: 100%;
width: 100vw;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: white;
}
And here's a codepen: http://codepen.io/pen/
If you can, explain how to remove that space on the left, or if I'm using the wrong code.
Your problem is because you've not cleared the body's default margin, like so:
body {
margin: 0;
}
If you refer to the w3c specs for the body element you'll see it has a default value of 8 pixels.
Here is my code:
#my_div:before
{
/* displaying the image */
content: url("img path");
/* centering the image */
display: block;
text-align: center;
/* making the image responsive */
max-width: 100%;
}
<div id="my_div"></div>
I'm trying to make the image responsive through the max-width:100% property but it is not working
My Question: Is it possible to do such a thing?
Edit
The question is not a duplicate, I want the dimensions to scale automatically on screen resize while the other question sets a fixed size to the image
Try this:
#my_div:before
{
/* displaying the image */
content: url("img path");
/* centering the image */
display: block;
text-align: center;
/* making the image responsive */
max-width: 100%;
height: auto;
}
If this doesn't work, try removing the :before pseudo-element
#my_div
{
/* displaying the image */
content: url("img path");
/* centering the image */
display: block;
text-align: center;
/* making the image responsive */
max-width: 100%;
height: auto;
}
Without seeing the context of your html, this is the best solution I can offer. We'll need more information in order to understand your situation better.
I confess I'm not entirely sure what effect you are after but I think this might be a better option for you.
Don't put the image in the content property...make that pseudo-element 100% size of the div and use a background image.
A couple of options for you.
.my_div {
position: relative;
height: 150px;
border: 1px solid grey;
width: 75%;
margin: 1em auto;
}
.my_div:before {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '';
background-image: url(http://lorempixel.com/g/400/200/);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.cover:before {
background-size: contain;
}
<div class="my_div"></div>
<div class="my_div cover"></div>
JSfiddle Demo
The contents of my website are not displayed correctly. I have already tried in my css file, but without success.
Here is an excerpt from my styles.css.
Thanks for the help
* {
padding: 0;
margin: 0;
}
/* Body */
body {
position: relative;
margin: 30px 0 100px;
padding-top: 30px;
min-height: 100%;
height: 100%;
}
.navbar-fixed-top {
margin-top: 30px;
}
Have you tried doing it this way:
html {
height: 100%;
}
body {
min-height: 100%;
}
It should work, if I understood what you are trying to do.
If i iunderstand correct when you scroll down to the bottom of the page the footer is covering part of the content. So what you need to do is either with jquery get the height of footer and apply it as margin-botton to the content... or set max-height to footer and set that max-height value as margin botton to the content
I have meet a interesting problem here.
my structure is
body
|----site-wrapper
|-----cover-wrapper
both the height is set to 100%, when I set the site-wrapper background color, it looks fine,
but when I set cover-wrapper background color, it only wrapper the background color to fit the content(some text), not expand to the whole screen, I have tried both on Chrome and Firefox. check the effect here: http://jsfiddle.net/h82Ne/
Here is the css:
html{
height: 200%
}
body {
height: 100%;
background-color: #333;
}
.site-wrapper {
display: table;
width: 100%;
height: 50%; /* For at least Firefox */
min-height: 50%;
background-color: #000;
}
.cover-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
background-color: #0f0;
}
If you are looking to get the .cover-wrapper to cover the entire page you can use:
.cover-wrapper {
width: 100%;
height: 100%; /* For at least Firefox */
position: absolute;
top: 0;
bottom: 0;
background-color: #0f0;
}
This will cause it to act more like an overlay.
The problem solved, it make by my own mistake, i miss css for site-wrapper-inner here.
Sorry about that
I'm trying to use CSS divs to add images to my site. I'm using background-image:url(""); but the image doesn't appear when loading the site.
The images I'm referencing are in the same folder as my style.css, and I quadruple-checked that I wrote the file names correctly.
Any help is very much appreciated. Thank you.
CSS:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
HTML: (Am I missing something here?)
<div id="logo">
</div>
div#logo {
background:url(dm-button2.png) blue;
height: 120px;
width: 120px;
position:absolute;
z-index: 100; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
try this, your second background is rewriting the first
use this:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background-color: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
Try replacing Background image and background with something like this
background: blue url('dm-button2.png') no-repeat fixed center;
I am not 100% sure but i think having background-image followed by background, background will overwrite the background-image call since it loads in order
example FIDDLE HERE
start small and add the other attributes.
div#logo {
height: 120px;
width: 120px;
background:url(http://flyingmeat.s3.amazonaws.com/acorn4/images/Acorn256.png) 0 0;
}
The background image will not display if there is nothing to put a background image on... for example, all you have a div tags but nothing inbetween them.
Add at least a br tag or something to create some space for the image to be displayed.