Need the Portfolio and Services buttons turned around to lie horizontally and in line with the About Us and Contacts buttons.
I can provide the CSS if needed.
Preview of what the website looks now:
very confusing
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="icon" href="images/favicon.ico">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script>
</script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home? strong textocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<link rel="stylesheet" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body class="page1">
<!--==============================header=================================-->
<header>
<div class="container_12">
<div class="grid_12">
</div>
<div class="grid_4">
<div class="port"><div>
<a class="link_img" href="index-2.html"><img src="images/page1_img1.jpg" alt="">
<span></span></a>
About Us
</div>
</div></div>
<div class="grid_4"><h1><a href="index.html"><img src="images/logo.png" alt="Brand
Identity"></a></h1></div>
<div class="grid_4 fright">
<div class="port">
<a class="link_img " href="index-2.html"> <img src="images/page1_img2.jpg" alt="">
<span></span></a>
Contacts
</div>
</div>
<div class="clear"></div>
<div class="port1">
<div class="grid_12">
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img3.jpg" alt="">
<span></span></a>
Portfolio
</div>
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img4.jpg" alt="">
<span></span></a>
Services</div>
</div>
</div>
<div class="port2">
<div class="grid_12">
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img5.jpg" alt="">
<span></span></a>
Work for PixelMi<sup>2</sup>
</div>
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img6.jpg" alt="">
<span></span></a>
Blog</div>
</div>
</div>
</div>
<div class="ic"></div>
</header>
<footer>
<div class="container_12">
<div class="grid_12">
<div class="socials">
</div>
<div class="copy">
</div>
</div>
</div>
</footer>
</body>
</html>
Related
I am a beginner. I have been following a course for less than a week. I wanted to add credits for the images I used which was not a step in the tutorial. I added a footer and now there is a gap between it and the rest of the div elements. I have searched and the only thing that worked for me was
* {
padding: 0px;
margin: 0px``
}
but this messed up some of the rest of the page. I have tried adding margin 0 and padding 0 to many things but no luck. I am sorry if this has been answered before but I do not know what to search for. I have looked on chrome and the gap seems to have something to do with the body but I have set the padding and margin to 0.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#300&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="images/cloud.png" alt="cloud-img">
<h1>I'm Matthew</h1>
<p>
A programmer???
</p>
<img class="bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middle-container">
<div class="profile">
<img src="images/photo.png" alt="portrait">
<h2>Hello.</h2>
<p></p>
</div>
<hr>
<div class="skills">
<h2>My Skills.</h2>
<div class="skill-row">
<img class="" src="images/online-test.png" alt="computer">
<h3>Web</h3>
<p>.</p>
</div>
<div class="skill-row">
<img class="" src="images/france.png" alt="flag">
<h3>French Learner</h3>
<p></p>
</div>
</div>
<hr>
<div class="contact-me">
<h2>Get In Touch</h2>
<h3>PLease email if you have any questions</h3>
<p>I look forward to hearing from you.</p>
<a class="btn" href="mailto:">CONTACT ME</a>
</div>
</div>
<div class="bottom-container">
<a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a>
<a class="footer-link" href="https://twitter.com">Twitter</a>
<a class="footer-link" href="https://www.appbrewery.co/">Website</a>
<p>© Matthew Osborne.</p>
</div>
<footer>
Computer icons created by Freepik - Flaticon
French icons created by IYAHICON - Flaticon
</footer>
</body>
</html>
Just set the overflow of the bottom container to auto. This removes the unnecessary margin caused by the p tag. p { margin: 0; } works too
.bottom-container {
overflow: auto;
background: pink;
}
footer {
background: yellow;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#300&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="images/cloud.png" alt="cloud-img">
<h1>I'm Matthew</h1>
<p>
A programmer???
</p>
<img class="bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middle-container">
<div class="profile">
<img src="images/photo.png" alt="portrait">
<h2>Hello.</h2>
<p></p>
</div>
<hr>
<div class="skills">
<h2>My Skills.</h2>
<div class="skill-row">
<img class="" src="images/online-test.png" alt="computer">
<h3>Web</h3>
<p>.</p>
</div>
<div class="skill-row">
<img class="" src="images/france.png" alt="flag">
<h3>French Learner</h3>
<p></p>
</div>
</div>
<hr>
<div class="contact-me">
<h2>Get In Touch</h2>
<h3>PLease email if you have any questions</h3>
<p>I look forward to hearing from you.</p>
<a class="btn" href="mailto:">CONTACT ME</a>
</div>
</div>
<div class="bottom-container">
<a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a>
<a class="footer-link" href="https://twitter.com">Twitter</a>
<a class="footer-link" href="https://www.appbrewery.co/">Website</a>
<p>© Matthew Osborne.</p>
</div>
<footer>
Computer icons created by Freepik - Flaticon
French icons created by IYAHICON - Flaticon
</footer>
</body>
</html>
If I understood you correctly, <p> has an intrinsic margin and giving the space. Please see the attachment.
Removing the margin for the <p> gives no space between your name credit and the footer.
We're having an issue with our page not working on Internet Explorer 11. However, it works fine on other browsers with no issues.
We don't know how to solve this and we've been researching on the internet on how to fix this issue however, cannot find anything which can help.
We were wondering if anyone could assist us with this.
<!DOCTYPE html>
<head>
<title>Canon UST Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> -->
<!-- Add jQuery library -->
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script src="./jquery.reel.js" type="text/javascript"></script>
<script src="raphael.min.js" type="text/javascript"></script>
<script type="text/javascript" src="mainJ.js"></script>
<script src="jquery.event.move.js"></script>
<script src="jquery.twentytwenty.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" href="default.css">
<link href="jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="twentytwenty.css">
<style type="text/css">
.forMidSec{width:100%; float: left; text-align: center;}
.marked {
background: red; width: 20px;height: 20px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
#openDiv
{
z-index:99;
}
.AF
{
display:none;
}
.innerPages .inFP
{
display:none;
}
.commonHeader
{
visibility:hidden;
}
</style>
</head>
<body>
<!---->
<div class="imainint">
<div id = "imgwrap" class="imgwrapint">
<div id="introimg" style="width:800px;height:670px;">
</div>
</div>
</div>
<!---->
<div class="progressBar">
<div class="progressImg"></div>
</div>
<div class="mainWrap">
<header class="mainHead">
<div class="wrapper clearfix modelName">
<div class="col1">
<ul class="top">
<li id ="mainli"><img src="buynow.png" alt="Buy Now" /></li>
</ul>
</div>
<div class="col3"><img src="logo_canon.png" width="70" height="15" alt="Canon"></div>
</div>
</header>
<div class="forMidSec">
<section class="wrapper clearfix h600">
<!--<span class="dtext">HTYU</span>-->
<div id="showImages">
<div id="view360wrapper">
<!-- Image 360 Deg to show here -->
<img src="360/1-1.jpg" name="view360" id="view360"/>
</div></div>
<div id="openDiv" style="display:none">
<ul class="sub-menu">
</ul>
</div>
<div id ="omni_arrow"><img src="omni-arrow.png" alt="omni-arrow" style="text-align:center"></div>
</div>
</section>
</div>
<div class="commonHeader">
<header>
<div class="wrapper clearfix modelName">
<div class="col1">
<ul class="top">
<li><img src="back.gif" alt="Back"></li>
<li id = "buyLi"><img src="buynow.png" alt="Buy Now"></li>
<li class="compareBtn">Compare</li>
</ul>
</div>
<div class="col2">
<ul class="top">
<li></li>
<li><img class="featureImg" src="" alt=""> <img src="specifications.gif" alt="Specifications" class="featureSpecs"></li>
</ul>
</div>
<div class="col3"><img src="logo_canon.png" width="70" height="15" alt="Canon"></div>
</div>
</header>
</div>
<div class="innerPages">
<div id="openCompare" class="compare-overlay">
<div class="compare-open">
<div class="compare-arrow"></div>
<a title="Close" href="javascript:void(0)" class="compare-close"></a>
<div class="compare-inner">
<div class="compare-innerTop">
</div>
<div class="compare-innerBottom">
</div>
</div>
</div>
</div>
<div id="openFeatures" class="features-overlay">
<div class="features-open">
<div class="features-arrow"></div>
<a title="Close" href="javascript:void(0)" class="features-close"></a>
<div class="features-inner">
<p>Language Text</p>
</div>
</div>
</div>
<!-- Start of auto focus Images -->
<div class="AF inFP">
<section class="wrapper clearfix bgcol3 h600">
<div class="wrapper clearfix bgcol1">
<div class="hotspot-gallery">
<div class="big-image"></div>
<div class="hotSpotImg"></div>
</div>
</div>
</section>
</div>
<!-- End of auto focus Images -->
<!-- Start of video Page -->
<div class="videoContainer inFP">
<section class="wrapper clearfix bgcol1 h600">
<div class="progressBar">
<div class="progressImg"></div>
</div>
<div class="vid">
<video width="640" id="eosVid" height="360" controls>
<source src="" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</section>
</div>
<!-- End Of Video page -->
<!-- Start of Overlap feature -->
<div class="overlapContainer inFP">
<section class="wrapper clearfix h600">
<div class="overlapCont"></div>
</section>
</div>
<!-- End of Overlap feature -->
<!-- Start of HDR Gallery feature -->
<div class="hdrGalCont inFP">
<section class="wrapper clearfix bgcol3 h600">
<div id="openEnlargeImg" class="EnlargeImg-overlay">
<div class="EnlargeImg-open">
<a title="Close" href="javascript:void(0)" onclick="document.getElementById('openEnlargeImg').style.display='none'" class="EnlargeImg-close"></a>
<div class="EnlargeImg-inner">
<img src="EOS 70D - HDR - Normal Exposure.jpg" /> </div>
</div>
</div>
<div class="image-gallery">
<div class="enlargeIcon filterImg"><img src="fullbutton.png"></div>
<div class="big-image">
</div>
<div class="captionTxt"></div>
<div class="thumbs">
<ul>
</ul>
</div>
</div>
</section>
</div>
<!-- End of Hdr Gallery feature -->
<!-- Start of Filter Gallery feature -->
<div class="filterGal inFP">
<div id="openEnlargeImg1" class="EnlargeImg-overlay">
<div class="EnlargeImg-open">
<a title="Close" href="javascript:void(0)" onclick="document.getElementById('openEnlargeImg1').style.display='none'" class="EnlargeImg-close"></a>
<div class="EnlargeImg-inner">
<img src="EOS 70D - HDR - Normal Exposure.jpg" /> </div>
</div>
</div>
<section class="wrapper clearfix bgcol1">
<div class="imgWrapper filterGalFlow"></div>
</section>
</div>
<!-- End of Filter Gallery feature -->
<!-- Start of MultiExpo feature -->
<div class="MultiExposure inFP">
<section class="wrapper clearfix h600">
<div class="multipleExpo"><img src="" alt="Multiple Exposure" style="max-width:800px; height:auto"></div>
</section>
</div>
<!-- End of MultiExpo feature -->
<div class="frameSlier inFP">
<div class="slide-img">
<div id="cycler" class="eagleSlide">
<!--<img class="active" src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" /> -->
</div>
<div class="sliderBg">
<div id="slider">
</div>
</div>
</div>
</div><!-- End of Frame Slider-->
<!-- Start of HdrSlider -->
<div class="hdrSlider inFP">
<div class="slide-img">
<div id="cycler2">
<img class="active" src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
</div>
<div id="slider2Up">
<div id="slider2">
</div>
</div>
</div>
</div><!-- End Of hdr Slider-->
<!-- Start of zoom slider -->
<div class="zoomSlider inFP">
<div class="slide-img">
<div id="cycler3">
</div>
<div id="slider3Up">
<div id="slider3">
</div>
</div>
</div>
</div>
<!-- End of zoom slider -->
<!-- Start of Dual Slider -->
<div class="dualSlid inFP">
<div class="slide-img dualSlideImg">
</div>
<div style="width:800px; height:auto; display:table; margin:-80px auto 0; padding:0; position:relative">
<div style="width:49%; display:table-cell">
<div id="slider5Up">
<div id="slider5"></div>
</div>
</div>
<div style="width:49%; display:table-cell">
<div id="slider4Up">
<div id="slider4">
</div>
</div>
</div>
</div>
</div>
<!-- End of dual Slider-->
</div>
<div id="clickLinks"></div>
<div id="videoPlayer"></div>
<div id="staticImageViewer"></div>
</body>
</html>
I am trying to put a background video on my SharePoint but instead of setting it as a background video it starts playing it and does not work. It works perfectly out of SharePoint (in browser) Need Help Please
Evidently there isn't something fundamentally wrong with my html since it renders in the browser. Are there any sharepoint html5 wizards out there who can help?
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Oryx Technologies</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/normalize.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/bootstrap.min.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/owl.carousel.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/owl.theme.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/animate.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/slicknav.min.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/responsive.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<video poster="" id="bgvid" autoplay muted loop>
<source src="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/Jon%20Hopkins%20-%20Immunity%20(Rowbyte%20Plexus).mp4.webm" type="video/webm">
<source src="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/Jon%20Hopkins%20-%20Immunity%20(Rowbyte%20Plexus).mp4" type="video/mp4">
</video>
<section class="intro" id="home">
<div class="menu-bar menu">
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="logo">
<im src="images/logo.png" alt="" title="" height="40px" style="float: left;"/>
</div>
</div>
<div class="col-md-8">
<ul class="list-unstyled" id="main-menu">
<li><a class="active" href="#home">Home</a></li>
<li>Facebook</li>
<li>Twitter</li>
<li>LinkedIn</li>
<li>Website</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Menu Ends here -->
<div class="intro-content">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 intro-image">
<img src="images/logo.png" alt="" />
</div>
<div class="col-md-8 col-sm-6 col-xs-12 intro-texts">
<h1>Welcome to Oryx Technologies Intranet Portal</h1>
<p>Explore Your Posibilities | Run With Oryx</p>
<p>Collabrative | Intelligent | Secure</p>
<ul class="list-unstyled">
<li>Human Resources</li>
<li>Finance</li>
<li>Sales </li>
<li>Technology </li>
<li>Operations </li>
<li>Marketing </li>
<li>Projects </li>
<li>Investors </li>
<li>Business Partners </li>
<li>Technology Partners</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Intro Section Ends -->
<section class="features" id="features">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 wow fadeIn">
<h2>Employee Self Services</h2>
</div>
<div class="col-md-3 col-sm-6 wow fadeInLeft">
<div class="single-service">
<p style="background:#EE3867;"><i class="fa fa-pencil"></i></p>
<h3>Submit a Leave Application</h3>
<p>Click Me</p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInLeft">
<div class="single-service">
<p style="background:#3DB39D;"><i class="fa fa-pencil"></i></p>
<h3>Claim an Expense</h3>
<p>Click Me</p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInRight">
<div class="single-service">
<p style="background:#57C7ED;"><i class="fa fa-pencil"></i></p>
<h3>Follow a Request</h3>
<p>Click Me</p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInRight">
<div class="single-service">
<p style="background:#324E5C;"><i class="fa fa-pencil"></i></p>
<h3>Submit a Petty Cash Request</h3>
<p>Click Me</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section Ends Here -->
<section class="app-screenshot">
<div class="container" id="screenshots">
<div class="row">
<div class="col-md-12 wow fadeInUp">
<h2>Case Studies</h2>
</div>
<div id="owl-example" class="owl-carousel col-md-12 wow fadeInUp">
<div><img src="images/casesstdtg.png" alt="" /></div>
<div><img src="images/ateis.png" alt="" /></div>
<div><img src="images/wadi.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
</div>
</div>
</div>
</section>
<!--Other Features Ends Here-->
<!-- App Screenshot Ends Here-->
<!--Testimonial Section Ends Here-->
<section class="clients-logo" id="clients">
<div class="container">
<div class="row">
<div id="clients-logo" class="owl-carousel col-md-12 wow slideInRight">
<div><img src="images/linkedin.png" alt="" /></div>
<div><img src="images/twitter.png" alt="" /></div>
<div><img src="images/facebook.png" alt="" /></div>
<div><img src="images/facebook.png" alt="" /></div>
<div><img src="images/skype.png" alt="" /></div>
<div><img src="images/google-plus.png" alt="" /></div>
</div>
</div>
</div>
</section>
<!-- Clients Logo Section Ends Here -->
<!-- Price List Section Ends Here -->
<!-- About App Section Ends Here -->
<!-- Get App Section Ends Here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#owl-example").owlCarousel({
items : 4,
navigation : false,
navigationText : ["prev","next"],
paginationNumbers: true
});
$("#testimonial-carousel").owlCarousel({
items : 1,
itemsCustom : true,
itemsDesktop : [1199,1],
itemsDesktopSmall : [980,1],
itemsTablet: [768,1],
itemsTabletSmall: true,
itemsMobile : [479,1],
singleItem : true,
itemsScaleUp : true,
responsive : true
});
$("#clients-logo").owlCarousel({
items : 6,
paginationNumbers : false,
navigation : false,
});
});
</script>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
// handle links with #href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
// target element id
var id = $(this).attr('href');
// target element
var $id = $(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
// top position relative to the document
var pos = $(id).offset().top;
// animated top scrolling
$('body, html').animate({scrollTop: pos}, 1000);
});
</script>
<script type="text/javascript">
// Create a clone of the menu, right next to original.
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').css('background','#000').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.
// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}
</script>
<script src="js/jquery.slicknav.min.js"></script>
<script>
$(function(){
$('#main-menu').slicknav();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6"><img src="http://placehold.it/150x150" class="img-responsive title-logo"></div>
<div class="col-md-6 text-right text-uppercase title-thin">
<h1>Trevor Cleworth</h1>
<h3>Junior Web Developer</h3>
</div>
</div>
<div class="row">
<hr>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1400x350" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>Featured Work</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
</div>
</div>
This is the code that is connected with my CSS file, the font family will work but the font weight will not, does anyone see why this is? I will link my CSS below. I have been trying to figure out the problem for about thirty minutes but I haven't been able to find anything. If somebody could please show me what the problem is I would appreciate it a ton!
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
color: #333333;
}
add #import url(http://fonts.googleapis.com/css?family=Lato); to your css sheet.
then tell me how it works, I don't have Lato font in my Windows fonts on my laptop
I'm working on a site for a client and for some reason Wordpress has stopped loading my extra css files located in side a folder called css which is inside the theme folder.
The code I've used is below
<link href="<?php echo get_template_directory_uri(); ?>/css/ MY CSS FILES " rel="stylesheet" />
The rendered HTML code:
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title> My blog</title>
<!-- Bootstrap Core CSS -->
<link href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/css/bootstrap.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Custom CSS -->
<link href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/style.css" rel="stylesheet">
<!-- Fonts from Google -->
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic|Lora:400,400italic' rel='stylesheet' type='text/css'>
<!-- Homepage Slider -->
<script src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/jquery.bxslider.min.js"></script>
<link href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/css/jquery.bxslider.css" rel="stylesheet" />
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true
});
});
</script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="//www.google-analytics.com" rel="dns-prefetch">
<link href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/img/icons/favicon.ico" rel="shortcut icon">
<link href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/img/icons/touch.png" rel="apple-touch-icon-precomposed">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Just another WordPress site">
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/www.samuraisound.co.uk\/dev\/alexiafrangakis\/php\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.2"}};
!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='aps-animate-css-css' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/plugins/accesspress-social-icons/css/animate.css?ver=1.3.1' media='all' />
<link rel='stylesheet' id='aps-frontend-css-css' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/plugins/accesspress-social-icons/css/frontend.css?ver=1.3.1' media='all' />
<link rel='stylesheet' id='normalize-css' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/normalize.css?ver=1.0' media='all' />
<link rel='stylesheet' id='html5blank-css' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/style.css?ver=1.0' media='all' />
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/lib/conditionizr-4.3.0.min.js?ver=4.3.0'></script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/lib/modernizr-2.7.1.min.js?ver=2.7.1'></script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/scripts.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/plugins/accesspress-social-icons/js/frontend.js?ver=1.3.1'></script>
<script>
// conditionizr.com
// configure environment tests
conditionizr.config({
assets: 'http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine',
tests: {}
});
</script>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top" class="home logged-in">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php">I Am Press</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">Home</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="bx-wrapper">
<ul class="bxslider">
<li><div class="blog-featured">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/05/IMG_5939-750x510.png" class="attachment-post-thumbnail wp-post-image" alt="IMG_5939.PNG" /> <div class="featured-square">
<div class="featured-title" rel="bookmark" ><a class="featured-title-class" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/travel/city-guide-istanbul/">City Guide: Istanbul</a></div>
<div class="featured-excerpt">
Over the May bank holiday I took a quick trip to Istanbul. This beautiful city is soaked in history and culture. With only three days to spend there I didn’t have much time to explore the city, therefore I have picked my favourite parts from my trip. What I did When it comes to being… <a class="view-article" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/travel/city-guide-istanbul/">View Article</a> </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
<main role="main">
<!-- section -->
<section>
<!-- Latest Section -->
<section id="about" class="latest-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Latest Stories</h1>
</div>
</div>
<div class="sec-one-wrapper">
<div class="sec-one-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/IMG_7951-825x510.jpg" class="attachment-post-thumbnail wp-post-image" alt="IMG_7951" /> </div>
<div class="sec-one-time">
<div class="latest-category">
<div class="featured-cat" style="color:#ede625;">Fashion</div> </div>
<div class="the-time">June 21, 2015</div>
</div>
<div class="sec-one-title">
<a class="sec-one-title-link" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/brown/">Brown and out</a>
</div>
</div>
<div class="sec-one-wrapper">
<div class="sec-one-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/DSC_0712-825x510.jpg" class="attachment-post-thumbnail wp-post-image" alt="DSC_0712" /> </div>
<div class="sec-one-time">
<div class="latest-category">
<div class="featured-cat" style="color:#ede625;">Fashion</div> </div>
<div class="the-time">June 18, 2015</div>
</div>
<div class="sec-one-title">
<a class="sec-one-title-link" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/boom-boom/">Boom Boom</a>
</div>
</div>
<div class="sec-one-wrapper">
<div class="sec-one-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/IMG_6153-825x510.jpg" class="attachment-post-thumbnail wp-post-image" alt="IMG_6153.JPG" /> </div>
<div class="sec-one-time">
<div class="latest-category">
<div class="featured-cat" style="color:#ede625;">Fashion</div> </div>
<div class="the-time">June 11, 2015</div>
</div>
<div class="sec-one-title">
<a class="sec-one-title-link" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/camouflage/">Camouflage</a>
</div>
</div>
</div>
</section>
<!-- Editors Favorites Section -->
<section id="services" class="editors-section">
<div class="container">
<div class="left-side">
<div class="row">
<div class="col-lg-12">
<h1>Editors Favorites</h1>
</div>
</div>
<div class="sec-two-wrapper">
<div class="sec-two-media">
<div class="sec-two-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/IMG_7951-150x150.jpg" class="sec-two-img wp-post-image" alt="IMG_7951" /> </div>
</div>
<div class="sec-two-text">
<div class="sec-two-time">
<a class="cat"><ul class="post-categories">
<li>Fashion</li></ul></a> June 21, 2015 </div>
<div class="sec-two-title">
<a href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/brown/" title="Brown and out">
</div>
<div class="sec-two-excerpt">
A simple neutral outfit can never go wrong. At the moment I am loving brown. I used to always wear shirts so I thought I’d throw on one of my old favourites. Unfortunately it is very big for me nowadays but I just can’t bring myself to get rid of it. The back of the… <a class="view-article" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/brown/">View Article</a>
</div>
</div>
</div>
<div class="sec-two-wrapper">
<div class="sec-two-media">
<div class="sec-two-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/DSC_0712-150x150.jpg" class="sec-two-img wp-post-image" alt="DSC_0712" /> </div>
</div>
<div class="sec-two-text">
<div class="sec-two-time">
<a class="cat"><ul class="post-categories">
<li>Fashion</li></ul></a> June 18, 2015 </div>
<div class="sec-two-title">
<a href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/boom-boom/" title="Boom Boom">
</div>
<div class="sec-two-excerpt">
I am absolutely obsessed with my new Boom Boom The Label dress. From the fabric to the fit it is perfect. This particular dress is called the Tamera slit back dress. It also comes without the slit at the back, however for ease of movement as it is a bodycon dress I chose to buy the… <a class="view-article" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/boom-boom/">View Article</a>
</div>
</div>
</div>
<div class="sec-two-wrapper">
<div class="sec-two-media">
<div class="sec-two-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/IMG_6153-150x150.jpg" class="sec-two-img wp-post-image" alt="IMG_6153.JPG" /> </div>
</div>
<div class="sec-two-text">
<div class="sec-two-time">
<a class="cat"><ul class="post-categories">
<li>Fashion</li></ul></a> June 11, 2015 </div>
<div class="sec-two-title">
<a href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/camouflage/" title="Camouflage">
</div>
<div class="sec-two-excerpt">
Summer is almost here! Finally, I got to wear my new Enza Costa dress. It’s a really simple ribbed jersey grey dress with a curved hem that accentuates curves. I teamed it with my favourite Adidas sliders and a camouflage jacket; after all camouflage is the new black! Jacket – Coming soon Dress Sliders <a href=”http://www.bloglovin.com/blog/13656875/?claim=2n8pkw6dgnk”>Follow… <a class="view-article" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/camouflage/">View Article</a>
</div>
</div>
</div>
</section>
<!-- /section -->
</main>
<!-- pagination -->
<div class="pagination">
<span class='page-numbers current'>1</span>
<a class='page-numbers' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/page/2/'>2</a>
<a class='page-numbers' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/page/3/'>3</a>
<span class="page-numbers dots">…</span>
<a class='page-numbers' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/page/20/'>20</a>
<a class="next page-numbers" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/page/2/">Next »</a></div>
<!-- /pagination -->
<!-- sidebar -->
<aside class="sidebar" role="complementary">
<!-- search -->
<form class="search" method="get" action="http://www.samuraisound.co.uk/dev/alexiafrangakis/php" role="search">
<input class="search-input" type="search" name="s" placeholder="To search, type and hit enter.">
<button class="search-submit" type="submit" role="button">Search</button>
</form>
<!-- /search -->
<div class="sidebar-widget">
</div>
<div class="sidebar-widget">
</div>
</aside>
<!-- /sidebar -->
<script type='text/javascript'>
/* <![CDATA[ */
var countVars = {"disqusShortname":"alexiafrangakis"};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/plugins/disqus-comment-system/media/js/count.js?ver=4.2.2'></script>
<!-- Footer -->
<section id="footer" class="footer">
<div class="container">
<div class="footer-widgets">
<div id="footer-widget-one">
</div>
<div id="footer-widget-two">
</div>
<div id="footer-widget-three">
</div>
<div id="footer-widget-four">
</div>
</div>
<hr>
<div id="footer-credits">
<div class="credits-left">© I Am Press 2015 </div>
<div class="credits-right">Beautifully hand-coded by Darius Carter</div>
</div>
</div>
</section>
<!-- Bootstrap Core JavaScript -->
<script src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/jquery.easing.min.js"></script>
<script src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/scrolling-nav.js"></script>
</body>
</html>
<!-- Dynamic page generated in 0.350 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2015-07-09 20:32:03 -->
Try as follows
href="<?php echo get_template_directory_uri().'/css/ MY CSS FILES' ?> "
It's better to use wp_enqueue_scripts function for adding custom css/js files because it loads file before custom files added in header/footer.
function add_theme_css() {
wp_enqueue_style( 'cssfile', get_template_directory_uri() . '/css/file.css');
}
add_action( 'wp_enqueue_scripts', 'add_theme_css' );