Using z index on divs that CAN'T be positioned absolutely? - html

I have a layout I'm making and the idea is cards and they are layed out in a stack and the left and right sides of the stack can be seen when one card is brought forward with z index. I have the layout made but I'm now banging my head against a wall trying to figure out how to use z-index with the divs because the divs are already in a parent that has a specific position.
Layout location ~
To use z-index, I would need to give "card" an absolute position, but that ruins the margin making the cards stack on top of eachother. Any ideas?? THANKYOU IN ADVANCE AND HAPPY HOLIDAYS!
Below is a sample:
(It's a Tumblr theme for reference}
HTML:
<div id="page">
<div id="content_container">
<div id="content">
{block:Posts}
<div class="card">
{Tags in here create multiple <div class="card"></div>'s}
</div>
{/block:Posts}
</div>
</div>
</div>
CSS:
html {
height: 100%;
width:100%;
}
body {
height:100%;
width:100%;
font-family:'HelveticaRegular', Helvetica, Arial, Sans-Serif;
color:#FFF;
background:#000;
overflow:hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0;
padding:0;
}
#page {display:table;margin:0px auto;height:100%;width:100%; background:#FF0000;
width:969px;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/
#content_container{display:table-cell;vertical-align: middle;}
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/
*:first-child+html #content{position:relative;top:-50%;}/*ie7*/
* html #content{position:relative;top:-50%;}/*ie6*/
#content_container{display:table-cell;vertical-align: middle;}
.card {
margin-right:-670px;
float:left;
width:700px;
height:500px;
background:#EEE;
-moz-box-shadow: 2px 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px 2px #000;
}

Use position: relative? That allows z-index but doesn't remove from the document flow in the same way.

Related

How to align image in the center of the screen and add text in the left bottom corner of the image

I'm building a simple website right now and faced a small issue. How do I align picture (iMessage text with blue bubble) in the center of the screen so and place a text in the bottom left corner of the image (text is Read + time)?
<style>
html, body
{
height: 100%;
margin:0;
padding:0;
}
div {
position:relative;
height: 100%;
width:100%;
}
div img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
<head>
<div>
<img src="myimage.jpg"></img>
</div>
</head>
But how do I add text in the bottom left corner right below the image?
Something like this might work for you...
<style>
html, body
{
height: 100%;
margin:0;
padding:0;
}
.centered{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<head>
<div class="centered">
<img src="myimage.jpg"></img>
<p>tester</p>
</div>
</head>
Although I completely agree with Temani, there are lots of resources on centring such as the links below:
css3 pr align-self
how to css image center
css align
Do you want to set your image in the center of screen Or in the center of a div?
If you want to set it in the center of screen horizontally then you shoud set
margin-left:auto;
margin-right:auto;
And if you want add text on image, you shoud set that image in the background of a div and add text in that div wherever you want
.imgdiv{ background: url(your IMG url) no-repeat center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
height: 150px; width: 300px;
}
.imgtxt{
left:0; bottom:0;
}
<div class="imgdiv" >
<span class="imgtxt">Your text</span>
</div>

position image absolute to a full screen

I want to position a background image on the background of my page.
I have a page that is finished. Now I need to place an image on the background of the page that is positioned on the center and will span the entire width of the browser.
Yeah I know confusing. I didn't understand either when I read it. So I added a
Fiddle here
I want to add a background image to the wrapper and center it on the two div's while it's possible to be bigger then the screen.
<div class="wrapper">
<div class="container">
<div class="left">
Left content
</div><div class="right">
right content
</div>
</div>
</div>
Hope now it makes sense.
You need to remove the background from the .container to show the background image on the .wrapper. And use three background position to adjust it:
background-image: url() - To include the image.
background-size: cover - To cover whole background size.
background-image: center - To make it at the center of the div.
Have a look at the below snippet:
.wrapper{
margin: 0 auto 0 auto;
max-width: 100%;
text-align: left;
background-image: url(http://placehold.it/200x200);
background-size: cover;
background-position: center;
}
.container{
position: relative;
max-width: 1280px;
height: 260px;
/* background: #ffffff; */
margin: 0 auto;
}
.left{
position:relative;
display:inline-block;
width:50%;
border:1px solid #000;
}
.right{
position:relative;
display:inline-block;
width:49%;
border:1px solid #000;
}
<div class="wrapper">
<div class="container">
<div class="left">Left Content</div><div class="right">Right Content</div>
</div>
</div>
Hope this helps!
You can find a solution here - you need to get rid of white background on .container as it will cover the background of the .wrapper . Then, you can set background-size: cover; for .wrapper so it will cover whole area of that div. I have used some random background.
.wrapper{
margin: 0 auto 0 auto;
max-width: 100%;
text-align: left;
background: url("http://media.istockphoto.com/photos/abstract-cubes-retro-styled-colorful-background-picture-id508795172?k=6&m=508795172&s=170667a&w=0&h=uxKISA4xMNkrBCcEFhdN5mm-ZDv8LFzWUhMMmG3CNuQ=");
background-size: cover;
}
I wasn't quite sure what you meant, but I updated your fiddle. https://jsfiddle.net/0ao6r0en/3/
I think you meant that you want white behind the boxes, center that white box, and have an image on the wrapper?
Thats what I did for you so you can see, check it out!
Check out the fiddle

How to position text specifically in Bootstrap Jumbotron?

In my Jumbotron, I would like to have some text pinned to the bottom left corner of the Jumbotron. I have some max-width & max-height properties that I think might be the issue, but i'm not really sure. I've gotten it sort of in the code below, but when the page is resized it the text moves off of the Jumbotron or positions all wonky.
HTML:
<a href="#">
<div class="six">
<div class="col-sm-4">
<div class="jumbotron">
</a>
<h5>Text</h5>
</div>
</div>
</div>
CSS:
.six .jumbotron
{ background: url("Img") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
min-width: 220px;
max-width:250px;
min-height:260px;
max-height:300px;
margin: 0 auto;
margin: 3em auto;
}
` .six .jumbotron > h5{
position:absolute;
color:#000;
left:10px;
bottom:10px;
font-size:15px;
}`
It's because you position the H5 absolute to the page and not to the element, to fix it do this: Fiddle here:https://jsfiddle.net/agc3e3yp/2/
.jumbotron h5{
margin-top:90%;
left:10px;
font-size:15px;
color:#fff;
}
Note the text will still move around, but that is because the parent element is changing size when you change screen size. but now it will stay inside the box at 90% of it's height. Best bet is just put your text in a div and style it yourself.
Let me know it works for you :)

fixed header displayed over content, but there is a gap at the top,

so I have fixed and centered the header, and the z-index achieves it being over the top of content that scrolls, however there is a small gap at the top.
I tried using overflow:auto but it did not work as I had hoped.
<body>
<div class="wrapper">
<header class="site-header delay fadeInDown animated">
<a class="header-link fadeInDown animated" href="/">
<h1>BryanBell</h1>
</a>
</header>
CSS
h1 {
font-family:"CubanoRegular";
font-size:72px;
letter-spacing:12pt;
line-height:120%;
text-align:center;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin:50px;
padding:25px;
}
header {
position:fixed;
text-align:center;
margin:0;
padding:0;
width:100%;
height:150px;
z-index:999;
background-image: url('http://subtlepatterns.com/patterns/cartographer.png')
Add this to your CSS:
html{
margin-top:0;
padding-top:0;
}
body{
margin-top:0;
padding-top:0;
}
By default, the page has a small amount of margin.
Therefore, for things like this, we need to reset the margin and padding to 0.
I also usually set the width and height to 100% as well, like this:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%
}
The reason that jsFiddle displays it fine is that it has already reset the margin and padding.
Add inside the header:
<header style="top: 0px">

Aligning two images in CSS

I am trying to align two images horizontally using CSS. In CSS, I have:
#poster1 {
background-image: url(audioMaster1.png);
background-repeat: no-repeat;
background-position: 0px 40px;
padding-top:595px;
}
#poster2 {
background-image: url(audioMaster2.png);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-top:595px;
}
and in HTML, I have at the moment:
<div id="poster1"></div>
<div id="poster2"></div>
but, obviously, the images are below each other, which I do not want. I would like the images to be side by side.
Give the div elements an explicit width; otherwise they will expand to fill all available horizontal width.
You will then need to float them or use inline-block.
jsFiddle.
You need to add some things, try this:
#poster1 {
background-image: url(audioMaster1.png);
background-repeat: no-repeat;
background-position: 0px 40px;
padding-top:595px;
float:left;
}
#poster2 {
background-image: url(audioMaster1.png);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-top:595px;
float:left;
}
#wrapper{}
Notice the floats. You can also add width to specify how wide you want it.
It is also common to add a wrapper too.
<div id="wrapper">
<div id="poster1">aa</div>
<div id="poster2">bb</div
</div>
Ok try this:
CSS: #image1, #image2 {float:left; display:inline-block; background:#000; width:250px; height:250px; margin:5px;}
<div id="wrapper">
<div id="image1"><img src="1" /></div>
<div id="image2"><img src="2" /></div>
</div>
You should find you have two black boxes side by side, simply replace the background:#000 with your image URL so for instance it would be : background:url("audioMaster1.png") no-repeat 0px 40px;
You can then use the "Wrapper" to move both images around together. :)
That should do the job.