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.
Related
How do i place text over image div in certain position while keeping it responsive(doesn't move from that spot on smaller devices or bigger)
Problem im getting is that most of the content wont fit like i want it or wont even stick to image in smaller devices, so i need solution on how to solve this one,placing 3 text divs on image div without using method of making background image, i need it to work with tag
Bootstrap v4
i tried this:
CODEPEN
<div class="slider">
<div class="cover-image">
<div class="image-link">
<div class="image-date">
<p>08.10.2017</p>
</div>
<div class="image-text">
<div class="img-test"><h2>Gradjevina koja se gradi duze od egipatskih piramida</h2></div>
</div>
Eskterijer
</div>
<img class="img-fluid" src="#asset('/images/slider-1.png')">
</div>
</div>
and CSS:
.cover-image {
position: relative;
}
.slider .image-link {
position: absolute;
bottom: 20px;
left: 10px;
width: 100%;
color: white;
}
.img-test {
font-family: Oswald;
font-size: 40px;
font-weight: 600;
position: absolute;
bottom: 50px;
left: 10px;
color: white;
text-transform: none;
}
.slider .image-date {
position: absolute;
bottom: 150px;
left: 10px;
color: white;
border-bottom: 1px solid white;
margin-bottom: 0;
}
<div class="slider">
<div class="cover-image">
<div class="image-link">
<div class="image-date">
<p>08.10.2017</p>
</div>
<div class="image-text">
<div class="img-test">
<h2>Gradjevina koja se gradi duze od egipatskih piramida</h2>
</div>
</div>
Eskterijer
</div>
<img class="img-fluid" src="http://vietlongtravel.com/wp-content/uploads/2017/05/151548909_high-770x530.jpg">
</div>
</div>
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
I am trying to position a div to the left of the screen and I am also trying to make it work on any screen resolution and browser.
Here's my code below:-
#Biography {
background: #ffffff ;
text-align: center ;
text-transform: uppercase ;
color: #fff ;
padding: 5em 0;
width: 100%;
font-family: 'Conv_Lato-Regular',Sans-Serif;
margin: 0;
}
#info {
left: -10px;
float: left;
top: -80px;
position: relative;
color: #000;
}
<div id="Biography">
<div class="container">
<div class="tittle">
</div>
<div id="info">
<div class="col-md-8">
<div class=" wow bounceInDown" data-wow-delay="0.5s">
<div class="view view-fifth" style="height: 20%">
<img src="images/Dan.jpeg" alt="" style="height:80%; width:100%">
<h4> NAME</h4>
<h5> sean</h5>
<h4> OCCUPATION</h4>
<h5> Computer Programmer,Software Developer,Student</h5>
</div>
</div>
</div>
</div>
The problem is that the #info div is not fully to the left. I don't know what I am doing wrong.
You need to use 'position:absolute' instead of 'position:relative' to be located fully to the left in this case.
#info {
position: absolute;
left: 0px;
top: 0px;
color: #000;
}
When column-count is used, it seems to crop any overflow content.
#columns {
-webkit-column-count: 1;
-webkit-column-gap: 10px;
/*-webkit-column-fill: auto;*/
-moz-column-count: 1;
-moz-column-gap: 10px;
/*-moz-column-fill: auto;*/
column-count: 1;
column-gap: 10px;
/*column-fill: auto;*/
border: 1px solid red;
overflow: visible;
}
.pin {
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 5px;
}
<div id="columns">
<div class="pin">
<a href="#">
<span class="onsale">Sale!</span>
<img src="#.jpg" />
</a>
<h3>Product 1</h3>
</a>
</div>
</div>
Result:
Any ideas how I can fix this?
EDIT 1:
It seems it is a bug in Chrome.
it is fine on Firefox though:
EDIT 2:
span.onsale {
min-height: 3.236em;
min-width: 3.236em;
padding: .202em;
font-size: 1em;
font-weight: 700;
position: absolute;
text-align: center;
line-height: 3.236;
top: -.5em;
left: -.5em;
margin: 0;
border-radius: 100%;
background-color: $highlight;
color: $highlightext;
font-size: .857em;
-webkit-font-smoothing: antialiased;
}
Add transform: translateZ(0); to your .pin to enable hardware acceleration as a workaround.
I have a fix for this too.
This example shows the use of
transform: translateZ(0);
which fixes the cropping issue. It also shows a clever way to show the content Above the other columns blocks using z-index on hover:
https://codepen.io/HaloDesign/pen/zdRoYZ
I'm not sure how you are styling your .onsale so I styled on my own way.
If you use position:relative in .pin and then position:absolute you can achieve what you want.
UPDATE: The issue is the webkit-column-count:1 in Chrome and since having that with 1 or nothing is the same, just remove it and use another technique that will allow you to have the .onsale out of flow by using position:absolute
#columns {
border: 1px solid red;
}
.pin {
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 5px;
position: relative
}
.onsale {
min-height: 3.236em;
min-width: 3.236em;
padding: .202em;
font-size: 1em;
font-weight: 700;
position: absolute;
text-align: center;
line-height: 3.236;
top: -.5em;
left: -.5em;
margin: 0;
border-radius: 100%;
background-color: lightgreen;
color: white;
font-size: .857em;
-webkit-font-smoothing: antialiased;
}
<div id="columns">
<div class="pin">
<a href="#">
<span class="onsale">Sale!</span>
<img src="//placehold.it/300x300" />
</a>
<h3>Product 1</h3>
</div>
<div class="pin">
<a href="#">
<span class="onsale">Sale!</span>
<img src="//placehold.it/300x300" />
</a>
<h3>Product 2</h3>
</div>
</div>
Just use padding inside #columns class
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.