I have a Codepen here that works fine as a pen.
https://codepen.io/Teeke/pen/jObBBrO
When I move it to a Codepen project, or deploy to surge, the CSS partially breaks. The centered text moves to the left. I included a CSS normalize script and other libraries in head
.top-bar.scrollNav {
background: #ffffff;
opacity: 0.92;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
border-bottom: 1px solid rgba(200, 200, 200, 0.8);
}
.top-bar.scrollNav .menu li, .top-bar.scrollNav .menu li a {
color: #555;
}
The pen misaligns when deployed:
https://i.imgur.com/CA7dt5X.png
It should look like this (text centered):
https://i.imgur.com/ID3kXnU.png
What is causing the CSS to misalign in a Codepen project or Surge?
Codepen project if anyone's interested:
https://codepen.io/Teeke/project/editor/ZnwVdJ#0
You're loading your CSS wrong:
<script src="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css"></script>
That should be:
<link rel="stylesheet" type="text/css" href="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css" >
Related
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.
I'm experiencing an issue with the css transitions firing on page load. Basically there were a problem with fancy links with custom background dropping from the top(start position) on the page load.
You can see example here.
These problems only occur if there is both input and a tags on the page so if we remove input everything will be just fine. The other way to solve this problem is not to use an external css file: it works fine with jsbin, but it isn't really helps because I want to understand why this things could ever be happening.
I have the following code:
HTML:
<head>
<link rel="stylesheet" type="text/css" href="signin.css">
<title>Dobrotech</title>
</head>
<body>
<input type="password" name="password" required=""/>
forgot password?
</body>
CSS:
a{
padding: 0 0 5px 0;
background: url(/dobro.tech/images/link.jpg) repeat-x bottom;
background-size: 70% 5px;
text-decoration: none;
}
a:hover {
background: url(/dobro.tech/images/activelink.jpg) repeat-x bottom;
background-size: 70% 12px;
}
a {
transition: background-size 0.5s ease-in, background 0.5s ease-in;
}
a:hover {
transition: background-size 0.1s linear, background 0.1s linear;
}
UPDATE: I've decided to remake this link effect using ::before pseudoclass and the problem is gone but I still want to figure out what cause links and inputs interact that weirdely
try this
a{
padding: 0 0 5px 0;
background: url(dobro.tech/images/link.jpg) repeat-x bottom;
background-size: 70% 5px;
text-decoration: none;
}
a:hover {
background: url(dobro.tech/images/activelink.jpg) repeat-x bottom;
background-size: 70% 12px;
}
i remove first / from background url
download my sample
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 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;
}
This website is based on wordpress
http://www.gear-rat.com/
How can I get that image effect can anyone help me? in HTML5 and CSS3
I just started web design and am still learning by copying good websites so I can get handy with web design, ofc I'm not selling them or anything illegal
That effect is done with the following code:
JavaScript:
jQuery(document).ready(function() {
function tz_overlay() {
jQuery('.post-thumb a').hover( function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 1 }, 200);
}, function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 0 }, 200);
});
}
tz_overlay();
});
CSS:
.post-thumb a span.overlay
{
background: rgba(0, 0, 0, 0.8);
position: absolute;
width: 100%;
height: 60%;
display: block;
line-height: 20px;
z-index: 5;
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
text-align: center;
padding-top: 40%;
color: #ada89c;
font-size: 15px;
font-weight: bold;
}
HTML:
<div class="post-thumb port-thumb">
<a href="http://www.gear-rat.com/test/portfolio/steel-riveted-box/">
<span class="overlay" style="opacity: 0;">Steel Riveted Box</span>
<img src="http://www.gear-rat.com/test/wp-content/uploads/2013/06/boxthumb1.jpg" alt="Steel Riveted Box" style="opacity: 1;">
</a>
</div>
How I found the code:
I looked at the images and noticed they all had a class called overlay, so I looked in the .js files for any mention of overlay and saw it being used in the tz_overlay function. So I copied that function and the div surrounding an image to my website. When I opened a page with that div in it, it worked like that website so I know I had it.
It is a good idea to look around for specific indicators like that when trying to find out how something works on a website.
You can solve this with only html and css3, you don't need javascript or a javascript library.
<html>
<head>
<title>hello world</title>
<style type="text/css">
div#tmp{
background-color: #A36333;
height: 100px;
width: 100px;
}
div#tmp div{
background-color: #000000;
height: 100%;
width: 100%;
color: #ffffff;
line-height: 100px;
vertical-align: middle;
text-align: center;
opacity: 0.0;
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
-ms-transition: opacity 0.2s linear 0s;
-moz-transition: opacity 0.2s linear 0s;
}
div#tmp div:hover{
height: 100%;
width: 100%;
opacity: 0.6;
}
</style>
</head>
<body>
<div id='tmp'>
<div>hello world</div>
</div>
</body>
</html>
The transition property defines how elements in html change.
http://www.w3schools.com/css/css3_transitions.asp
To alter an element by mouse over you can use the css :hover selector in css.
http://www.w3schools.com/cssref/sel_hover.asp
Check out this fiddle:
http://jsfiddle.net/5tmt98sk/
Visit the JS Fiddle page
When you are on the jsfiddle page, put your mouse over the image
The website you looked at does the same thing, but there image is the same image, but they photoshop it to be darker, and the photoshop some text on to it.Same concept =)