I've added a new widget to my blog http://kasperikoski.blogspot.fi, which basically works as a menu by using "Add HTML/Script". The code is to bloggers HTML/CSS:
.menukadn {
line-height: 1;
}
a.limeka, a.limeka:visited, a.limeka:active {
font-family: 'Maven Pro', sans-serif;
font-size: 30px;
font-weight: bold;
color: #bbb;
text-decoration: none;
text-transform: uppercase;
transition: color 150ms linear;
letter-spacing: -0.090em;
}
a.limeka:hover {
color: #21a97e;
transition: color 150ms linear;
}
And to the WIDGET:
<div class="menukadn">
Facebook
<br/>
Instagram
</div>
When I try to add positioning like this,
.menukadn {
line-height: 1;
position: fixed;
}
or alternativly to the widget DIV#HTML1 to itself:
#HTML1 {
position: fixed;
}
it works perfectly at Mozilla Firefox but in Chrome my widget #HTML1 is located approximatly 800px right from where it should be (column-left-outer), just next to inner bodys left border. Any ideas that could there be some other code causing contradiction?
Try this:
For #HTML1 remove margin-left: -672px; and add left:0px
For .menukadn add margin-left: 250px
Related
I have an animated line under links. It works fine for single line links but I have some links that are separated with line breaks <br>
Is there a way to have the animated underline come out along all the lines of the link?
Thanks
body {
padding: 20px;
font-family: Helvetica;
}
a {
font-weight: bold;
color: black;
position: relative;
text-decoration: none;
}
a::before {
content: "";
position: absolute;
width: 0%;
height: 2px;
bottom: 0;
background-color: #000;
transition: all 0.2s;
}
a:hover::before {
width: 100%;
}
my link
<br><br>
this is<br>a much<br>longer link
Use gradient like below:
body {
padding: 20px;
font-family: Helvetica;
}
a {
font-weight: bold;
color: black;
position: relative;
text-decoration: none;
background:linear-gradient(#000,#000) left bottom no-repeat;
background-size:0% 2px;
transition: all 0.5s;
}
a:hover {
background-size:100% 2px;
}
/* this will give another kind of animation (all lines will animate at the same time)*/
.alt {
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
}
my link
<br><br>
this is<br>a much<br>longer link
<br><br>
<a class="alt" href="">this is<br>a much<br>longer link</a>
Related:
How to animate underline from left to right?
How can I achieve a CSS text loading animation over multiple lines?
I'm currently working with the WordPress theme evont and trying to do some custom css on the homepage. There is a button on the home page that is too low on the page so I tried doing some custom css to raise it.
Whenever I change the margin-top value, the button no longer clicks or animates. Can not seem to figure out what is causing this.
First picture is of the animation that happens when hovering, before touching any css.
Second picture is what happens when hovering, after touching the css.
Below is the code for the button that I could find:
.jx-month-small .event-ticket-btn {
font-size: 50px;
font-family: 'Oswald';
font-weight: 500;
text-transform: uppercase;
background: #000;
line-height: 1;
padding: 15px 80px 15px 30px;
margin-top:140px;
display: block;
position: absolute;
left: 82%;
width: 100%;
margin-left: -45px;
transition: .3s all ease-out;
}
.jx-month-small .event-ticket-btn:hover {
margin-left: -95px;
}
.jx-month-small .event-ticket-btn a {
color:#fff
}
.jx-month-small .event-ticket-btn a:hover {
color:#fff300
}
what about trying to add
bottom: 200px;
or
top: 80%;
something like that since its absolutely positioned.
would help to see the html code associated with it.
My button text appears on one line in safari (even after initial click) however on google chrome my button will appear on one line when you first get to the button however when you go through more posts and come across the load more button again the text is messed up. This only happens on google chrome.
when you get to the load more button the first time..
when you get to the load more button the second time..
here is my css... i've tried adding in width, although it solves the issue the button is then not centered
.elm-wrapper {
margin: 1em auto;
text-align: center;
}
.elm-button {
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
background-color: #ffffff;
text-shadow: none;
box-shadow: none;
border: none;
padding-top: 45px;
padding-bottom: 25px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 19px;
color: #848484;
outline: none;
}
.elm-button.ajax-inactive {
display: none;
}
.elm-button.is-loading .elm-button-text {
display: none;
}
.elm-loading-anim {
display: none;
}
.elm-button.is-loading .elm-loading-anim {
display: block;
}
.elm-loading-icon {
width: 1.5em;
height: 1.5em;
}
.elm-button:not(.is-loading)::before {
content: "v";
font-size:11px;
float: right;
margin: 6px 0 0 16px;
font-family: 'Days One', sans-serif;
}
Would you like to try using:
.btn {
white-space: nowrap;
text-align: center;
}
While white-space: nowrap force the text in the button to never wrap, you can also make the button display as inline-block, so you don't have to give it a specific width.
You can just use non-breaking space ( ) between words in your html. It's rough but works in any browser.
Also better to set left and right paddings inside the button.
I was able to use this hack: How can I replace text with CSS? --to replace a closing 'X' button on a lightbox from a third party library I'm using. It works great in all browsers but IE11. It seems IE hides both the element and the pseudo-element even though visibility: visible is set on the pseudo. If I toggle visibility using dev tools, they both show up.
Note: if the actual 'X' button were an actual 'X' character, I could easily style it as needed. Unfortunately, they use a symbol, so I have to resort to using this method to "replace" it with an actual X, to match the design standards of the site.
CSS for the button:
/* Hack to replace the close button text */
#_pendo-close-guide_ {
visibility: hidden;
}
#_pendo-close-guide_:after {
content:'X';
visibility: visible;
display: block;
position: absolute;
right: 6px;
top: 8px;
font-size: 17px;
font-weight: 200 !important;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
color: #444;
}
Any help would be much appreciated.
To get this working in IE, I had to use the old "text-indent: -9999px" trick:
/* Hack to replace the close button text */
#_pendo-close-guide_ {
text-indent: -9999px;
line-height: 0;
}
/* Hack to replace the close button text */
#_pendo-close-guide_:after {
content:'X';
position: relative;
right: 6px;
top: 4px;
line-height: initial;
text-indent: 0;
display: block;
font-size: 17px;
font-weight: 200 !important;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
color: #444;
}
My solution was inspired by #Tim's answer. However, I wasn't able to use text-indent due to my specific case so I used
.container {
position: relative;
left: -9999px;
}
.container:after {
position: relative;
left: 9999px;
}
and it worked in IE11 and other browsers.
I'm trying to get rid of the default select to use something more aligned to the style of my site.
I created a <button> to wrap the select. Gave it opacity: 0 and absolute positioning and sizing to make it fit the button. With some jquery i made it so that the active option appears also as the text of the button, in a <span>. It looks pretty nice.
The problem is that on chrome and safari works perfectly, on firefox instead quite not!
webkit listen to the click on the select even if it's not visible, moz don't (pretty curious about IE and opera). I really don't know how to solve this...
Here a fiddle with a reproduction of the problem:
http://jsfiddle.net/bakaburg1/YyvRf/2/
Any help is welcome.
You can use <div> instead of <button>
HTML:
<div class="btn btn-small select-container">
<select>
<option>title</option>
<option>date</option>
<option>author</option>
</select>
</div>
CSS:
.btn.btn-small{
padding-bottom: 2px;
padding-top: 2px;
color: #737373;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 14px !important;
font-variant: small-caps;
font-weight: bold;
}
.btn.select-container {
position: relative;
padding-right: 24px;
}
.btn.select-container select {
position: absolute;
top: -1px;
left: 0;
height: 117%;
width: 100%;
opacity: 0;
filter: alpha(opacity=0);
z-index: 1000;
}
select.btn {
width: initial;
height: 23px;
padding-right: 20px;
-webkit-appearance: none;
}
select.btn:focus {
outline: none;
}
.select-container {
position: relative;
}
See it here: http://jsfiddle.net/YyvRf/3/