I have a problem with my exit page element. I create a big "X" on the right side of my page. This is clickable element for exit from current content.
There is a code of this element:
.section-modal .close-modal {
position: fixed;
top: 25px;
right: 25px;
width: 75px;
height: 75px;
background-color: transparent;
cursor: pointer;
}
.section-modal .close-modal:hover {
opacity: .3;
}
.section-modal .close-modal .lr {
z-index: 1051;
width: 5px;
height: 75px;
margin-left: 35px;
background-color: #222;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.section-modal .close-modal .lr .rl {
z-index: 1052;
width: 5px;
height: 75px;
background-color: #222;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
I have a logo image on the top middle of the page. Here is a code:
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<img src="img\Logo2.png" class="img-responsive" style="margin: 0 auto; z-index: -1" alt="...">
When I narrow the page I have "X" near my logo but I can not click and return to main page. I can not solve this solution. Please help.
If You need some more info please tell me I'll edit a question.
it's hard to tell from your code, but I'm guessing the problem is that the logo is overlapping the 'x' button. To make sure , right click the 'x' and choose 'Inspect element'.
If the element tab is opened focused on the img tag and not on the 'x' then that is your problem., to solve it, give it a z-index:
.section-modal .close-modal {
position: fixed;
top: 25px;
right: 25px;
width: 75px;
height: 75px;
background-color: transparent;
cursor: pointer;
z-index: 100
}
This might be a stacking context issue.
More infos for a complete understanding of z-index behaviors :
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Related
I have an image with a CSS overlay that slides up from the bottom, and it's on the left. I want it in the center. Also, I hate to admit it, but the other post doesn't help. I got a post suggestion(IDK why), but I don't see how it helps me. I'm not super familiar with this and what I'm doing is for a project in a class of mine, which is late, and I'm trying to shoot for extra credit.
I just want to know how to make it go to the center. I have tried moving it to the left by 25, 50, and 75%, same with the right. It just won't move. Here is the code:
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 50%;
height: auto;
}
/* This is what I have been using with to move it. */
.overlay {
position: absolute;
bottom: 0;
left: 0;
/* This will move wherever */
right: 0;
background-color: darkblue;
overflow: hidden;
width: 50%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: red;
font-size: 20px;
font-family: cursive;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<img src="image is here" alt="Avatar" class="image"> This won't move
<div class="overlay">
<div class="text"><u>This is just here atm</u></div>
</div>
</div>
I solved it. I just needed to use the "center" tag and put my style tag in it. Moved the overlay and it was fixed.
On this page of the document, I need the images to be arranged messily on the page. My approach is to adjust each one via top and left percentage values. The figure elements are behaving strangely. #num1 does not respond to top at all, while #num4 requires extreme values to function, but #num5 is doing just fine. All 6 #num have the same properties. 1-3 are under <div id="divA" class="row"> while 4-6 are under <div id="divB" class="row">
Here is a link to my CodePen .
http://codepen.io/WallyNally/pen/QEZKrV
Here is the mockup I am working toward.
If you have insight as to why these figures are being difficult, or if you have alternative/improved ways of doing this, please let me know.
Also- once these are arranged, I plan to add script will .on(mouseover) push the non-hoveredfigures away from the hovered element. If there is a way of writing the html/css that would be amenable to being handled by script, bonus points for you.
I created example here which do not change format of boxes and images.
So, first image will have still the same format: 3:2.
box(es) are positioned absolutely to document (topleft corner), width is also calculated from document size.
box-border(s) create right format of boxes.
image-wrapper(s) create position for images - and it should be positioned over the hidden corner.
image-size(s) create right format of images
img use object-fit, which is not compatible with all browsers. If you are looking for for something, what will work on every modern browser, you can use background css style. There is also nice workaround, if you also need img tag for SEO (find Solution 2): Is there an equivalent to background-size: cover and contain for image elements?
#boxes-wrapper {
position: relative;
width: 100%;
padding-top: 63.12%;
}
#box1,
#box2,
#box3,
#box4,
#box5,
#box6 {
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 0;
}
.box-border {
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-box-shadow: 0 0 0 2px #5f2325;
-moz-box-shadow: 0 0 0 2px #5f2325;
-ms-box-shadow: 0 0 0 2px #5f2325;
-o-box-shadow: 0 0 0 2px #5f2325;
box-shadow: 0 0 0 2px #5f2325;
}
.image-wrapper {
position: absolute;
height: 0;
}
.image-size {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
}
.image-size img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
#box1 {
top: 21.48%;
left: 4.88%;
width: 24.54%;
}
#box1 .box-border {
padding-top: 67.96%;
}
#box1 .image-wrapper {
bottom: -2.5%;
left: -3.05%;
width: 92.52%;
}
#box1 .image-size {
padding-top: 66.46%;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
#box2 {
top: 31.36%;
left: 36%;
width: 19%;
}
#box2 .box-border {
padding-top: 67.8%;
}
#box2 .image-wrapper {
top: -7.85%;
left: -10.68%;
width: 92.52%;
}
#box2 .image-size {
padding-top: 66.54%;
}
#box4 {
top: 54.67%;
left: 1.42%;
width: 24.61%;
}
#box4 .box-border {
padding-top: 67.77%;
}
#box4 .image-wrapper {
bottom: -11.38%;
left: 10.74%;
width: 66.94%;
}
#box4 .image-size {
padding-top: 104.12%;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
<div id="boxes-wrapper">
<div id="box1">
<div class="box-border">
<div class="image-wrapper">
<div class="image-size">
<img src="http://dummyimage.com/450x300/eee/333333.png" />
</div>
</div>
</div>
</div>
<div id="box2">
<div class="box-border">
<div class="image-wrapper">
<div class="image-size">
<img src="http://dummyimage.com/450x300/eee/333333.png" />
</div>
</div>
</div>
</div>
<div id="box4">
<div class="box-border">
<div class="image-wrapper">
<div class="image-size">
<img src="http://dummyimage.com/450x469/eee/333333.png" />
</div>
</div>
</div>
</div>
</div>
EDIT: Added boxes-wrapper, because of problem with 2nd row.
I currently have an ng-repeat that looks like this:
<div class="repeaterDiv" data-ng-repeat="item in itemArray">
<div class="wrapper">
<img class="imageClass" ng-src="{{item.image}}"/>
<div class="corner-ribbon bottom-right sticky green shadow">Changed</div>
</div>
</div>
Here is the CSS pulled from this codePen:
.corner-ribbon{
width: 200px;
background: #e43;
position: absolute;
top: 25px;
left: -50px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.sticky{
position: fixed;
}
.corner-ribbon.shadow{
box-shadow: 0 0 3px rgba(0,0,0,.3);
}
.corner-ribbon.bottom-right{
top: auto;
right: -50px;
bottom: 25px;
left: auto;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.green{background: #2c7;}
I am trying to figure out how to get the ribbon to be restricted to the wrapper class. Does anyone know how I can do that? so I'm still using the same ribbon, but instead of being in the bottom right of the screen, it is at the bottom right of the image for which it applies?
you need to use relative/absolute position and reset display of .wrapper to shrink on image. Then add overflow:hidden to cut off edges of ribbon:
.corner-ribbon {
width: 200px;
background: #e43;
position: absolute;
top: 25px;
left: -50px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.sticky {
position: absolute;
}
.corner-ribbon.shadow {
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}
.corner-ribbon.bottom-right {
top: auto;
right: -50px;
bottom: 30px;
left: auto;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.green {
background: #2c7;
}
.wrapper {
position: relative;
display: table-cell;/* or inline-block or float */
overflow: hidden;
}
img {
display: block;
}
<div class="repeaterDiv" data-ng-repeat="item in itemArray">
<div class="wrapper">
<img class="imageClass" ng-src="{{item.image}}" src="http://lorempixel.com/300/200" />
<div class="corner-ribbon bottom-right sticky green shadow">Changed</div>
</div>
</div>
The class has fixed positioning.
.corner-ribbon.sticky{
position: fixed;
}
So for exact css you may not be able to attach ribbon to each img, rather ribbon would go to specific place in window only. However, you can adjust css a bit. Make wrapper class relative, and .corner-ribbon.sticky absolute position. Then adjust your css fot top/bottom/left/right properties to align them.
.wrapper{
position: relative;
}
.wrapper .corner-ribbon.sticky{
position: absolute;
/* put top/bottom/left/right values here*/
}
I am trying to make a corner ribbon to sit over an image, on a responsive design site. I have set up a fiddle page with the code I've got so far. As you can see there, it seems to insert a top margin (the corner of the ribbon is not disappearing) and the overflow is not hidden. Any ideas why?
JSfiddle
.ribbon-holder {
overflow: hidden;
}
.ribbon {
position: relative;
background: yellow;
color: black;
transform: rotate(-45deg);
text-align: center;
top: 52px;
left: -32px;
width: 145px;
}
<div class="ribbon-holder">
<div class="ribbon ribbon-holder">Free Shipping!</div>
<a href="http://www.somesite.com">
<img src="http://www.adventurouskate.com/wp-content/uploads/2016/01/planes-black-shower-curtain.jpg" alt="Shower Curtin" />
</a>
</div>
use position:relative in the parent (.ribbon-holder) and absolute in the child (.ribbon)
.ribbon-holder {
overflow: hidden;
position: relative
}
.ribbon {
position: absolute;
background: yellow;
color: black;
transform: rotate(-45deg);
text-align: center;
top: 32px;
left: -32px;
width: 145px;
}
<div class="ribbon-holder">
<div class="ribbon ribbon-holder">Free Shipping!</div>
<a href="http://www.somesite.com">
<img src="http://www.adventurouskate.com/wp-content/uploads/2016/01/planes-black-shower-curtain.jpg" alt="Shower Curtin" />
</a>
</div>
How about this:
html:
<div class="ribbon-holder" >
<a href="http://www.somesite.com" ><img itemprop="image" class="imageSize" src="http://www.adventurouskate.com/wp-content/uploads/2016/01/planes-black-shower-curtain.jpg" alt="Shower Curtin" /></a>
</div>
<div class="ribbon ribbon-holder">
Free Shipping!
</div>
css:
.ribbon-holder{
overflow: hidden;
}
.ribbon{
position: absolute;
background: yellow;
color: black;
transform: rotate(-45deg);
text-align: center;
top: 30px;
left: -32px;
width:145px;
}
https://jsfiddle.net/L4kojc4k/2/
Here are the changes i made :
.ribbon-holder{
overflow: hidden;
position: relative;// added by DamienBannerot
}
.ribbon{
position: absolute;// added by DamienBannerot
background: yellow;
color: black;
transform: rotate(-45deg);
text-align: center;
top: 32px;// added by DamienBannerot
left: -32px;// added by DamienBannerot
width:145px;
}
fiddle here : https://jsfiddle.net/L4kojc4k/4/
For a site I am making I want to have a nice rotated "navigation" bar, just simple links really at the top of the page.
The code I have got:
div.home
{
position: absolute;
top: 0px;
left: 700px;
height: 150px;
width: 40px;
background-color: #313131;
-webkit-transform: rotate(45deg);
margin-top: -36px;
text-transform: rotate(45deg);
}
And:
<div class="home">
Home
</div>
This makes the text bunch up at the top of the element. Ideally I want it to be at the bottom of the element,
I don't Know what exactly you want but these maybe helpful
<div class="home">
<div class="text">
Home
</div>
</div>
div.home
{
position: absolute;
top: 30px;
left: 700px;
height: 150px;
width: 40px;
background-color: #313131;
-webkit-transform: rotate(45deg);
margin-top: -36px;
-webkit-text-transform: rotate(90deg);
}
.text{
margin-top:100px;
font-size:26px;
-webkit-transform: rotate(-90deg);
color:white;
}
DEMO
Don't transform the text. transform (and -ms-transform, -webkit-transform and so on) include rotating text with it and receive mouse events in the new position.
I don't know if this is exactly what you're having trouble with but change the top value to something like '30px'.
Demo