I have inserted the fonts but I can't see them. I don't know why there is no space in between the words.
<html>
<head>
<link href="app.css" rel="stylesheet" />
</head>
<body>
<header>
<div class="container">
<div id="topbar">
</div>
<nav id="main">
<img src="logo.svg" alt="logo">
<ul id="main-menu">
<li>Η ΟΜΟΣΠΟΝΔΙΑ</a></li>
<li>ΑΡΚΑΔΩΝ ΕΡΓΑ</a></li>
<li>ΕΠΩΝΥΜΟΙ ΑΡΚΑΔΕΣ</a></li>
<li>ΝΕΑ - ΕΝΗΜΕΡΩΣΗ</a></li>
<li>ΕΠΙΣΚΕΨΗ ΣΤΗΝ ΑΡΚΑΔΙΑ</a></li>
<li>ΑΝΑΖΗΤΗΣΕΙΣ ΣΤΗΝ ΑΡΚΑΔΙΑ</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
#font-face {
font-family:Proxima Nova ;
src: url(./fonts/Proxima\ Nova\ Regular.otf);
font-weight: normal;
}
#font-face {
font-family:Proxima Nova ;
src: url(./fonts/Proxima\ Nova\ Bold.otf);
font-weight: bold;
}
#font-face {
font-family: SourceSansPro ;
src: url(./fonts/SourceSansPro-Regular.ttf);
font-weight: normal;
}
#font-face {
font-family: SourceSansPro ;
src: url(./fonts/SourceSansPro-Bold.ttf);
font-weight: bold;
}
body {
margin: 0;
font-family: 'SourceSansPro-Regular', serif;
}
header {
background: url('./images/bg.png') bottom center no-repeat;
background-size: cover;
height: 750px;
}
#topbar {
height: 70px;
text-align: center;
}
nav#main {
background-color:white;
border-radius: 4px;
height: 60px;
position: relative;
}
#logo{
position: absolute;
display: block;
border: 10px solid #AB0427;
border-radius: 100%;
left: 50px;
top: 50%;
transform: translateY(-50%);
}
#logo img{
display: block;
}
.container{
width: 1360;
margin: 0 auto;
}
#main-menu{
margin: 0;
padding: 0 20px 0 320px;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
list-style: none;
}
#main-menu a {
color:#002868 ;
font size: 14px;
font-weight: bold;
}
Try Using Formats and make sure the path is correct
Note: Remove the spaces if there are no spaces is in the filename, change the backward slash into forwarding slash
#font-face {
font-family:"Proxima Nova" ;
src: url(./fonts/Proxima/Nova/Regular.otf) format("opentype");
font-weight: normal;
}
#font-face {
font-family:"Proxima Nova";
src: url(./fonts/Proxima/Nova/Bold.otf) format("opentype");
font-weight: bold;
}
#font-face {
font-family: "SourceSansPro";
src: url(./fonts/SourceSansPro-Regular.ttf) format("truetype");
font-weight: normal;
}
#font-face {
font-family: "SourceSansPro";
src: url(./fonts/SourceSansPro-Bold.ttf) format("truetype");
font-weight: bold;
}
Looks like you have backslashes in the urls of the top two. I'd check to make sure the filepath is correct, that may be part of the problem.
Additionally, you could try to add a format property like so:
#font-face {
font-family: Proxima Nova ;
src: url(./fonts/Proxima/Nova/Regular.otf) format("open-type");
font-weight: normal;
Related
.writing {
display: block;
margin-top: auto;
margin-bottom: auto;
text-shadow: 5px 5px red, 10px 10px green, 15px 15px yellow;
font-family: Niconne;
text-align: center;
font-size: 150;
}
#font-face {
font-family: "Niconne";
src: url("../fonts/Niconne-Regular.ttf") format("truetype");
/* src: url("../fonts/Niconne-Regular.woff") format("woff");
src: url("../fonts/niconne-v10-latin-regular.woff2") format("woff2");
src: url("../fonts/niconne-v10-latin-regular.eot") format("EOT"); */
}
these are my codes. it works fine now but when i put out other sources it turns back to the first point ( it doesn't work). i want to use it locally ( don't give me fontlink)
You have to add quotes to your font-family, so it will be like this font-family: "Niconne"
Updated Answer:
#font-face {
font-family: "Niconne";
src: url("../fonts/Niconne-Regular.ttf") format("truetype");
src: url("../fonts/Niconne-Regular.ttf") format("truetype"),
url("../fonts/Niconne-Regular.woff") format("woff"),
url("../fonts/niconne-v10-latin-regular.woff2") format("woff2"),
url("../fonts/niconne-v10-latin-regular.eot") format("EOT");
}
Change font-family: Niconne; to font-family: "Niconne";
.writing {
display: block;
margin-top: auto;
margin-bottom: auto;
text-shadow: 5px 5px red, 10px 10px green, 15px 15px yellow;
font-family: "Niconne"; /* **Change Here** */
text-align: center;
font-size: 150;
}
I have unsuccessfully been attempting to change the font family for my top navigation bar to Ubuntu. Currently, the text is not changing and is reverting to this default.
I have experimented with changing it to a div and improving specificity, but it's not working.
I'm not sure if it's being overwritten by the font settings I have put on top?
Would appreciate any guidance on this!
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
#importurl('https://fonts.googleapis.com/css?family=Ubuntu:400,500,700');
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700');
* {
font-family: system-ui, sans-serif;
}
* {
margin: 0;
padding: 0;
}
header {
font-family: 'Ubuntu';
}
body {
font-family: 'Montserrat';
text-align: left;
}
/*typography*/
h1 {
font-family: 'Montserrat';
font-style: normal;
font-weight: bold;
font-size: (45px+1vw);
line-height: 55px;
text-align: center;
letter-spacing: 1px;
}
h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: calc(30px+1vw);
line-height: calc(37px+1vw);
letter-spacing: 1px;
color: #FFFFFF;
}
h3 {}
ul {
list-style: inside disc;
font-family: 'Montserrat';
font-style: normal;
font-weight: normal;
font-size: calc(16px+1vw);
line-height: calc(22px+1vw);
color: #FFFFFF;
}
/* Header */
header {
width: 100%;
height: 122px;
background: #FFFFFF;
position: fixed;
}
.wrapper {
width: 90%;
margin: 0 auto;
}
.logo {
width: 30%;
float: left;
text-align: left;
line-height: 122px;
}
nav {
float: center;
line-height: 122px;
}
nav a {
font-family: 'Ubuntu';
text-decoration: none;
letter-spacing: 4px;
font-size: calc(50px+1vw);
color: #616161;
padding: 36px 10px;
margin: 0 1 px;
}
nav a:hover {
background: #F3EA65;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- <div class="box-area"> -->
<header>
<div class="wrapper">
<div class="logo">
<img src="asdf.png" alt="Logo" width="25%" ;>
</div>
<nav>
about
our team
who we help
get involved
Contact
Donate
</nav>
</div>
</header>
It is better to include the fonts link in header tag in HTML and then run.Also add space after #import in second link.
I am currently new to the community, and would love some help with a HTML site I am creating for a friend of mine.
Basicly I man creating a simple website, but I have some issues with the text not going above the footer. I check the code and tried to figure out how to solve this, but I was unable to do so.
My question is: could someone help me putting the text above the footer?
Please let me know !
body {
margin: 0 auto;
min-height: 100%;
background-color: #111;
}
h1 {
color: #fff;
position: relative;
}
h2 {
color: #fff;
text-decoration: none;
letter-spacing: 2px;
}
.x {
color: #ef3937;
text-decoration: none;
letter-spacing: 2px;
}
.container {
height: auto;
width: 100%;
}
/*-------------------------------HEADER--------------------------------*/
.headercontainer {
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
top:0px;
background-color: #111;
}
.header {
width: 95%;
margin-left: auto;
margin-right: auto;
}
.headerleft {}
.headercenter {
width: 100%;
height: 100%;
color:#f2f2f2;
}
.logo {
max-width: 200px;
margin-top: 20px;
}
.headerright {}
/*-----------------------------END HEADER------------------------------*/
/*------------------------------CONTENT--------------------------------*/
.contentcontainer {
Position: absolute;
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
background-color:#111;
}
.content {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.contenleft {}
.contentcenter {
text-align: center;
position: relative;
}
.contentright {}
/*-----------------------------END CONTENT-----------------------------*/
/*-------------------------------FOOTER--------------------------------*/
.clearfooter {}
.footercontainer {
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
position: absolute;
background-color: #111;
bottom: 20;
}
.footer {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.footerleft {}
.footercenter {
text-align: center;
font-size: 8px;
font-weight: normal;
font-family: 'Economica';
font-weight: 100;
letter-spacing: 1px;
}
.footerright {}
/*-----------------------------END FOOTER------------------------------*/
/*------------------------------ALGEMEEN-------------------------------*/
a {text-decoration: none; color: #fff;}
a:hover{text-decoration: underline;}
#font-face {
font-family: 'Champagne & Limousines';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines'), url('Champagne & Limousines.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Italic'), url('Champagne & Limousines Italic.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Bold';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold'), url('Champagne & Limousines Bold.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold Italic'), url('Champagne & Limousines Bold Italic.woff') format('woff');
}
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">-->
<title>Froluv</title>
<meta name="Froluv." content="PSD to HTML5+CSS3 conversion.">
<meta name="Froluv" content="PSD, HTML5, CSS3">
<meta name="author" content="Vivaco">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" type="text/css" href="StyleCSS.css">
</head>
<body>
<div class="container">
<!-------------------------------------------------------------------------HEADER------------------------------------------------------------------------->
<div class="headercontainer">
<div class="header">
<div class="headerleft">
</div>
<div class="headercenter">
<div class="logocontainer">
<img src="" class="logo"> <!--insert logo here-->
</div>
</div>
<div class="headerright">
</div>
</div>
</div>
<!-----------------------------------------------------------------------END HEADER----------------------------------------------------------------------->
<!-------------------------------------------------------------------------CONTENT----------------------------------------------------------------------->
<div class="contentcontainer">
<div class="content">
<div class="contentleft">
</div>
<div class="contentcenter">
<h1 style="font-family:'Champagne & Limousines';font-weight:normal;font-size:42px">“Wij organiseren events, kom je <u><b>dansen</b></u>?”</h1>
<!--Insert ticket link here-->
</div>
<div class="contentright">
</div>
</div>
</div>
<!-----------------------------------------------------------------------END CONTENT-------------------------------------------------------------------->
<!-----------------------------------------------------------------------FOOTER------------------------------------------------------------------------->
<div class="footercontainer">
<div class="footer">
<div class="footerleft">
</div>
<div class="footercenter">
<h2>
FACEBOOK <span class="x">x</span> INSTAGRAM <span class="x">x</span> SPOTIFY <span class="x">x</span> TICKETS
<span class="x">x</span> <span class="x">x</span> <span class="x">x</span> PRIVACY POLICY <span class="x">x</span> FAQ <span class="x">x</span> JOBS
</h2>
</div>
<div class="footerright">
</div>
</div>
</div>
<!---------------------------------------------------------------------END FOOTER----------------------------------------------------------------------->
</div>
</body></html>
I would avoid using absolute positioning until you have a better understanding of when and where to use it and what problems it helps to solve.
By undoing the absolute positioning you have applied, the content will be in the correct order. Though, may likely need further refinement to fit your needs.
In my example below, I have used flexbox to push the footer to the bottom of the page. You'll also notice I've removed a lot of properties that are not necessary, i.e. width: 100% for a <div> (it does this by default).
body {
margin: 0;
min-height: 100vh;
background-color: #111;
display: flex;
flex-direction: column;
}
h1 {
color: #fff;
position: relative;
font-family: 'Champagne & Limousines';
font-weight: normal;
font-size: 42px;
}
h2 {
color: #fff;
text-decoration: none;
letter-spacing: 2px;
}
.x {
color: #ef3937;
text-decoration: none;
letter-spacing: 2px;
}
.container {}
/*-------------------------------HEADER--------------------------------*/
.headercontainer {}
.header {
width: 95%;
margin-left: auto;
margin-right: auto;
}
.headerleft {}
.headercenter {
color: #f2f2f2;
}
.logo {
max-width: 200px;
margin-top: 20px;
}
.headerright {}
/*-----------------------------END HEADER------------------------------*/
/*------------------------------CONTENT--------------------------------*/
.contentcontainer {
flex-grow: 1;
background-color: #111;
}
.content {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.contenleft {}
.contentcenter {
text-align: center;
}
.contentright {}
/*-----------------------------END CONTENT-----------------------------*/
/*-------------------------------FOOTER--------------------------------*/
.clearfooter {}
.footercontainer {}
.footer {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.footerleft {}
.footercenter {
text-align: center;
font-size: 8px;
font-weight: normal;
font-family: 'Economica';
font-weight: 100;
letter-spacing: 1px;
}
.footerright {}
/*-----------------------------END FOOTER------------------------------*/
/*------------------------------ALGEMEEN-------------------------------*/
a {
text-decoration: none;
color: #fff;
}
a:hover {
text-decoration: underline;
}
#font-face {
font-family: 'Champagne & Limousines';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines'), url('Champagne & Limousines.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Italic'), url('Champagne & Limousines Italic.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Bold';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold'), url('Champagne & Limousines Bold.woff') format('woff');
}
#font-face {
font-family: 'Champagne & Limousines Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold Italic'), url('Champagne & Limousines Bold Italic.woff') format('woff');
}
<!-- HEADER -->
<div class="headercontainer">
<div class="header">
<div class="headerleft">
</div>
<div class="headercenter">
<div class="logocontainer">
<img src="" class="logo">
<!-- insert logo here -->
</div>
</div>
<div class="headerright">
</div>
</div>
</div>
<!-- END HEADER -->
<!-- CONTENT -->
<div class="contentcontainer">
<div class="content">
<div class="contentleft">
</div>
<div class="contentcenter">
<h1>“Wij organiseren events, kom je <u><b>dansen</b></u>?”</h1>
<!--Insert ticket link here-->
</div>
<div class="contentright">
</div>
</div>
</div>
<!-- END CONTENT -->
<!-- FOOTER -->
<div class="footercontainer">
<div class="footer">
<div class="footerleft">
</div>
<div class="footercenter">
<h2>
FACEBOOK <span class="x">x</span> INSTAGRAM <span class="x">x</span> SPOTIFY <span class="x">x</span> TICKETS
<span class="x">x</span> <span class="x">x</span> <span class="x">x</span> PRIVACY POLICY <span class="x">x</span> FAQ <span class="x">x</span> JOBS
</h2>
</div>
<div class="footerright">
</div>
</div>
</div>
<!-- END FOOTER -->
As advised minutes ago, just remove the position:absolute from .contentcontainer and it should work: https://jsfiddle.net/ilkovs/yqdg62fe/3/
.contentcontainer {
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
background-color:#111;
}
instead of :
.contentcontainer {
Position: absolute;
height: auto;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
background-color:#111;
}
Separate your header and footer. 1. div for header, 2. another div for content 3. footer. in your footer css, add margin-bottom:0; and margin-top: 200px; That is a quick fix, but after separating the three, you can play around the CSS to fit your design need
You should understand how to use position:absolute, if you use absolute you are taking the <Div> out of the flow of the page, so I think you should use relative positioning instead of absolute.
Then again, if you are going to use absolute, you need to specify one of these four(4) properties which are:
top, bottom, left, right, these four properties help you to move the <div> around the page anyhow you like and can help you shift your text up.
Last thing all the different types of positions all use the same four properties I mentioned
I have a H1 that is placed inside a .container div with a width of 800px. I tried giving the H1 a width also and that didn't fix it either. I can't think of any reason why this H1 wouldn't take the full width (taking it out of the .container div makes it work). Any idea what's causing this?
Thanks in advance.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" id="header-block">
<h2>Cristian M.</h2>
<h3>Product Designer</h3>
<p>Hi, I'm Cristian Moisei and I'm currently a Product Designer at <a id="screencloud-link" href="https://www.screen.cloud">ScreenCloud</a>. I formerly worked as the Lead Product Designer for <a id="glofox-link" href="https://www.glofox.com">Glofox</a> and ran a design studio, <a id="hyperion-link" href="http://www.hyperion.co">Hyperion</a>, for 4 years.</p>
<div id="extra-info">
<p>
Resume <span id="slash">   /   </span>
My Process <span id="slash">   /   </span>
Contact
</p>
<p>I live in London, UK</p>
</div>
</div>
<div id="glofox-block">
<div class="container">
<img src="Images/macbook.png">
<div id="text">
<h1 id="number">01.</h1>
<h1>Reinventing Glofox's interface for a complex user base.</h1>
<div id="view-project">
View Project
<img src="Images/arrow-white.png">
</div>
</div>
</div>
</div>
<div id="webfaction-block">
<div class="container">
<div id="text">
<h1 id="number">02.</h1>
<h1>Helping Webfaction attract a less technical audience.</h1>
<div id="view-project">
View Project
<img src="Images/arrow-black.png">
</div>
</div>
<img id="ipad" src="Images/ipad.jpg">
</div>
</div>
</body>
</html>
CSS:
#import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=b4314e71-83d8-4cc4-bd90-9ceb4a5339d0");
#font-face{
font-family:"Tisa W01 Light";
src:url("Fonts/63d98d82-cdc2-4f22-8883-bede07823185.eot?#iefix");
src:url("Fonts/63d98d82-cdc2-4f22-8883-bede07823185.eot?#iefix") format("eot"),url("Fonts/163f4b9f-d9b9-42c5-9098-d70e0016ae27.woff2") format("woff2"),url("Fonts/cc68d660-f674-409c-9be1-7f7f8bc0542a.woff") format("woff"),url("Fonts/2385d9d0-f23e-4d30-abb4-28817eda1254.ttf") format("truetype"),url("Fonts/a9d1c46b-d28d-4dab-8373-bbaf41232d7f.svg#a9d1c46b-d28d-4dab-8373-bbaf41232d7f") format("svg");
}
#font-face{
font-family:"Tisa W01 Regular";
src:url("Fonts/885a1883-0bbc-429a-91f5-c32e88a82b0e.eot?#iefix");
src:url("Fonts/885a1883-0bbc-429a-91f5-c32e88a82b0e.eot?#iefix") format("eot"),url("Fonts/36a5385d-e6c3-4aba-ad04-fa161f5c96b0.woff2") format("woff2"),url("Fonts/9b2fef91-4d32-413d-864e-4aaa363673eb.woff") format("woff"),url("Fonts/131d9e79-a2a5-4e3a-8cb9-e8acfcaa1c8a.ttf") format("truetype"),url("Fonts/419b1ef5-3ea5-43d3-8c3f-f68edc3d0a2b.svg#419b1ef5-3ea5-43d3-8c3f-f68edc3d0a2b") format("svg");
}
#font-face{
font-family:"Tisa W01 Medium";
src:url("Fonts/7901ab62-60f6-49a3-9332-359efb61e81b.eot?#iefix");
src:url("Fonts/7901ab62-60f6-49a3-9332-359efb61e81b.eot?#iefix") format("eot"),url("Fonts/785e7c0f-c445-4077-b412-1fd0a1a8ab06.woff2") format("woff2"),url("Fonts/7ee6ca7c-fe74-4640-a75d-939ea0bd637d.woff") format("woff"),url("Fonts/d76d30ec-b31a-4502-acf4-89812c16447e.ttf") format("truetype"),url("Fonts/9ce8adf1-e8ae-4095-84d3-6b2f836cd33e.svg#9ce8adf1-e8ae-4095-84d3-6b2f836cd33e") format("svg");
}
#font-face{
font-family:"Tisa W01 Bold";
src:url("Fonts/0b58340f-a8ca-4e68-8eab-bfda350b0b58.eot?#iefix");
src:url("Fonts/0b58340f-a8ca-4e68-8eab-bfda350b0b58.eot?#iefix") format("eot"),url("Fonts/02a4b96f-e988-44fe-a0e7-57ff1b610f3b.woff2") format("woff2"),url("Fonts/78d1ac04-d453-4364-8326-035a105b0865.woff") format("woff"),url("Fonts/776e5c1b-6939-4b32-9c0d-2dee7c34c7da.ttf") format("truetype"),url("Fonts/edc51787-36cf-434d-a4f1-b04139da6bfc.svg#edc51787-36cf-434d-a4f1-b04139da6bfc") format("svg");
}
/* Global */
body, a {
font-family:"Tisa W01 Light", serif;
color: black;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
border-bottom: 1px solid black;
cursor: pointer;
}
p {
font-size: 19px;
line-height: 1.8;
}
h1{
font-size: 50px;
line-height: 1.2;
margin: 0 0 40px 0;
padding: 0;
}
h2{
font-size: 30px;
margin: 0;
padding: 0;
}
h3{
font-family: "Tisa W01 Medium", serif;
font-size: 26px;
margin: -5px 0 40px 0;
padding: 0;
}
.container{
width: 800px;
margin-left: auto;
margin-right: auto;
}
#view-project{
display: inline !important;
opacity: .5 !important;
border-bottom: 1px solid white;
}
#view-project a{
font-family: "San Francisco", "Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight: bold;
}
#view-project img{
width: 15px !important;
margin: 0 0 0 5px !important;
padding: 0 !important;
float: none !important;
}
/* Intro Section */
#header-block{
padding: 140px 50px 140px 50px;
}
#extra-info{
margin-top: 40px !important;
font-size: 18px;
opacity: .4;
}
#extra-info p{
margin: 0;
padding: 0;
}
#extra-info a{
font-family: "Tisa W01 Medium", serif;
}
/* Glofox Section */
#glofox-block{
background-color: #2b4ea4;
height: 800px;
}
#glofox-block #number{
opacity: .2;
font-family: "Tisa W01 Regular", serif;
margin-bottom: 20px;
}
#glofox-block img{
z-index: 1;
width: 740px;
float: left;
margin-top: 60px;
}
#glofox-block .container #text{
position: relative;
top: -790px;
z-index: 2;
float: right;
width: 350px;
color: white;
float: right;
}
#glofox-block #view-project a{
color: white;
border: none;
}
/* Webfaction Section */
#webfaction-block #ipad{
z-index: 1;
width: 795px;
position: relative;
top: -100px;
}
#webfaction-block h1{
width: 750px;
}
#webfaction-block #text{
z-index: 2;
}
In order to fix this you need to add the following line to your CSS:
white-space: nowrap;
Please familiarise yourself with CSS whitespace parameters.
https://www.w3schools.com/cssref/pr_text_white-space.asp
I am having an issue with #font-face rule in my css.
In some stylesheets it works perfectly in others it doesn't work at all...
As you can see in the snippet I use an external file for my font but in this particular case it is not working...
Any thoughts anyone?
Endless gratitude will be your share :)
#charset "utf-8"
#font-face {
font-family: sinhala;
src: url(fonts/Sinhala.ttc);
}
#wrapperportfolio4 {
width: 45%;
float:left;
position:relative;
margin-left: 5%;
margin-top: -42.5%;
box-shadow: 3px 5px 4px 0px black;
height: 20vw;
}
#wrapper4trans {
width: 45%;
float:left;
position:relative;
margin-left: 5%;
margin-top: -42.5%;
background-color: black;
opacity: 0.5;
height: 20vw;
}
#box1title {
width: 65%;
font-family: sinhala;
font-size: 1.0vw;
color: white;
margin-top: 2%;
text-align: center;
}
#box1img {
width: 60%;
position:relative;
float:left;
margin-left: 2.5%;
margin-top: 1.5%;
}
#box1txt{
width: 25%;
position:relative;
float:left;
font-family: sinhala;
font-size: 1.0vw;
color: white;
margin-left: 5%;
margin-top: 5%;
text-shadow: 0px 2px 4px rgba(0,0,0,0.50);
}
#box1txt2{
width: 25%;
position:relative;
float:left;
font-family: sinhala;
font-size: 1.0vw;
color: white;
margin-left: 5%;
margin-top: 5%;
text-shadow: 0px 2px 4px rgba(0,0,0,0.50);
}
#box1link {
width: 25%;
position:relative;
float:left;
font-family: sinhala;
font-size: 1.0vw;
color: white;
margin-left: 5%;
margin-top: 5%;
text-shadow: 0px 2px 4px rgba(0,0,0,0.50);
cursor: pointer;
}
<div id="wrapperportfolio4">
<p id="box1title">www.pieterswebdesign.com</p>
<img id="box1img" src="images/box1img.png" />
<p id="box1txt">Pieter's Web Design is een beginnende webdesigner gevestigd in Gent.</p>
<p id="box1txt2">Voor betaalbare professionele websites is dit de ideale oplossing.</p>
<a id="box1link" href="https://www.pieterswebdesign.com">www.pieterswebdesign.com</a>
</div>
Chances are it's the font, as you really need to create a webfont kit and use various font file types:
For example:
#font-face {
font-family: 'FontName';
src: url('fontname-webfont.eot');
src: url('fontname-webfont.eot?#iefix') format('embedded-opentype'),
url('fontname-webfont.woff2') format('woff2'),
url('fontname-webfont.woff') format('woff'),
url('fontname-webfont.ttf') format('truetype'),
url('fontname-webfont.svg') format('svg');
}
You should use a webfont generator like:
https://www.fontsquirrel.com/tools/webfont-generator
(obviously you need to have a licence to use some fonts as webfonts so best to check this before converting any.)
for browsers compatibility you have to use this rule.
/* Fonts */
#font-face {
font-family: 'sinhala';
src: url("./fonts/sinhala.eot");
src: url("./fonts/sinhala.eot?#iefix") format('embedded-opentype'),
url("./fonts/sinhala.woff") format('woff'),
url("./fonts/sinhala.ttf") format('truetype'),
url("./fonts/sinhala.svg#montezregular") format('svg');
font-weight: normal;
font-style: normal;
}
You have to get three formats (woff, eot, ttf) of the FONT.
See the https://www.fontsquirrel.com/tools/webfont-generator
On this page you can converit the font to correcto format.
Succes!