I want to fixed the "X" button inside the popup and sticky top.
But position:fixed & position:absolute both not working.
It will work fine if I using IOS google chrome and safari.
.popup-inner {
position: absolute;
bottom: 0px;
overflow: auto;
padding-bottom: 30px;
-webkit-text-size-adjust: none;
}
.popup-close {
width: 30px;
height: 30px;
position: fixed;
top: 25px;
right: 20px;
}
<a class="btn" data-popup-open="popup-1" href="#"><i class="fa fa-globe" aria-hidden="true"></i>popup</a>
<div class="popup" data-popup="popup-1">
<div class="popup-overlay"></div>
<div class="popup-inner">
<div class="fixed-content">
<div class="col-main">
<div>123</div>
<div class="content">
<ul>
<li>
<a>
<span>aaaaa</span>
<div class="lan">bbbb</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<a class="popup-close" data-popup-close="popup-1" href="#">
<div class="popup-icon"></div>
</a>
</div>
</div>
JSFiddle Here
Thanks for help.
I would suggest some CSS fixes
CSS
.popup-icon{
height:30px;
width:30px;
position: relative;
}
.popup-icon:before,
.popup-icon:after {
content: "";
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 3px;
background: #aaa;
margin: auto;
}
Link for reference
Related
Havent touched html/css in years so I need some help. I have a nested list, and want to style the outer list (#todo), and just have 'normal' bullets on the inside list (#task). Problem is when I style the outer list it automatically styles the inside list as well. As a rigged fix, i thought of removing the li tags from and just making them <p> and somehow add a bullet to the front of them. How do you add bullets to the front of <p> tag?
#parent .todo ul li:before{
content: "";
position: absolute;
top: 5px;
left: -25px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 2px solid #0bb5f4;
}
#parent .todo ul li:after{
content: "";
position: absolute;
top: 14px;
left: -21px;
width: 2px;
height: 75px;
background: #0bb5f4
}
.task{
padding-left: 25px;
}
<div class="todo">
<div class="title">
<p class="bold">Title1</p>
</div>
<ul>
<li>
<div class="date">today</div>
<div class="info">
<p class="semi-bold">Name</p>
<p class="description"><em>location</em></p>
<div class="task">
<p>task1</p>
<p>task2</p>
<p>task3</p>
</div>
</div>
</li>
<li>
<div class="date">yesterday</div>
<div class="info">
<p class="semi-bold">Name2</p>
<p class="description"><em>location2</em></p>
<div class="task">
<p>item1</p>
<p>item2</p>
<p>item3</p>
</div>
</div>
</li>
</ul>
</div>
Add a class on the li elements of the outer list and apply the styles you want to apply on the outer list, on this class. This way, inner list's li elements won't be styled.
.outer-li {
position: relative;
list-style: none;
margin: 10px 0 0 0;
}
.outer-li::before {
content: "";
position: absolute;
top: 5px;
left: -25px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 2px solid #0bb5f4;
}
.outer-li::after {
content: "";
position: absolute;
top: 14px;
left: -21px;
width: 2px;
height: 75px;
background: #0bb5f4
}
<div class="todo">
<div class="title">
<p class="bold">Title1</p>
</div>
<ul class="outer">
<li class="outer-li">
<div class="date">today</div>
<div class="info">
<p class="semi-bold">Name</p>
<p class="description"><em>location</em></p>
<ul class="task">
<li>task1</li>
<li>task2</li>
<li>task3</li>
</ul>
</div>
</li>
<li class="outer-li">
<div class="date">yesterday</div>
<div class="info">
<p class="semi-bold">Name2</p>
<p class="description"><em>location2</em></p>
<ul class="task">
<li>task1</li>
<li>task2</li>
<li>task3</li>
</ul>
</div>
</li>
</ul>
</div>
Alternatively, you could use ::before pseudo selector.
li {
position: relative;
list-style: none;
margin: 10px 0 0 0;
}
li::before {
content: "";
position: absolute;
top: 5px;
left: -25px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 2px solid #0bb5f4;
}
li::after {
content: "";
position: absolute;
top: 14px;
left: -21px;
width: 2px;
height: 75px;
background: #0bb5f4
}
.task {
padding-left: 25px;
}
.task p {
position: relative;
}
.task p::before {
content: '';
position: absolute;
background: #222;
width: 5px;
height: 5px;
left: -13px;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
}
<div class="todo">
<div class="title">
<p class="bold">Title1</p>
</div>
<ul>
<li>
<div class="date">today</div>
<div class="info">
<p class="semi-bold">Name</p>
<p class="description"><em>location</em></p>
<div class="task">
<p>task1</p>
<p>task2</p>
<p>task3</p>
</div>
</div>
</li>
</ul>
</div>
The img tag resizes automatically.
However, I'm making a lightbox that when you click, the image appears in the middle, and at the bottom you have all images showing.
The bottom bar with images, should be always at the bottom, and the image should be proportionated in the center of the screen, especting the bar at the bottom.
So when we resize the screen from the bottom e.g. open the dev tools, the image should shrink and the bar at the bottom should go up.
Here is the codepen: https://codepen.io/Aurelian/pen/eKEQMP?editors=0100
Here is the HTML:
<div class="container">
<ul class="gallery__list">
<li class="gallery__item">
<a class="gallery__link" href="https://farm5.staticflickr.com/4357/36172707494_53c0f25d98_h_d.jpg">
<img src="https://farm5.staticflickr.com/4357/36172707494_53c0f25d98_h_d.jpg">
</a>
</li>
<li class="gallery__item">
<a class="gallery__link" href="https://ritzcarlton-h.assetsadobe.com/is/image/content/dam/the-ritz-carlton/hotels/asia-pacific/japan/tokyo/guest-rooms/RCTOKYO_00451.jpg?$XlargeViewport100pct$">
<img src="https://ritzcarlton-h.assetsadobe.com/is/image/content/dam/the-ritz-carlton/hotels/asia-pacific/japan/tokyo/guest-rooms/RCTOKYO_00451.jpg?$XlargeViewport100pct$">
</a>
</li>
<li class="gallery__item">
<a class="gallery__link" href="https://thewallpaper.co/wp-content/uploads/2016/09/hd-place-wallpaper-high-definition-cool-images-cities-desktop-images-view-point-hd-Exotic-Places-1920x1200.jpg">
<img src="https://thewallpaper.co/wp-content/uploads/2016/09/hd-place-wallpaper-high-definition-cool-images-cities-desktop-images-view-point-hd-Exotic-Places-1920x1200.jpg">
</a>
</li>
<li class="gallery__item">
<a class="gallery__link" href="https://thewallpaper.co/wp-content/uploads/2016/09/landscapes-cool-images-cities-best-place-ever-backgrounds-view-point-world-Exotic-Places-1920x1200-768x480.jpg">
<img src="https://thewallpaper.co/wp-content/uploads/2016/09/landscapes-cool-images-cities-best-place-ever-backgrounds-view-point-world-Exotic-Places-1920x1200-768x480.jpg">
</a>
</li>
<li class="gallery__item">
<a class="gallery__link" href="http://hotelslike.com/wp-content/uploads/2016/09/117725.jpg">
<img src="http://hotelslike.com/wp-content/uploads/2016/09/117725.jpg">
</a>
</li>
<li class="gallery__item">
<a class="gallery__link" href="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
<img src="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
</a>
</li>
<li class="gallery__item">
<a class="gallery__link" href="https://blog.eurail.com/wp-content/uploads/2016/08/La-Rambla-at-night.jpg">
<img src="https://blog.eurail.com/wp-content/uploads/2016/08/La-Rambla-at-night.jpg">
</a>
</li>
<li class="gallery__item">
<a class="gallery__link" href="http://www.hopper.com/cms-assets/images/Destinations/Europe/Ireland/Dublin_shutterstock_111481523_800x.jpg">
<img src="http://www.hopper.com/cms-assets/images/Destinations/Europe/Ireland/Dublin_shutterstock_111481523_800x.jpg">
</a>
</li>
</ul>
</div>
<div class="modal-gallery">
<div class="modal-gallery__main">
<div class="modal-gallery__main--outer">
<!-- Tool Bar -->
<ul class="modal-gallery__tool-bar">
<span class="modal-gallery__close"><i class="fa fa-times" aria-hidden="true"></i></span>
<a class="modal-gallery__downolad" href=""><i class="fa fa-download" aria-hidden="true"></i></a>
<span class="modal-gallery__fullscreen"><i class="fa fa-arrows-alt" aria-hidden="true"></i></span>
<span class="modal-gallery__autoplay"><i class="fa fa-play-circle-o" aria-hidden="true"></i></span>
<div class="modal-gallery__counter">
<span class="modal-gallery__counter--current">1</span>
<span>/</span>
<span class="modal-gallery__counter--all">5</span>
</div>
</ul>
<!-- Main Section -->
<div class="modal-gallery__main-image-wrap">
<img class="modal-gallery__main-image" src="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
<div class="modal-gallery__arrow-wrap">
<button class="modal-gallery__arrow-prev"></button>
<button class="modal-gallery__arrow-next"></button>
</div>
</div>
<div class="modal-gallery__pic-list">
<ul class="modal-gallery__pic-list-wrap">
<li class="modal-gallery__item">
<a class="modal-gallery__link" href="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
<img src="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
</a>
</li>
<li class="modal-gallery__item">
<a class="modal-gallery__link" href="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
<img src="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
</a>
</li>
<li class="modal-gallery__item">
<a class="modal-gallery__link" href="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
<img src="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
</a>
</li>
<li class="modal-gallery__item">
<a class="modal-gallery__link" href="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
<img src="https://s-media-cache-ak0.pinimg.com/originals/62/e1/35/62e135d63fef91cdc2d058a8542507d3.jpg">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Here's the CSS:
*, *:before, *:after {
box-sizing: border-box;
}
.container {
max-width: 960px;
margin: 50px auto;
}
img {
max-width: 100%;
max-height: 100%;
display: block;
height: auto;
}
// Gallery List
.gallery {
&__item {
width: calc(25%);
float: left;
height: 220px;
& img {
height: 220px;
object-fit: cover;
}
}
}
// Gallery Modal
.modal-gallery {
position: fixed;
z-index: 9999999;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: opacity 0.15s ease 0s;
background-color: #0e0e0e;
// opacity: .95;
&__main {
height: auto;
position: relative;
&--outer {
height: auto;
position: relative;
top: 15px;
}
}
&__main-image-wrap {
position: relative;
height: auto;
width: 100%;
}
&__main-image {
width: auto;
// max-width: 100%;
height: auto;
margin: 0 auto;
display: block;
position: relative;
z-index: 1;
}
&__arrow-wrap {
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 0;
z-index: 20;
}
&__tool-bar {
color: #acabab;
z-index: 10;
left: 0;
position: absolute;
top: 0;
padding: 15px;
width: 100%;
background-color: rgba(0, 0, 0, 0.45);
}
&__counter {
display: inline-block;
}
&__pic-list {
width: 100%;
background: red;
bottom: 0;
}
&__pic-list-wrap {
width: 100%;
padding: 25px 0;
border: 1px solid #313131;
border-left: 0;
border-right: 0;
position: relative;
text-align: center;
overflow: hidden;
}
&__item {
width: 10%;
float: left;
padding: 15px;
margin-right: 15px;
& img {
height: 50px;
width: 100%;
object-fit: cover;
}
}
}
Wrap both the slideshow element and the bottom bar with images in a container.
Give each one an explicit height (i.e. slideshow height: 80%, bottom bar height: 20%).
Then apply height: 100% to the image containers (i.e. a and or li).
Then apply height: 100%; width: auto; to each image. This will make the images responsive while maintaining their aspect ratio. However, it's important that the image container is dynamic (i.e. height/width % or vh or w/e). You could also do width: 100%; height: auto; for instance.
I cant figure out why the red buttons are not displayed properly in firefox. In chrome it looks good.
Here is the fiddle:
Fiddle
That is my chrome:
That is my firefox:
My HTML:
<div class="bilder_bearbeiten col-lg-12">
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete7"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete8"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete9"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete10"> Entfernen </a>
</div>
</div>
My CSS:
.bilder_bearbeiten img {
width: 155px;
height: 100px;
margin-bottom: 5px;
border-radius: 2px;
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.img-element-del {
padding-bottom: 40px;
display: inline-block;
}
.deletebtn {
border-radius: 0;
width: 155px;
position: absolute;
color: white;
text-align: center;
text-decoration: none;
padding: 5px 0;
}
Well I dont know what details to add. I tried to change everything in firefox browser dev tools but could never achieve the same behaviour as in chrome.
https://jsfiddle.net/7vz89t4d/2/
.img-element-del {
position: relative; /* this is new */
padding-bottom: 40px;
display: inline-block;
}
.deletebtn {
border-radius: 0;
width: 155px;
color: white;
text-align: center;
text-decoration: none;
padding: 5px 0;
position: absolute;
bottom: 0; /* this is new */
left: 0; /* this is new */
}
Short explanation:
If using position:absolute; do also set position:relative; to the parent. Then absolute is always from the parent.
This picture might help:
the picture is from css-tricks.com/absolute-positioning-inside-relative-positioning which explains it even a little further.
The above picture in code would look like:
.parent {
position: relative;
width: 400px;
height: 300px;
border: solid 3px CHOCOLATE;
}
.absolute-one,
.absolute-two,
.absolute-three {
position: absolute;
background-color: CHOCOLATE;
color: white;
padding: 10px;
width: 100px;
height: 100px;
}
.absolute-one {
top: 0;
left: 0;
}
.absolute-two {
bottom: 5px;
left: 10px;
}
.absolute-three {
top: 30%;
right: -25px;
}
<div class="parent">
<div class="absolute-one">
top: 0;
left: 0;
</div>
<div class="absolute-two">
bottom: 5px;
left: 10px;
</div>
<div class="absolute-three">
top: 30%;
right: -25px;
</div>
</div>
I've updated your fiddle here -> https://jsfiddle.net/7vz89t4d/3/
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.bilder_bearbeiten img {
width: 155px;
height: 100px;
margin-bottom: 5px;
border-radius: 2px;
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.img-element-del {
padding-bottom: 40px;
display: inline-block;
position: relative;
margin-bottom: 20px;
}
.deletebtn {
border-radius: 0;
width: 155px;
position: absolute;
color: white;
text-align: center;
text-decoration: none;
padding: 5px 0;
bottom: 0;
left: 0;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="bilder_bearbeiten col-lg-12">
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete7"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete8"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete9"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete10"> Entfernen </a>
</div>
</div>
Try adding "Left:0;" and "bottom:0;" in your deletebtn css
Here I have craeted a new one. You do not have to use position absolute or something similar.
jsfiddle
I have just put each "image" and "a" in a div
<div class="bilder-row">
<img src="..."/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
and style:
.bilder-row{width:160px;float:left;}
this will solve the problem.
When styling a page with markup, generally avoid absolute positioning within your layout. Absolutely positioned items make for very brittle layouts which make responsive design very very challenging. Only use it as a last resort. I'd recommend you fully utilize Bootstrap. It's a very powerful tool but is opinionated about your markup. I've refactored your example into something more responsive while taking full advantage of the Bootstrap grid: http://getbootstrap.com/css/#grid
Here's the full Codepen example: http://codepen.io/toddsby/pen/pRLQem
Viewed on Firefox 51 (macOS)
HTML
<div class="row gutter-5">
<div class="img-element-del col-xs-3">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg" />
<div class="deletebtn-container">
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
</div>
</div>
CSS
/** custom Bootstrap grid gutter **/
.row.gutter-5 {
margin-left: -10px;
margin-right: -10px;
}
.gutter-5 > [class*="col-"], .gutter-5 > [class*=" col-"] {
padding-right: 5px;
padding-left: 5px;
}
I've moved the items into a col-3 (12/4) grid. Then styled the image and button to take up 100% of their containers. This allows for a flexible and responsive layout. You can then use Bootstrap breakpoints to target different devices. ie <div class="img-element-del col-xs-1 col-md-2 col-lg-3">
Note: This layout would be very simple with Flexbox. As of 2016, Flexbox is supported by all major browsers! You can learn more about Flexbox here: https://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af
Try add position: relative; to .img-element-del
and to .deletebtn add this properties:
z-index: 1;
left: 0;
bottom: 10px;
HTML Mark up-
<div class="module main open" id="widg0">
<div class="main-head">
<div class="optionsmod">
<div class="openClose minify">
<img src="src">
</div>
<div class="close">
<img src="src">
</div>
</div>
<div class="h3">Search</div>
</div>
<div class="main-content">
</div>
</div>
CSS:
.module {margin: 0;}
.optionsmod {
float: right;
position: relative;
}
.minify {
cursor: pointer;
height: 16px;
position: absolute;
right: 12px;
top: -2px;
width: 16px;
}
.close {
cursor: pointer;
height: 10px;
position: absolute;
right: -2px;
top: -2px;
width: 10px;
}
Now this is the main CSS that is being effected, the .optionsmod just doesn't take the hasLayout issue, and it is completely out of whack in IE7. Does anyone see any issues with the CSS and maybe a fix for this? IE8+ FF and Chrome all handle this like they should, IE7 is the only browser giving issues because of hasLayout.
Its pretty hard to recreate this in jsfiddle so I'm going to go ahead and paste a screenshot, HTML and CSS:
I'm having problem displaying the dropdown in the image above.
HTML and CSS:
<div class="row-fluid profile-gallery-image-container">
<div class="span12">
<img src="#"/>
<div class="image-options">
<div class="dropdown">
<i class="icon-cog icon-white"></i>
<ul class="dropdown-menu">
<li>test</li>
</ul>
</div>
</div>
<div class="delete-image">
<a href="javascript:void(0);"/></a>
</div>
</div>
</div>
.profile-gallery-image-container {
max-width: 130px;
max-height: 110px;
margin-bottom: 0px;
display: inline-block;
position: relative;
border: 2px solid rgba(140,140,140,1);
z-index: 0;
}
.image-options {
float: right;
top: 0px;
right: 0px;
position: absolute;
padding-top: 2px;
border-left: 2px solid rgba(255,128,64,1);
border-bottom: 2px solid rgba(255,128,64,1);
width: 15px;
height: 15px;
}
What am i doing wrong?
This could be to do with z-index levels or could be overflow settings.
Setting the parent container to have "overflow:visible;" would be a start - but then I'd look at position: relative on the menu CSS - that often helps matters.
But ultimately without seeing a working demo I can't figure it out.