I'm trying to move the green link so that it's sitting on the line like the span. This is my HTML
<div class="adminpanel-span" id="approved-users">
<span>Approved Users</span>
Download List
</div>
This is my CSS
.adminpanel-span {
font-size: 36px;
border-bottom: 1px solid #777777;
padding-bottom: 10px;
}
I've looked at other posts and found how to get it to the right, but I couldn't find how to bring it down to the line. How can you position the link on the line?
.adminpanel-span {
font-size: 36px;
border-bottom: 1px solid #777777;
padding-bottom: 10px;
position: relative;
}
.adminpanel-span > a{
position: absolute;
bottom: 0px;
right: 0px;
}
<div class="adminpanel-span" id="approved-users">
<span>Approved Users</span>
Download List
</div>
Try to use postion: absolute and position: relative
Related
I'm trying to attach a click element only on the :after pseudo-element on the following fiddle:
<div class="tag deletable", style="style")>
Tagname
</div>
.tag {
display: inline-block;
background: white;
padding: 3px 6px;
line-height: 1em;
border-radius: 4px;
font-size: 12px;
border-right: 5px solid;
}
.deletable {
border-right: 18px solid;
position: relative;
}
.deletable:after {
content: "\D7";
position: absolute;
color: white;
right: -12px;
top: 3px;
font-size: 12px;
cursor: pointer;
}
https://jsfiddle.net/x2ztqdbm/
But it seems that is not possible. Is there a way to achieve that?
If not, can someone help me rewriting the HTML code in order to not use a pseudo-element? It's important that the :after section never breaks to the next line.
Thanks in advance.
Try This
HTML
<div class="tag deletable", style="style")>
Tagname
<span class="wrong">x</span>
</div>
CSS
.tag {
display: inline-block;
background: white;
padding: 3px 6px;
line-height: 1em;
border-radius: 4px;
font-size: 12px;
border-right: 5px solid;
}
.deletable {
border-right: 18px solid;
position: relative;
}
.wrong {
position: absolute;
color: white;
right: -12px;
top: 3px;
font-size: 12px;
cursor: pointer;
}
Preety much the same. use a font-awesome icon in place of 'x'
Link for reference
Pseudo elements (as far as I know) are not part of the DOM, so you can't attach events to them. However, why not using an inline element like a tag or something like that? It would be even easier...
You can attach a click event to a pseudo element using the pointer-events css-rule, like this: https://jsfiddle.net/cq9yzjeb/
I'm creating tabs, where each link inside the tab list is in a div with a border - something like:
In order to hide the bottom border of the tabset below the selected tab, I'm adding a pseudo element (:after) that is the full width of the link, and whose height is the same as the bottom border (2px), and also has a bottom value of negative the border height (-2px). I'm running into an issue where, depending on the position (bottom value) of the pseudo element, its rendered height changes. If I set its height to 2px, it fluctuates between 1px and 2px, and does this every 2px when moving its position.
For example, at bottom: 3px, it looks like this (I've made the background red for illustration purposes):
But then if I set bottom: 2px, I get this:
I see this behavior on both firefox and chrome. Here's a codepen illustrating.
And here's an inline snippet of the same code:
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
a:after {
content: "";
position: absolute;
z-index: 1;
height: 2px;
left: 0;
right: 0;
bottom: 2px;
background: red;
}
a.tab2:after {
bottom: 3px;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
What's going on?
I don't know if it's still relevant or not, but I run into the same problem and I couldn't find any solution online so I came up with my own - I think this problem related either with float size of the parent element, either with something else.
But adding "transform: scaleY(1.0001);" to your pseudo-element seems to work for me
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
a:after {
content: "";
position: absolute;
z-index: 1;
height: 2px;
left: 0;
right: 0;
bottom: 2px;
background: red;
transform: scaleY(1.0001);
}
a.tab2:after {
bottom: 3px;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
Most likely your browser is zoomed in on the page. Make sure that you're viewing the page at 100% size by clicking ctrl + 0 and see if the height still changes with the position.
Other than that, if I understand correctly what you want to achieve, you're making things much more complicated than needed.
Firstly, unless you have a reason, the link-container divs are not needed. You can just put the links directly as childs of the main-container div and add borders to them directly.
Secondly, you can just use border-bottom and set it to whatever you like.
Why don't you just do it like this: Remove the pseudo element completely and reduce the border to three sides:
.link-container {
display: inline-block;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
Here it is in your snippet:
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
I'm using this hover effect for buttons, but in a few cases when the height changes, the top remains the same and the bottom moves up, instead of vice versa like it should. How can I make sure it always goes in the correct direction?
jsfiddle
.button {
box-sizing: border-box;
display: inline-block;
width: 215px;
height: 55px;
color: white;
font-family: $arial;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(43, 36, 36, 0.35);
letter-spacing: .1em;
border-radius: 3px;
position: relative;
background: #009ee0;
border: 1px solid #148fc6;
border-bottom: 4px solid #148fc6;
}
.button:hover {
border-bottom: 1px;
height: 53px;
}
.button span {
position: absolute;
width: 90%;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-43%);
line-height: 1.2;
}
div {
padding: 20px 5px;
}
<div>
<a href="#" class="button">
<span>Wrong way</span>
</a>
</div>
<div>
<a href="#" class="button">
<span>I work fine</span>
</a>
<a href="#" class="button">
<span>I work fine</span>
</a>
</div>
You're reducing the height from 55px to 53px. That 2px has to go somewhere. The top button is just collapsing it. (The bottom two are doing the same, it just doesn't look like it because they are being affected by vertical text alignment). change your hover rule to this to accommodate for the height loss.
.button:hover {
border-bottom: 1px;
margin-top: 2px;
height: 53px;
}
https://jsfiddle.net/exd6hhvz/
I was able to make it work consistently by adding margin-top: 2px; to .button:hover
Here's an example: https://jsfiddle.net/vf03czp5/
I want to make a vertical menu with submenu's and the submenu have to go next to the parent div.
Hope you guys know how to do that, I did a look on google but only found results like 2 divs next to eachother. But I need that the child div have to get next of it.
My code for now:
HTML
<div id="menuCont">
<div class="menuItem">
Applicatie Ontwikkeling
<div class="subMenuCont">
<div class="subMenuItem">HTML</div>
<div class="subMenuItem">CSS</div>
<div class="subMenuItem">jQuery</div>
</div>
</div>
<div class="menuItem">
Netwerk Beheer
</div>
<div class="menuItem">
Server Beheer
</div>
</div>
CSS
#menuCont {
width: 17.5%;
text-align: center;
}
.menuItem {
width: 100%;
padding: 1em;
background-color: #ffffff;
color: #000000;
font-family: Lato;
font-size: 125%;
border: 1px solid #7266ff;
border-bottom: 0;
cursor: pointer;
}
.menuItem:first-child {
border-top-left-radius: 1.5em;
}
.menuItem:last-child {
border-bottom: 1px solid #7266ff;
border-bottom-right-radius: 1.5em;
}
.menuItem:hover {
background-color: #7266ff;
color: white;
}
.subMenuCont {
/*display: none;*/
position: relative;
/*left: 100%;*/
/*width: 90%;*/
}
.subMenuItem {
border: 1px solid #7266ff;
border-bottom: 0;
}
.subMenuItem:last-child {
border-bottom: 1px solid #7266ff;
}
Do you need any more info, please say it. for now I don't know what to give as more info.
In your CSS Code I changed the position element to absolute, that allows you to place the element exactly where you want:
.subMenuCont {
position: absolute;
top:0;
left: 17.5%;
width: 17.5%;
}
The left arrows displayed next to each carousel block div are missing the tip, unsure what else in the css is required to make it a complete triangle.
Live URL: http://bit.ly/1e5wZWQ (next to the large image. the information carousel)
HTML
<ul id="index-controls">
<li><div id="one" class="active indexcarouselcontrol">FREE DISC Profile</div>
<ul>
<li><h2>Training that fits like a glove</h2></li>
<li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
</ul>
</li>
<li><div id="two" class="indexcarouselcontrol">Last Minute Availability</div>
<ul>
<li><h2>Training that fits like a glove</h2></li>
<li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
</ul>
</li>
<li><div id="three" class="indexcarouselcontrol">Bespoke Training</div>
<ul>
<li><h2>Training that fits like a glove</h2></li>
<li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
</ul>
</li>
</ul>
CSS
#index-controls div { display: block; background-color: #222424; font-weight: bold; margin: 0px; cursor: pointer; padding: 19px 20px 20px 20px; border-bottom: 1px solid #47839C; color: #fff; font-size: 1.1em; }
#index-controls div:before {
content: ' ';
position: absolute;
top: 100%;
left: -45px;
position: relative;
width: 0;
height: 0;
border-top: 19px solid transparent;
border-bottom: 20px solid transparent;
border-right: 25px solid #47839C;
}
The :before pseudo element give position:absolute and the parent of :before #index-controls div give position:relative and set top and left value as your need
try this:
#index-controls div {
display: block;
background-color: #222424;
font-weight: bold;
margin: 0px;
position: relative;
cursor: pointer;
padding: 19px 20px 20px 20px;
border-bottom: 1px solid #47839C;
color: #fff;
font-size: 1.1em;
}
#index-controls .active:before {
content: ' ';
position: absolute;
top: 0px;
left: -25px;
width: 0px;
height: 0px;
border-top: 19px solid transparent;
border-bottom: 20px solid transparent;
border-right: 25px solid #47839C;
}
Notice in your CSS you are overriding the absolute position with a relative position declaration.
The :before pseudo-element should be positioned absolutely to the relatively positioned div.
Then the CSS should be amended to:
media="screen"
#index-controls .active:before {
content: ' ';
position: absolute;
top: 0%;
left: -27px;
width: -0px;
height: 0px;
border-top: 27px solid transparent;
border-bottom: 27px solid transparent;
border-right: 27px solid #47839C;
}
The 27px is required because the div height is 54px (incluing padding).
Change font-size to 0em. See below:
#index-controls div {
display: block;
background-color: #222424;
font-weight: bold;
margin: 0px;
cursor: pointer;
padding: 19px 20px 20px 20px;
border-bottom: 1px solid #47839C;
color: #fff;
font-size: 0em;
}