Hi I am now using the jssor slider picture gallery on another part of the site and added a 1px border to the slider1_container div however it looks wrong, on the bottom and right it is as it should be 1px but on the left and top it is about 2px and I can't find out why.
I have played with all the CSS for the slider but can't stop the 1px border I am applying to slider1_container div from looking like 2px on the left and top.
Anyone got any idea what I need to do
Here is the code for slider1_container
<div id="slider1_container" style="position: relative; width: 330px; height: 356px; top: 0px; left: 0px; background-color: #e4e9eb; border: 1px solid #8dc0e8; overflow: hidden;">
Please use a wrapper to add border.
<div style="border: 1px solid #8dc0e8;">
<div id="slider1_container" style="position: relative; width: 330px; height: 356px; top: 0px; left: 0px; background-color: #e4e9eb; overflow: hidden;">
</div>
Related
.fotoPerfil{
width: 150px;
position: absolute;
margin-top: -6em;
border: solid;
border-width: 5px;
border-color: white;
border-radius: 50%;
}
<div class="d-flex justify-content-center">
<img class="fotoPerfil" src="./img/manu.png">
</div>
Hello, I have a little problem with this image, idk if you can see it but the border does not fully cover part of the pic, there is a thin space at the top of the image.
I made the border red and added a random photo from google images to help make this snippet a little more visual. This is how I would go about making the photo inside the border and having a container to make the whole thing position absolute if thats still needed for something.
.absolute {
position: absolute;
}
.fotoPerfil {
width: 150px;
height: 150px;
border: 5px solid red;
border-radius: 50%;
overflow: hidden;
}
.fotoPerfil img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="absolute">
<div class="d-flex justify-content-center fotoPerfil">
<img src="https://i.natgeofe.com/k/830b5d15-92db-429f-a80a-cc89b5700af5/mt-everest.jpg?w=636&h=437">
</div>
</div>
I try to get the middle of the top stripe of the border away but not the whole top, how can I do this?
I am doing Html. I tried a lot but without success I hope anyone can help me.
If I have understood you question correctly, something basic like this would hide the middle of the top border:
.box {
position: relative;
height: 100px;
width: 300px;
border: 10px solid #000;
}
.box .mask {
border-top: 10px solid #fff;
width: 100px;
position: absolute;
top: -10px;
left: 100px;
}
<div class="box">
<div class="mask"></div>
</div>
Why don't #img1 and #canvas1 fully overlap in the below code? I want them in exactly the same place. I'm layering images with JavaScript animation on canvas. Initial thoughts were that the padding or margin default settings were interfering somewhere. I've tried setting to zero for all elements - it doesn't work. I understand that position:relative positions an element relative to it's normal position. Clearly missing a default setting or something obvious.
<!DOCTYPE html>
<html>
<head>
<style>
.chapter {
width: 90%;
margin: 0 auto;
max-width: 1000px;
border: 1px solid red;
}
#img1 {
border: 1px solid green;
position: relative;
left: 50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
#canvas1 {
border: 1px solid blue;
position: relative;
left: -50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div class="template" id="T2">
<div class="chapter" id="C2">
<h1>Why can't I overlap the below elements?</h1>
<img src="" id="img1" />
<canvas id="canvas1"></canvas>
</div>
</div>
</html>
Two things to do:
1.) Don't leave a linebreak or space between the two elements in the HTML code (see below)
2.) Set the left setting for canvas to -52px - you have to consider the 2 x 1px border of the image.
.chapter {
width: 90%;
margin: 0 auto;
max-width: 1000px;
border: 1px solid red;
}
#img1 {
border: 1px solid green;
position: relative;
left: 50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
#canvas1 {
border: 1px solid blue;
position: relative;
left: -52px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
<div class="template" id="T2">
<div class="chapter" id="C2">
<h1>Why can't I overlap the below elements?</h1>
<img src="" id="img1" /><canvas id="canvas1"></canvas>
</div>
</div>
A couple of remarks:
use box-sizing: border-box for 'easier' sizing. With border-box the border width and padding are substracted from the elemenent istead of added on to it. An element with width: 100px, a border-width of 1px and a padding of 10px will be 100 + (2 * 1) + (2 * 10) = 122px wide without box-sizing: border-box but the element will be 100px wide even with the border-width and padding when the box-sizing is set to border-box. See here for a (better) more detailed explanation: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
When trying to overlap element I find it easiest to keep the surrounding container element as empty as possible. Taking out the h1 element makes overlapping a lot more manageable.
Change the position of the canvas element to absolute. This way it no longer takes up place in the DOM and it is positioned in the upper left container of its positioning parent (in your example the div.chapter in my answer the div.container). This also helps when trying to have elements line up.
* {
box-sizing: border-box;
}
.container {
position: relative;
}
.chapter {
width: 90%;
margin: 0 auto;
max-width: 1000px;
border: 1px solid red;
}
#img1 {
border: 1px solid green;
position: relative;
left: 50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
#canvas1 {
border: 1px solid blue;
position: absolute;
left: 50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
<div class="template" id="T2">
<div class="chapter" id="C2">
<h1>Why can't I overlap the below elements?</h1>
<div class="container">
<img src="" id="img1" />
<canvas id="canvas1"></canvas>
</div>
</div>
</div>
#img1 {
border: 1px solid green;
position: relative;
left: 56px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
this worked...
There are certainly better ways to achieve the effect you're going for but to answer your question, I believe the spacing is being caused by the default font size on the parent element. Set the font size to 0px on the chapter div and you can see the elements now overlap each other.
I'm writing a Javascript tool (not browser add-on) to highlight keywords in various colours automatically on page-load, and am having problems creating a "highlight bar" beside the page's scrollbar to show where each result is.
My resulting HTML code looks like this so far:
<div class="highlight-bar" style="position: fixed; top: 0px; bottom: 0px; right: 0px; width: 8px; border-left: 1px solid black; background-color: grey;">
<div class="highlight-tick" style="width: 100%; height: 2px; top: 40%; left: 0px;" />
<div class="highlight-tick" style="width: 100%; height: 2px; top: 55%; left: 0px;" />
</div>
Note that I'm generating the style data at run-time and don't have any CSS rules that affect these elements. And yes, I've checked three times.
Right now, the "ticks" aren't even showing up, and are instead hanging out at the top of their container.
And yes, I have tried to find an answer on here already, but none of them seem to cover this case in a way that allows the container to scale with the browser window.
Add a position: absolute; to .highlight-tick
I added a background-color and made the tick thicker for viewing purposes.
<div class="highlight-bar" style="position: fixed; top: 0px; bottom: 0px; right: 0px; width: 8px; border-left: 1px solid black; background-color: grey;">
<div class="highlight-tick" style="position: absolute; width: 100%; height: 10px; top: 40%; left: 0px;background: blue;" />
<div class="highlight-tick" style="position: absolute; width: 100%; height: 10px; top: 55%; left: 0px;background: red;" />
</div>
I want to absolute position an image that I will be moving around in a div and want anything that extends outside the div to be clipped. Here is an example of the problem:
<html>
<body>
<div style="width: 500px; height: 200px; border: 1px solid black; overflow: hidden;">
<div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div>
<div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div>
</div>
</body>
</html>
So, I want the right edge of the logo to not display. Ideas?
Try adding position: relative to your outer div. This will position the image relative to that div (honoring the overflow style) instead of relative to the page.
Example:
<html>
<body>
<div style="position: relative; width: 500px; height: 200px; border: 1px solid black; overflow: hidden;">
<div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div>
<div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div>
</div>
</body>
</html>
See it on JS Bin
Since the image's container is positioned absolutely, it is outside of the flow of the "containing" div.
Your choices are to either position relatively or to adjust the dimensions of the absolutely-positioned div, dynamically, with jQuery.
Move the position absolute to the image, then add the relative to the parent container. Worked for me in a similar situation.
<html>
<body>
<div style="width: 500px; height: 200px; border: 1px solid black; overflow: hidden;">
<div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div>
<div style="position: relative; overflow:hidden;"><img style="position: absolute; top: 10px; left: 250px; z-index: -1;" src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div>
</div>
</body>
</html>