I have a problem with CSS
<div id="all-letter2" style="margin-left:40px; margin-right:57px;">
<div class="inhalt" style="font-size:17px;">
<div class="line1" style="position: absolute; margin-left:-80px; width:30px; color:gray; height:10px; font-size:22px; font-weight:470; margin-top:-590px;z-index:10;">_
</div>
</div>
</div>
How can I set class="line1"> on class="inhalt"? z-index?
If you are trying to mimic http://cdn.onextrapixel.com/wp-content/uploads/2009/05/zindex.jpg with the nested elements you have in your example, then you need to set the parent container to have a position relative. That ensures that the child elements will use it's top and left edges for determining their positions. This list a part article does an excellent job about describing why.
So the html is:
<div id="all-letter2">
<div class="inhalt">
<div class='line1'></div>
</div>
</div>
And your css would be:
#all-letter2
{
height:30px;
width:30px;
background:orange;
position:relative;
top:10px;
left:10px;
}
.inhalt
{
height:30px;
width:30px;
background:blue;
position:absolute;
top: 10px;
left:10px;
}
.line1
{
height:30px;
width:30px;
background:green;
position:absolute;
top:10px;
left:10px;
}
A visual example is here in this fiddle: http://jsfiddle.net/7CL54/
If I understand correctly, you want to place .line1 inside .inhalt?
If so, position .inhalt relatively, than you can absolute position (which you already have) the .line1 div.
<div class="inhalt" style="font-size:17px; position: relative;">
If your trying to set it on top of it just use like you said in the title:
CSS
.inhalt {
position: relative;
z-index: 1000;
}
.line1 {
position: relative;
z-index: 2000;
}
HTML
<div class="inhalt" style="font-size:17px;"></div>
<div class="line1" style="font-size:17px;">
If you want .line1 under inhalt then you can position them absolute to all-letter2.
CSS
#all-letter2 {
position:relative;
margin: 0 57px 0 40px;
}
.inhalt {
position:absolute;
top:0;
left:0;
z-index:2;
}
.line {
position:absolute;
top:0;
left:0;
z-index:1;
}
Related
I'm struggling to auto-adjust a HTML DIV down to the bottom of a page:
<div style='position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; font-size:10vmin; background:orange'>
<header style="display:flex; justify-content:center; align-items:center; height:26px; font:11px/24px Arial; border:none; color:#2E3F58; background:#B1DBFF 0% 0% no-repeat padding-box;">Header 1</header>
<button type="button" style="display:inline-flex; align-items:center; font:11px/24px Arial; border:none; color:black; background:none; cursor:pointer; outline:0 !important">Header 2</button>
<table style="height:26px; width:100%; color:#FFF; background:red"></table>
<div id="content" style="text-align:center; color:silver; font-size:10vmin; top:0; bottom:0; left:0; right:0; background:green">content</div>
</div>
https://jsfiddle.net/0nx9zbmt/
This is the part that doesn't adjust to bottom as I'd like to to do, so the entire lower part of the web page becomes green:
<div id="content" style="text-align:center; color:silver; font-size:10vmin; top:0; bottom:0; left:0; right:0; background:green">content</div>
Any ideas? I'm new to the flex box model and fail to use it properly.
Use height: 100%; to the content div
<div id="content" style="height: 100%; text-align:center; color:silver; font-size:10vmin; top:0; bottom:0; left:0; right:0; background:green">content</div>
Note: try to use CSS classes instead of inline CSS so it will look cleaner and easy to understand the code.
also top:0; bottom:0; left:0; right:0; will not have effect without position property.
If you need to adjust the position of an element, You must add position: relative;, position: absolute; or position: fixed; to the element's styles. Otherwise your top, bottom, left and right values will be ignored.
In your case. You can add position: absolute; because you are giving it an absolute position. Also you need to remove that top: 0; because you aren't setting any value for top. You just need it to be at bottom.
So this is your final code.
<div style='position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; font-size:10vmin; background:orange'>
<header style="display:flex; justify-content:center; align-items:center; height:26px; font:11px/24px Arial; border:none; color:#2E3F58; background:#B1DBFF 0% 0% no-repeat padding-box;">Header 1</header>
<button type="button" style="display:inline-flex; align-items:center; font:11px/24px Arial; border:none; color:black; background:none; cursor:pointer; outline:0 !important">Header 2</button>
<table style="height:26px; width:100%; color:#FFF; background:red"></table>
<div id="content" style="text-align:center; color:silver; font-size:10vmin; position: absolute; bottom:0; left:0; right:0; background:green;">content</div>
</div>
More about css position : https://www.w3schools.com/css/css_positioning.asp
I'm trying to place submenu right below its's choosing option like this but when I set left and right attributes on 0
.sidebar_wrapper
{
position:absolute;
background-color:lightgray;
left:0;
right:0;
}
it has whole site's width. When I set them on auto it looks like this.
How do I place my submenu exactly below this div or, what would look even cooler, on it's right?
Code (whole JSFiddle in comments):
HTML:
<div id="sidebar">
<div class="sidebar_option">Strona główna</div>
<div class="sidebar_option">Galeria</div>
<div class="sidebar_option">Reżyserzy
<div class="sidebar_wrapper">
<div class="submenu" style="margin-top:10px">Quentin Tarantino</div>
<div class="submenu">Bracia Coen</div>
<div class="submenu">Wes Anderson</div>
</div>
</div>
<div class="sidebar_option">Ulubione filmy</div>
<div class="sidebar_option">Seriale</div>
<div class="sidebar_option">Kontakt</div>
</div>
CSS:
.submenu
{
text-align:center;
border-bottom:dotted 2px black;
padding-top:10px;
padding-bottom:10px;
display:none;
font-size:13px;
}
.sidebar_wrapper
{
position:absolute;
background-color:lightgray;
left:auto;
right:auto;
}
.sidebar_option:hover div
{
display:block;
}
.sidebar_option:hover
{
background-color:lightgray;
cursor:pointer;
}
.sidebar_option
{
text-align:center;
margin:10px;
padding:10px;
border-bottom:dotted 2px black;
}
I think the key is you need to set the position of the sidebar_option to relative so that the submenu_wrapper will be position in relation to the sidebar instead of the window. Then some value for left and right for the submenu. It can be anything, but if you want it centered they need to be the same.
.sidebar_option {
position: relative;
}
.sidebar_wrapper {
position: absolute;
background-color:lightgray;
left: 5%;
right: 5%;
z-index: 2;
}
Here's the updated jfiddle: https://jsfiddle.net/8d3p50hy/13/
I am trying to make two columns separated by or inside a circle page the second column should have an image it like this :
<div class="step second">
<div id="upload-img"></div>
<div id="sperator">
<div class="circle" id="or"><p class="number" style="padding-left:25%;">or</div>
</div>
<div id="default-img">
<img src=""/>
</div>
</div>
But for some reason the position of the #sperator div is changing with the image my css is bit long so here is a js fiddle for more explaining : here
As you can see the image should be in the same line with the other div but its changing the position of the separator div
You should re-check your html tags. Make sure each tag closed correctly
Here your css :
.step{
position:relative;
width:500px;
height:250px;
border:1px solid black;
}
#upload-img{
position:absolute;
left:0;
top:0;
width:50%;
height:100%
}
#default-img{
position:absolute;
right:0;
top:0;
width:50%;
height:100%
}
#upload-img img, #default-img img{
max-width:100%;
max-height:100%;
}
#sperator .circle{
position:absolute;
height:66px;
width:66px;
background-color:black;
top:50%;
left:50%;
margin:-33px auto auto -33px;
border-radius:50%;
z-index:100;
text-align:center;
}
#sperator .circle p{
font-size:35px;
font-family:futura-book;
color:white;
padding:0 !important;
margin:0;
line-height:60px;
}
.step::after{
content:'';
height:100%;
width:3px;
left:50%;
margin-left:-2px;
z-index:90;
position:absolute;
background-color:black;
}
potition:relative will be an area that will "lock" every potition:absolute inside it.
You can use position:relative as parent div and position:absolute as child div.
Consider a simple example with html
<div class="parent">
<div class="child">
</div>
</div>
and CSS
.parent{
position:relative;
background:red;
width:200px;
height:40px;
}
.child{
position:absolute;
top:40px;
left:30px;
width:70px;
height:70px;
background:blue;
}
to place a DIV with absolute position just beneath its parent (with relative position).
In this example, I equaled the absolute's top to the parent relative's height.
How to align the absolute DIV just under the parent when the height is unknown (both parent and child)?
Didn't think this would work myself, but it seems to:
html, body {
height: 100%;
}
.parent{
position:relative;
background:red;
width:200px;
height:40px;
}
.child{
position:absolute;
top:100%;
left:30px;
width:70px;
height:70px;
background:blue;
}
Check this..
HTML:
-------
<div class="parent">
</div>
<div class="child">
</div>
CSS:
-----
.parent{
position:relative;
background:red;
width:200px;
height:40px;
}
.child{
position:absolute;
top:auto;
left:30px;
width:70px;
height:70px;
background:blue;
}
(Example)
you can use negative value for bottom, eg. bottom: -100px
EDIT: here is better solution: http://jsfiddle.net/mqy4z/3/ - set child's position to top:100%
Try placing both div's in your HTML file under eachother:
<div class="parent">
</div>
<div class="child">
</div>
I have two DIVs stacked on top of eachother and enclosed by a third DIV. Then below the stacked DIVs I have a "red" DIV.
In Chrome, the DIVs show up correctly. In IE6 and IE7, there is a whitespace between the stacked DIVs and the red DIV.
<style>
div.imgbox {
position:relative;
top:0;
left:0;
bottom:0;
right:0;
width:103px;
height:58px;
}
div.imgthumb {
position:relative;
background:#000000;
z-index:3;
width:103px;
height:58px;
}
div.imgplay {
position:relative;
top:-58;
color:red;
z-index:4;
}
div.imgplay a {
width:103px;
height:58px;
display:block;
}
div.imgplay img {
width:25px;
height:25px;
}
</style>
<div class="imgbox">
<div class="imgthumb"></div>
<div class="imgplay"><img src="http://freetvpower.com/attachments/Image/play_up.gif" /></div>
</div>
<div style="width:103px; height:58px; background-color:red;"></div>
Where you have top: -58 in your CSS, you've omitted the 'px' suffix - it should be:
div.imgplay {
position:relative;
top:-58px;
color:red;
z-index:4;
}
The following solution gets rid of the position:relative chaff, to get straight to the wheat:
http://jsfiddle.net/4UEdJ/
(untested in Internet Explorer :$)
You need 'position:relative;' in your last div and to change the position of the top, i.e.
<div style="width:103px; height:58px; top:-58px; background-color:red; position: relative;"></div>