IE7 z-index doesn't work even if I add position: absolute or relative
Is there any other solution ? I add other divs lower z-indexes but doesn't work
.gallery {
background-color: #F4F4F4;
display: block;
min-height: 300px;
padding: 20px 10px;
position: absolute;
right: -44px;
top: 70px;
width: 980px;
z-index: 3000;
display: none;
}
.sub_menu {
background-color: #F4F4F4;
float: left;
height: 21px;
padding: 40px 35px;
position: relative;
top: 10px;
width: 930px;
z-index: 1000;
}
With z-index and IE it is sometimes required to use !important
.gallery {
background-color: #F4F4F4;
display: block;
min-height: 300px;
padding: 20px 10px;
position: absolute;
right: -44px;
top: 70px;
width: 980px;
z-index: 3000 !important;
display: none;
}
.sub_menu {
background-color: #F4F4F4;
float: left;
height: 21px;
padding: 40px 35px;
position: relative;
top: 10px;
width: 930px;
z-index: 1000 !important;
}
!important
Should be used as a last result.
Try the following before hand
body{
z-index: -1
}
.gallery {
background-color: #F4F4F4;
display: block;
min-height: 300px;
padding: 20px 10px;
position: absolute;
right: -44px;
top: 70px;
width: 980px;
z-index: 2;
display: none;
}
.sub_menu {
background-color: #F4F4F4;
float: left;
height: 21px;
padding: 40px 35px;
position: relative;
top: 10px;
width: 930px;
z-index: 1;
}
Related
I try to make a responsive website but I tend to believe because I'm using positiong + right and left it makes me some serious problems. I need to do that without grid.
That's what happens when I make the window a little bit smaller, some of it go left: https://i.imagesup.co/images2/cdf13e4d1939b4041c55ab3b59799762e3d8f32d.png.
And when it gets to the media query it's definitely not responsive. Every change in the window size under 786px seem differently.
https://i.imagesup.co/images2/007f47c1df59bdf745a531d55c9c8965270508aa.png
Only the what inside the first white box + what's inside + what above is really responsive.
CSS
body {
margin: auto 0;
direction: rtl;
background-color:#F0F0F0;
}
.img-center {
display: block;
margin: 0 auto;
}
#img-below {
border: 5px solid white;
border-radius: 100%;
height: 8%;
width: 8%;
position: relative;
bottom: 80px;
}
h1 {
color:#0099ff;
text-align: center;
position: relative;
bottom: 120px;
font-size: 50px;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
h2 {
color: gray;
font-size: 30px;
text-align: center;
font-size: 30px;
position: relative;
bottom: 157px;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
.icons {
height: 50px;
width: 50px;
border: #0099ff 5px solid;
padding: 5px;
border-radius: 100%;;
margin-right: 15px;
}
#DivIcons {
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
bottom: 170px;
}
p {
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 15px;
}
article {
width: 160px;
margin-bottom: 5px;
position: relative;
bottom: 455px;
right: 397px;
}
h3 {
font-family: 'M PLUS Rounded 1c', sans-serif;
}
.square {
border:5px solid #0099ff;
height: 80px;
width: 80px;
margin-left: 20px;
border-radius: 30%;
}
.circle {
border:5px solid #0099ff;
border-radius: 100%;
height: 80px;
width: 80px;
margin-left: 20px;
}
.Pservice {
color: #0099ff;
text-align: center;
position: relative;
top: 12px;
}
#service {
display: flex;
flex-direction: row;
position: relative;
bottom: 1710px;
right: 440px;
}
#position3 {
position: relative;
bottom: 70px;
right: 157px;
}
#form {
position: relative;
bottom: 1830px;
right: 593px;
}
input {
border-radius: 6px;
}
input:nth-child(1)
{
width: 250px;
height: 20px;
margin-left: 10px;
}
input:nth-child(2)
{
width: 250px;
height: 20px;
}
#textarea {
width: 520px;
height: 250px;
margin-bottom: 10px;
}
#submit {
background-color: #0099ff;
color: white;
height: 50px;
width: 120px;
position: relative;
right: 200px;
bottom: 10px;
cursor: pointer;
}
#FirstWhite{
width: 750px;
height: 320px;
background-color: white;
margin: 0 auto;
position: relative;
bottom: 460px;
z-index: -1;
margin-bottom: 5px;
}
#AboutWhite {
width: 180px;
height: 650px;
background-color: white;
position: relative;
bottom: 1113px;
right: 385px;
z-index: -1;
}
#ServiceWhite {
width: 555px;
height: 165px;
background-color: white;
z-index: -1;
position: relative;
bottom: 1855px;
right: 580px;
}
#FooterWhite {
width: 555px;
height: 463px;
background-color: white;
z-index: -1;
position: relative;
bottom: 2292px;
right: 580px;
}
#media screen and (max-width:768px)
{
#img-main {
width: 100vw;
height: 150px;
}
#img-below {
width: 30vw;
height: 30vh;
margin-bottom: 10px;
}
h1, h2 {
font-size: 7vw;
position: relative;
bottom: 100px;
margin: 0 auto;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
#flex-mobile1 {
display: flex;
flex-direction: row;
position: relative;
top: 70px;
right: 120px;
margin-top: 10px;
}
#flex-mobile2 {
display: flex;
flex-direction: row;
position: relative;
top: 150px;
left: 133px;
margin-top: 10px;
}
#FirstWhite{
width: 100vw;
height: 500px;
background-color: white;
display: block;
margin: 0 auto;
position: relative;
bottom: 490px;
z-index: -1;
margin-bottom: 5px;
}
#AboutWhite {
width: 100vw;
height: 300px;
background-color: white;
position: relative;
right: 0px;
bottom: 588px;
}
article {
position: relative;
right: 0px;
width: 85vw;
margin-right: 10px;
height: 100px;
}
#ServiceWhite
{
position: relative;
bottom: 650px;
right: 0px;
width: 100vw;
}
#service
{
position: relative;
bottom: 500px;
right: -120px;
}
#FooterWhite
{
position: relative;
bottom: 1080px;
right: 0px;
width: 100vw;
}
#form {
position: relative;
right: 0px;
bottom: 620px;
margin-right: 15px;
}
#inside-form {
position: relative;
right: 40px;
}
}
Link to Codepen
Hope this code helps you to build on top it. As of now the media query is set for 600px, you may change it to your desired break point.
* {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
}
body {
background-color: #f0f0f0;
}
.container {
max-width: 800px;
margin: auto;
}
header {
position: relative;
}
.header-img {
width: 100%;
}
.rounded-img {
position: absolute;
height: 140px;
width: 140px;
border-radius: 50%;
border: 2px solid #fff;
overflow: hidden;
left: 50%;
transform: translate(-50%);
bottom: -60px;
}
.rounded-img img {
width: 100%;
height: 100%;
}
h1,
h2 {
font-family: "M PLUS Rounded 1c", sans-serif;
text-align: center;
}
.titles {
background-color: #fff;
padding-bottom: 40px;
}
h1 {
color: #0099ff;
font-size: 5rem;
padding: 60px 20px 0 20px;
}
h2 {
color: #808080;
font-size: 2.4rem;
}
.icons {
display: flex;
justify-content: center;
margin-top: 30px;
}
.icons a {
width: 40px;
height: 40px;
overflow: hidden;
margin: 0 15px;
border: 5px solid #0099ff;
padding: 10px;
border-radius: 50%;
}
.icons a img {
width: 100%;
height: 100%;
}
.content-section {
display: flex;
margin: 20px 0;
}
.article-right,
.article-left {
font-size: 1.6rem;
font-family: "M PLUS Rounded 1c", sans-serif;
}
.article-right {
order: 2;
width: 180px;
margin-left: auto;
text-align: right;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
}
.article-left {
display: flex;
flex-direction: column;
flex: 1;
margin-right: 20px;
}
.article-left div {
text-align: right;
width: 100%;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
}
.article-left .shapes-section {
margin-bottom: 30px;
}
.article-left .form-section {
margin-bottom: 50px;
}
#media screen and (max-width: 600px) {
.icons {
flex-wrap: wrap;
margin-top: 10px;
}
.icons a {
margin-top: 20px;
}
.content-section {
flex-direction: column;
}
.article-right,
.article-left,
.article-left .shapes-section,
.article-left .form-section {
text-align: center;
}
.article-left {
order: 2;
margin-right: 0;
}
.article-right {
margin-right: auto;
margin-bottom: 30px;
width: 100%;
}
}
<div class="container">
<header>
<img class="header-img" src="https://www.westsidemovement.com/wp-content/uploads/2018/03/Lets-Go-Scripture-800x200.jpg" alt="" />
<div class="rounded-img">
<img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frainerzitelmann%2Ffiles%2F2019%2F06%2FE0MG76-e1560965378507-1200x1270.jpg" alt="" />
</div>
</header>
<main>
<section class="titles">
<h1>אלברט איינשטיין</h1>
<h2>פיזיקאי תיאורטי</h2>
<div class="icons">
<a href="#">
<img src="https://cdn4.iconfinder.com/data/icons/social-media-logos-6/512/10-waze-512.png" alt="" />
</a>
<a href="#">
<img src="https://thebrightwork.com/wp-content/uploads/2014/04/facebook-icon-blue.png" alt="" />
</a>
<a href="#">
<img src="https://cdn2.iconfinder.com/data/icons/basic-thin-line-color/21/20-512.png" alt="" />
</a>
<a href="#">
<img src="https://www.trzcacak.rs/myfile/full/311-3111799_social-media-computer-icons-logo-blue-area-png.png" alt="" />
</a>
<a href="#">
<img src="https://img.icons8.com/ultraviolet/452/whatsapp.png" alt="" />
</a>
<a href="#">
<img src="https://cdn2.iconfinder.com/data/icons/thin-line-color-1/21/13-512.png" alt="" />
</a>
</div>
</section>
<section class="content-section">
<article class="article-right">
your right content
</article>
<article class="article-left">
<div class="shapes-section">
shapes content here
</div>
<div class="form-section">
form here
</div>
</article>
</section>
</main>
</div>
I'm trying to position a text on a contentslider. Sadly it seems like nothing could change the text margin to what I want it to be.
Actually it does look like: https://gyazo.com/dd9ef0f78b5caaf7a582d9825955284b
Live Preview: http://projects.helpful.ninja/BlackzDesignz/Template_1/index.php
This is how I want it to look: https://gyazo.com/631efa979e78732c2c817fb2abf08716
Css code:
#fc_slider_wrap,
#fc_slider_wrap * {
padding: 0;
margin: 0;
outline: 0;
}
#fc_slider_wrap {
width: 755px;
height: 239px;
margin: auto;
font-family: Verdana, Arial;
color: #fff;
font-size: 11px;
overflow: hidden;
position: relative;
}
#fc_slider_img {
width: 550px;
height: 239px;
z-index: 50;
clip: rect(0 0 550px 287px);
float: left;
overflow: hidden;
}
#fc_slider_slide > div > span {
display: none;
}
#fc_slider_slide {
}
#fc_slider_slide > div {
border-radius: 2px;
overflow: hidden;
}
#fc_slider_slide > div > img {
display: block;
border-radius: 2px;
}
#fc_slider_nav {
width: 203px;
height: 287px;
float: right;
}
#fc_slider_nav > div {
height: 47px;
width: 198px;
background: url(../fc_slider/img/nav_opt_bg.png) repeat-x left top transparent;
padding-right: 5px;
margin-bottom: 1px;
cursor: pointer;
}
#fc_slider_nav > div.active {
background-image: url(../fc_slider/img/nav_opt_bg_h.png);
color: #212121;
}
#fc_slider_nav > div > img {
float: left;
margin: 2px;
margin-top: 11px;
}
#fc_slider_nav > div > span {
line-height: 15px;
padding: 2px 12px 2px 0;
text-align: left;
}
#fc_slider_caption {
position: absolute;
padding: 10px;
bottom: 0;
width: 530px;
background: url(../fc_slider/img/black_semi.png) repeat left top transparent;
float: left;
border-radius: 2px;
z-index: 50;
}
#fc_slider_pause {
display: none;
position: absolute;
width: 18px;
height: 18px;
left: 4px;
top: 4px;
z-index: 50;
}
Does anyone have a idea, what I'm doing wrong? Apreciate any kind of help.
Adding Top:5px; position:relative; in #fc_slider_nav > div > span should make it work
i'm try to create navigation menu under header section with sticky positioning but i can't get it work, here my css code :
body{
}
header{
position: relative;
top: 0px;
left: 0px;
height: 100px;
width: 100%;
background-color: whitesmoke;
text-align: left;
float: left;
padding: 5px;
z-index:100;
}
#logo{
position: relative;
height: 85px;
width: 120px;
/*border: 1px solid black;*/
float: left;
background-image: url('logoArdi.svg');
background-position: center;
background-size: contain;
}
#judulWeb{
position: relative;
height: 85px;
width: 200px;
text-align: center;
float: left;
}
#kontak{
position: inherit;
float: right;
height: 100px;
top: 20px;
right: 10px;
}
.imghead{
margin: auto 5px auto auto;
}
.sticky{
position: sticky;
position: -webkit-sticky;
position: -o-sticky;
top: 0px;
float: left;
width: 100%;
height:30px;
background-color: #26282b;
text-align: center;
box-shadow: 0px 2px 10px #26282b;
}
ul li{
position:relative;
bottom:11px;
display: inline-block;
margin: auto 30px auto auto;
}
ul li{
color:whitesmoke;
/*background-color:black;
border-radius: 5px 5px 0px 0px;
padding: 5px;*/
}
ul li:hover{
color:#26282b;
background-color: whitesmoke ;
}
#kontak{
position: inherit;
float: right;
height: 100px;
}
#wrapper{
position: relative;
top: 132px;
width: 80%;
float: left;
margin-right: 10%;
margin-left: 10%;
text-align: center;
background-color: transparent;
}
.imgutama{
width: 200px;
}
i don't now the mistake, but i just intend to create page header and navigation, the navigation is below the page header and will stick on top even i scroll down.
note : navigation class is "sticky".
#sidebar {
position: -webkit-sticky; // required for Safari
position: sticky;
top: 0; // required as well.
}
I want div in div height set auto.
http://bit.ly/rubikss1
at the bottom of the div inside is coming out. I want the bottom div to extend to.
Please Help!
body,html{height:100%}
.wrapper{
width: 700px;
height: 100%;
margin: 25px auto;
overflow:hidden;
position: relative;
}
.inner-container{
width: 100%;
height: 100%;
float: left;
border-radius: 5px;
background: rgba(255,255,255,.5);
position: relative;
}
.button-container{
float: left;
width: 100%;
height: 35px;
position: absolute;
z-index: 2;
}
#prev, #next{
border: 0;
background: #5CB85C;
padding: 5px 10px;
color: #fff;
border-radius: 2px;
cursor: pointer;
font-size: 18px;
}
#next{
float: right;
}
#prev{
float: left;
}
#verilistesi{
float: left;
width: 700px;
height: 100%;
position: relative;
overflow: hidden;
}
#verilistesi .item-container{
width: 100%;
float: left;
}
#verilistesi .item-container .item{
width: 500px;
height: 100%;
background: rgba(0,0,0,.3);
margin-bottom: 35px;
margin-top: 50px;
position: relative;
overflow: hidden;
}
My css.
How i do set auto height two div? Please give help?
I think that is what you want:
body,html{height:100%}
.wrapper{
width: 700px;
height: auto;
margin: 25px auto;
overflow:hidden;
position: relative;
}
.inner-container{
width: 100%;
height: auto;
float: left;
border-radius: 5px;
background: rgba(255,255,255,.5);
position: relative;
}
.button-container{
float: left;
width: 100%;
height: 35px;
position: absolute;
z-index: 2;
}
#prev, #next{
border: 0;
background: #5CB85C;
padding: 5px 10px;
color: #fff;
border-radius: 2px;
cursor: pointer;
font-size: 18px;
}
#next{
float: right;
}
#prev{
float: left;
}
#verilistesi{
float: left;
width: 700px;
height: auto;
position: relative;
overflow: hidden;
}
#verilistesi .item-container{
width: 100%;
float: left;
}
#verilistesi .item-container .item{
width: 500px;
height: 100%;
background: rgba(0,0,0,.3);
margin-bottom: 35px;
margin-top: 50px;
position: relative;
overflow: hidden;
}
Really simple issue. Fished around the site a bit, nothing seems to work.
I have a sticky navigation on the bottom of my site that isn't sticking to the bottom! It isn't respecting my height rules and is overflowing without regards.
Things I've tried:
Clearfix
Overflow
Table display
Tried everything i know of honestly.
What i'm aiming for visually:
Fiddle Link
CSS / HTML / Demo
.fn {
width: 100%;
height: 100%;
max-height: 41px;
bottom: 0;
left: 0;
position: absolute;
background-color: #fff;
}
.fn ul {
text-align: center;
margin: 0;
padding: 0;
list-style: none;
}
.fn li {
display: inline-block;
}
.fn a {
display: block;
padding: 10px 5px 10px 30px;
text-decoration: none;
font-family: "Raleway", sans-serif;
font-size: 1.15em;
letter-spacing: 0.05em;
color: #000;
}
.fn .first {
margin-right: 45.5px;
background-image: url(http://s28.postimg.org/f3f2a8mnd/fi2.png);
background-repeat: no-repeat;
background-position: left center;
background-size: 25px 25px;
top: -14px;
position: relative;
}
.fn .mid {
height: 55px;
bottom: 0;
margin: 0 auto;
z-index: 9998;
}
.fn .mid img {
height: 100%;
display: inline-block;
}
.fn .second {
margin-left: 45.5px;
background-image: url(http://s28.postimg.org/ag908gzah/fi1.png);
background-repeat: no-repeat;
background-position: left center;
background-size: 25px 25px;
top: -14px;
position: relative;
}
<div class="fn">
<ul>
<li> Resume
</li>
<li class="mid">
<img src="http://s18.postimg.org/v70ga0bvt/image.png"></img>
</li>
<li> Contact
</li>
</ul>
</div>
You have to change absolute position to fixed and vertical align li elements top.
.fn {
width: 100%;
height: 100%;
max-height: 50px;
bottom: 0;
left: 0;
position: fixed;
background-color: #fff;
}
.fn ul {
text-align: center;
margin: 0;
padding: 0;
list-style: none;
}
.fn li {
display: inline-block;
vertical-align: top;
}
.fn a {
display: block;
padding: 10px 5px 10px 30px;
text-decoration: none;
font-family:"Raleway", sans-serif;
font-size: 1.15em;
letter-spacing: 0.05em;
color: #000;
}
.fn .first {
margin-right: 45.5px;
background-image: url(http://s28.postimg.org/f3f2a8mnd/fi2.png);
background-repeat: no-repeat;
background-position: left center;
background-size: 25px 25px;
position: relative;
}
.fn .mid {
height: 55px;
bottom: 0;
margin: 0 auto;
z-index: 9998;
}
.fn .mid img {
height: 100%;
display: inline-block;
}
.fn .second {
margin-left: 45.5px;
background-image: url(http://s28.postimg.org/ag908gzah/fi1.png);
background-repeat: no-repeat;
background-position: left center;
background-size: 25px 25px;
position: relative;
}
.fn li:first-child, .fn li:last-child {
padding-top: 10px;
}
Fiddle: http://jsfiddle.net/mcwo8qvz/7/
hello just make your fn class div to position fixed and expand your max-height to 55 px
here is jsfiddel = http://jsfiddle.net/mcwo8qvz/2/
.fn {
width: 100%;
height: 100%;
max-height: 55px;
bottom: 0;
left: 0;
position: fixed;
background-color: #fff;
}