I'm wondering if something like that would be possible:
<div class="arrow-left" style="z-index:2; position: fixed; height: 100%; width: 100%;"></div>
<div class="meta" style="z-index:1; position: relative;">
<div class="description">description link description</div>
</div>
I want z-index: 3; link to be above arrow-left but description below it. Is this achievable with above HTML structure?
Use position: relative; with z-index
Your question is logically wrong !
just put the (.arrow-left) inside the (.meta) and it will work.
<div class="meta" style="z-index:1; position: relative;">
<div class="arrow-left" style="z-index:2; position: fixed; height: 100%; width: 100%;"></div>
<div class="description">description link description</div>
</div>
Validated use of this method is following
<div class="hold" style="z-index:0; position:relative"><!--Outdiv set relative and z-index to 0 here -->
<div class="arrow-left" style="z-index:2; position: fixed; height: 100%; width: 100%;"></div>
<div class="meta" style="z-index:1; position: relative;">
<div class="description">description link description
</div>
</div>
This way you make a ground 0 for your index by setting your outer div as relative and then give it as your main floor like z-index 0 this way you avoid other faults later on according to z-index
Related
So I have been busy with a navbar and I want to make it fixed but whenever I use position: fixed, the navbar does stay fixed but it creates whitespace and pushes everything down (the parent container and it's sister elements).
So what could be causing this and how do I solve this issue?
Thanks in advance for your help.
Screenshot of how it looks with the issue
The HTML
The CSS
nav {
padding: 15px;
position: fixed;
width: 100%;
z-index: 1;
top: 0;
}
.hero-section {
background-image: url(img/dylann-hendricks-Ll-A9nKuOhk-unsplash.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 0px 0px;
height: 100vh;
}
<pre>
<code>
<section class="hero-section">
<nav class="navbar">
<div class="logo">KM</div>
<div class="links-container">
<div>About</div>
<div>Skills</div>
<div>Projects</div>
</div>
</nav>
<div class="intro-container">
<div class="greeting rev-block"><span>Hi there,</span></div>
<div class="my-name rev-block" id="onemore1">
<span>I'm Khanya Mateta</span>
</div>
<div class="job-title rev-block" id="onemore2">
<span>Front End Developer</span>
</div>
<div class="contact-btn">Contact Me</div>
<div class="social-media">
<img src="img/github.png" />
<img src="img/linkedin.png" />
<img src="img/twitter.png" />
</div>
</div>
<div class="box">
<span></span>
<span></span>
<span></span>
</div>
</section>
</code>
</pre>
Try using this in the css for nav element:
left: 0;
right: 0;
Adjust the left and right values while using position: fixed.
Using this I solved the same issue in my site.
Thank you 😊.
I have a problem I just can't seem to solve despite following directions in my previous post, I just began learning html/css. This is my button as it appears right now:
here
& this is where I would like it to appear. It does not seem to move despite changing the top, left or bottom:
here
& this is where I want it to be. The background is simply an image its not multiple divs. this is the only code I have:
<section>
<div class="content">
<div class="container">
<div class="wrap">
<div class="fix-7-12">
<div><p class="ae-2">
<button style{
top: 100px;
right: 1000px;
left: 10000000px;
}
>Try yourself</button
>
</p></div>>
</div>
</div>
</div>
</div>
<img
src="assets/img/background/fire2.png"
width="1450"
height="850"
></img>
</section>
I think you should use left, top etc. styles with percentages. If we look at the center of the button in the second picture:
top: 35%, left: 60%
Also, you should change display to block in order to see the button as a rectangle element. I gave also width and height. You can change them if you want.
So, I changed your HTML code as:
<section>
<div class="content">
<div class="container">
<div class="wrap">
<div class="fix-7-12">
<div><p class="ae-2">
<button
style="position: absolute; display: block; top: 35%; left: 60%;
width: 120px; height: 60px;">
Try yourself
</button>
</p></div>
</div>
</div>
</div>
</div>
<img
src="assets/img/background/fire2.png"
width="1450"
height="850"
>
</section>
These are the screenshots:
There are a few mistakes in your HTML. Firstly, the style attribute needs to be a string. The position attribute needs to be first. So it would be "position: absolute;top: 100px;right: 1000px; left: 10000000px;". img tags do not have a closing tag.
Correct HTML:
<section>
<div class="content">
<div class="container">
<div class="wrap">
<div class="fix-7-12">
<div><p class="ae-2">
<button style="position: absolute;top: 100px;right: 1000px; left: 10000000px;"
>Try yourself</button
>
</p></div>>
</div>
</div>
</div>
</div>
<img
src="assets/img/background/fire2.png"
width="1450"
height="850"
>
</section>
I have a problem with responsiveness. In my example by right side there's 30 px blank place. I don't know how the hell fix it. Does somebody have any idea? http://jsfiddle.net/98p3webw/ details details details details
.imageeee {
position:absolute;
max-width: 100%;
}
.logo{
max-width: 100%;
max-height: 100%;
}
.max{
width: 100%;
position:relative;
}
.background{
position:absolute;
width: 100%;
background-image: url("http://www.psdgraphics.com/file/colorful-triangles-background.jpg");
height: 100%;
background-size: cover;
}
<body>
<div >
<div class="row">
<center>
<img class="logo" src="http://i59.tinypic.com/dcbgiw.png">
</center>
</div>
<div class="background col-md-12">
<div class="max">
<div class="col-md-2"></div>
<div class="col-md-8 thumbnail" style="top: 40px;" >
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
The 15 pixel spacing you are seeing are being added by Bootstrap's row class.
.row {
margin-left: -15px;
margin-right: -15px;
}
In Bootstrap, .row elements should be wrapped by a .container or container-fluid element.
From the Grid system section of the Boostrap docs:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
So wrapping your .row element in a .container should solve your immediate problem.
JSFiddle Example:
<div class="container">
<div class="row">
<center>
<img class="logo" src="http://i59.tinypic.com/dcbgiw.png">
</center>
</div>
</div>
Further Reading:
You might want to read over the Boostrap docs for the grid system so you can make sure you use it correctly in other places. Also, the <center> tag is deprecated, You should use the CSS test-align property instead.
So I have a theatre view for pictures( just like Facebook when clicking on a picture) and every time I resize the browser I want the picture to be resized along with the browser, I have tried many things, nothing seems to be working.
Here is the html:
<div class="fullView" id="photoView" alt="close">
<div class="tableDisp">
<div class="tableCell" id="tableCell">
<div class="_n3">
<div class="theatreFloated">
<div class="theatreHolder">
<div class="imageHolder clearfix">
<img class="imageTheatre" id="imageTheatre" src="#">
</div>
</div>
</div>
<div class="infoHolder">
<div class="photoUser">
<p>gabryel</p>
</div>
</div>
<div class="exitView">
<img src="<? echo APP_PATH; ?>public/cuts/exit.png" width="15px" title="Close">
</div>
</div>
</div>
</div>
</div>
The CSS:
.fullView{position:absolute;background:rgba(0,0,0,0.9);height:100%;width:100%;z-index:400;top:0px;bottom:0px;min-height:100%;display:none;}
.fullView .tableDisp{height:100%;width:100%;display:table;}
.tableCell{display:table-cell;vertical-align:middle;text-align:center;}
._n3{display:inline-block;margin:20px;position:relative;overflow:hidden;padding:10px;}
.theatreFloated{float:left;}
.theatreHolder{position:relative;height:500px;width:500px;background:black;display:table-cell;vertical-align:middle;}
.imageTheatre{max-width: 100%;height: auto;width: auto\9;display:inline-block;vertical-align:middle;}
.infoHolder{width:300px;background:#5B748A;float:left;text-align:left;}
.exitView{position:absolute;right:5px;top:5px;cursor:pointer;}
Thank you for the help.
I think you're over-complicating the problem here... All you really need to resize the image depending on the browser window is setting its max-height and max-width as a % relative to the window size. Simplify your theatreview type HTML to:
<div class="fullview" id="photoview" alt="close">
<img class="imageTheatre" id="imageTheatre" width="auto" src="#" />
<span> Image by blah blah... </span>
<div class="exitView">
<img src="<? echo APP_PATH; ?>public/cuts/exit.png" width="15px" title="Close">
</div>
</div>
Then you can actually start setting these as % relative to the window in your css:
#fullview{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
#imageTheatre{ position: relative; max-width: 80%; max-height: 80%; display: block; margin: 0 auto; }
#fullview span{ position: relative; display: block; margin: 20px auto; width: 400px; }
then resize your screen and the image will resize... I haven't tested the code, so I am just giving this to you as a simple method which I have used in the past!
Good luck!
i want to alignt a image, that is in front of another image, to the right.
In this example the little google image is on the upper left but i want it to be on the upper right:
http://jsfiddle.net/2NYve/
i already tried float: right and align="right" but that doenst work.
As you can see in the example the background is a object with a svg but for this example i simple put a image at this place, i think there should be no different.
<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;">
<!--foreground-->
<div style="float:right;width:30px; height:30px;position: absolute; z-index:5000"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></div>
<!--background-->
<div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
<!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div>
Add (Where 20px is the width of your image)
right: 20px;
to the image. That's the only way as far as I know if you use absolute positioning
http://jsfiddle.net/2NYve/1/
<div style="z-index:10; position: relative; float:right;width:30px; height:30px; z-index:5000">
<a href="javascript:goToLastNodeDiv()"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" />
</a></div>
<div style="z-index:1; width:100%; position: absolute; z-index:100">
<img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
</div>
I added to the div with the chromo logo :
z-index:10; position: relative;
And to the other one, with the google logo :
z-index:1
I used the CSS z-index proprety : http://www.w3schools.com/cssref/pr_pos_z-index.asp
Here's the updated jsFiddle : http://jsfiddle.net/2NYve/7/
Set the foreground divs position to 'relative' instead of 'absolute' and add some right margin to place it a little to the right.
<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;">
<!--foreground-->
<div style="float:right;width:30px; height:30px;position: relative; z-index:5000;margin-right:10px"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></div>
<!--background-->
<div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
<!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div>