I've got div that I need to be fixed. Now I want to create two sub-divs inside that div. Is it possible?
What I am trying to get is:
div { position: fixed; }
---------------------
- sub-div1 { position: ??? }
- sub-div2 { position: ??? }
---------------------
I tried another position properties but haven't got that yet.
UPD: solved.
Depending on your inner positioning requirements, either relative or absolute,,, both 'consider' parents position / offset .. -> http://www.w3schools.com/Css/css_positioning.asp
You can definitely nest divs inside of divs.
<div id="div1">
<div id="div2">
</div>
<div id="div3">
</div>
</div>
There are 3 different kinds of positioning absolute, relative and fixed. If you position something as fixed, its positioned relatively to the browser window. Anything else you position inside of that div will be located within, unless its positioned with absolute or something I believe, but that would only be visual, technically in the page structure it would still be inside. But here's an example you can save and try, its by no means an example of style btw.
<html>
<head>
<style>
#div1{
left: 100px;
top:150px;
position:fixed;
background:red;
padding-bottom:10px;
}
</style>
<body>
<div id="div1">
heellloooooooooooooooo<br><br><br><br>
<div style="float:left;background:yellow;">
woooooooooorld
</div>
<div style="float:right;background:blue;">
hahahahahah
</div>
</div>
</body>
</html>
Related
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.
If you zoom out my website, the structure of the header looks bad. I don't know what to do about this. This is the link of my website. This is the CSS and HTML structure. Hope you can help me, I really need help :(
If you want you header to stay in the centre with your content, you will need t do that, it doesn't just happen.
You should start by agreeing on a width you want you content in (you have width: 1100pxon your container div, so I'll go with that for you.)
In you css for .containerchange width: 1100px; to max-width: 1100px.
Then in the css for #header remove the position: absolute;. Add in max-width: 1100px; margin: 0 auto;
You will need to modify the structure of your HTML and place the header div inside the container div. Currently, that part of your HTML is like this:
<div id="header"></div>
<div id="container">
<div id="content"></div>
<div id="navigationposition"></div>
<div id="position"></div>
</div>
but it should be like this instead:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="navigationposition"></div>
<div id="position"></div>
</div>
After modifying your HTML, you can add the following CSS to your stylesheet:
#header {
margin-left: -100px;
}
your header is positioned absolute
so when you zoom in and out it will stay absolute positioned. In the top left corner when the page is zoomed out
Also you do not have a wrapper for your code.... you may want to wrap everything in a container,
This will also take care of the image size thats over lapping your other content.
I do not know id you wanted the header to overlap like that but if it was intended just use margin-left
a wrapper will also contain your other divs sizes to stay within that wrapper.
Not going to work with zooming in and out
#header {
position:absolute;
z-index:101
}
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="underheader">
</div>
</div>
</body>
css
#wrapper{
width:800px;
} or whatever width you want
#header{
maegin-left:50px;
} or whatever px you desire
I'm pretty much trying to copy what you see in the following picture. I have three sections. Between section 1 and section 2 (the blue section) you can see the white arrow-box. That's what I can't place properly without messing things up.
Now I already got this "working" by placing the arrow box inside the blue section, and then gave both the arrow-box and the blue section absolute positions, and then gave the arrow box some minus margin from top. The problem with this is, that for some reason I can't create section 3 that is supposed to come after the blue section. I can't place anything under the blue section if its position is absolute. If I give the blue section a relative position, things obviously start working normally again, but then the arrow box gets out of place and something like this happens:
My code looks something like this, HTML:
<section id="first-section">
<!-- bunch of stuff here -->
</section>
<section id="blue-section">
<div class="arrow_box">
<p>How can I help you?</p>
</div>
</section>
<section id="third-section">
<!-- More stuff here -->
</section>
CSS:
#blue-section {
position: relative;
}
.arrow_box {
position: absolute;
width: 500px;
height: 100px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
margin-top: -50px;
}
OK, then here you go:
HTML
<section class="container" id="first-section">
<!-- bunch of stuff here -->
</section>
<section class="container" id="blue-section">
<div class="arrow_box">
<p>How can I help you?</p>
</div>
<div class="col"> <img src="http://www.andalucesdiario.es/wp-content/uploads/2014/09/tyrion_lannister.jpg" alt="" /> </div>
<div class="col"> <img src="http://www.andalucesdiario.es/wp-content/uploads/2014/09/tyrion_lannister.jpg" alt="" /> </div>
<div class="col"> <img src="http://www.andalucesdiario.es/wp-content/uploads/2014/09/tyrion_lannister.jpg" alt="" /> </div>
</section>
<section class="container" id="third-section">
<!-- More stuff here -->
</section>
CSS:
.container{position:relative; background:#ccc; padding:40px; width:100%; height:auto; min-height:100px; text-align:center;}
#blue-section{background:#06c}
.arrow_box{position:absolute; background:#f9f9f9; position:absolute; top:-50px; left:50%; margin-left:-100px; height:100px; width:200px;}
.col{width:30%; padding:1%; display:inline-block;}
.col img{width:200px; height:200px; border-radius:50%;}
As you can see, you weren't that wrong, you just need to understand that absolute positioning requires a relatively positioned div in order to be positioned itself.
See the possible values so you understand (from Mozilla MDN)
static
This keyword lets the element use the normal behavior, that is it is laid out in its current position in the flow. The top, right, bottom, left and z-index properties do not apply.
relative
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption
elements is undefined.
absolute
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page.
sticky
The box position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its flow root and containing block and in all cases, including table elements, does not affect the position of any following boxes. When a box B is stickily positioned, the position of the following box is calculated as though B were not offset. The effect of ‘position: sticky’ on table elements is the same as for ‘position: relative’.
And if you made it here, you get a free fiddle
<body>
<!-- //take it as example, it may help u, just make the arrows boxed div child of blue div ,
//i ll call upper white section as white as give it white as id, arrow boxed as box,blue as blue
-->
<div id="container">
<div id="upper">
<!--//content of this div;-->
</div>
<div id="blue">
<div id="box" style="position:relative; top:-100px; z-index:10000; margin:0 auto; width:40%;">
<!-- // adjust top attr.-->
</div>
<!--//here blue sectiions content is inside lower part.-->
<div id="lower" style="margin-top:200px">
<!--//try as much u want to space to be below thw box;-->
</div>
</div>
</div>
</body>
Could anyone explain to me please why my position:absolute div is not obeying my position:relative div?
I'm sure it's something really simple, but I can't for the life of me see what it is.
I would like to see the position:absolute div (class-2) positioned inside of the position:relative div (class-1).
These are the two class', full link to code below:
div.class-1 {
position:relative;
background-color:#CCC;
width: 500px;
height: 200px;
}
div.class-2 {
position:absolute;
background-color:#C96;
width: 250px;
height: 100px;
top:0px;
right:0px;
}
HTML
<div class="wrapper">
<div class="before">class-before</div>
<div class="class-1">class-1</div>
<div class="class-2">class-2</div>
<div class="after">class-after</div>
</div>
http://jsfiddle.net/craig_wadman/HMwtN/
Hope that all makes sense?
The absolute positioned element must be nested inside the relative positioned element for the desired result:
<div class="class-1">
<div class="class-2">class-2</div>
</div>
Absolute positioning 101: an absolute positioned element is positioned with respect to the closest positioned (relative, absolute or fixed) parent; if there is none then <body> is used (that was the case with your original markup).
Demo here
Its not inside it.
<div class="wrapper">
<div class="before">class-before</div>
<div class="class-1">class-1
<div class="class-2">class-2</div>
</div>
<div class="after">class-after</div>
</div>
DEMO HERE
Your class-2 is not within the class-1. Place the after class-2.
<div class="class-1">
<div class="class-2">class-2</div>
</div>
I have two divs, the one acts as a panel, the second is a mapview (openlayers)
The panel is hidden at the start, and only shows up on a click. however, when the panel appears, the mapdiv gets pushed to the right and overlaps with another div. how can I prevent that?
What I basically want is that the panel appears on top of the map.
This is my code:
<!-- TOOLBAR/PANEL -->
<div class="waveCreatorPanel" style="visibility:hidden; display:none;">
<ul>
<li><a id="createWave_addStation"data-role="button">Station hinzufügen</a></li>
<li><a id="createWave_addItem" data-role="button" disabled="disabled">Item hinzufügen</a></li>
<li><a id="createWave_saveWave"data-role="button">Wave speichern</a></li>
</ul>
</div><!-- /footer -->
<!-- MAP -->
<div class="geosurfmap" id="map" data-role="content" style="z-index:1"></div>
The CSS:
.waveCreatorPanel {
float:left;
}
.geosurfmap {
padding:25px;
margin:25px;
width:80%;
float:left;
}
absolute positioning for one or both of these will definetly solve this
<div class="panel" style="visibility:hidden; display:none; position:absolute; left:0px; top:0px;">
<ul>
//stuff here
</ul>
</div>
<!-- MAP -->
<div class="map" id="map" data-role="content" style="position:absolute; left:100px; top:100px;"></div>
styling could be applied with css stylesheet attached , or inline - since you already have a style attribute in your div's I just added an example of how to set absolute - adjust left and top to where you actually want them
When you originally had visibility:hidden; display:none; that is leaving the other div to be positioned relative , with nothing around it. It is the same as actually not having it in HTML at all , then when it changes to become visible everything that was positioned relative has to be adjusted , absolute positioning will fix this
Another Thing: you're title says "Parent Div" - this in NOT a parent div of the div that is getting shifted around , it is actually adjacent. You would not be having this problem if it was actually a parent. But then again the parent starts as hidden , so everything in it would be hidden
Some possible solutions depending on the rest of your page:
position:absolute
z-index
You could wrap the map and panel divs in another div and give that the minimum required width (were the panel div to be visible). Secondly you would float the map div right
<div id="wrapper">
<div class="panel"></div>
<div class="map"</div>
</div>
<style>
#wrapper {
min-width: 500px;
}
#wrapper .panel {
position:relative;
float: left
}
#wrapper .map {
position: relative;
float:right;
}
</style>
EDIT
To clarify my point I have made a fiddle for you
You can set the panel class to display:none or block to see that the map div now does not displace anymore as a result