I have a div (with a fixed width) that has 2 image elements as children.
Each image is the same width as the div so the images are placed not on the same row (see screenshot) .
This is great, but I want the images to displayed the same way (one on top of the other) but at the bottom of the div.
I'm able to achieve such behavior in some browsers using:
-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);
on the div css.
Is there a nicer way to achieve that?
Here is the code I used for the example:
<html>
<head>
<style type="text/css">
.container {background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;height:116px;
width:33px}
</style>
</head>
<body>
<div class="container">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
</div>
</body>
</html>
Make the container position:relative; and set the images to position:absolute; bottom:0;
However, this will not stack the images. They will overlay each other. If you need them stacked, the easiest (dynamic) way is to wrap the images with another container (like a div), and then set the styles on it. For example...
Markup:
<div class="container">
<div class="innerContainer">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" />
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" />
</div>
</div>
CSS:
.container {
background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;
height:116px;
width:33px;
position:relative;
}
.container .innerContainer {
position:absolute;
bottom:0;
}
The solution: Add an innner div and set its position to bottom:
<html>
<head>
<style type="text/css">
.container {background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;height:116px;position:relative;
width:33px;}
.inner {position:absolute;bottom:0px;}
</style>
</head>
<body>
<div class="container"><div class="inner">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
</div></div>
</body>
Thanks to Josh for suggesting this.
Related
I am learning basic css, I've got a basic understanding of html. I was watching a YT video on css and cannot get my code to replicate what is shown on the screen. I've tried for an hour now. I'm sure it's something super simple, but you don't know what you don't know kind of thing.
I'm trying to get 2 colored blocks to stack one then the other. but they're just stacking on top of each other. I typed out my code just like it showed on the video. # https://www.youtube.com/watch?v=_0Z1oNQ93Wo&list=PLLAZ4kZ9dFpNO7ScZFr-WTmtcBY3AN1M7&index=7
my code is:
<html>
<head>
<meta charset="utf-8">
<title>CSS learning</title>
</head>
<body>
<h1>CSS Tutorial</h1>
<div style="width:90px; height:90px; background-color:blue;">
<div style="width:100px; height:100px; background-color:red;">
</body>
</html>
the red block is covering up the blue one, and not stacking on one another like in the video.
Embed the div into the div. They are on the same hierarchy.
<div>
<div>
</div>
</div>
If you want one div on top of the other do it like this:
<html>
<head>
<meta charset="utf-8">
<title>CSS learning</title>
</head>
<body>
<h1>CSS Tutorial</h1>
<div style="width:90px; height:90px; background-color:blue;">
</div>
<div style="width:100px; height:100px; background-color:red;">
</div>
</body>
</html>
You have to understand the css position. Here in short: If you set position: absolute of any element, it will position absolutely according to the nearest parent which has the position property of relative. So, if you want to stack one div to another - you need to give their parent position of relative, And give them/one of them position of absolute.
<div>
<div style="position: absolute; top: 0; left: 0; background-color: red; height: 150px; width: 150px"></div>
<div style="background-color: green; height: 150px; width: 150px"></div>
</div>
In this case the parent div has the position of relative by default.
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.
Here is HTML Code
<!doctype html>
<html>
<head>
<title>Float</title>
<link rel="stylesheet" type="text/css" href="Font Sizes.css">
</head>
<body>
<div class="First">
<img src="firstImage.png" alt="First Image of Article" class="FirstImage">
<p> Picture No.1</p>
</div>
<div class="Second">
<img src="secondImage.png" alt="Second Image of Article" class="SecondImage">
<p>Picture No.2</p>
</div>
</body>
Here is CSS
.First{
width:430px;
background-color: Red;
float: left;
}
.Second{
width:330px;
background-color: Blue;
}
I tried different tricks but failed. Please Explain it in detail. I searched a lot but could not found my answer.The second element not arrange it self to the right side of first element. When i remove the width property from second element then it arranged at right.
With Width property:
Without Width Property on second element:
div's are block level elements and you have only supplied a float on First. Putting a float on Second will give you the effect you desire IF the browser is wider than 760px;
I need a page that has an image overlapping the entire page. I have this code right now but my image is just being appended to the bottom.
Any help/suggestions would be greatly appreciated!
HTML Code
<html>
<head>
<link rel="stylesheet" href="/media/themes/txt/css/record_keeper/training_report.css" />
</head>
<body style="position:relative;">
<div class="content">
<p>Content here</p>
</div>
<img src="/media/images/record_keeper/lines.jpg" style="z-index:10; position:relative;">
</body>
</html>
If you want to have that image right on top, you need to use position: absolute, and give it some top, left etc options.:
<img src="/media/images/record_keeper/lines.jpg" style="z-index:10; position:absolute; top:0; left:0;">
An alternative solution using pure CSS is:
This will create a foreground div with a background image.
HTML
<div class="content">
<p>Content here</p>
</div>
<div class="MyImg"></div>
CSS
.MyImg{
background: #eee url(http://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png) center center no-repeat;
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:1000;
}
CLICK FOR DEMO
You can try adding a div tag around the body:
<div id=wrapper>
<body>
*content goes here*
</body>
</div>
then on your CSS:
#wrapper {
background-image:url('/media/images/record_keeper/lines.jpg');
}
Is that what you are trying to do?
I have the following problem.
I am using a twitter bootstrap to make my new website but I have difficulties with the background. The following is what I have :
<body>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-fixed-top">
...
</div>
<div id="header">
...
</div>
<div id="content">
...
</div>
<div class="push>
</div>
</div>
<div class="footer">
....
</div>
</body>
The navbar is fixed at top. (fixed height)
The header (title stuff) is scrolling with the page and is fixed height.
the footer is at the bottom of the page but scrolls if there is more content (not fixed at bottom but fixed height)
What I want is that the content has a background that takes all the avaiable space (from right after the header till the footer)
Image to clarify
Full HTML & CSS(without bootstrap css) code
So you want the content area to be at least 100% less header and footer so to speak?
This is how i would do it:
demo:
http://jsbin.com/ofijap/1/edit
.head {
height:100px;
background-color:green;
}
.wrap {
min-height:100%;
background-color:red;
}
.footer {
height:100px;
background-color:grey;
margin-top:-100px;
}
.content {
padding-bottom:100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div class="head">Head</div>
<div class="content">content</div>
</div>
<div class="footer">footer</div>
</body>
</html>
EDIT:
as a rule of thumb, if you want something to fill up all the vertical space it probably needs min-height:100%; But, its parent should have 100% height too, and so on up to the body element.
To the people who want to see my final result: thanks to #user1721135 ;)
http://jsbin.com/udoxet/2/edit
Now I'm gonna try and port it to my own website see if that works :)