This question already has answers here:
Any way to declare a size/partial border to a box?
(6 answers)
Closed 3 years ago.
I'm doing some work on my website, I wanted to put that border thing with ::after(I don't want to do it with border-bottom because I want to set specific width) method, unfortunately when I'm trying to set the "::after" to position "absolute", and the container of it to position "relative", but the problem is the container somehow gets the position "absolute" which I don't want it to
I tried to set inline style but it doesn't give best performance.
HTML:
<h2 class="special-heading">Our Team</h2>
CSS:
.special-heading {
position: relative
}
.special-heading:after {
content: '';
display:block;
position: absolute;
top: 10px;
left:0;
width: 40px;
border-bottom: 3px solid #333;
}
I would try this instead of top: ...px
margin-top: 10px;
But not sure!
I think you can achieve what you want to achieve by replacing the line top: 10px with bottom: 0.
I tested it in codepen and the .special-heading got the position: relative properly.
Related
This question already has answers here:
CSS 3 Shape: "Inverse Circle" or "Cut Out Circle"
(7 answers)
Transparent half circle cut out of a div
(8 answers)
Creating right curve using css3
(1 answer)
Closed 2 years ago.
In the picture you can see the Rough desired layout of SAP (rotated by 90 degrees clockwise).
My first instinct would be to split it into 3 components:
the nav-bar on top
simple div containing some text
and for the bottom I was stuck. After searching I opted for a svg path component and combined all 3 in a parent component.
Any other components will be rendered below the curve.
So far it works. But I am curious if there are other, maybe better, solutions to this (which I am sure there are).
Thanks in advance
Another way to achieve this would be to add an ::after element to the navbar with some border-radius to make the curve. Here is an example:
#navbar {
position: relative;
background-color: lightblue;
padding: 30px;
}
#navbar::after {
content: "";
position: absolute;
height: 30px;
width: 100%;
background-color: lightblue;
bottom: 0;
left: 0;
transform: translateY(50%);
border-radius: 0 0 100% 100%;
}
<div id="navbar">
Website
</div>
This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 3 years ago.
I have an issue with my css, when I log in or sign out, I have a message that displayed. The issue is that the text is displayed behind another button, to try to solve this, I thought that I could add a z-index an set it to around 20 to be sure it will be over everything but when I applied it, nothing happend and I don't know why. Here is the CSS code:
.alert-success {
z-index: 20;
background-color: #dff0d8;
border-color: #d6e9c6;
color: #3c763d;
}
.alert {
padding: 15px;
margin-bottom: 22px;
border: 1px solid transparent;
border-radius: 4px;
}
and 2 photos for you.
z-index only applies to positioned elements, and yours are not.
Set a position value other than static (you likely want relative as it has the fewest side effects).
z-index specifies the stack order of an element but z-index only works for positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).
Element with greater z-index would always be in front of element with lower z-index.
This question already has answers here:
Draw line after a title with CSS [duplicate]
(3 answers)
Closed 4 years ago.
I want to obtain a header like in the image below
I can obtained using position absolute, but this depends on the header characteristics, like margin,padding.
I'm interested to have the result below, indifferent of the header size,length , padding or margin. I need something that is supported also by older browsers like IE10, IE11.
Use :after and create there the line
Learn:https://developer.mozilla.org/en-US/docs/Web/CSS/::after
div{
color:red;
}
div:after{
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: red;
top: 20px;
margin-left: 10px;
margin-right: 4px;
}
<div>Header</div>
This question already has answers here:
Maintain aspect ratio of div but fill screen width and height in CSS?
(9 answers)
Closed 8 years ago.
If I have an element (such as div#frame) that I want to populate as much of the screen as it can while still maintaining a designated aspect ratio (such as 16:9), what styles must I apply? I am certain there are a handful of different solutions in Javascript, but I want to try an approach with only CSS.
I've searched around, and although there are already some solutions in CSS, they use a percentage padding, which is calculated by the value of the width, which means the aspect ratio is only maintained when the browser is horizontally resized, and not vertically resized.
#frame
{
/* centered */
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
position: fixed;
/* aspect ratio */
width: 100%;
height: 0px;
padding-bottom: 56.25%;
}
This works good enough, but I want a solution that will still maintain the aspect ratio of the element when resized both horizontally and vertically, as seen in the image I've embedded below.
I don't think it is possible to set the width of an element based on the height, using css properties as they were meant to be used. So you better start considering JS there ;)
There is a hack involving an image though, but it is not great. Maybe you can expand on the idea (I would still prefer JS).
You will need an image with the maximum size you want your frame to be. A transparent gif should do. Then you let the native behaviour of the image set the wrapper's size, using inline-block on the wrapper. Then you use an absolutely positioned element inside the wrapper to hold your content:
<div class="wrapper">
<img src="https://cdn.boldernet.net/0/0/856/856567-450.jpg">
<div class="content">
content
</div>
</div>
CSS:
body {
text-align: center;
}
.wrapper > img {
display:block;
max-width: 100%;
max-height: 100%;
}
.wrapper {
display: inline-block;
position: relative;
top: 50%;
}
.content {
position: absolute;
background: blue;
left: 0;
top: -50%;
width:100%;
height:100%;
}
It works in chrome , and not in ff/opera.
Demo here: http://booksnearby.in/browse_items.php . The 'location: Dhoolsiras Village, delhi' line 'hangs' in the middle. I am trying to make it stay at the bottom of its container.
For this I tried
Child span tag- {
bottom: -5px;
font-size: 11px;
left: 115px;
line-height: 20px;
position: absolute;
}
Parent:- element.style {
height: 100%;
position: relative;
}
But it doesn't work, except in chrome. Please help
Thanks.
Do you have to use a table? Because your problems come from the td element's height. Tables have the worst cross browsers support out of all the html elements :)
Is it possible to change the structure to use div elements instead?
OR you could give the position: relative to your .listtd instead of the div (which means remove the position property from the div). This solution will do the trick.