I have two divs. One is a bar with background transparency - this contains a menu. The other contains an image. I want the image to be behind the first div. I can't get the z-index to do this:
<div id="headerwrapper">
<div class="mastheadimage"><img src="....." /></div>
...more code
</div>
css
#headerwrapper {
position:relative;
z-index:10;
background-color:rgba(59, 59, 59, 0.3);
}
.mastheadimage {
position:absolute;
z-index:-1;
}
I have tried various different numbers for the -1
That's because mastheadimage is nested within headerwrapper.
You need to split them up to achieve what you are looking for, perhaps wrapping the two in an overall parent.
<div class="wrapper">
<div id="headerwrapper">...more code</div>
<div class="mastheadimage"><img src="....." /></div>
</div>
CSS:
.wrapper {
position:relative;
}
Related
First I'd like to say that I know very little about coding.
In this website I made http://academiadae.com, I added two small divs at each side, so I could get a div class="6u" centered.
<div class="row">
<div class="3u"></div>
<div class="6u"><img src="images/logo.png" /></div>
<div class="3u"></div>
</div>
Can you help me to get it centered without the need for the other divs?
I tried making different elements =center in the CSS, but it didn't work.
Thanks.
First of all, your are using as class 6u which will not be selected. A CSS name must begin with an underscore (_), a hyphen (-), or a letter(a–z) to use it as an CSS selector. You can check this page for any reference.
Second if you want to have the a single div centered you could apply this:
<div class="row">
<div class="item6u">
test
</div>
</div>
Where there is only one div with a class name that starts with a letter.
For you CSS you need to set the width of the div and like #Sprazer told you need to set the margin:
.row{
background-color:yellow;
}
.item6u{
background-color:red;
width:50%; //changed to 50% percentage as wawa suggested
margin:0 auto;
text-align:center;
}
See code here: JSFIDDLE.
So, you currently have something like: HTML
<div class="row">
<div class="3u">
</div>
<div class="6u">
<img src="images/logo.png">
</div>
<div class="3u">
</div>
</div>
and CSS:
div.6u{
width: 50%;
clear: none;
float:left;
margin-left: 0;
}
You need to change this to HTML:
<div class="row>
<div class="6u">
...contents of the div here...
</div>
</div>
and CSS (note: do remove float:left, otherwise it will not work):
div.6u{
width:50%;
clear:none;
margin-left:auto;
margin-right:auto;
}
I'm new to HTML did some research in w3school but not clear about how put image on this three different position on this background image in one div. I marked the position I need to put the image. The div will cover entire page in webkit and moz based browser. Consider any width and height of div. How you fixed position with respect to your considered width and height. I can't put background image to entire html or body or etc. It have to in one div or section only.
<div id="page1" style={"background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div class="">
<!-- Content Goes Here -->
</div>
</div>
This is a very simple way to achieve that using relative CSS positioning.
You can use a background div, and inside of it place the divs you need.
*{
margin:0;
padding:0;
}
.background{
background:url('http://lorempixel.com/1000/1600/nature');
background-size:cover;
height:100vh;
width:100%;
}
.img1,
.img2,
.img3{
position:relative;
width:300px;
height:150px;
background:url('http://placehold.it/300x150');
}
.img1{
top:20px;
left:350px;
}
.img2{
top:150px;
left: 20px;
}
.img3{
top:350px;
left:150px;
}
<div class="background">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
If you wish you can have a look at multiple images backgrounds, here: http://www.w3schools.com/css/css3_backgrounds.asp
i would set up the html like this:
<div id="navbar">
<div id="image1" style=""></div>
<div id="image2" style=""></div>
<div id="image3" style=""></div>
<div>
<p>Text in navbar</p>
</div>
</div>
For each id "imageX" you could set a background-image then. And with display: inline-block, width and position you can put them where you want.
There are multiple ways to achieve that.
You can set the position of your div to absolute and adjust it to the position you'd like it to be
#div1 {
position : absolute;
left : 100px;
top : 200px;
}
You can also set the position to relativeand have your div placed relatively to its normal position.
You can check this for more information on the position property;
You could insert DIV within DIV. And you could position DIV using the top and left style attributes.
<div id="page1" style="{background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div id="subpanel_1" style="top:20px; left:102px;>
<!-- Content Goes Here -->
</div>
<div id="subpanel_2" style="top:200px; left:50px;>
<!-- Content Goes Here -->
</div>
</div>
Of course, instead of writing the style definitions inline, better put them in a separate <style>…</style> block.
Need to place images kinda like here (for example): http://imgur.com/QpRjvpW
Original pictures of different sizes.
Hover effect - blur and fogging effects and text on the middle of the picture.
Here is what I got for now: JSFiddle
So the question, how correctly position them, so that they occupy the entire width of the screen by 3 in a row, gonna be same size, closely adhering to the upper and lower div and to each other, don't expand within its borders? And the effect of the blur doesn't touch neighboring elements?
Remove class row and col-lg-12,use col-sm-12 like
<div class="col-sm-12">
<div id="work1" class="col-sm-4">
<img class="image" src="http://i.telegraph.co.uk/multimedia/archive/03257/POTD-SKY-SQUIRREL_3257854k.jpg">
<p class="text">ONE</p>
</div>
<div id="work2" class="col-sm-4">
<img class="image" src="http://i.telegraph.co.uk/multimedia/archive/03235/potd-husky_3235255k.jpg">
<p class="text">TWO</p>
</div>
<div id="work3" class="col-sm-4">
<img class="image" src="http://s.hswstatic.com/gif/dolphin-pictures-1.jpg">
<p class="text">THREE</p>
</div>
</div>
CSS:
works img {
height: 600px;
width: 100%;}
Apply this css, you'll get the look like the example --
.works img{
display:block;
max-width:100%;
}
.works [class^="col-"] {
padding-left:0;
padding-right:0;
}
.works .text{
position:absolute !important;
left: 0;
right: 0;
}
It seems impossible to make two elements render parallel to each other on the z axis. In other words, if I were to turn my website sideways, I could never see two of them on the same depth level; even elements with the same z-index are treated as being on different levels based on their order in the DOM.
This is a problem, because sometimes I need to render two nearby elements with box shadow, and as part of the design they should be at the same level, not casting the shadow onto each other, but on elements beneath them.
Why is this the case? What's to keep the browser from rendering two elements with the same z-index at the same level? Furthermore, is there a solution or workaround for this problem?
Right now I'm developing a site where this is an issue. For example, see this design, where 2 boxes (box containing genre/comments and box containing the votes / title) are floating next to each other with a small space between them, but are part of the same group, and should not cast box shadow onto each other, as neither should be higher or lower:
You can add an inner wrapper block element with desired background color.
<div class="container">
<div class="row">
<div class="col pull-left">xxx</div>
<div class="col pull-right">yyy</div>
</div>
</div>
.col{
width:50%;
box-shadow: 0 0 10px #222;
}
In this case, applying box-shadow to div.col will make one block's shadow area over the other as you mentioned. (.pull-left and .pull-right is from Bootstrap, just floating effect).
By doing this,
<div class="container">
<div class="row">
<div class="col pull-left"><div class="wrapper">xxx</div></div>
<div class="col pull-right"><div class="wrapper">yyy</div></div>
</div>
</div>
.wrapper{
width:100%;
position:relative;
z-index:99;
background:#fff;
}
You can see the overlapped shadow is covered by the inserted div.wrapper.
JSFiddle here.
I just thought of a trick to do this:
Create duplicate element of each element that needs a box shadow and position the duplicates at a lower z-index than the elements that should appear to have the shadows.
#depth_higher{
position:absolute;
z-index:2;
}
#depth_lower{
position:absolute;
z-index:1;
}
#foo, #bar{
background-color:green;
margin:7px;
width:50px;
height:50px;
}
#foo_shadow, #bar_shadow{
box-shadow:0px 0px 50px 0px #000;
margin:7px;
width:50px;
height:50px;
}
<div id="depth_higher">
<div id="foo"></div>
<div id="bar"></div>
</div>
<div id="depth_lower">
<div id="foo_shadow"></div>
<div id="bar_shadow"></div>
</div>
I want to create html page the next vision. Location of divs 1,2 and 3 in one line was done, but with 4th div I have some troubles and can't make it.
You really should post your code to see whats wrong with it.. But i made the example for you.
Here you go, you could use float.
Html Code:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css Code:
#wrapper{width:300px; margin:0;}
#first { height:300px; width:100px; background:black; float:left;}
#second{ height:250px; width:100px; background:red;float:left;}
#third{ height:250px; width:100px; background:green;float:left;}
#fourth{ height:50px; width:200px; background:blue;float:left;}
Working DEMO
Here's an example that uses non-fixed heights and widths. The key is wrapping the subsections in divs as well and styling accordingly. div is short for division after all.
<div class="left">
1
</div>
<div class="right">
<div class="second-third-wrapper">
<div class="second">
2
</div>
<div class="third">
3
</div>
</div>
<div class="fourth">
4
</div>
</div>
http://jsfiddle.net/Pb5NX/2/
The divs then use percentage height and widths to size them properly. These percentages take up a percentage of the parent element (the <body>, which then inherits from the <html>), so the parents height needs to be set as well.
body, html {
width: 100%;
height: 100%;
}
.left {
background-color: blue;
width: 50%;
height: 100%;
float: left;
}
If you want them a fixed size, you can just set a specific height and width style on the specific elements and the percentages will do the rest.