I am not good at CSS and I want to define div position.
When you click the div element, I will add "selected" to class with javascript. But I have a problem about width.
How can I solve that?
CodePen Demo
.insideDiv {
width: 210px;
margin : 15px;
float:left;
height: 210px;
overflow: hidden;
background: no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
div.selected {
border: 5px solid #25a9e6;
}
.container{
margin: 0px auto;
}
Adding a 5px border to a div, expands the div's dimensions by 5px in each direction. I believe you want to add box-sizing: border-box; to .insideDiv. That way the border won't change the div's dimensions.
using toggleClass or addClass
$('.insideDiv').click(function(e) {
$(this).toggleClass('selected');
});
here my example Code
Related
Fiddle link:
https://jsfiddle.net/ildaroit/evL7tn6r/
.video-wrapper {
max-width: 640px;
margin: auto;
margin-top: 20px;
}
.video1 {
border: 0px dotted black;
height: 420px;
/*height:50vw;*/
background: url("http://learn.shayhowe.com/assets/images/triangles/triangles.svg") left -3px no-repeat, url("http://learn.shayhowe.com/assets/images/triangles/triangles.svg") right -3px no-repeat;
/* background-position: left, right;*/
background-repeat: no-repeat, no-repeat;
}
How to make the image not overlapping center div content on decreasing windows size?
Like here: learn.shayhowe.com
Now, left and right image overlap .video but need to make it fixed or something else.
Thx in advance!
hello do you mean like this?
https://jsfiddle.net/evL7tn6r/6/
just add a wrapper to your video1
.page{
width:100%; /*this is not really necessary*/
overflow:hidden;
}
and a min-width to the video
you can adjust the min-width to set the minimum space between the graphics
I'm having so difficulty making a my social div float right. I noticed when I add float:right the size of the body size changes which is why it is moving the div down a bit but without the float:right the body size is correct. how can I fix this?
Website
Here's my code:
#social{
width:102px;
height:34px;
padding-left:1%;
padding-top:1%;
}
body{
background-image: url('images/bg-2.jpg');
background-repeat: no-repeat;
background-position:bottom;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
max-width: 100%;
overflow-x:hidden;
}
You don't even need to use float: right, please use the CSS below and this should work perfectly:
#social {
width: 100%;
height: 34px;
padding-right: 1%;
padding-left: 0%;
padding-top: 1%;
text-align: right;
}
#icons {
padding-right: 0.5%;
}
actually problem is with your margins, just adjust the margins on #block element than problem will be solved
for instance turn off the margin from #block(both left margin and top margin) and apply float:right to #social and see.
the issue is because of margin-top:15% on your #block.
add position: absolute; to your #block style, and then float:right your #social
that fixed the issue.....
I have applied set background-image on one of my <div> with the following properties below:
.mydiv-left {
background: url(path to image) no-repeat center center fixed;
height:auto; // also tried with 100%
background-size:auto // also tried with "100%" and "100% 100%" as well as "cover"
}
This result is no image display, but when I set the height to this image, it cuts off the image. As image is of high resolution and I want it to fit in the smaller area of my div without removing any part/information.
Keep in mind that background image is dynamic and keep on changing for other divs within the loop.
Try this
CSS
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}
If you post the entire code it is easy to find solution.
<div> without content/ height will result in 0 height. I guess that's why you can't see your image.
Give your <div> a size, and background-size should do its work.
http://jsfiddle.net/LsdDE/
.d1, .d2 {
border: 1px solid grey;
width: 200px;
height: 200px;
background: url(https://www.google.com.tw/images/srpr/logo11w.png);
}
.d1 {
background-size: auto 200px;
}
.d2 {
background-size: 200px auto;
}
Simplest suggestion would be to give min-height to your div in pixels... DEMO , keeping your markup same, below is the CSS.
CSS
.mydiv-left {
background: url(http://www.wallng.com/images/2013/08/image-explosion-colors-background-beautiful-263613.jpg) no-repeat center center fixed;
color : #FFF;
min-height:200px; /*this is the key*/
height:auto;
background-size: 100% 100%;
background-repeat: no-repeat;
}
if you give height:auto;, it would scale the div to content height.
if you want to show the div anyway, min-height is a solution
Thanks all for helping me out, I was able to get it done with the following below code:
mydiv {
background: url(images/bg.jpg) no-repeat;
height: 150px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Main thing was last four lines that worked for me the way I wanted.
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}
I am looking to fix my second full width image (the one in the middle of the page) so that is fits horizontally the same as the one above in the header image. Can somebody double check my CSS so see if it is correct. It needs to auto resize to fit the screen like the header image above. When i view it on mobile it is not fitting correctly. Thanks for taking a look.
http://www.jobspark.ca
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
border-bottom: solid 1px #ddd;
border-top: solid 1px #ddd;
margin-left: -1600px;
margin-right: -1600px;
padding-top:20px;
padding-bottom:330px;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: auto;
}
You need to add the height on to your div I think. Here's the fiddle. I just added a height to the div and now it resizes fine... Is that what you needed it to do?
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
width:100%;
background-position:center;
height:575px;
}
Updated css (still resizes)
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
background-position: bottom center;
background-size: cover;
height:575px;
background-attachment: scroll;
background-repeat: no-repeat;
}
http://jsfiddle.net/FUqhb/
I need to move the player so that it always stays below the cd cover.
I can't change the html (I can add things but I can't change the order or delete stuff inside) and I can't set a fixed margin-top for the player. Other than that, any ideas?
I tried display:block but it doesn't work, probably because it's an absolute positioned div.
jsFiddle: http://jsfiddle.net/FUqhb/11/
You can add a div with height:200px which will push the bar down.
<div class="audio_player">
<div style="height:200px"></div>
<embed type="application/x-shockwave-flash" src="http://assets.tumblr.com/swf/audio_player_black.swf?audio_file=somefile.mp3" height="27" width="207"/>
</div>
Turn off absolute positioning of the sleeve:
.turntable {
width: 100%;
height: 200px; /* cd height */
position: relative;
}
.artwork,
.gloss,
.sleeve {
width: 100%;
height: 100%;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.gloss {
background: url('http://i.imgur.com/JrVdR.png');
position:absolute;
top:0;left:0
}
.sleeve {
background: url('http://i.imgur.com/VjVh1.jpg') no-repeat;
width: 200px; /* cd width */
}