The body of my CSS has a font style set using CSS, but it is not showing in the table. I then added it into the table and it still seems to not want to adopt the font style.
I had a look through some other posts and am still struggling.
CSS:
body {
font-family: 'Indie Flower', cursive;
background-image: url('../images/Landscape.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
min-width: 100%;
min-height: 100%;
}
table, th, td {
font-family: 'Indie Flower', cursive;
}
table {
margin-top: -446px;
margin-right: 428px;
z-index: 1;
position: absolute, center;
background-color: #F0F0F0;
border: 3px solid #FFF;
}
th {
text-align: left;
z-index: 3;
}
td {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 5px;
z-index: 2;
background-color: #F0F0F0;
}
Ok so your issue here is that the font is needed for the placeholders, not the table or inputs themselves.
::-webkit-input-placeholder {
font-family: 'Indie Flower', cursive;
}
:-moz-placeholder { /* Firefox 18- */
font-family: 'Indie Flower', cursive;
}
::-moz-placeholder { /* Firefox 19+ */
font-family: 'Indie Flower', cursive;
}
:-ms-input-placeholder {
font-family: 'Indie Flower', cursive;
}
Then for text that is entered into the inputs, just add the style to the input itself.
input {
font-family: 'Indie Flower', cursive;
}
Worth noting that you can also use font-family: inherit; instead of explicitly declaring the font multiple times. This makes it much easier to update if you decide to change fonts.
Updated Fiddle
You have to put the font-family inside your input like this :
input{
font-family:inherit;
}
and if you want for the button too :
button{
font-family:inherit;
}
FIDDLE
Related
.home {
background: url(download.png);
background-size: 1500px;
overflow: ;
background-position: -130px -20px;
}
.content h2 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 45px;
font-weight: 900;
line-height: 50px;
position: relative;
bottom: 50px;
z-index: 200;
}
.content h2::before {
content: "";
background: linear-gradient(130deg, #1951bf 0%, #25b7c7 89%);
position: absolute;
height: 14px;
width: 334px;
filter: opacity(0.4);
top: 77px;
z-index: -200;
}
.content p {
width: ;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 15px;
color: #3a505f;
letter-spacing: 1.1px;
line-height: 26px;
z-index: 200;
transform: scale(1.04, 1.1);
}
.home {
display: flex;
justify-content: ;
align-items: center;
height: 100vh;
color: black;
z-index: -100;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?
family=Source+Sans+Pro:wght#700&display=swap" rel="stylesheet">
<div class="home">
<div class="content">
<h2>No-Code<br>Payment Platform</h2>
<p>PayRequest makes it easy to create your own branded payment page, and to send payment links to all your customers.</p>
</div>
</div>
Above is the code for the site I am building.
The UI of the page I want to rectify: click-here-to-view
The original UI: click-here-to-view
I have the exact same font-family down and I have tried different sizes and weights but I am not able to get the exact same text as the original site in the p section. I have got the same one down in h2 but not in p.
Can somebody help to resolve this issue, please?
In h2 you have font-family: 'Source Sans Pro' but in p you have 'Poppins'. So this is why they are two different fonts. You can either declare a universal font family using *{} or you can just switch the font family in p to 'Source Sans Pro'
Keep the same font-family for the elements in your css. h2 and p and different font-family. Also if you put everything in the a < body> tag you can just define the font-family in their rather than adding it in every element like so:
body {
font-family: 'Source Sans Pro', sans-serif;
}
I'm trying to make a simple button in HTML using an image and basic CSS styling.
When I load up the html file in a browser, it shows the text of the button as well as some of the button image, but whatever falls outside the text gets cut off.
I'd like the button to be fully shown (it's pretty large) with no text at all.
Here's my HTML code:
<link rel="stylesheet" type="text/css" href="style.css">
Fake Button
And here's my css file:
a.likeAButton {
width: 500px;
height: 600px;
background-image: url(./images/buttons/4s_inactive.png);
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
}
a.likeAButton:hover {
width: 500px;
height: 600px;
background-image: url(./images/buttons/4s_active.png);
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
}
a.likeAButton:active {
width: 500px;
height: 600px;
background-image: url(./images/buttons/4s_active.png);
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
}
Any help would be appreciated.
Anchors are inline by default, so they have no size. Try this:
a.likeAButton {
display: inline-block;
...
}
a.likeAButton {
display: inline-block;
width: 500px;
height: 600px;
background-image: url(http://placehold.it/500x600);
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
}
a.likeAButton:hover {
background-image: url(http://placehold.it/500x600/0000ff);
}
a.likeAButton:active {
background-image: url(http://placehold.it/500x600/ff0000);
}
Fiddle demo
Notice that I stripped most of the style statements from your :hover and :active pseudo-classes. There's no need to repeat them.
I have two .SCSS stylesheets contributing to one website. This is so that i can have a base, and a home stylesheet.
In the base style sheet, div has a float of left, however in the What We Do section i would like there to be no float. i cant seem to fix the issue. Any advice would be greatly appreciated!
Here is the JSFiddle - https://jsfiddle.net/hbyeyv6y/
Here is the Base .scss -
body, html, div, nav, section, ul, li, header { float: left; margin: 0px; padding: 0px; }
Here is the What We Do .scss -
div.whatwedo { box-sizing: border-box; margin: 0 auto; background-color: #366e81; padding: 100px; text-align: center; width: 100%; }
div.whatwedo .inner { float: none; }
div.whatwedo h1 { color: #ffffff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 45px; }
div.whatwedo h2 { margin-top: -15; color: #8e8e8e; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 25px; }
div.whatwedo h3 { margin-top: -15; color: #fff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 20px; }
div.whatwedo p { margin: 0 auto; color: #ffffff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 15px; max-width: 500px; }
div.whatwedo hr { border-bottom: 1px solid #fff; margin-bottom: 50px; width: 100px; }
div.whatwedo div.container { vertical-align: top; display: inline-block; text-align: center; }
div.whatwedo div.container img { margin: 50px 25px 0 25px; width: 231px; height: 231px; }
div.whatwedo div.container p { margin-top: 20px; display: block; max-width: 210px; }
As said, you could do float: none !important; and initial !important; for other rules.
But if you want to write good code, asigning float to body, html and so on doesn't look like a good idea. Float breaks the usual behaviour of the elements and it can lead you to unexpected results. You could add clases like:
.f-left{
float:left;
}
only to the elements you want to float.
.whatwedo is not floating - all it's parents and all it's descendants are though. Setting a float on everything is bad; why do you need to float everything?
Even so, to answer your question - you can unset the float for all .whatwedo's descendants with the wildcard selector ...
.whatwedo * {float: none;}
I use fontsquirrel's & google's fonts and they work perfectly fine on desktop browsers (IE, safari,chrome, firefox).
But when it comes to mobile safari, specially ipad2 and iphone4, the font appears twice, meaning, it shows 2 times the same word as if it was twice the same text ! The problem is on the H1.
I tried using sans serif font and it's the same...
I tried to change the font-weight, font-size etc but it doesn't change anything.
body {
color:#FFF;
font-family: 'Raleway', sans-serif;
font-weight: normal;
/*font-family: 'Open Sans', sans-serif;*/
min-width:960px;
top:0;
left:0;
position:absolute;
height:100%;
width:100%;
margin:0;
background-size:cover;
}
.ie body {
filter: dropshadow(color=#000000, offx=0, offy=1); }
h1 {
font-size:88px;
text-align:center;
padding-top:30px;
font-weight:700;
font-family:'quicksandregular',arial, sans-serif;
}
#media screen and (max-width:768px){ /* tablettes */
body {
min-width: initial !important;
font-weight: normal; /* */
font-size: 68px; /* */
}
.wrapper{
width:100%;
}
.styled div {
margin-bottom:10px;
}}
#media screen and(max-width:420px){ /* tel */
body{
font-weight: normal; /* */
font-size: 68px; /* */
}
h1{
float:initial;
text-align: center;
margin-left:0px;
margin-bottom:0px;
}
#header {
width: 100%;
}
.styled div {
margin-bottom:10px;
font-size: 40px;
font-weight: normal;
text-align: center;
width:80px;
border-radius:80px;
height:80px;
}
#Content h2 {
margin: 0px 0px 0px 0px;
padding: 0px;
text-align: center;
font-size: 29px;
font-weight: 300;
}
Many thanks for your help !!
Laëtitia
The browser is applying a bold font weight, which is causing the problem because there is no bold quicksand. All you have to do is set font-weight:normal; for text elements that are appearing twice.
Your problem is talked about at length here:
http://www.fontsquirrel.com/forum/discussion/277/webfonts-showing-up-twice/p1
Just wondering how to get rid of the unnecessary looking spaces
in my heading. I want my header to look similar to the capture 2 (2nd picture) but there are unnecessary spaces that I can't seem to get rid of. I ran it through jsfiddle:
http://jsfiddle.net/yT6h6/ and I can still see the spaces even though I don't think there was anything wrong with the code. Please take a look at this and greatly appreciated if you can help me.
HTML Code:
<div class="content">
<div class="heading"><b style="font-size:14px; font-family:'Arial', Gadget, sans-serif"><b style="font-size:9px;">Home \\ Current Students \\</b>
</b>
<br />FBE Degrees & Electives
<br>
<span class="style11">FBE Degrees & Other Courses for FBE students including Elective courses</span>
</div>
CSS Code:
.heading {
height: auto;
width: 525px;
background-color: #333333;
font-family:"Courier New", Courier, monospace;
font-size: 28px;
color: #DBDBDB;
padding-left: 30px;
font-weight: bold;
padding-top: 5px;
margin-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.content {
height: auto;
float: left;
width: 575px;
background-repeat: repeat;
background-color: #FFFFFF;
}
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
color: #336666;
}
a.link5:link {
color: #FFFFFF;
}
a.link5:visited {
color: #FFFFFF;
}
a.link5:hover {
color: #E9E8C7;
}
a.link5:active {
color: #E9E8C7;
}
try this one remove line-height and add display:block
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
display:block;
color: #336666;
}
I think you firstly need to seriously tidy up that HTML and use some more natural elements. The heading should be a H of some level, probably h1. The paragraph tags make more sense for the text. Everything will be far cleaner and easier to solve if you do this. Here's my suggestion that changes the HTML and fixes your margin issues.
HTML
<div class="content">
<div class="heading">
<p class="crumbs">Home \\ Current Students \\</p>
<h1>FBE Degrees & Electives</h1>
<p class="subheading">FBE Degrees & Other Courses for FBE students including Elective courses</p>
</div>
</div>
CSS
p {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #336666;
}
a {
color:#fff;
text-decoration:none;
}
.heading {
background:#333333;
padding:20px;
}
.heading p {
margin:0;
padding:0;
line-height:10px;
}
h1 {
margin:0;
margin-bottom:5px;
font-family:"Courier New", Courier, monospace;
font-size:28px;
line-height:36px;
color:#DBDBDB;
}
Fiddle here:
http://jsfiddle.net/yT6h6/6/
It can be simplified more actually (I left some of your classes in there even though they aren't used), but this is at least a lot neater to work with.
Hey i've tried your code see at: http://jsbin.com/awonek/1/edit
Looks fine to me.
could code try
div#heading{
margin-bottom:-20px;
}
what browsers have you tried it in?
Added some changes: See http://jsbin.com/uvurev/1/edit
<div class="content">
<div class="heading">
Home \\ Current Students \\
<h2 class="M_logo_text">FBE Degrees & Electives</h2>
<span class="style11">FBE Degrees & Other Courses for FBE students including Elective courses</span>
</div>
</div>
CSS
div.heading {
height: auto;
width: 525px;
background-color: #333333;
font-family:"Courier New", Courier, monospace;
color: #DBDBDB;
padding-left: 30px;
font-weight: bold;
padding-top: 5px;
margin-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.content {
height: auto;
float: left;
width: 575px;
background-repeat: repeat;
background-color: #FFFFFF;
}
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
color: #336666;
}
a.link5{
font-size:9px; font-family:'Arial', Gadget, sans-serif
margin-right: -2px;
text-decoration: none;
}
a.link5:link {
color: #FFFFFF;
}
a.link5:visited {
color: #FFFFFF;
}
a.link5:hover {
color: #E9E8C7;
}
a.link5:active {
color: #E9E8C7;
}
/*
added style
*/
b.type1{
font-size:9px; font-family:'Arial', Gadget, sans-serif
}
h2.M_logo_text{
font-size: 20px;
margin:0px;
}