I've been working on positioning a button for a web app and ran into some difficulty.I've created this jsfiddle, which demonstrates the problem.
The code is taken out of context, so some of the rules and classes and such may not make sense, but the problem I'm having is the same. The button moves away on click and I can't seem to fix it when playing with the position. I want the button to stay in the same place when clicked, so that clicking on the button will actually take you to the link that it is referencing.
Any Ideas?
Thanks.
You are specifying the link move to 1px from the top of the page in the rule .back:active (what happens when you click down on an item.)
http://jsfiddle.net/3dk48/8/
a.back:active {
/* This breaks it.
position: inherit;
top:1px; */
color: black;
}
In addition, if you want to still have :active effects, you need to have the correct specificity (currently a.back:link rule overrides your color for :active, but if you correctly update the specificity you can fix that. As well as link rule positioning in the LV(f)HA order (LoVe HAte mnemonic, plus focus lol) will ensure your pseudoclasses work properly.)
The LoVe-f-HAte mnemonic:
a:link { ... }
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }
... ensures that the correct states override the correct other states.
Remove the below code from .back style
position: absolute; // not need
margin-left: 2%; // not need
then the problem can solved.
EDIT:
also make change here..
.back:active {
/* position: absolute;
top: 1px; */
color: black;
}
fiddle: http://jsfiddle.net/3dk48/9/
use this:
.back{
top:32px !important;
}
body{
position:relative;
}
Related
In the documentation, there is an example that looks like this:
Nav with a separator between header actions.
But I can't for the life of me figure out how the separator gets added and none of the code examples on the page show an example of it.
Any help would be appreciated, thank you.
I'm not sure which demo that is from (would be helpful to provide a link to make sure I can see what it is). However, some elements automatically add it instead of it being explicitly defined as a standalone element, such as the first .header .header-nav .nav-link element will use the ::before CSS selector to place that line. If you need to put something explicitly, then you'll have to add it yourself.
I hade the same problem upon seeing the provided examples. When reading the sources a divider is only defined for .header-nav elements (https://github.com/vmware/clarity/blob/master/src/clr-angular/layout/nav/_header.clarity.scss) and not for .header-actions.
However you could customize .header-actions .nav-link in the following way:
#import "../node_modules/#clr/ui/src/utils/components.clarity";
#import 'node_modules/#clr/ui/src/layout/nav/header.clarity';
.header-actions {
&:last-child {
& > .nav-link:last-child::after {
content: none;
}
}
.nav-link {
&:last-of-type {
position: relative;
}
&::after {
#include header-section-divider();
left:auto;
right:0;
}
&:last-of-type::after {
left: 0;
}
&.active:last-of-type::after {
content: none;
}
}
}
I've been trying to hide everything apart from the main content on the following Facebook post
I've been injecting the following css without luck - can someone please help?
html body * {
display:none;
}
#contentArea {
display:block;
}
Below is a screenshot of what I'm after.
With body * you are hiding every child.
With #contentArea you are showing this block, but still - body * persist for child elements AND parent elements.
You have to specify much more rules to hide everything else.
As mentioned before, you cannot display an element which has a parent that was hidden. Anyway, Facebook's layout is simpler than I thought, all you have to do is hide two elements: the header and sidebar. This of course assumes that a user is not logged in.
Inject this CSS
#pagelet_bluebar, #rightCol {
visibility: hidden;
}
Result:
Result (user logged in):
To hide the chat sidebar, you can add #pagelet_sidebar to the CSS.
#pagelet_bluebar, #rightCol, #pagelet_sidebar {
visibility: hidden;
}
To conclude: Hide the main parts instead of everything, or use jQuery to target all except your element as suggested by #MaVRoSCy.
Thanks everyone - the following seems to be the combination of everyone's answers:
#leftCol, #pagelet_bluebar, #rightCol, #pagelet_bluebar {
visibility: hidden !important;
display: none !important;
}
html ._5vb_.hasLeftCol #contentCol {
border-left: initial !important;
margin-left: initial !important;
padding-left: initial !important;
padding-top: initial !important;
}
._5vb_, ._5vb_ #contentCol {
background: none !important;
}
I've managed to change the Logo the way I want it using Logo using CSS but I'm struggling to figure out how to change the hover color of it.
I want to change the TEST color on hover from blue to something else
http://test.peterstavrou.com/
At the moment my CSS code is
header#top #logo {
letter-spacing: 2px;
font-size: 35px;
}
your Logo-Text is a link so you should use css-syntax for styling links:
a#logo:link { color: #fff; } /* a Link that has not been clicked yet */
a#logo:visited { color: #fff; } /* a link that has been clicked before */
a#logo:hover { color: #ff0; } /* a link on hover/rollover */
a#logo:active { color: #ff0; } /* a link that is just clicked */
Just do something like:
Solutions 1 Find the logo hover css and change the color property value to whatever color you want
color: red!important; /* change the property value to the color you want */
Solution 2 Create another hover CSS and force a change as shown below, if the above doesn't work
#logo:hover {
color: red!important;
}
Note: Make sure the code above is at the very bottom of your css file. that way, it will override the previous hover property defined, even if it has important
Add this below the code for header#top #logo { ... } that your sample is showing in the CSS.
header#top #logo:hover
{
color:red;
}
I am building a webapp in .net using some of the AJAX features; in this case it is TabContainer.
Below is a screenshot of the area I want to play with.
The menu on the left is the tabs of TabContainer. The right side is tab's content. I would like to have the "Update PCR" button to be right underneath "Disciplines Affected". The problem is that the left and right side are a part of ONE block, which is TabContainer.
Are there any suggestions to how would I format the CSS of the Button to align right underneath TabContainer's menu? I could add the button as a part of the menu but, then I would have to set the control to AutoPostback, which defeats its purpose in this case in the first place... Any suggestions would be appreciated!
EDIT:
Here is the existing CSS
.ajax_tabController .ajax__tab_tab
{
background-color: #3c6f91;
padding: 5px;
border: 1px solid #ffffff;
color:#ffffff;
border-left: 3px solid #5AB0DB;
}
.ajax_tabController .ajax__tab_hover .ajax__tab_tab
{
background-color:#5AB0DB;
text-decoration:none;
}
.ajax_tabController .ajax__tab_active .ajax__tab_tab
{
background-color:#5AB0DB;
text-decoration: underline;
}
Also, there is CSS that overrides some settings to make TabContainer Vertical instead of Horizontal. I know, that there is a property .UseVerticalStripPlacement but it messes up with the height of the control and throws a JavaScript error.
.ajax__tab_header
{
float: left;
}
.ajax__tab_body
{
margin-left: 160px;
}
.ajax__tab_outer
{
display: block !important;
}
.ajax__tab_tab
{
width: 210px;
height: auto !important;
}
You need to position the top of the button relative to the bottom of the tab elements. This can be done with jquery. See How to position one element relative to another with jQuery?
It's going to be a bit hit and miss, but try something along the lines of:
.updatePcrButton {
position: absolute;
top: 100px; /* These will be whatever the measurement is to */
left: 5px; /* be directly under the last element */
z-index: 99; /* Arbitrary amount to put it above any other elements */
}
This is pretty messy to be honest - it relies on your not changing the position of the control thereafter.
Perhaps a better way would be to add an extra tab to the TabContainer and handle any Tab clicks yourself.
-- Edit -- May be more useful --
Nikita, I had completely forgotten about this as it was in an old Classic ASP app of mine, but you could try these two JS functions that are probably more useful to you:
function curTop(obj){
rv = 0;
while(obj) {
rv += obj.offsetTop;
obj = obj.offsetParent;
}
return rv;
}
function curLeft(obj){
rv = 0;
while(obj) {
rv += obj.offsetLeft;
obj = obj.offsetParent;
}
return rv;
}
They pull the position from the specified object. If you add the height of the button that you want to position under then you may find this improves the location for you and prevents any funny business with CSS.
Kind regards,
Westie.
I have the following CSS for my print style:
* {
display:none;
}
#printableArea {
display:block;
}
I expected this to hide all elements, and only show the printableArea, however everything gets hidden. In print view, all I get is a blank page.
I have it included properly in the HEAD, with media="print" on this particular stylesheet.
If an element is not displayed, then none of its children will be displayed (no matter what their display property is set to).
* matches the <html> element, so the entire document is hidden.
You need to be more selective about what you hide.
You're taking the right general approach, but you want to use visibility: hidden instead of display: none so that you can set child elements to be visible.
See Print <div id=printarea></div> only?
html body * {
display:none;
}
#printableArea {
display:block;
}
Also, you may need an !important on #printableArea, but probably not.
Answering because I found this question while searching for this
Instead of 'display: none' you can use :
* {
visibility: hidden;
margin:0; padding:0;
}
#printableArea * {
visibility: visible;
}
source : https://www.concrete5.org/community/forums/5-7-discussion/need-to-print-a-certain-div-and-ignore-everythign-else-on-the-pa
You might try popping it up on top of everything. This solved 90% of my problems, then I just had to make a .noprint class and add it to a few straggling elements.
.print_area{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 9999;
background-color: #ffffff;
}
If you want to use JavaScript, you can try this simple snippet that doesn't even require jQuery:
document.body.innerHTML=document.getElementById('printableArea').innerHTML;
make a div wrap everything after the body tag. Before the wrap div, put the visible item's div.
I had to do this to make a simple username-password page, and needed to hide everything, except the half-opaque sign-in form's background. So, after the correct credentials were typed in, the form would animate out, and the half-opaque page cover would animate out, and finally, EVERYTHING aside would show up and you could use the page normally.
There is a one-line solution:
With JQuery
var selector = '';
$(document.head).append($('style').text('*{visibility:hidden}' + selector + '{visibility:visible}'));
Without JQuery
var selector = '';
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' });
In both examples, set the selector variable to the selector you want. For example, div#page:hover or p.class1,p.class2
#media print {
* {
visibility: hidden;
}
/* Show element to print, and any children he has. */
.svgContainer, .svgContainer * {
visibility: initial;
}
}
Make sure any children elements are also visible. Remember that invisible elements still influence positionning of other elements in the page. In my (simple) case, I just added position: fixed; on .svgContainer (somewhere else).
Simply you can use the following code and assign "hide" class to that specific element you dont want to display on print page
<style type="text/css" media="print">
img
{
display:none;
}
.hide
{
display:none;
}
</style>
There is another clean way to achieve this:
* {
visibility: hidden;
}
#printableArea {
visibility: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
That way you're going to get only the #printableArea element in the print view and all of the other elements will be hidden.