I have the same code in both Plunker and JSFiddle:
Plunker
JSFiddle
As you can see, the link borders around the images are wrong in both cases within JSFiddle, but they are proper in Plunker.
Is this a problem with JSFiddle? If so, is there some CSS I can use to fix it, without breaking it elsewhere?
Here is the code. HTML:
.clearfix::after {
content: "";
clear: both;
display: table;
}
.one {
border: solid 2px gray;
width: 100px;
height: 100px;
padding: 3px;
margin: 2px;
float: left;
}
.one:hover {
border-color: #FF9900;
}
.two {
border: solid 2px gray;
width: 100px;
height: 100px;
padding: 3px;
margin: 2px;
display: inline-block;
}
.two:hover {
border-color: #FF9900;
}
<h3>Problem One - with float</h3>
<p>This is a problem in jsfiddle, but not plnkr</p>
<img src="https://en.js.cx/gallery/img6-thumb.jpg">
<img src="https://en.js.cx/gallery/img5-thumb.jpg">
<div class="clearfix"></div>
<h3>Problem Two - without float</h3>
<p>This is a problem in jsfiddle, but not plnkr</p>
<img src="https://en.js.cx/gallery/img6-thumb.jpg">
<img src="https://en.js.cx/gallery/img5-thumb.jpg">
stender's answer is the best, use always em unit:
.one img, .two img {
max-width: 100%;
}
because JSFiddle added border. If you inspect code you will see:
*, ::after, ::before {
box-sizing: border-box;
}
Related
How to remove this gap or merge the borders? Because the lengths are inconsistent
box1 and box2 are 100px, box3 is 200px but their lengths are inconsistent because border...
so how do their length are consistent?
<main>
<div class="shortBox">box1</div>
<div class="shortBox">box2</div>
<div class="longBox">box3</div>
</main>
.shortBox {
width: 100px;
display: inline-block;
}
.longBox {
width: 200px;
}
.shortBox,
.longBox {
text-align: center;
font-size: 20px;
height: 50px;
background-color: #000;
color: #fff;
border: 1px solid #fff;
}
This happens when you have elements that have display: inline or inline-block. Since the browser treats these elements the same way as text, a line-break will be treated as white-space.
Setting the font size to 0 for the wrapper basically eliminates the whitespace, but keep in mind, that this property will be inherited to child elements, so you may have to set the font-size back to >0 for children. Also, this may break layouts that use em as unit, so keep that in mind. By also adding box-sizing: border-box the gaps are gone.
main {
font-size: 0;
}
.shortBox {
width: 100px;
display: inline-block;
}
.longBox {
width: 200px;
}
.shortBox,
.longBox {
box-sizing: border-box;
text-align: center;
font-size: 20px;
height: 50px;
background-color: #000;
color: #fff;
border: 1px solid #fff;
}
<main>
<div class="shortBox">box1</div>
<div class="shortBox">box2</div>
<div class="longBox">box3</div>
</main>
There is also a possible way to use comments to prevent the auto-formatting from adding the white-space / line-break. It does not look too elegant, but it gets the job done. Also, except for the box-sizing: border-box you don't need any additional CSS for this.
.shortBox {
width: 100px;
display: inline-block;
}
.longBox {
width: 200px;
}
.shortBox,
.longBox {
box-sizing: border-box;
text-align: center;
font-size: 20px;
height: 50px;
background-color: #000;
color: #fff;
border: 1px solid #fff;
}
<main>
<div class="shortBox">box1</div><!--
--><div class="shortBox">box2</div><!--
--><div class="longBox">box3</div>
</main>
The third way of solving this issue is to utilize flexbox. You can create layouts like this, without having to worry about gaps because of white-spaces or line-breaks.
watch this magic:
<main>
<div class="shortBox">box1</div><div class="shortBox">box2</div>
<div class="longBox">box3</div>
</main>
Notice that first 2 divs are NOT divided with new line.
Then in CSS add this extra 2px like this:
.longBox {
width: 202px;
}
How to use CSS doing like this? especially double borders (NOT using border:double;)
PS: The HTML code of the Demo: ....1801180218031804 ...
You basically use nesting, meaning the parent container (.container) has a border and the child element (.childdiv) has a border. The html (for a single cell) would look like this:
.container,
.childdiv {
padding: 20px;
border: 1px solid black;
}
.container {
display: inline-block;
width: 70px;
}
.childdiv {
display: inline-block;
width: 30px;
}
<div class="container">
<div class="childdiv">
</div>
</div>
Check out the fiddle for a working demo.
Try This:
div {
border:1px solid #ccc;
padding: 10px;
display: inline-block;
}
div:before {
content: attr(data);
display: inline-block;
border:1px solid #ccc;
padding: 10px;
}
<div data="1898"></div>
So I am wanting to change the position of an image that appears with the hover effect. Right now the image kind of just goes under the first image that holds the hover effect. I am struggling with this hardcore. I have tried positioning it and floating it and just simple left:90px or right:90px but the image that shows upon hovering doesn't budge. Here is a jsfiddle. The images are broken but you can get the jist. https://jsfiddle.net/k0fvbcno/ Any help would be greatly appreciated.
<div id="pain1">
<img class="pain1" src="images/painspot.png">
<img class="shoulder" src="images/shoulder.png">
</div>
<div id="pain2">
<img class="pain2" src="images/painspot.png">
<img class="back" src="images/back.png">
</div>
<div id="pain3">
<img class="pain3" src="images/painspot.png">
<img class="hip" src="images/hip.png">
</div>
#pain1 {
position: absolute;
left: 710px;
top: 220px;
margin: auto;
}
.shoulder {
display: none;
}
.pain1:hover + .shoulder {
display: inline;
}
.pain1:hover{
border: 3px solid transparent;
display: block;
}
#pain2 {
position: absolute;
left: 627px;
top: 390px;
margin: auto;
}
.back {
display: none;
}
.pain2:hover + .back{
display: inline;
}
.pain2:hover{
border: 3px solid transparent;
display: block;
}
#pain3 {
position: absolute;
left: 680px;
top: 425px;
}
.hip {
display: none;
}
.pain3:hover + .hip{
display: inline;
}
.pain3:hover {
border: 3px solid transparent;
display: block;
}
I figured it out finally. I needed to use position absolute and that finally enabled me to position the image that appeared when the hover effect was in use. Thanks!
Continuing my last question on this thread (Play button centred with different image/video sizes), I will open this one regarding to #Marc Audet request.
Basically I had this code:
.playBT{
width: 50px;
height: 50px;
position: absolute;
z-index: 999;
top: 25%;
left: 25%;
margin-left: -25px;
margin-top: -25px;
}
However I can't use the example given by Marc on the last thread, because the play button doesn't work as expected when the video size changes...
Here is the code
You need to tweak your HTML a bit, here is one way of doing it:
<div id="video-panel">
<div id="video-container" class="video-js-box">
<div id="play" class="playBT"><img class="imgBT" src="http://2.bp.blogspot.com/-RnPjQOr3PSw/Teflrf1dTaI/AAAAAAAAAbc/zQbRMLQmUAY/s1600/player_play.png" /></div>
<video id="video1">
<source src="http://video-js.zencoder.com/oceans-clip.mp4"/>
</video>
</div>
<div id="video-controls">
<div id="footerplay"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/play.png" /></div>
<div id="footerpause"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/pause.png" /></div>
<div id="progressbar">
<div id="chart"></div>
<div id="seeker"></div>
</div>
</div>
</div>
and the CSS is as follows:
#video-panel {
border: 4px solid blue;
padding: 4px 50px;
}
.video-js-box {
width: auto;
height: auto;
outline: 1px dotted blue;
position: relative;
display: block;
}
video {
outline: 1px dotted blue;
margin: 0 auto;
display: block;
}
#play {
position:absolute;
top: 50%;
left: 50%;
outline: 1px dotted red;
}
.imgBT{
width:50px;
height:50px;
vertical-align: bottom;
margin-left: -25px;
margin-top: -25px;
}
#video-controls {
outline: 1px solid red;
overflow: auto;
}
#footerplay {
float: left;
margin-left: 27px;
}
#footerpause {
float: left;
margin-left: 27px;
}
#progressbar {
float: left;
outline: 1px dotted black;
display: inline-block;
width: 200px;
height: 27px;
margin-left: 27px;
}
#footerplay img, #footerpause img{
height:27px;
}
Fiddle Reference: http://jsfiddle.net/audetwebdesign/EnDHw/
Explanation & Details
User a wrapper div to keep everything tidy, video-panel, and use a separate div for the video video-container and for the controls video-controls.
The play button and the <video> element are positioned with respect to the video-container and note the negative margin trick to position the arrow button image.
The control elements can be positioned in their own div video-controls. I simply floated them to the left with a 27px left margin.
This should help you get started. The outlines and borders are for illustration only and are optional.
Good luck!
I am trying to create a HTML layout and I have created a number of elements and given them a border etc in my CSS. I am trying to have the main 'Wrapper' centered so everything that goes inside this element are also centered.
I have tried everything, margin, align, absolute etc and nothing is working. My stays situated in the top left corner of my page.
This is my index page where the elements are:
<!--#include file ="inc.heads.asp"-->
<html>
<head>
</head>
<body>
<div id ="divWrapper">
<div id ="divHeader">
<img src="Images/title.png">
<br>
<div id ="divNavBar">
<br>
<div id ="divContent">
</div>
</div>
</div>
</div>
</body>
</html>
and this is my CSS:
body {
background-color: #300;
}
#divWrapper {
margin: 0 auto;
width: 800px;
}
#divHeader {
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
}
#divNavBar {
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
}
#divContent {
float: left;
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
}
If someone could possibly shed some light on why none of the things I have tried work and what a possible solution could be.
Thanks!
#divWrapper{
margin-left:auto;
margin-right:auto;
}
Should do the trick.
Just add margin: 0 auto to the contents of #divWrapper:
For example, add to your CSS:
#divWrapper * {
margin: 0 auto;
}
If you only want the div elements to be centered, use:
#divWrapper div {
margin: 0 auto;
}
You can see a working demo here > http://jsfiddle.net/gu7Sr/
Also, as a side note, try to avoid using <br /> for creating your layout. It won't scale well and you'll have a tough time redesigning in the future!
I think this is what you want. Link : http://codepen.io/anon/pen/Ihzxp
<body>
<div id="divWrapper">
<div id="divHeader">
<img src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Small.png">
<div id="divNavBar">
<div id="divContent">
Stuff
</div>
</div>
</div>
</div>
</body>
and
body {
background-color: #300;
}
#divWrapper {
width: 100%;
}
#divHeader {
width: 600px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
margin: 5px auto;
text-align:center;
}
#divNavBar {
width: 550px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 15px;
margin: 5px auto;
}
#divContent {
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
margin: 5px auto;
}
More just a comment to BenM's answer, but I don't have the reputation to comment yet.
Pretty sure just:
margin:auto;
will do the trick by itself.
Seriously what is the point of all those wrappers? Just do this:
body {width: 800px; margin: 0 auto; }