I'm fighting with css code to obtain something that should be pretty easy:
adding a triangle at the bottom of multiple div on the same page.
Here it's the code I'm working with:
.areatitolo {
background-color: #bb0000;
color: #fff;
font-size: 18pt;
font-weight: bold;
text-align: center;
padding:5%;
margin-top:100px;
width:100%;
margin-bottom:60px;
}
.areatitolo:after{
content:'';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px #bb0000;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}
There shouldn't be any problem, apart from the fact that only the first one works and I need to use the same effect 3 times...
Do you know where I made the mistake?
https://jsfiddle.net/federico_feroldi/0zrfL4q1/4/
Thank you for your help.
Add position: relative; to .areatitolo.
you should use position :relative to the class .areatitolo .Because you have used absolute for ::after. whenever you use position absolute to a child element ,you should use position relative to parent if not the absolute child will take body as relative parent by default ,thats why the first triangle appears at the top all the other triangles get overlaped on top
For a child element to be absolutely positioned, the parent must have a position: relative; property applied to it. This gives the child a reference point for it's positioning.
Additionally, consider using ::after instead of :after for a more modern CSS3 syntax. See MDN for more information.
Related
I have a Wordpress Template with a specific div being nested somewhere in the overall structure.
It has those stylings:
#fdm-ordering-sidescreen-tab {
position: fixed;
top: 25vh;
right: 0;
width: 64px;
height: 64px;
background: #fff;
color: #444;
border: 1px solid #ddd;
z-index: 101;
padding: 14px 12px 10px 12px;
cursor: pointer;
box-sizing: border-box;
}
I always thought that position: fixed; right: 0 should be absolute to the overall viewport, i.e. on the right side of the browser directly besides the scrollbar. But it isn't. It seems to be relative to its parent, i.e. right: 0 relative to some other centered div.
Can I, without changing HTML structure, move it to the very right side of the viewport, and if possible, also make it scroll with the scrolled viewport?
Thanks
This is caused by the fact that the containing div : <div class="fusion-text fusion-text-2" .... has transform: translate3d(0,0,0);
Your fixed div now becomes connected to the transformed element. It kind of treats the transformed element as the viewport.
Will wordpress let you move it out of the containing div?
Check out this SO post answer on this topic
And this : W3C Spec
I was having problems with positioning my language option at the top of my blog. It was always on a different position on a Windows and a Mac. So I thought about making an inner and outer div. But I'm having troubles with the position of my inner div.
This is the result I want:
This is what I have now
This is the code I have in my CSS on wordpress:
EDITED
.outer {
margin: auto;
overflow: visible;
background: white;
margin-left: 925px;
margin-top: -8px;
margin-bottom:-30px;
font-size: 11pt;
color: #E1BDC3;
border: 1px dotted #999999;
border-radius:8px;
width: 255px;
height: 48px;
padding-top: 15px;
padding-left: 10px;
z-index: 1000;
}
.inner {
position: relative;
left: 160px;
top: -336px;
background: transparent;
width: 150px;
z-index: 10001;
}
The block with the border just has <div class="outer"...
And the inner div, the dropdown, is a widget that I'm trying to position at the top of the page, I gave the widget "inner" class.
QUESTION --> If I put marging-right: 4px, it starts counting from the right of the screen, how do I position (for example 4px) from the right of the Outer div?
So that it starts counting from the dotted border on the right (or the left, doesn't matter)
(I'm a beginner in HTML so if you know how to help me, could you please tell me what code I need, and where?
You should use % to refer to positions on the screen. But your problem can be fix using position: relative to refer to the poition inside the parent object, and moving it with top and left
.outer {
margin: auto;
overflow: visible;
background: white;
margin-left: 925px;
margin-top: -8px;
margin-bottom:-30px;
font-size: 11pt;
color: #E1BDC3;
border: 1px dotted #999999;
border-radius:8px;
width: 255px;
height: 48px;
padding-top: 15px;
padding-left: 10px;
z-index: 1000;
}
.inner {
position: relative;
left: 159px;
top: -17px;
background: transparent;
width: 100px;
}
<div class="outer">
OUTER
<div class="inner"><select><option>INNER</option></select></div>
</div>
To answer your question "how do I position (for example 4px) from the right of the Outer div?" you would do that by first determining how the elements relate to each other. This is determined by the position and display CSS properties. Depending on which position and display values your two elements have, the answer will vary.
The HTML markup you provide for your "outer" element shows that it is a div. Your CSS does not define a position for this element, so the browser default is static, i.e. position:static.
Your "inner" element is a mystery to us. If it is another div then it is another static position which we can help with. If it is a ul then it is an inline element, which will require a different answer.
Your markup is important here.
EDIT
First thing, your 'outer' div is not actually containing your inner div. This is the outer div markup:
<div class="hide_on_mobile outer">Choose language</div>
You'll see it doesn't contain the element in question that we want to position. Therefore, like my first sentence states, we need to understand how our element in question relates to those around it.
In your situation, you are not in a good spot because the element you want to position is contained by elements that don't relate to your target element. Therefore the only way to position them in the same spot on all screen sizes is to position them absolutely and use percentages.
Or the easy way, if you want to stick to one screen width:
.inner {
position: relative; //override by .widget_polylang element
left: 27px;
top: -17px; //override by .widget_polylang element
background: transparent;
width: 100px; //override by .widget_polylang element
}
You'll see some of your key/value parameters are being outclassed by the .widget_polylang element. The only way to change those is to edit the styles of .widget_polylang or add increased CSS specificity to .inner.
Basicly I would like these 4 buttons to seperate with a width of 5px between them? When I had my position as relative it worked fine but when I put it to absolute they each pile on top of each other? Why is this and does anyone know a fix? Thanks.
Code:
#content
{
position: absolute;
top: 220px;
left: 505px;
width: 860;
height: 560px;
}
#content ul li
{
text-decoration: none;
position: absolute;
margin-right: 2px;
font-family: "Arial Black";
padding: 10px;
width: 180px;
text-shadow: 1px 1px 1px #000;
text-align: center;
background-color: #000;
opacity: 0.5;
display: block;
}
Example (Buttons in the top left.):
From the MDN page on positioning:
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
They are piling up on top of each other because no space is reserved for them in the flow of the page.
I swear I've done this a hundred times, but for the life of me, I can't figure out why my :before pseudo-element's background is displaying behind the text but not behind the anchor's background. Thoughts?
.button {
background: tomato;
padding: 10px 30px;
margin: 20px 0;
display: inline-block;
}
.button:hover {
margin: 18px 0 22px 2px;
position: relative;
z-index: 2;
}
.button:hover:after {
position: absolute;
background: red;
top:-2px;
left: -2px;
content: "";
z-index: -10;
width: 100%;
height: 100%;
}
<a class="button" href="#">Meow</a>
Sample here: http://jsfiddle.net/cfree/hnKLr/
When you add a z-index value to an element, you create a new stacking context. Every child of that element will stack on top of it.
So when you want to place an element behind its parent, simply don't create a stacking context on the parent. You still need to use a negative z-index though, because the default stack level of the parent will be 0 (in whatever context the element is)
The ::before and ::after pseudo-elements are named a bit confusingly – they behave as if they were children of the matched element, not its siblings.
In this particular case, it seems like a box-shadow would be most appropriate:
.button:hover {
box-shadow: -2px -2px 0 red;
}
Is this the effect you were looking for?
I came across this page of a themed website that has form field labels with triangles on one side:
http://www.openblackbelt.com/app/index.php?action=profile
A triangle technique is a nice accent to break up the monotony of forms without the usual rounded border or some other getting-over-used approach.
The only problem is, I can't seem to actually determine how the triangular accenting is done. I don't see any use of :before or :after, and there is only one html element <label> involved as far as I can tell. Can anyone do a breakdown of how to perform this technique on my own?
It's nothing but a small div positioned relative containing absolute positioned div using CSS Triangles. I've made a demo from scratch, you can check this out.
Demo
div {
height: 30px;
width: 200px;
background: #f00;
position: relative;
}
div span {
height: 0;
width: 0;
display: block;
position: absolute;
right: -30px;
border-bottom: 30px solid #f00;
border-right: 30px solid transparent;
}
If you want to save an element, you can use :after pseudo(won't work in IE), you can try this
Demo
div {
height: 30px;
width: 200px;
background: #f00;
position: relative;
}
div:after {
height: 0;
width: 0;
display: block;
position: absolute;
right: -30px;
content: " ";
border-bottom: 30px solid #f00;
border-right: 30px solid transparent;
}
No span tag required here.
Explanation: I am just using an absolute position element with a height and width set to 0 and am using borders around the element, making one a transparent, thus creating that triangle shape. And than I use right to position it correctly.
They do it by giving it a border-bottom:24px; and border-right:24px; by positioning the div absolute
#feitla is on the right path, #Kzqai specific what you asked for is achieved as below:
CSS:
.contact-form label {
border-right: 24px;
}
HTML:
<label for="openbb_username">Enter your email address</label>