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.
Related
I'm having a hard time with HTML/CSS now. I'd love to create some sort of a slider with images placed side by side with hidden overflow (so when you press "next" arrow it will "move" pictures to the left (hiding the left one and showing the one that was hidden).
The problem is I can't make my div to go beyond its parent thus I can't line up my images side by side.
It looks like this:
<div id="slider">
<div id="images">
<div class="image_container">
<img src="" alt="1"/>
</div>
<div class="image_container">
<img src="" alt="2"/>
</div>
...
<div class="image_container">
<img src="" alt="3"/>
</div>
</div>
</div>
Where #slider should be at 95% of width and preferably height based on content,
#images should have "no width" - it should be based on the content and max-height~, .image_container should have the width of the img - these should line up one next to another.
Any ideas how can I achieve that? I've been trying lots of things and none of them work.
Set the display property of the child elements to inline-block and the white-space property of the parent to nowrap.
#parent{
background:#000;
height:100px;
padding:5px;
white-space:nowrap;
width:200px;
}
#parent>div{
display:inline-block;
height:100%;
width:100%;
}
#parent>div:nth-child(odd){background:#f00;}
#parent>div:nth-child(even){background:#0f0;}
<div id="parent"><div></div><div></div><div></div><div></div><div></div></div>
I've managed to position two divs next to each other by using the following code however my left div won't allow a height:100% and seems to be defaulting to auto, how can I set the height to 100% with my current setup?
css:
.left_div
{
width:30%;
height:100%;
padding:10px;
text-align:center;
float:left;
overflow:hidden;
}
.right_div
{
word-wrap:break-word;
float:left;
width:65%;
margin-left:15px;
overflow:hidden;
}
html:
<div class='panel-body thread-body'>
<div class='panel panel-default original-post-panel'>
<!-- dynamically generated content -->
<div class='panel-body'>
<div class='left_div'>
<!-- dynamically generated content -->
</div>
<div class='right_div'>
<!-- dynamically generated content -->
</div>
<div style="clear:both">
</div>
</div>
</div>
Height of the floating divs doesn't goes up to the parents.
Thus, the height of the parent div will be 0.
Thus, the height of your left div will be also 0 if its height is set to 100%.
Thus, the content of your left div will overflow, and it will be visible only because of this overflow.
The simplest solution for your problem would be if you would put an empty div with clear: both after all of them:
<div class="left_div">...</div>
<div class="right_div">...</div>
<div style="clear: both"> </div>
Effectively, it will be a similar effect as if you would start an empty "new-line" (despite there is no textual line rendering here).
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.
I have design like this :
<div id='container'>
<div class='box'>
<div class='boxleft'>something left</div>
<div class='boxright'>something right</div>
<div class='clear'/>
</div>
</div>
And I set CSS as :
*{margin:0; padding:0}
.clear{clear:both}
#container{width:100%; height:auto; background:#f1f2f3}
.box{width:95%; margin:0 auto; height:auto; background:white}
.boxleft{float:left;width:49%;margin-right:1%;}
.boxright{float:right;width:50%;}
Problem: Background is white of class .box be load later after class .boxleft finished the loading. I now want it load background follow the height of class .boxleft. So, How can I do this?
Thank for your suggestion.
Your problem is a result of the float left and float right without having an height on both boxes inside the main box. Add this to your .boxleft and .boxright:
display:block
That should work.
I Want to place a div over another div without using height in pixels.I have used this code
<div style="position: relative;height:78px;">
<div style="width:425px;position: absolute;top: 0;left: 0;">
Content for First div
</div>
<div style="z-index:10;position:absolute;top: 0;left: 0;">
Content for Second div
</div>
</div>
The first div content will change dynamically . So is their any way to put height auto some thing like in parent div
both child divs are taken out of the flow, so the parent will have no natural height (which normally is "stretched" by it's children).
since you have pre-loaded data on the first child div, make the second match to it.
HTML:
<div id="parent">
<div id="firstChild">
Content for First div
</div>
<div id="secondChild">
Content for Second div
</div>
</div>
CSS:
#parent{
position:relative;
}
#firstChild{
width:425px;
}
#secondChild{
width:425px;
position:absolute;
top:0;
bottom:0;
}
NOTE: watch out for collisions in your styles, i used ID here. replace accordingly
height: 100% should make it the height of the parent div which is 78px;