I have written a page in html and css.
Here is the page:
https://wheelertechconsulting.com/page1.html
I designed this page using chrome and when i uploaded to my website, I checked it out in firefox and noticed that that the ul li entrys in the the body div are compressed to the right.
What could be causing this error?
I found the solution, but you must correct the mistakes mentioned in my previous answer
The problem is in :
.featured-images li {
padding: 0 auto 1% 1%;
border: .2em solid black;
margin: 1%;
! height: 8em;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s ease;
background: linear-gradient(rgba(0, 255, 255, 0.8), rgba(0, 0, 255, 0.8));
}
If you comment this part of the code : ! height: 8em; the problem will be resolved.
Next image before comment ! height: 8em;
But after the comment ! height: 8em; the appearance will become as in the following
image
This part of the code is in the style file at the line 101.
You have many errors in the CSS file
There is 6 errors and 12 warnings in your CSS file.
I used the CSS online validator to discover it
Try to fix those problems, maybe solve this problem.
You can see what the problem is and what line it will be in.
Related
Fiddle:
https://jsfiddle.net/9poh0y28/1/
button.products:hover {
background-color: #fff;
color: #303030;
cursor: pointer;
border: 4px solid #0085ca;
}
For some reason in Chrome there is this weird jump when the border is added. It gets added, and then gets slightly bigger a split second afterwards. Any way to fix this?
Change your transitions from all to background-color:
-webkit-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
When you use all, all of your properties get the transitions. So your border goes from 1px to 4px, thus the weird effect.
Here's your fiddle changed
I have been trying to design a login form and the button requires a little transition effect. There is one complexity though.
Background: I originally copied this idea from here: original form.
Notice how there is no padding (left and right) on the main container, now in my demo it was critical to have padding left and this creates a problem (will explain further).
Now here's my demo:
My version of login form (don't be scared of the 108 lines of CSS code; I'll paste the code that pertains to my problem below).
So the code that's relevant to this problem is as follows.
The HTML code:
<button class="login-button"><span>SEND</span></button>
The CSS code:
.login-button{
width: 100%;
outline: none;
border:none;
cursor: pointer;
padding: 0;
margin:0;
transition:.3s;
}
.login-input , .login-button{
height: 50px;
line-height: 40px;
transition:.3s;
}
.login-button span{
display: block;
background:red;
height: 100%;
width: 100%;
left: 0;
transition:.3s;
position: relative;
}
.login-button span:before{
content: 'ok';
position: absolute;
left: 100%;
display: block;
}
.login-button:hover span:before{
content: 'OK To go now';
position: absolute;
/*left: 0%;*/
text-align: center;
display: block;
width: 100%;
height: 100%;
}
Now if I go to the CSS styling for the main container:
I.E.
.main-login{
min-width: 200px;
max-width: 400px;
background: #533e69;
margin: 100px auto;
text-align: center;
overflow: hidden;
box-shadow: 1px 1px 10px rgba(0,0,0,.2);
padding: 0 20px;
}
and take off the padding, then the problem is solved and the transition looks perfect.
The problem
My requirements are such that I need that padding, so now what happens is when you hover over the button and the span element moves left:-100%, it's still visible in the main container.
Proposed solution
I would like it if this problem can be solved in CSS only as I don't really like cluttering my doc's with JS. So how about this.
I am new to CSS, so my solution may be less elegant:
When hovered over the button, the span overs left:-100% and than if the span can be set to display:none. Sounds simple, but my limited knowledge of CSS has got me stuck here.
You need to set the background to be transparent. It's not possible for a transition to animate the display property.
Add this css code, and it should work:
.login-button:hover span{
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
transition: 2s;
background: rgba(1,1,1,0);
}
See your updated fiddle here.
Edit: I cleaned up the css a bit:
.login-button:hover span{
transition: 0.3s;
background: transparent;
}
Fiddle is here.
Transition properties are comma delimited in all browsers that support transitions:
.nav a {
-webkit-transition: color .2s, text-shadow .2s;
/* And so on... */
}
Ease is the default, so you don't have to specify it. If you really want linear, you will need to specify it, i.e. -webkit-transition: color .2s linear, text-shadow .2s linear;
Or try this
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
This is the link
I would like to change the Dribble icon within the team post types to a LinkedIn icon. I know I can do this by changing the class to fa-linkedin. The problem is I can't seem to find the source for the team posttype.
When I click appearance > editor and search for fa-dribbble (or fa-drib*) the code is nowhere to be found? I checked within all the php and html files that are there.
Can somebody help me with this?
Thanks!
The theme I am using is http://www.enginethemes.com/themes/oneengine/ (free download)
This is my website http://www.suuper.co/. The icon that I mean is visible in this print screen.
I found this reference but it does not really make me any wiser.
http://codex.wordpress.org/Post_Formats
That icon is created with the following:
The grey circle (and is found in the styles.css file):
.social-share ul.social li a
{
display: block;
width: 30px;
height: 30px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #bdc3c7;
text-align: center;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
The yellow colour is added with the following (and is found in the custom-css.php file):
.social-footer li a:hover i
{
color:#efd751;
}
The shape inside the icon is created with the following (and is found in the font-awesome.min.css):
.fa-dribbble:before
{
content: "\f17d";
}
Changing the value in content should work.
This is the working sollution.
Put the following code into your style.css file and you are done.
.fa-dribbble:before {
content: "\f0e1" !important;
}
I have the following issue with CSS :nth-child pseudo selector and I'm pretty sure I have missed something out.
index.html
<html>
<head>...</head>
<body>
<div class='selector'>first</div>
<div class='selector'>second</div>
<div class='selector'>third</div>
<div class='selector'>fourth</div>
<div class='selector'>fifth</div>
</body>
</html>
style_does_not_work.css (does not work)
.selector { background-color: #ffffff; }
.selector:nth-child(1) { background-color: #f00000; }
.selector:nth-child(2) { background-color: #ff0000; }
.selector:nth-child(3) { background-color: #fff000; }
.selector:nth-child(4) { background-color: #ffff00; }
.selector:nth-child(5) { background-color: #fffff0; }
style_that_works.css (for the proof of the selector concept)
.selector { background-color: #ffffff; }
.selector:nth-child(even) { background-color: #f00000; }
.selector:nth-child(odd) { background-color: #ff0000; }
I'm a little bit confused why :nth-child(2) does not work but :nth-child(even) does. Is there a difference or something I've missed out?
My goal is to give fixed positionned elements a dynamic offset from top while the elements are injected and removed by javascript dynamically.
Update / Additional
Unfortunately I've made a typo in the example above. But this unfortunately does not solve the real case - even I see the working JS-Fiddles (I'm really confused because of that...)
Additionally I've post some screens with the current issue:
CSS:
.notification-area {
position: fixed;
z-index: 999;
width: 500px;
height: 100%;
overflow: hidden;
}
.notification-area.top-right {
top: 25px;
right: 25px;
left: auto;
-webkit-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
-moz-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
-ms-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
-o-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s;
}
/* these lines are completely ignored */
.notification-area:nth-child(2) { margin: 125px 0px 0px 0px; }
.notification-area:nth-child(3) { margin: 250px 0px 0px 0px; }
.notification-area:nth-child(4) { margin: 375px 0px 0px 0px; }
.notification-area:nth-child(5) { margin: 500px 0px 0px 0px; }
/* this line grabs instead - I don't want to use "even", but it shows me, that the selector :nth-child() should be fine... */
.notification-area:nth-child(even) { margin: 125px 0px 0px 0px; }
You didn't close div in second .selector. Works fine:
fiddle
You missed closing tag of div in 2nd div.
Try this one :nth-child(n+1) instead of :nth-child(2)
Try changing the nth-child(n) to nth-of-type(n) since we're not working with their child nodes. I've deleted this answer before because I thought that the real problem was that you forgot to close one of your divs but you seem to haven't solve it yet so I'll post it again.
Update I implemented the CSS Reset and to no avail. The answer by Kejko also did not help and instead made it worse. (Chrome now displays it incorrect with the change in styles)
This may be the problem since I know actual tables can not be positioned relative?
.chatIcons {
display: table;
}
End Update
I was about to have my site go live after I tested how each page looked on the major browsers and ran into a problem. The problem seems to be involved with the hover effect of the icons.
In chrome the icon section appears exactly how I want it to.
In FireFox it appears the same but once one it is hovered it only effects the third icon and the .iconInfo's overlay from staying relative to the parent, instead it is doing 100% width and height of the main parent container.
In IE 10-11 it keeps everything correct but once it is hovered the "overlay" is not 100% height anymore and the height actually varies.
Here is the css pertaining to the hover:
.iconInfo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
text-align: center;
opacity: 0;
transition: opacity 0.6s ease;
-webkit-transition: opacity 0.6s ease;
-moz-transition: opacity 0.6s ease;
}
.icon:hover .iconInfo {
opacity: 1;
}
I have included a fiddle to help, Demo
Try this:
.icon {
border-radius: 5px;
display: inline-block;
padding: 15px 0;
position: relative;
vertical-align: middle;
width: 32.99%;
}
That should fix your problem.