Trying to complete this website
http://www.nsckolkata.com/
The font-face for the header in the menubar (at the top sof style.css) is not working.
The media queries (at the bottom of style.css) are not working.
Tried a lot of solutions from stackoverflow and other discussion forums with no results.
I am putting up the css and the header section of the html. Hope this will help.
#font-face {
font-family: 'OldEnglish';
src: url('../fonts/olde_english_regular/OldeEnglishRegular.eot');
src: url('../fonts/olde_english_regular/OldeEnglishRegular.eot?#iefix') format('embedded-opentype'),
url('../fonts/olde_english_regular/OldeEnglishRegular.woff2') format('woff2'),
url('../fonts/olde_english_regular/OldeEnglishRegular.woff') format('woff'),
url('../fonts/olde_english_regular/OldeEnglishRegular.ttf') format('truetype'),
url('../fonts/olde_english_regular/OldeEnglishRegular.svg#OldEnglish') format('svg');
font-weight: normal;
font-style: normal;
}
.navbar-brand{
font-family: "OldEnglish";
font-size: 30px;
}
.copyright{
position:fixed;
bottom: 10px;
right: 10px;
font-size: 12px;
background:rgba(255,255,255);
padding:3px 12px;
border-radius: 4px;
border: 1px solid #ccc;
opacity: 0.8;
transition: 0.5s;
}
.copyright:hover{
background-color: rgba(0,0,0,0.8);;
color: #fff;
opacity: 1;
}
.committeedrop{
padding: 7px 7px;
min-width: 332px;
}
.contactdrop{
padding: 7px 0px;
min-width: 800px;
background-color:#fff !important;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(255, 255, 255, 1);
}
.label-as-badge {
border-radius: 1em;
font-size: 12px;
line-height:12px;
}
.inlineblock{
display:inline-block;
}
.navbar-brand img{
height: 40px;
width: 40px;
display: inline-block;
vertical-align: top;
bottom: 10px;
position: relative;
border-radius: 6px;
}
.mb20{
margin-bottom:20px;
}
.m0{
margin:0px;
}
.ml3{
margin-left:3px;
}
.panel300{
max-height: 300px;
overflow: hidden;
overflow-y: auto;}
}
.panel600{
max-height: 600px;
overflow: hidden;
overflow-y: auto;}
}
#media all and (max-width:767px) {
body{background-color: gray;}
.contactdrop{ min-width:300px !important;}
.contactdrop iframe{display:none;}
.panel300,.panel600{min-width:initial;}
}
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="nsc">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="Numismatic Society of Calcutta"/>
<meta name="author" content="Numismatic Society of Calcutta"/>
<link rel="icon" href="image/Favicon/favicon.ico"/>
<title>Numistmatic Society of Calcutta</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
** Updated Snippet
*** Font face problem resolved. Thanks! Updated snippet. Check the font-face at top for the solution.
You have extra curly braces closed Two times before media css in .panel300 and .page1600 style definitions.
.panel300{
max-height: 300px;
overflow: hidden;
overflow-y: auto;}
}
.panel600{
max-height: 600px;
overflow: hidden;
overflow-y: auto;}
}
Remove the extra curly braces from above to look like below
.panel300{
max-height: 300px;
overflow: hidden;
overflow-y: auto;
}
.panel600{
max-height: 600px;
overflow: hidden;
overflow-y: auto;
}
also as I have checked the browser console your font path is wrong.
check the screenshot below
screenshot
also change your doctype to
<!DOCTYPE html>
In my case I just change the DOCTYPE tag into <!DOCTYPE html>.
You don't need to include every font extension. Just use .ttf or .otf.
Seems to be a wrong path because of the 404... try the absolute URL for the src property instead of the relativ just to be sure (or give us the absolute path to the font so we can check the access.)
Your font is not accessible, that is why its not working. Please have a look. Check it here : http://www.nsckolkata.com/font/olde_english_regular/OldeEnglishRegular.ttf
As you are on Wordpress, you might find this article useful:
https://jeffsebring.com/2012/how-to-use-web-fonts-with-wordpress/
Write your media queries like this :
#media (max-width: 768px) {
.body{background-color: gray;}
.contactdrop{ min-width:300px !important;}
.contactdrop iframe{display:none;}
.panel300,.panel600{min-width:initial;} }
Related
I am having a rough time with a strange problem related to background-color. Upon viewing the html file in a browser like chrome or firefox the background-color is not applying to the shop link(in the .header__shop selector). But when I inspect it and hover over the element, the background color suddenly appears in chrome and firefox.
HTML:
<!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" />
<link
href="https://fonts.cdnfonts.com/css/helvetica-neue-9?styles=49034,49031,49033,49035,49032,49036,49038,49040,49042,49044,49037,49039,49041,49043,49045,49046"
rel="stylesheet"
crossorigin
/>
<link rel="stylesheet" href="style.css" />
<title>Assignment 4</title>
</head>
<body>
<header class="header">
<div class="header__top-ribbon">
<a href="#" class="header__logo margin-left-small margin-right-small"
><img src="./images/logo.png" alt="Motorolo logo"
/></a>
Explore
<a class="header__shop" href="#">Shop</a>
Customer Hub
</div>
</header>
</body>
</html>
CSS:
:root {
--header-active-background: #f2f2f2;
--header-link-color: #00000099;
--black: #000000;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
html {
font-size: 62.5%;
}
header a:link,
header a:visited {
display: block;
height: 100%;
display: flex;
align-items: center;
text-decoration: none;
color: var(--header-link-color);
font-size: 1.2rem;
padding: 0 1.2rem;
letter-spacing: 0.03125rem;
}
header a:link {
transition: all 0.5s;
}
header a:hover {
color: rgba(0, 0, 0, 0.95);
}
/* UTILS */
.margin-left-small {
margin-left: 2rem !important;
}
.margin-right-small {
margin-right: 2rem !important;
}
/* header */
.header__logo img {
height: 45%;
}
.header {
position: fixed;
top: 0;
}
.header__top-ribbon {
height: 6.4rem;
display: flex;
align-items: center;
gap: 1rem;
}
.header__shop {
background-color: var(--header-active-background);
font-weight: bold;
color: var(--black) !important;
}
.header__logo {
padding: 0 !important;
}
I have tried putting !important in
background-color: var(--header-active-background);
in the
.header__shop
selector and it didn't work. Tried taking screenshot and snipping tool but the taken screenshot shows up the background color even if it is not there as seen by eyes!
The background color showed up first time for me. Browsers cache pages and content (including CSS) and sometimes it helps to force refresh (Ctrl+Shift+R, or Ctrl+Click on refresh button) instead of normal refresh. Inspecting may have made the browser reload the files.
I'm using a basic template that I ran across. I'm using it internally to display information and I was looking for something with a layout like this.
What I am trying to accomplish is to make the #banner element shorter. Around 300px or any equivalent size. Just not the 700px or so it is now.
Template I am using
Here is the #banner section from style.css
/* Banner */
#banner {
background-color: #6a86b0;
background-image: url("../images/mainHelperBanner.jpg");
background-size: auto;
background-position: center center;
background-repeat: no-repeat;
color: #d8d8d8;
padding: 14em 0;
text-align: center;
position: relative;
}
#banner:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 50%;
background: rgba(64, 72, 80, 0.25);
}
#banner .inner {
position: relative;
z-index: 1;
}
#banner .inner :last-child {
margin-bottom: 0;
}
#banner h2, #banner h3, #banner h4, #banner h5, #banner h6 {
color: #ffffff;
}
#banner .button.alt {
box-shadow: inset 0 0 0 1px rgba(144, 144, 144, 0.75);
color: #ffffff !important;
}
#banner .button.alt:hover {
background-color: rgba(144, 144, 144, 0.275);
}
#banner .button.alt:active {
background-color: rgba(144, 144, 144, 0.4);
}
#banner .button.alt.icon:before {
color: #c1c1c1;
}
#banner .button {
min-width: 12em;
}
#banner h2 {
font-size: 3.5em;
line-height: 1em;
margin: 0 0 0.5em 0;
padding: 0;
}
#banner p {
font-size: 1.5em;
margin-bottom: 2em;
}
#banner p a {
color: #ffffff;
text-decoration: none;
}
Here is the html from my index.
<!-- Banner -->
<section id="banner">
<div class="inner">
<h2>Integrator</h2>
<p>Teams/sharepoint/tigerpaw/appenate</a></p>
<ul class="actions">
<li>xx</li>
<li>xx</li>
</ul>
</div>
</section>
What I have tried:
After replacing the stock image with a correctly sized one of my own I changed
background-size: cover;
to
background-size: auto;
With no noticable result. Someone suggested it had to do with padding. So I've changed
padding: 14em 0;
to numerous different values and nothing changes. I've also changed the ( banner:before)
height: 50%;
to a few different values and no change.
My css level is intermediate I'd say, I know enough to usually do what I want but in this case I'm stumped. I don't see any other setting that should affect height.
EDIT: It was padding but it was being overwritten by this :
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-xlarge.css" />
</noscript>
As soon as I removed the link to style-xlarge.css it started to listen to the padding settings.
What I don't understand is this. When I first installed this template flask wasn't happy finding those links. It found all the links but not these until the noscript tag was removed.
If this is the full head
<head>
<meta charset="UTF-8">
<title>Transit by TEMPLATED</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-xlarge.css" />
</noscript>
What is the point of the noscript tags in this case? My understanding is that it provides for when the browser has scripting disabled?
You can change padding to something like this to shorten your #banner section height:
padding: 6em 0em;
i'm working on doing a website and i can't seem to make my css apply and everything appears as plaintext to the side. i've been searching for over an hour, i can't figure out what i've done wrong.
<!DOCTYPE html>
<html>
<head>
<title>SOLAR RECORDS</title>
<meta name="viewport" content="width=device-width.intial-scale=1.0"
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jura" rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<style type="text/css">
body {
background-color: #0c0c0c;
padding: 0;
margin: 0;
}
.sidenav {
height: 100%
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
here's the full text
You've missed the closing } in .sidenav. Because of this, all of the styles that come after this do not get applied. Adding this in correctly applies the styles that follow it.
In addition to this, you've also missed the closing > in your <meta name>, meaning your Google Font is not getting applied either.
Finally, your colours all have five characters. You either need to use 3 letters (shorthand) or 6 characters for the full hex value.
You can avoid these mistakes by validating your code with the W3 Markup Validation Service.
Here's a working example:
<!DOCTYPE html>
<html>
<head>
<title>SOLAR RECORDS</title>
<meta name="viewport" content="width=device-width.intial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jura" rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<style type="text/css">
body {
background-color: #0c0c0c;
padding: 0;
margin: 0;
}
.sidenav {
height: 100% width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111 overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
font-family: 'Opens Sans Condensed', sans-serif;
color: #ffffff;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #cccccc;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
img.center {
display: block;
margin: 0;
}
h1 {
font-size: 25px;
font-family: 'Jura', sans-serif;
color: #ffffff;
text-align: center;
}
</style>
</head>
<body>
<h1>SOLAR RECORDS™</h1>
<div style="text align: center"><img src="the.png" alt="Records"></div>
<div id="mySidenav" class="sidenav">
×
HOME
RELEASES
ARTISTS
EVENTS
MIXES
NEWS
LABEL
CONTACT
</div>
<span onclick="openNav()">OPEN</span>
</body>
</html>
I'm using a website to help me to found speed issues on my website.
This problem occurred but I don't know how to solve this
Specify a character set early The following resources have no character set specified in their HTTP headers. Specifying a character
set in HTTP headers can speed up browser rendering.
My code is this:
<!DOCTYPE html>
<html>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name=description content="EFR3SXZ's personal site">
<meta property=og:title content=EFR3SXZ>
<meta property=og:description content="EFR3SXZ's personal site">
<meta property=og:image content=http://richpreview.com/richpreview.png>
<link rel="shortcut icon" href=http://richpreview.com/favicon.ico type=image/x-icon>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>
<style type="text/css" media="screen">
<!-- body {
color: white;
background-color: #003;
margin: 0px
}
#horizon {
color: white;
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content {
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}
.bodytext {
font-size: 14px
}
.headline {
font-weight: bold;
font-size: 24px
}
#footer {
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block
}
a:link,
a:visited {
color: #06f;
text-decoration: none
}
a:hover {
color: red;
text-decoration: none
}
-->
</style>
<title>EFR3SXZ</title>
</head>
<body>
<div id="horizon">
<div id="content">
<div class="bodytext">
Incarnoob
<br>
<span class="headline">EFR3SXZ</span>
<br>website</div>
</div>
</div>
<div id="footer">
Incarnoob's Dofus page</div>
</body>
</html>
The HTML you use is largely irrelevant to the HTTP headers. How you set those depends on the HTTP server you are using and (if applicable) the server side programming language that is generating the response.
If you were (for example) using Apache HTTPD, you might edit your server configuration file to include:
AddDefaultCharset ISO-8859-1
(NB: I'd suggest moving away from legacy encodings and use UTF-8 now it is the 21st century).
This question already has answers here:
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 7 years ago.
I'm a beginner programmer I'm working on a website with my friend Alex, we're both beginners actually, I took on the task of designing the landing page to get some practice in. I want to have these divs which contain nothing but text centered horizontally and vertically (or dead center), I've tried some things other people have suggested on other posts on this site but nothing seems to be working. Could one of you gurus please help me? And thanks in advance :D (I should probably mention that I'm using DW with the Bootstrap framework)
Here's the html:
<!DOCTYPE html>
<html lang="en">
<head>
<!--GOOGLE FONT-->
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="background">
<div id="nav">
<ul>
<li> About </li>
<li> Sign up </li>
</ul>
</div>
<div id="welcome">
<p>TEXT I WANT CENTERED</p>
</div>
<div id="best">
TEXT I WANT BELOW CENTERED TEXT
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
Heres the css:
#charset "utf-8";
/* CSS Document */
.background {
background: url(../img/bg1.jpg) no-repeat 50% 50% fixed;
margin: 0 auto;
max-width: 80%;
min-width: 50%;
width: 80%;
height:auto;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
}
li {
display: inline;
letter-spacing: 2px;
padding-right: 0.5em;
float: right;
font-size: 125%;
font-style:normal;
font-weight: bold;
text-transform: uppercase;
text-decoration:none;
color:#ffffff;
text-shadow: 4px 3px 0px #000000, 9px 8px 0px rgba(0,0,0,0.15);
}
#welcome {
font-family: 'Montserrat', sans-serif;
max-width: 90%;
min-width: 80%;
height: 50%;
font-size: 350%;
font-style:normal;
font-weight: bold;
text-transform:uppercase;
text-decoration:none;
text-align: center;
color:#ffffff;
position: relative;
text-shadow: 4px 3px 0px #000000, 9px 8px 0px rgba(0,0,0,0.15);
z-index: 9998;
}
welcome p {
width: 300px;
height: 100px;
padding: 20px;
}
#best {
font-family: 'Montserrat', sans-serif;
max-width: 100%;
min-width: 70%;
font-size: 200%;
font-style:normal;
font-weight: bold;
text-transform:uppercase;
text-decoration:none;
text-align:center;
color:#ffffff;
position: relative;
text-shadow: 4px 3px 0px #000000, 9px 8px 0px rgba(0,0,0,0.15);
}
p {
text-align:center;
}
a {
color: #FFFFFF;
}
a {
hover: #2a7315;
text-decoration: none;
}
Have you tried adding the class text-center to the div?
You can center elements in different ways:
.element {
display: block;
margin: 0 auto;
}
or
.parent {
text-align: center;
}
.child {
display: inline-block
}
or
.element {
position: relative/absolute;
left: 50%;
margin-left: -20px; (usually minus half size of the element)
}
There's a ton of ways to do what you're asking, and I would suggest different ones for different contexts.
I find the simplest way is to create a class like this:
.v-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Then just add it to whatever you want to be centered vertically (div, a, p, span, etc), and to center text you can just use text-align:center;
Add this CSS in your file:
#nav {
float: left;
width: 100%;
}
The following snippet of code works for me:
#welcome, #best{
margin: 0 auto;
}