I have a question about a CSS dilemma I am stuck with, I tried using various methods but nothing is really working the way I want it. I want a simple backdrop image, and then place images randomly on the backdrop. The trick is, it should stay where it is suppose to be no matter what the resolution.
At the moment this is the code I am using that is failing me :(
<div class="Backdrop"><img src="/Images/Backdrop.png" />
<div class="Ninja"><div class="IE7">(7)Alignment<img src="/Images/miAverage.png" alt=(2)A2" /></div>
<div class="IE8">(7)Alignment<img src="/Images/miBad.png" alt=(1)B1" />
</div>
the CSS looks as follows:
.BackDrop {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
width: 1024px;
height: 768px;
z-index:1;
background-color:#999999;
}
.IE7{ visibility: visible; position: absolute; z-index: 3; top: 300px; left: 200px; }
.IE8{ visibility: visible; position: absolute; z-index: 3; top: 300px; left: 400px; }
Please note this code was mostly generated with MVC.
Related
Beginner in CSS here.
Basically, what I am trying to do is to place check marks or X-es on top of a country map and I am trying to find the best way to do this.(open to learn JS for this)
So far, I have placed my map in a div and centered it, with HTML code <img src="check mark"> after the map image.
I will do this for every check mark i have to add, but is it there any better solution ?
.container {
margin-left: 10%;
width: 75%;
height: 80%;
display: flex;
justify-content: center;
}
.child {
position: relative;
margin: 0 auto;
}
.check {
position: absolute;
top: 300px;
right: 500px;
}
<div class="container">
<div class="child">
<img src="Map_image.png">
</div>
</div>
This is an example of what i want to achieve:
https://imgur.com/a/mu5WpuN
Short answer is create a wrapper div with position: relative and place the map and the Xes inside it. Then make map fit with the wrapper (i.e. 100% width and height or whatever) then make all Xes position: absolute and position them accordingly using top: left: right: bottom: properties
Here's a working sample. Try to run it.
.wrapper {
position: relative;
width: 100%;
}
img.map {
width: 100%;
}
img.marker {
position: absolute;
width: 20px;
}
.marker.x1 {
top: 20px;
left: 50px;
}
.marker.x2 {
top: 50px;
left: 190px;
}
<div class="wrapper">
<img class="map" src="https://www.onlygfx.com/wp-content/uploads/2015/12/world-map-vector.png" alt="map">
<img class="marker x1" src="https://i.pinimg.com/474x/b1/7e/59/b17e59bc32383f7878c9132081f37c60.jpg" alt="x1">
<img class="marker x2" src="https://i.pinimg.com/474x/b1/7e/59/b17e59bc32383f7878c9132081f37c60.jpg" alt="x1">
</div>
Issues I have had
I have not been able to scroll down on my site.
No solutions I ave found work.
Info
My site is execlinux.glitch.me
The CSS files and HTML can be found by going to glitch.com and searching execlinux
I found the solution:
in your CSS file you have a ".text" element which has the fixed position property. It's wrong!!! it should have the relative position like the below:
.text {
position: relative;
top: 100px;
left: 50px;
}
the css below is incorrect:
.text {
position: fixed;
top: 100px;
left: 50px;
}
You could try changing fixed to relative, however if you do there will be other issues you will face.
If you use the following css:
.text {
position: relative;
top: 100px;
left: 50px;
}
you will find that the contents of your <div class="text"> scrolls over the top of your navigation menu and is not left justified.
Perhaps try
.text {
position: relative;
top: 100px;
left: 50px;
z-index-1;
width: 90%;
}
html {
height: 100%;
width: 100%;
overflow: visible;
}
Tested these changes and while not perfect, they achieve a somewhat satisfactory result.
I have been struggling with this for hours. I have a series of problems related with z-index, position:fixed in IE11. I have tried -ms-device-fixed but nothings seems to resolve this really weird issue. Part of the dropdown is not visible like you can see on the image.
.ms-webpart-zone.ms-fullWidth .ms-webpartzone-cell {
display: block;
overflow-x: auto;
overflow-y: visible;
min-height: 220px;
position: relative;
z-index: 10;
}
Dropdown CSS:
position:-ms-device-fixed!important;
z-index:20;
top: 10px;
position: fixed;
visibility: visible;
left: 88px;
width: 226px;
Try using position: expression(fixed);
Try using position: relative; on the parent element and position: absolute; on your caption. This is cross-browser.
I am searching for something like a "sliding drawer" - however they all span across the entire height of the page.I would like the slide in-out to just occupy the space it needs - and not cover the entire page.I also googled for hamburger menu on similar lines.
I guess I found out the element which I need.Please refer the screenshot below.
My ask is :
What is the element called so that I can search and develop my own version of it.Any pointer will be a great help.
https://www.templatemonster.com/blog/responsive-sliding-drawer-menu-lightbox-effect/
trying this
[demo]
html
<div class="slideOutTab">
Like Us on Facebook
</div>
css
div.slideOutTab {
position: fixed;
width: 150px;
height: 43px;
top: 200px;
left: -107px;
}
div.slideOutTab a {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
text-indent: -999em;
background: 0 0 url('http://s9.postimg.org/okyi00edn/fb_like_us.gif') no-repeat;
}
div.slideOutTab a:hover {
background-position: 0 -43px;
}
You can search for:
Sliding panel, fixed position panel, fixed sliding panel
At least you can start from those search terms and find more stuff as you delve deeper into the examples.
I made a 2 minute search using the above terms and I found a lot of examples that might help you. Give it a shot!
Try with pure css
div.slideOutTab {
position: fixed;
width: 150px;
height: 43px;
top: 100px;
left: -107px;
transition-duration:1s;
-ms-transition-duration:1s;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
}
div.slideOutTab a {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
text-indent: -999em;
background: 0 0 url('http://s9.postimg.org/okyi00edn/fb_like_us.gif') no-repeat;
}
div.slideOutTab:hover {
background-position: 0 -43px;
left:0;
}
<div class="slideOutTab">
Like Us on Facebook
</div>
I'm having a hard time getting right stacking order. Is there a physical way to render this right (.above-mask being, well, above mask, while .below-mask stays below) without changing html?
EDIT: Removing z-index on .below-mask is, unfortunately, also impossible.
HTML:
<div class="mask"></div>
<div class="below-mask">
<div class="above-mask"></div>
</div>
CSS:
.mask{
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
background: rgba(0,0,0,0.3);
z-index: 10;
}
.below-mask{
position: absolute;
width: 15em;
height: 15em;
background: blue;
z-index: 1;
}
.above-mask{
position: absolute;
width: 10em; height: 10em;
top: 2.5em; left: 2.5em;
background: yellow;
z-index: 100;
}
codepen: http://codepen.io/anon/pen/WrXbaL
EDIT: How it looks now - I'm making a first-steps view. I wanted elements that need to be explained to be above the mask (here it would be the search panel), while everything else stays neatly hidden below.
Okay, I'm stupid. I don't need a mask, I can just use eiter a huge box shadow or an outline:
outline: 1000em solid rgba(0,0,0,0.3);
It does the trick.
http://codepen.io/anon/pen/eJeNVg