So here the picture of what I'm trying to do:
http://imageshack.us/content_round.php?page=done&l=img14/1023/62507155.jpg
FF diplay is OK, IE8 - don't know ie on 1 PC is OK, checking from another is not OK, IE7 is not OK.
I've got a div with positioning relative and a backgroung picture which is transparent and overlays div 2. Div 2 is positioned absolute and sticked to the bottom of div1 with z-index: -1.
How can I make it look the same on all browsers (IE7/8 in particular)? I've read about putting higger z-index on parent div and lower on nested div but it just makes div2 to be on top on all browsers.
here is the code:
#div1 {
position: relative;
height: 900px;
width: 850px;
float: left;
background: url(img/background-left.png) no-repeat;
}
#div2 {
position: absolute;
background: red;
width: 850px;
height: 420px;
bottom: 0px;
border: none;
z-index: -1;
}
<div id="div1">
<div id="div2"></div>
</div>
If I remove position relative from div1 then its background is always on top of div2 like I want it, but then without position relative I cannot stick div 2 to the bottom of div1.
Related
So I want to make 3 images over 2 columns. The left image will be 100% of the height of the flexbox and I want to 2 right side images to be stacked top to bottom and their total height to equal the height of the left image or the flexbox height itself. When responsive resizing I want to keep this ratio as well.
The problem I'm having now is that upon resizing the left image shrinks and the combined height of the right 2 gets larger than the left image.
Thanks for trying to understand my jibberish.
I've tried a number of things and nothing working.
Using Flexbox
In order to accomplish what you are describing using flexbox you will need to use two flexboxes which will require making a few changes to the HTML.
The outer flexbox should have flex-direction: row; (this is the default value so it can be omitted). This will flex its children horizontally.
The inner flexbox should have flex-direction: column;. This will flex its children vertically.
The children of the first div should have flex: 1; which will distribute the space using an even ratio amongst the children.
You then just need to set height: 50%; for each of the images in the second flexbox.
Here's an example of what your code could look like:
.container,
body,
html {
width: 100%;
height: 100%;
margin: 0;
}
img {
object-fit: cover;
}
div {
display: flex;
}
img,
div {
flex: 1;
}
.right {
flex-direction: column;
}
.right>img {
height: 50%;
}
<div class="container">
<img src="https://source.unsplash.com/random?mountain">
<div class="right">
<img src="https://source.unsplash.com/random?city">
<img src="https://source.unsplash.com/random?cat">
</div>
</div>
I'm trying to put text inside a box in the shape of a corner, with no top or left border, as shown in the image below
.
I've tried many CSS tricks by changing the color of each border, so I chose transparent for the left and top borders, but here's the issue i want to add :after for the same box so i cannot add it since i have a transparent borders so the extra border thingy will not look like the image .
border-color: transparent #0ff #f0f transparent;
I just discovered there is a proprety called "border-style" this proprety solved my problem please check out the code :
.box {
background-color: lightgrey;
width: 300px;
border: 7px solid green;
padding: 50px;
margin: 20px;
border-right-style: none;
border-top-style: none;
}
My code:
let div1 = document.createElement('div');
div1.style = 'background-color: lime; width: 220px; height: 100px; font: 48px Arial; font-weight: bold';
div1.innerText = 'Phaser 3';
this.add.dom(300, 0, div1);
I'm trying to add a div with text-element. Everything is ok, but text isn't visible. What's the matter?
Your y value is too low. You are successfully adding the div element to your DOM but it's adding it at an y coordinate of 0 so you can't see the full element.
Try changing to this:
this.add.dom(300, 200, div1);
just getting started on react-leaflet and leaflet. After clicking on a marker I want to have a full screen overlay above the map to display a graph. But no matter how I set z-index of the and , the overlay always lies below the map.
Couldn't find an answer as most z-index question apply to map layers etc. within the component.
.overlay-wrapper {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
z-index: 200;
cursor: pointer;}
It should be pretty straight forward, please point me in the right direction.
As #andreasgroos mentioned in their comment, the z-index value needs to be high enough, i.e. 401 or higher. z-index: "2000 !important" should guarantee that the component will be rendered over the map.
I'm currently developing a site which requires headings as such:
My initial idea was to do this with border-bottom, but how would I limit the width of the border so that it doesn't go all the way across? The border needs to stop when it gets to the text.
Is this possible?
h1 {
background-color: #fff;
line-height: 1;
margin: 0;
display: inline;
position:relative;
z-index: 1;
}
h1:after {
content: '';
display: block;
border-bottom: 2px solid;
position: relative;
z-index: 0;
margin-top: -7px;
}
The length of the border is decided by the size of the element it is bordering. You could create another <div> inline with the text with border-bottom: 1px; and the other borders set to 0. You could then change the margin or width of the <div> to alter the length of the line. Note that you'd have to set a width, because an empty <div> has a width of 0 by default, so won't display.
Another possible (but not recommended) way to do it would be to use a <hr> but these are not well supported in HTML 5, so I would choose the first method personally.
A solution I can come up with is to give the title the same background-color as the page's background, and then to either transform: scale() the title up so that it overflows with the border of its parent, either scale the parent down so that its border hides behind the title's background.
See here for an example:
http://jsfiddle.net/WjRqC/1/
Oh, also, scaling can be replaced by making the title position: relative and moving it downwards a few pixels (and giving it a bit more vertical padding if you don't want the text too close to the line). Actually this is probably a better idea than scaling, because it's not CSS3, so it's more compatible.
Lookie here:
http://jsfiddle.net/7affw/1/