My font doesn't seem to work, what am I doing wrong?
I added the google font in the head.
Its below meta.
I also added the CSS code.
I hope someone can help me.
html {
height: 100%;
}
body {
margin: 0px;
height: 100%;
}
h1 { text-align: center; }
.hoofdtabel {
width: 100%;
height: 100%;
margin: 0px;
border-collapse: collapse;
} /* Vervangt cellspacing="0" */
.kop {
width: 100%;
height: 10%;
background-color: #5570aa;
text-align: center;
font-size: 72px;
}
.menu {
width: 12%;
height: 70%;
padding: 5px; /* Vervangt cellpadding="5" */
background-color: #9e6171;
vertical-align: top;
}
.inhoud {
width: 96%;
height: 85%;
padding: 5px;
text-align: left;
background-color: #b8c6c4;
vertical-align: top;
}
.onder {
width: 100%;
height: 5%;
padding: 5px;
background-color: black;
vertical-align: middle;
text-align: right;
color: white;
}
.button {
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
background-color: #e9ece5;
color: black;
border: 2px solid #b3c2bf;
width: 100px;
}
.button:hover {
background-color: #008CBA;
}
.frame {
height: 100%;
width: 100%;
border: none;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<title>Hi</title>
</head>
<body>
<div class="Hi">
<h1>Hi</h1>
<font size="4" >
<p>Hello all<br>
</font>
</div>
</body>
</html>
You just loaded the font, but forgot to tell which element should use it.
Example to use it on all paragraphs (in CSS file):
p {
font-family: "Source Sans Pro", sans-serif;
}
UPDATE:
I think your code should look something like this:
style.css:
html {
height: 100%;
}
body {
margin: 0px;
height: 100%;
}
h1 { text-align: center; }
p {
font-family: "Source Sans Pro", sans-serif;
}
... and the rest of the file, which you posted
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Hi</title>
</head>
<body>
<div class="Hi">
<h1>Hi</h1>
<font size="4">
<p>Hello all<br><p>
</font>
</div>
</body>
</html>
After this, the Hello all text should use the Source Sans Pro font.
In addition, you forgot to link your CSS file in the HTML document (same method as you link the google font). See in my example below the google font.
Related
Hi im a begginer web developer and im making a practice.I want to change my span's label color when i hover to "container" ( btw i also want to change my border's properties as you can see in my code (container :hover))
I hope I explained myself well
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/* font-family: 'Open Sans', sans-serif;*/
body{
background-color: #14213d;
margin: 0;
}
.container li{
list-style: none;
}
.container{
border: 2px solid #fca311;
width: 400px;
height: 100px;
position: relative;
left: 720px;
top: 400px;
}
#mainm{
font-family: 'Open Sans', sans-serif;
color: #e63946;
font-size: 25px;
padding-left: 5px;
padding-top: 15px;
}
.container:hover{
transition: 2s;
border-radius: 15px;
border-color: #43aa8b;
background-color: #43aa8b;
}
#mainm:hover{
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul>
<li id="mainm">Site Hazırlanma Aşamasında</li>
</ul>
</div>
</body>
</html>
Move the container styles to #mainm and add the color: white; to :hover.
Make note of the other styles I changed to clean it up a bit. I added text-align: center; to the id and removed the height. Instead of a fixed height just use padding.
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/* font-family: 'Open Sans', sans-serif;*/
body {
background-color: #14213d;
margin: 0;
}
.container li {
list-style: none;
}
.container {
width: 100%;
height: 100%;
}
li#mainm {
border: 2px solid #fca311;
width: 400px;
padding: 30px 0px;
position: relative;
left: 720px;
top: 400px;
}
#mainm {
font-family: 'Open Sans', sans-serif;
color: #e63946;
font-size: 25px;
text-align: center;
}
#mainm:hover {
transition: 2s;
border-radius: 15px;
border-color: #43aa8b;
color: white;
background-color: #43aa8b;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul>
<li id="mainm">Site Hazırlanma Aşamasında</li>
</ul>
</div>
</body>
</html>
:root {
--colorsame: #1e90ff;
}
.container{
border: 2px solid var(--colorsame);
width: 400px;
height: 100px;
position: relative;
left: 720px;
top: 400px;
}
#mainm{
font-family: 'Open Sans', sans-serif;
color: var(--colorsame);
font-size: 25px;
padding-left: 5px;
padding-top: 15px;
}
My HTML page has a header, navigation bar, body content element and a footer element however the footer element is overlapping with the div element bodycontent when it should be below the bodycontent element and at the bottom of the page. Please suggest any changes in positioning to resolve this.
.header {
padding: 10px;
width: 100%;
text-align: center;
background-color: #F2F2F2;
color: #424242;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.footer {
clear: both;
position: inherit;
bottom: 0;
left: 0;
text-align: center;
width: 100%;
height: 20px;
background-color: #808080;
color:#fff;
}
.prodheading {
width: 100%;
height: 20px;
background-color: #808080;
color: #fff;
text-align: center;
vertical-align: middle;
}
ul.nav_bar{
position: absolute;
height: 50px;
top: 50%; left: 50%;
margin-top: -25px; margin-left: -200px;
padding: 0px;
list-style: none;
text-align: center;
}
.bodycontent{
position:relative;
top:45px;
bottom:30px
padding:15px;
}
My home HTML page -
<html>
<head>
<style><%#include file="/css/mystyle.css"%></style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My Webpage</title>
</head>
<body>
<%# include file="header.jsp" %>
<div class="bodycontent">
<h3>Our Mission</h3>
<p>Hello World !!!</p>
<h3></h3>
<p>Trying out webpage</p>
</div>
<%# include file="footer.jsp" %>
</body>
</html>
The header html element -
<html>
<head>
<style><%#include file="/css/mystyle.css"%></style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<center>
<h3>Title 1</h3>
<h5>Title 2</h5>
</center>
<ul class="nav_bar">
<li class="navit"><a class="link">Home</a></li>
<li class="navit"><a class="link" >Items</a></li>
<li class="navit"><a class="link" >About Us</a></li>
<li class="navit"><a class="link" >Contact</a></li>
</ul>
</body>
</html>
The footer html element
<html>
<head>
<style><%#include file="/css/mystyle.css"%></style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<center>All rights reserved 2018</center>
</body>
</html>
You need to add CSS code like this:
.header {
display: inline-block;
padding: 10px;
width: 100%;
text-align: center;
background-color: #F2F2F2;
color: #424242;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.footer {
display: inline-block;
width: 100%;;
text-align: center;
width: 100%;
height: 20px;
background-color: #808080;
color:#fff;
}
.prodheading {
display: inline-block;
width: 100%;
height: 20px;
background-color: #808080;
color: #fff;
text-align: center;
vertical-align: middle;
}
ul.nav_bar{
position: absolute;
height: 50px;
top: 50%; left: 50%;
margin-top: -25px; margin-left: -200px;
padding: 0px;
list-style: none;
text-align: center;
}
.bodycontent{
display: inline-block;
width: 100%;
padding:15px;
}
Now, You can add CSS for main menu design in ul.nav_bar as per your requirements.
I'm wanting to essentially take an image and crop a section of it with CSS.
Here's the picture I'd like to use.
Here's how I'd like to crop it
So, here's the code that I'm using right now.
body {
font-family: "Montserrat", sans-serif;
}
.staffboxes {
background: white;
width: 15%;
text-transform: uppercase;
border: #dedede solid 1px;
}
.staffpfp {
height: 100px;
width: 100px;
overflow: hidden;
float: left;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="staffdesign.css">
<meta charset="UTF-8" />
</head>
<body>
<h3>Staff Page</h3>
<div class="staffboxes">
<p>
<div class="staffpfp"><img src="https://i.stack.imgur.com/f505l.png" alt="Kouhai's DP" /></div>
<h3>Kouhai</h3>
</p>
</div>
</body>
</html>
Here's what comes out
If you could please help me, I'd appreciate it!
All you have to do is set your image to width: 100% and height to auto to prevent distortion.
This way, if you change the overall size of .staffpfp class in the future, the img inside will adapt accordingly.
body {
font-family: "Montserrat", sans-serif;
}
.staffboxes {
background: white;
width: 15%;
text-transform: uppercase;
border: #dedede solid 1px;
}
.staffpfp {
height: 100px;
width: 100px;
overflow: hidden;
float: left;
}
.staffpfp img{width: 100%; height: auto;}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="staffdesign.css">
<meta charset="UTF-8" />
</head>
<body>
<h3>Staff Page</h3>
<div class="staffboxes">
<p>
<div class="staffpfp"><img src="https://i.stack.imgur.com/f505l.png" alt="Kouhai's DP" /></div>
<h3>Kouhai</h3>
</p>
</div>
</body>
</html>
Here is the CSS/HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="Workbook-S-140.css" rel="stylesheet" type="text/css" />
<title>CONGREGATION NAME Midweek Meeting Schedule</title>
<style type="text/css">
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
table th, td {
/* Comment out the following line if you do not want borders */
border: 1px #d3d3d3 solid;
/* This is the default font for all cells */font-family: Calibri;
}
body {
width: 100%;
margin-left: 0;
margin-right: 0;
background: #666;
}
.containerPage {
min-width: 210mm;
max-width: 210mm;
padding-left: 2mm;
padding-right: 2mm;
margin-left: auto;
margin-right: auto;
background: #FFF;
}
.containerMeeting {
margin-bottom: 5mm;
}
.floatRight {
color: gray;
padding-top: 1mm;
padding-bottom: 1mm;
padding-right: 2mm;
float: right;
text-align: right;
font-size: 8pt;
font-weight: 700;
text-transform: none;
}
.borderHEADINGOuter {
border-bottom: 1px gray solid;
margin-bottom: 5mm;
}
.borderHEADINGInner {
border-bottom: 4px gray solid;
margin-bottom: 2px;
}
.tableHEADING {
width: 100%;
border: none;
}
.tableHEADING td {
border: none;
}
.textCongregation {
vertical-align: bottom;
text-align: left;
font-size: 11pt;
font-weight: 700;
text-transform: uppercase;
}
.textTitle {
vertical-align: bottom;
text-align: right;
font-size: 18pt;
font-weight: 700;
}
</style>
</head>
<body>
<div class="containerPage">
<div class="containerMeeting">
<div class="borderHEADINGOuter">
<div class="borderHEADINGInner">
<table class="tableHEADING">
<colgroup>
<col width="50%" /><col width="50%" />
</colgroup>
<tr>
<td class="textCongregation">CONGREGATION NAME</td>
<td class="textTitle">Midweek Meeting Schedule</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
This is the jiggle:
https://jsfiddle.net/mL9j6zgz/
All is good. But, if I change the dir attribute to rtl and and lang attribute to ar, the layout is wrong. The two div objects are swapped correctly, but the text alignments are now wrong. They need to be reversed.
I know I can create two new CSS classes for RTL, and use the opposite text alignment, but is there anyway that the browser can manage this? I assumed it would swap alignments. Am I making sense?
In English:
<CONGREGATION NAME MIDWEEK MEETING SCHEDULE>
In Arabic:
<MIDWEEK MEETING SCHEDULE CONGREGATION NAME>
Arabic HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" lang="ar" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="unsaved:///Workbook-S-140.css" rel="stylesheet" type="text/css" />
<title>CONGREGATION NAME Midweek Meeting Schedule</title>
<style type="text/css">
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
table th, td {
/* Comment out the following line if you do not want borders */
border: 1px #d3d3d3 solid;
/* This is the default font for all cells */font-family: Calibri;
}
body {
width: 100%;
margin-left: 0;
margin-right: 0;
background: #666;
}
.containerPage {
min-width: 210mm;
max-width: 210mm;
padding-left: 2mm;
padding-right: 2mm;
margin-left: auto;
margin-right: auto;
background: #FFF;
}
.containerMeeting {
margin-bottom: 5mm;
}
.floatRight {
color: gray;
padding-top: 1mm;
padding-bottom: 1mm;
padding-right: 2mm;
float: right;
text-align: right;
font-size: 8pt;
font-weight: 700;
text-transform: none;
}
.borderHEADINGOuter {
border-bottom: 1px gray solid;
margin-bottom: 5mm;
}
.borderHEADINGInner {
border-bottom: 4px gray solid;
margin-bottom: 2px;
}
.tableHEADING {
width: 100%;
border: none;
}
.tableHEADING td {
border: none;
}
.textCongregation {
vertical-align: bottom;
text-align: left;
font-size: 11pt;
font-weight: 700;
text-transform: uppercase;
}
.textTitle {
vertical-align: bottom;
text-align: right;
font-size: 18pt;
font-weight: 700;
}
</style>
</head>
<body>
<div class="containerPage">
<div class="containerMeeting">
<div class="borderHEADINGOuter">
<div class="borderHEADINGInner">
<table class="tableHEADING">
<colgroup>
<col width="50%" /><col width="50%" />
</colgroup>
<tr>
<td class="textCongregation">اسم الجماعة</td>
<td class="textTitle">برنامج اجتماع وسط الاسبوع</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
According with the comments we are talking in the main post, you can target with attribute selector and swap the text direction:
[dir="rtl"] .textCongregation{ text-align: right; }
[dir="rtl"] .textTitle { text-align: left; }
Learn more about attribute selector:
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
A possibly better option
The :dir() pseudo-class selector may be preferable if the rtl is only defined on a parent element and not on a child element. See https://developer.mozilla.org/en-US/docs/Web/CSS/:dir
You can see this in action at this jsfiddle where the body has dir attribute set to rtl but the child does not.
https://jsfiddle.net/ua8ksr1z/
Advances in flow-relative CSS properties and values make this much easier.
.textCongregation {
text-align: start;
}
The following properties and values are well supported at this time across modern browsers. In parentheses are the older, commonly used LTR terms.
inset-inline-start (in place of left property)
inset-inline-end (in place of right property)
margin-inline-start (in place of margin-left property)
margin-inline-end (in place of margin-right property)
margin-inline (in place of margin shorthand property)
padding-inline-start (in place of padding-left property)
padding-inline-end (in place of padding-right property)
padding-inline (in place of padding shorthand property)
text-align: start; (in place of left value)
text-align: end; (in place of right value)
These values currently only work in Firefox:
float: inline-start; (in place of left value)
float: inline-end; (in place of right value)
I'd like to have the white background cover content of the page but for some reason it only ends at the navigation menu/#main_content_top. How can I fix this?
HTML Look/Image:
http://img687.imageshack.us/img687/8461/croppercapture12.th.jpg
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#Text1
{
width: 77px;
}
#Text2
{
width: 78px;
}
body {
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<div id="header"><h1>
<img alt="" src="images/tempBanner.jpg" style="width: 747px; height: 75px" /></h1></div>
<div id="sub_header">Facility Booking Registration</div>
<div id="main_content_top">Home | Book a Facility | <a href ="FindBooking.htm" >Find/Delete a
booking</a></div>
<div id="main_content">
<div class="content">
<p class="title">Public Service Announcements</p>
<h2>Vesak Day</h2>
<p>Vesak Day, a public holiday, will fall on 1/5/2011, please note the school will
be closed and no bookings will be allowed on this day.</p>
<h2>Labour Day</h2>
<p>Labour Day, a public holiday, will fall on 1/5/2011, please note the school will
be closed and no bookings will be allowed on this day.</p>
</div>
<div class="menu">
<div class="menu_title">Login</div>
<div>Username:
<input id="Text1" type="text" />
<br />
Password:
<input id="Text2" type="text" />
<br />
<br />
<input id="Button1" type="button" value="Sign In" />
</div>
</div>
</div>
<div id="clear"></div>
</div>
</body>
CSS style sheet:
body {
background: #CACACA url(images/background.png) repeat-x;
font-family: "Trebuchet MS", Verdana, serif, Arial
}
#container {
margin: 0 auto;
width: 750px
}
#header {
width: 100%;
height: 33px;
}
#sub_header {
text-align: right;
font-weight: bold;
font-size: 20px;
color: #FFFFFF;
padding-right: 20px;
padding-bottom: 20px;
}
#main_content {
margin: 0 auto;
width: 100%;
background: #FFFFFF url('images/background_content.gif');
background-repeat: repeat-y;
}
#main_content_top {
height: 30px;
background: #FFFFFF url('images/background_top.gif');
}
#main_content_bottom {
height: 30px;
background: #FFFFFF url('images/background_bottom.gif');
}
.content {
float: left;
width: 510px;
text-align: justify;
padding: 0 30px 0 30px;
font-size: 14px
}
.menu {
width: 139px;
float: right;
padding: 0 20px 0 20px;
border-left: #8C8484 1px solid;
font-size: 12px
}
.menu ul {
margin: 0;
padding: 10px 0 10px 15px
}
.menu il {
list-style-type: disc
}
#header h1 {
margin-bottom: 0px;
font-size: 28px;
font-weight: bold;
color: #A40008
}
.content h2 {
margin-top: 0px;
font-size: 20px;
font-weight: bold;
color: #A40008
}
.menu_title {
font-size: 18px;
font-weight: bold
}
#clear {
display: block;
clear: both;
width: 100%;
height:1px;
overflow:hidden;
}
a {
color: #A40008;
font-weight: bold;
text-decoration: none
}
a:hover {
color: #A40008;
font-weight: bold;
text-decoration: underline
}
.title {
margin: 20px;
text-align: center;
font-weight: bold;
font-style: italic;
height: 18px;
}
.highlight
{
font-weight:bold
}
.update
{
font-weight:bold;
color:Green
}
.confirm
{
font-weight:bold;
color:Red
}
table
{
border-style : dashed
}
Try adding overflow:auto to #main_content.
If i understand correctly, you want to set the background of the body white? If that is your requirement, within the body CSS, remove or comment out the background style.
You have to make it overflow hidden or float left and width..........