My image is displaying outside the element tag, like this:
Notice that the image itself is outside the element. Tried with both background image and IMG tag. Same results.
HTML and CSS structure:
.class {
width: 35px;
height: 35px;
position: absolute;
background: #FFFFFF;
margin-left: 310px;
border: 1px solid #E6E6E6;
border-radius: 50%;
margin-top: 5px;
}
.rounded {
border-radius: 100%;
}
.class2 {
height: 25px;
z-index: 100;
position: absolute;
width: 25px;
right: 0;
background-size: 25px 25px !Important;
background-color: black !important;
}
<div class="class">
<div class="class2 rounded" style="background: url('<image fetched with php code here>')" ></div>
</div>
The blue square in the image attached above code, is the inspector highlighting and NOT a part of the code/structure.
eThe actual question: Look at the blue element highlighter. That is the element, that the image has been assigned to. Notice how the image is sticking a few pixels out in the top and left side. Why is it outside the element?
I tried display: flex; as mentioned in a now deleted post, that didn't fix it.
just change position:absolute in .class (parent) to position:relative - that would do the trick. Like so:
.class {
width: 35px;
height: 35px;
position: relative;
background: #FFFFFF;
margin-left: 310px;
border: 1px solid #E6E6E6;
border-radius: 50%;
margin-top: 5px;
}
added later:
I see it now. That behaviour is absolutely normal cause they were sqares.
remove radius from .class2 for testing and zoom and you'll see why it happens.
Just adjust position of class2 adding this, and it would be ok.
right: 2px;
top: 2px;
If you set:
top: 0;
left: 0;
right: 0;
bottom: 0;
This will make the element adjustable by margin.
Then you can add:
margin: auto;
and it will display the image centered.
.class {
width: 35px;
height: 35px;
position: absolute;
background: #FFFFFF;
margin-left: 310px;
border: 1px solid #E6E6E6;
border-radius: 50%;
margin-top: 5px;
}
.rounded {
border-radius: 100%;
}
.class2 {
height: 25px;
z-index: 100;
position: absolute;
width: 25px;
right: 0;
left: 0;
bottom: 0;
top: 0;
margin: auto;
/*background-size: 30px 30px;*/
}
<div class="class">
<div class="class2 rounded" style="background: url('http://www.lorempixel.com/100/100/"></div>
</div>
Related
I've created a very simple html structure, to represent a div with a button inside:
<div class="side-panel">
<button>
C
</button>
</div>
in my app the wrapping div is a side-panel and the button's purpose is to control the toggle of the side panel. The button is located such that half of it is outside the side panel's div.
The problem is that when I set the .side-panel with overflow-y:auto the part of the button that's outside the div is hidden, and I cant figure out why nor how to make it visible while keeping the overflow y Behavior.
here is a working snippet
.side-panel {
position: absolute;
background: blue;
right: 0;
bottom: 0;
overflow-y: auto;
width: 53px;
height: 200px;
box-shadow: inset 1px 0px 0px var(--grandma);
}
button {
position: relative;
top: 24px;
right: 15px;
background-color: #fff;
border-radius: 50%;
height: 30px;
width: 30px;
}
<div class="side-panel">
<button>
C
</button>
</div>
with the problem
* {
margin: 0;
padding: 0;
}
section {
position: absolute;
right: 0;
}
.side-panel {
position: relative;
background: blue;
width: 20vh;
height: 100vh;
box-shadow: inset 1px 0px 0px var(--grandma);
}
button {
position: absolute;
top: 24px;
left: -15px;
background-color: #fff;
border-radius: 50%;
height: 30px;
width: 30px;
background: red;
}
<section>
<div class="side-panel">
<button>
C
</button>
</div>
</section>
Alright so I am trying to a basic overlay over an image but it seems that I am doing something wrong, instead of being width and height 100% of the IMG, it is width and height 100% of the entire page
HTML
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
And the CSS
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position:absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color:rgba(255,255,0,0.5);
width: 100%;
height: 100%;
}
JS fiddle: https://jsfiddle.net/0utbjwo0/
you should add position: relative; to your absolute parent div
#main_BodyNews{
position: relative;
}
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
position: relative;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position:absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color:rgba(255,255,0,0.5);
}
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
You can use absolute. It's just that you are setting
width: 100%;
height: 100%;
Remove that and set your margin-top and margin left. You can set your width and height for the actually dimensions of your image. If you do this, you wont have to exactly keep your overlay div within your image div.
Here is an example of one I have made for my site.
#overlay {
margin-top: 60px;
margin-left: 88px;
height: 30px;
width: 85px;
position: absolute;
}
You can temporarily set a background-color for it so that you can get a good idea of where it is placed on your page. Then adjust your margins accordingly.
It's because the position: absolute has top, right, bottom, left value of 0. You don't need to specify the height and width. To make it resize on it's parent size. You need position: relative on parent element.
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
position: relative;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color: rgba(255, 255, 0, 0.5);
}
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
I am successfully achieving my goal but in so doing the divs stick outside the normal area and require scrolling. How can I achieve this sort of masking while keeping everything contained horizontally. I've tried altering the position of various elements and can't seem to achieve this goal. *Note the colors are only there for reference, in the end the red/blue/green divs would be white.
https://jsfiddle.net/xevsz81c/
#leftDivider {
width: 50%;
height: 50px;
background:red;
float: left;
position: absolute;
left: -50px;
}
#leftDivider div{
bottom: 0px;
height: 0px;
border-style: solid;
border-width: 50px 0 0 60px;
border-color: transparent transparent transparent green;
float: left;
position: relative;
left: 100%;
}
#rightDivider {
width: 50%;
height: 50px;
background: blue;
float: right;
position: absolute;
right: -50px;
}
#rightDivider div{
bottom: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 50px 60px;
border-color: transparent transparent green transparent;
float: right;
position: relative;
right: 100%;
}
.divider {
position: absolute;
bottom: 50px;
right: 0;
left: 0;
}
.row {background: orange; position: relative; height: 300px; padding: 0; margin: 0;}
html, body {margin: 0; padding: 0;}
<div class="row">
This div has a background image
<div class="divider"><div id="leftDivider"><div></div></div></div>
<div class="divider"><div id="rightDivider"><div></div></div></div>
</div>
I am having a difficult time recreating the issue in your fiddle, might be a lack of the image within the orange div. But try the following:
You would have to utilize the overflow: hidden property.
By doing this you hide the extra and disable the scrolling which sounds like what you need and are experiencing.
See the explanation here as well as its uses.
I have this triangle:
When browser gets smaller it is cropped this way:
I would like it to crop from both left and right, so the text would still be viewable.
Markup:
echo '<div class="triangle"><p class="season">SEASON '.substr($patch_array[$x][0],0,1).'</p></div>';
CSS:
.season{
font-size: 16px;
text-align: center;
top: -35px;
left: -60px;
position: relative;
width: 113px;
margin: 0px;
padding: 0px;
color: white;
}
.triangle{
width: 0;
height: 0;
clear: both;
margin-left: auto;
margin-right: auto;
border-left: 300px solid transparent;
border-right: 300px solid transparent;
border-top: 45px solid #6699ff;
}
The idea is to set the container to relative position, then draw the shape with pseudo element, and set both the shape and text as absolute position and always stay centered.
Also made a some small improvement - changed left and right border style to outset, it does the trick to make lines look much smoother on Firefox.
Try the demo, resize the output frame, and see how the shape and text always stay in the center.
JsFiddle Demo
.triangle {
text-align: center;
position: relative;
}
.triangle:before {
width: 0;
height: 0;
border-left: 300px outset transparent;
border-right: 300px outset transparent;
border-top: 45px solid #6699ff;
content: "";
display: inline-block;
position: absolute;
left: 50%;
margin-left: -300px;
}
.season {
position: absolute;
width: 100%;
text-align: center;
color: white;
margin: 10px 0;
}
<div class="triangle">
<p class="season">Hello World</p>
</div>
Right, I ran into a bit of a problem and not to sure if this can be solved another way.
I need to move the content: "F"; and center it onto the border I have in the top left corner. Now is this possible without creating another element?
HTML:
<div class="userBoxF"></div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content: "F";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
The only way I can think to do it is to create the corner as a completely separate element so I can put the text "F" into a span (or something) and move it that way.
Demo Here
Note: Nothing here will change size, width and height for both the box and corner will always be the same.
Here is what I want, using the solution i found but would rather not use.
HTML:
<div class="userBoxF">
<div class="corner"><span>F</span></div>
</div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF .corner {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
.userBoxF .corner span {
display: block;
position: absolute;
top: -30px;
left: -20px;
}
Here is a demo of the solution I came up with but I would rather not create anymore elements.
My Solution
You can use :before wit :after together.
I removed the span:
<div class="userBoxF">
</div>
And changed the CSS blocks to this:
.userBoxF:before {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
content: "";
}
.userBoxF:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "F";
font-size: 30px;
}
And here's the updated fiddle
EDIT: Here's an added bonus!
You can jack the "F" from the class, if you want it to be more versatile, if you use CSS's attr inside content. Example:
<div class="userBox" data-l="F">
</div>
And:
.userBox:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "" attr(data-l);
font-size: 30px;
}
And another fiddle
Arguably the "F" is actual content as it's not a styling option...it actually denotes something and, perhaps should be read by a screenreader (for instance) then a span with a gradient (TL - BR) mightbe more appropriate.
JSFiddle Demo
HTML
<div class="userBoxF">
<span class="section-letter">F</span>
</div>
CSS
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.section-letter {
position: absolute;
top: 0;
left: 0;
width:2em;
height:2em;
line-height: 1em;
text-align: left;
padding:0.25em 0 0 0.25em;
font-size: 30px;
background: linear-gradient(135deg, pink 0%, pink 50%, transparent 50%, transparent 100%);
}
Simply use another :psuedo:
Demo Fiddle
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:before,.userBoxF:after{
position: absolute;
top: 0;
left: 0;
}
.userBoxF:before {
content:"";
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
}
.userBoxF:after {
content:attr(data-l);
top: 10px;
left: 10px;
font-size: 30px;
}
From a single pseudo, you can use a gradient as background : DEMO
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content:"F";
position: absolute;
top: 0;
left: 0;
text-indent:20px;
line-height:60px;
width:80px;
height:80px;
background:linear-gradient(to bottom right, #F385FF 51%, transparent 49%);
font-size: 30px;
}
background-image as gradient can be just an image like in old days :
DEMO: