please help to reduce the height of the slider, if at all possible
Now slide the page height 395px, 200px and need
I tried it in Photoshop to resize the source images, but the height of the slide on the page did not change
use .height()
$('.main.radius7').height(200);
Add a width to .main-radius7. Cant really add a demo because you didnt provide code but thats all you have to do.
Same thing goes for height.
So you will have something like:
.radius7{
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
width: 400px;
height: 100px;
}
I just see your page where you have applied height: auto; in .rslides img which will not work. You need to define yourself like height: 200px;
Or, perhaps you might want to get responsive, so use max-width: 100%;
Related
I want to resize the space where the scrollbar moves.
I don't want it to affect how much I can scroll.
Look at the following pictures (my drawings) to better understand what I mean.
I'm using chrome so webkit is viable.
Thanks to all of your answers!
(P.S. I would love to have reduce the image size, yet I don't know how to! My apologies!).
Without nesting another element and play with its height you could simply use a huge border-bottom and place a visible border around the element using the outline property, e.g.
div {
width: 200px;
height: 300px;
outline: 1px #9bc solid;
border-bottom: 50px transparent solid;
}
Codepen demo
Result
You can't change the height of the scrollbar but you can redesign the scrollbar with -webkit-scrollbar like this:
::-webkit-scrollbar {
width: 5px;
height: 10px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #808080;
}
I've found many responses that answer this question given a width. For example:
Maintain the aspect ratio of a div with CSS
But if I need to set
div{
position: absolute
bottom: 10px;
top: 10px;
padding-right: 125%;
}
those solutions do not work.
How can I maintain the div's aspect ratio when I have the height set as above?
Here's a solution using viewport units. Depending on your audience, this may or may not be the best solution. See http://caniuse.com/#feat=viewport-units for details. Also, depending on the aspect ratio you want, it will go off the screen in some cases. My next suggestion would bring JavaScript into the mix.
Here's a fiddle you can try out: http://jsfiddle.net/Lq7v2gcq/
And the important code:
#vhtest {
position: relative;
top: 5vh;
height: 90vh;
width: 50vh;
margin: 0 auto;
border: 1px solid red;
}
I'm pretty fresh to web development and cannot figure this one out. Appreciate any help!
On re-size the fixed div moves out of the container instead of re-sizing. The site I'm working on has the nav as the fixed section and is inside of the main container.
Any help is appreciated. Thanks!
<div class="container">
<div class="fixed"></div>
</div>
.container {
border: 1px solid;
max-width: 600px;
width: 100%;
min-height: 1600px;
}
.fixed {
max-width: 600px;
width: 100%;
height: 50px;
border: 1px solid green;
position: fixed;
}
http://jsfiddle.net/KqvQr/
When you specify position as fixed the Element, even thought it is inside a parent container, It won't behave as a child of a parent container. It won't adjust his width according to the parent width. But I can give you a solution where when user resize the page the fixed element also get resize yet it is a position fixed
.fixed {
height: 50px;
border: 1px solid green;
position: fixed;
right:0;
left:0;
}
Don't specify widths for the container. instead of that specify left and right values. so then when page is resizing css only check for the left and right margin values. by keeping those values it will adjust its inner width always.
Here is the working fiddle http://jsfiddle.net/KqvQr/5/
I don't think you can achieve what you want if you stick with that constraints. Your width and max-width will work as expected if you change your position to relative instead of fixed..
Check out this Fiddle
I've been looking into sticking a "div" to the top of the screen when you scroll past it, or making the div scroll with the page when it reaches the top of the screen.
The issue i get when i try this matter is that changing to position: fixed; using either jquery or the simple css, removes the float from the element.
My layout look somewhat like this: http://jsfiddle.net/ThSXm/33/ <-- updated
So when the float is removed, the id="content" get's overlapped by the sidemenu, making the sidemenu bigger and out of place.
I need a solution where you dont have to alter the position of the elements or if there is some fix i can make on the content div so it wont get overlapped when changing the positions.
Update
Sandeeproop managed to help me with the positioning, but the scroll matter is still a issue.
As i mentioned in the comment for this question, the div has to scroll/stick to the top of the screen when the div is close to the top or reaches the top (and preferably stop once the div reaches the footer or is close to reaching the footer), because there are more divs (header/slideshow etc) before we reach the side menu, and you wont see the menu if you just use position: fixed.
Any thoughts?
/update
Looking forward to some answers!
//Jim
If i understand you question correctly.
Please check this fiddle.
#nav {
width: 136px;
position: fixed;
background: #FF0000;
margin-left: 1em;
margin-top: 1em;
}
#content{
width: 80%;
height: 600px;
background: #FF9966;
float: left;
margin-left: 170px;
margin-top: 1em;
}
You can set fixed margin-top values for nav and content elements.
Something like that http://jsfiddle.net/ThSXm/26/
#nav {
width: 15%;
height: 100%;
float: left;
background: #FF0000;
margin-left: 1em;
margin-top: 60px;
}
#content{
width: 80%;
height: 600px;
background: #FF9966;
float: left;
margin-left: 1em;
margin-top: 60px;
}
I guess what you are looking for is "position: sticky".
This is not yet supported by many browsers, but here is a pollyfill for it
http://philipwalton.github.io/polyfill/demos/position-sticky/
Have you considered a solution where you use position:absolute on the element?
Have it being absolute untill you need it to stick and then change it to fixed.
Here is a simple fiddle:
http://jsfiddle.net/dXe97/
if ($(this).scrollTop() > boxTop) {
$box.css({
'position':'fixed',
'top': 0
});
}else{
$box.css({
'position':'absolute',
'top': 150
});
};
The .box element is absolute positioned, but when you scroll down passed the element, it is changed to fixed and its top value is set to 0, and back again when you scroll up.
I'm trying to figure out how to decrease the size of the buttons on the kendoSlider (for that matter, the slider is also too large).
Their documentation doesn't really make any mention of it.
Why do I want to do this? I've recently added it to my footer and the buttons are so big that it's bumped up the size of my footer entirely. I'd rather decrease the button size instead of completely changing the size of my footer.
I would assume it's something with the CSS for the slider, but I haven't had any luck with that so far.
Here's an image to demonstrate what I mean:
if the Buttons to big, why just hide them?
With
showButtons: false
in the configuration.
The size of the Buttons you can change via css. For example:
.k-slider .k-button, .k-grid .k-slider .k-button {
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
/* new */
border: 1px solid red;
width: 20px;
height: 20px;
}
.k-slider .k-button .k-icon {
margin-top: 1px;
vertical-align: top;
}
Inspect the HTML element with chrome devtools or firefox.
I think the "size" of the slider you can adjust with this class:
.k-slider-wrap {
width: 100%;
height: 100%;
}
For the sprite-size eventually this helps out.
Or just creatte your own one.