Many time I've successfully used the cssarrowplease technique which imposes the main element (not the arrow) to be relatively positioned. However this time the element I want to add an arrow to is already absolutely positioned.
How to fix this dilemma?
EDIT: here's my code:
HTML
<li id="submenu">
<div id="enquiries_popup">
<div id="enquiries_popup_content">
Content
</div>
</div>
</li>
CSS
li#submenu {
position: relative;
}
#enquiries_popup {
position: absolute;
padding-top: 30px;
}
#enquiries_popup_content {
background: #000;
}
#enquiries_popup_content:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #000000;
border-width: 8px;
margin-left: -8px;
}
Well, It's late I know, Your are right it does not show up because the position is absolute, and the arrow rectangles go out of the box, if you set the bottom to 50% for example you'll see them.
The solution is to put this div in another div with position absolute and give it some padding, then set the popup div position to relative and it will work!
<li id="submenu">
<div id="absolute_div">
<div id="enquiries_popup">
<div id="enquiries_popup_content">
Content
</div>
</div>
</div>
</li>
css
#enquiries_popup {
position: relative;
padding-top: 30px;
}
#absolute_div {
position: absolute;
padding-top: 30px;
}
It will work just fine for your absolutely positioned element. Next time, try it before asking!
All the arrow trick requires is for your element to be positioned in the first place in order for the arrow position to be relative to it. It works with relative, absolute and fixed positioning alike.
Related
I need to use this shape and inside that shows a text. But, I don't know why the text is not showing.
HTML:
<div id="thebag">
<h3> Shihab Mridha </h3>
</div>
CSS:
#thebag{
position: relative;
overflow: hidden;
}
#thebag::before{
content: '';
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 30%;
background: red;
}
#thebag::after {
content: '';
position: absolute;
top: 0;
left: 30%;
width: 0;
height: 0;
border-bottom: 50px solid red;
border-right: 70px solid transparent;
}
https://jsfiddle.net/kn87syvb/1/
You need to add position: relative (or position: inherit, since it's the same as the parent) to your #thebag h3 class. Currently, your CSS styles are only affecting the parent of the h3—in order for the h3 to show with the text, you need to define CSS styling for it.
https://jsfiddle.net/kn87syvb/2/
By setting a position:absolute to the #thebag::before you "broke" the flow and your text is behind your div. You have to precise, than the h3 tag will be relative depending it's container.
So you have to add this :
#thebag h3 {
position:relative
}
To precise all h3 on your #thebag section will be affected. Be careful, if you change your kind of selector, It won t work anymore.
May be it will be better to use a custom class, like this https://jsfiddle.net/kn87syvb/5/
You need to use postion:relative property:
#thebag h3{
postion:relative;
}
Small explanation:
position: relative will layout an element relative to itself. In other words, the elements is laid out in normal flow, then it is removed from normal flow and offset by whatever values you have specified (top, right, bottom, left). It's important to note that because it's removed from flow, other elements around it will not shift with it (use negative margins instead if you want this behaviour).
However, you're most likely interested in position: absolute which will position an element relative to a container. By default, the container is the browser window, but if a parent element either has position: relative or position: absolute set on it, then it will act as the parent for positioning coordinates for its children.
please check this snippet:
https://jsfiddle.net/kn87syvb/4/
You can also re-structure your HTML and CSS as follows:
HTML
<span class="start">Shihab Mridha</span>
<span class="end"></span>
CSS
.end {
height:0;
width:0;
float: left;
display: block;
border:10px solid #0f92ba;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:#0f92ba;
border-left-color:#0f92ba;
}
.start{
height: 20px;
width: 60px;
float: left;
background: #0f92ba;
display: block;
color:#FFFFFF;
}
Reference Link : https://solutionstationbd.wordpress.com/2011/12/21/trapezoids-shape-with-css/
I have a banner that I am trying to add a text to the bottom portion of it. I got the text centered and how I want to be, but when I want to move the text to the bottom of the page, the picture moves too.
HTML
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
CSS
.art-banner { background-image: url("graphics/art_banner.jpg"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { text-align: center; padding-top: 10px; font-family: "Bender";}
.art-banner-text span { color: #eb6623; }
JSFiddle
Presuming you're trying to use margin-top to move the art-banner-text down, you're running into the collapsing margin problem: the margin is shared between the inner div and the outer one, meaning the outer one gets the margin too.
So the solution is not to use margins, but position:relative for the outer div and position:absolute for the inner one, with bottom:0 to position it at the bottom of the outer one.
.art-banner {
background-image: url("https://photos-2.dropbox.com/t/2/AAAtS4UXAnyf0x4vH0ty5lE779vFfS2smjUWyJFsFwnMPg/12/18401260/jpeg/32x32/1/1437685200/0/2/art_banner.jpg/COyP4wggASACIAMgBCAFIAYgBygBKAIoBw/L9JVtmzn-g-n3CMbDujkZkXxzuwR9ntwvtEoBLNl_4g?size=1024x768&size_mode=2");
height: 150px;
position: relative;
}
.art-banner-text {
width: 940px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
}
.art-banner-text h2 {
text-align: center;
padding-top: 10px;
font-family: "Bender";
margin: 0;
}
.art-banner-text span {
color: #eb6623;
}
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
(Note that I had to change the URI for the image, to make it show up. What you had was the URI for the dropbox page that displays the image, not the image itself.)
You need to have the outer container ( which is .art-banner-text) set to position:relative; and set the inner div or element to absolute to place it where you want. https://jsfiddle.net/2ryrnxz7/
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
css
.art-banner { background-image: url("https://www.dropbox.com/s/migdkqlmse8ym0t/art_banner.jpg?dl=0"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; position: relative; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { font-family: "Bender"; margin: auto 0; padding:0px; bottom:0px; position:absolute; left:35%}
.art-banner-text span { color: #eb6623; }
You can set the left to whatever % you want to push towards the middle. This won't work for mobile as it is set and won't reposition itself with the page. But if you just need it to work for desktop, this is how to do it.
It sounds like you might want to use CSS positioning. For example .art-banner {position: relative;} .art-banner-text {position: absolute;} You can then position, move, or animate the text in the inner div without affecting the outer div.
Overview: I have a CSS3 pure navigation system on top of my page. I have a footer/copyright on bottom.
In the middle, I want a background image (parchment) cover, then on top of that parchment, I want a white layer for text with a left column and a right column. I can't seem to make it work using the relative position as my z-index doesn't seem to be working. If I put position "fixed", I can't use the right browser scroll anymore to go down. If I use position "absolute", then the background is right and the content on top is ok, but my navigation footer disappears. If I use position "relative", my navigation system is fine but the background doesn't show up anymore. It is ignoring the z-index....
The weird thing is I am using expression web 4 and it looks correct there...it just doesn't look correct on the web.
This is my site html to reproduce what I am seeing.
<!-- #BeginEditable "content" -->
<div id="page_content_back">
<div id="column_left">
<h1>About</h1>
<p>We are the best-Trust us</p>
</div>
<div id="column_right">
<h4>CONTACTS</h4>
</div>
</div>
<!-- #EndEditable -->
This is my css
#page_content_back {
position: relative;
background-image:url('../images/grayparchment_back.jpg');
background-size: cover;
z-index: 1;
width: 100%;
margin: auto;
padding: 0;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCAA77;
}
#column_left {
position: relative;
margin: 0 50px;
padding: 0 2%;
z-index: 2;
top: 0px;
background-color: #fff;
float: left;
width: 65%;
height: 100%;
color: #393939;
}
#column_right {
position: absolute;
z-index: 3;
float: right;
right: 50px;
top: 370px;
width: 20%;
height: 100%;
margin: 0;
padding: 10px;
background-color: #fff;
}
Okay, the problem is your div#column_left. It has a float: left property. Floating an element takes it out of the flow, so there's nothing within the div#page_content_back to give it any height. Remove that float: left property from the inner div and you'll see the image appear behind it. From there, you can add other elements after that nested div and the image will expand to encapsulate the new element. That said, if you use float or position: absolute, you're removing the element from the flow and that background image won't respond to its presence as a result.
I am having some troubles on how to structure a new widget I am working on. I am trying to implement a geographic map that contains some hotspots, just like an old school image map. However, for various purposes, I want to accomplish it without the use of image maps.
So far, I have gotten to this incomplete solution:
http://jsfiddle.net/nielsbuus/FZJ8E/1/
HTML:
<div class="parent">
<!-- I'm a container, I need to expand in height, when my children expand, so they don't overlap elements beneath me. Sort of like clearing floats -->
<div class="lower">
<!-- I contain an image. My width is fixed, but my height may vary. -->
<img src="http://placekitten.com/300/325" />
</div>
<div class="higher-container">
<div style="top: 20px; left: 30px" class="higher-spot">foo</div>
<div style="top: 80px; left: 50px" class="higher-spot">bar</div>
<div style="top: 85px; left: 70px" class="higher-spot">baz</div>
</div>
</div>
<div class="successor">
Please keep me below all of this.
</div>
CSS:
.parent {
background-color: #ccffff;
padding: 20px;
position: relative;
}
.lower {
position: absolute;
width: 300px;
background-color: rgba(0,0,0,0.2);
z-index: 0;
}
.higher-container {
position: absolute;
background-color: rgba(255,0,0, 0.3);
}
.higher-spot {
position: absolute;
width: 25px;
height: 25px;
background-color: rgba(0, 255, 0, 0.5);
z-index: 1px;
}
.successor {
font-size: 18px;
font-family: sans-serif;
}
The main problem here is the use of absolutely positioned z-indexed divs. They detach from the rest of the layout, causing the parent container to not expand, thereby placing succeeding elements beneath the absolutely positioned elements.
I am looking for ideas on how to stack two divs (lower and higher-container) on top of each other and have the parent container expand to the size of the lower div.
I am not sure why you are using position: absolute on your .lower container. Use it as relative and then give a top: 0 rule to the .higher-container.
Updated fiddle
You really only need one of your children to be absolutely positioned: the one that is placed on top (.higher-container). This way, .lower which will always be taller than .higher-container will stretch the parent container normally, then the higher-container will be layers, aboslutely, on top. We just need to add a top and left positioning to it:
Here's a jsfiddle: http://jsfiddle.net/rgthree/M6jm8/
.lower {
position: relative;
width: 300px;
background-color: rgba(0,0,0,0.2);
z-index: 0;
}
.higher-container {
position: absolute;
top:0px;
left:0px;
z-index:1;
background-color: rgba(255,0,0, 0.3);
}
I have a left panel with fixed position(it's always on the left side, nomatter how much you scroll) and also few elements in that left panel. On a certain event a mask appears(it goes over everything because position:fixed; z-index: 102).
My goal is when X event fires and the mask come up, to show up the holder element over the mask.
Here is a fiddle showing my problem: JSFIDDLE
Here is my HTML:
<div class="leftpanel">
<div class="just-random-elem" style="height: 30px;">just an element to move the holder abit down</div>
<div class="holder">asdasdas</div>
</div>
<div class="mask"></div>
<div style="height: 9999px;">Just to make sure both mask and leftpanel are with fixed positions.</div>
and here's the CSS:
.mask {
opacity: 0.85;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 101;
background-color: #000;
}
.leftpanel {
width: 250px;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: red;
padding: 15px;
}
.holder {
width: 230px;
height: 90px;
background-color: #fff;
z-index: 99999; <<<<<<<<<< This is NOT working!
}
Your .holder element is no positioned, so z-index simply has no effect on it. You need to add a position value different from the default static – relative will do.
http://jsfiddle.net/DJA5F/4 works that way in every browser I tested – except Chrome. Can’t spontaneously say if Chrome is handling stacking contexts correct here and the others are not – or if it’s the other way around.
Works in Chrome as well if you put #mask into .leftpanel: http://jsfiddle.net/DJA5F/5 – might not be the nicest workaround, but since it’s postioned fixed, it does not actually matter, since the orientation for fixed is the viewport.