I'm back, and doing yet another school project. I'm trying to get my site to use some custom font that I found online. This is my JSFiddle link to my code, and my HTML code is as follows:
<!doctype html>
<html>
<head>
<title>
| Bat-tection |
</title>
<meta charset="utf-8">
<link href="Styles/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<h1 id="title">
Bat-Tection
</h1>
<h6 id="ctrtitle">
The only home protection service you will ever need!
</h6>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</header>
<aside>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
</aside>
<section class="text">
<article>
<h2>Article One Heading</h2>
<p>
Article One Content<img src="../Tuts/Images/pic07.jpg" alt="A Generic Image Caption Here" class="rgt">
</p>
<p>
Vestibulum mi felis, sollicitudin nec iaculis at, facilisis a dolor. Curabitur posuere vulputate egestas. Vestibulum a leo id sapien commodo aliquam commodo quis dui. Phasellus at leo id elit dignissim egestas a eu elit. Quisque bibendum tellus at placerat luctus. Nulla blandit erat ipsum, eu molestie purus sollicitudin sit amet. Sed vehicula tortor quis libero finibus fringilla. Nam nibh mauris, lacinia a suscipit et, fringilla non lorem. Vestibulum tempor vel ligula ut interdum. Donec convallis porttitor est sit amet porttitor. Sed ullamcorper mauris nibh, id fermentum velit iaculis quis. Etiam rutrum blandit hendrerit. Proin a laoreet purus.
</p>
<p>
Curabitur sed leo ligula. Duis sed bibendum mi. Quisque fermentum, lacus in suscipit vulputate, tellus eros tempus metus, non convallis justo augue et turpis. Sed ut tempor elit. Pellentesque congue turpis turpis, nec lobortis arcu sollicitudin non. Nunc pellentesque luctus massa ac faucibus. Nulla ac libero ut diam consectetur euismod sed eget odio. Phasellus maximus justo eget ultricies consectetur. Curabitur nec mi lectus. Nunc vel varius enim. Praesent pulvinar nisi volutpat, facilisis ligula at, volutpat lorem. Mauris nec cursus libero, eget dictum arcu. Praesent tristique lacinia erat sed vestibulum. Cras vestibulum tellus vel urna bibendum eleifend. Proin non nisi ut sapien mattis blandit ut in tellus. Maecenas congue magna nec purus suscipit, in pellentesque quam blandit.
</p>
</article>
<p class="spec"></p>
<article class="cols">
<h2 class="cols-span">Lorem ipsum dolor sit</h2>
<p class="lead cols-span">
Vestibulum mi felis, sollicitudin nec iaculis at, facilisis a dolor.
</p>
<p>
Curabitur sed leo ligula. Duis sed bibendum mi. Quisque fermentum, lacus in suscipit vulputate, tellus eros tempus metus, non convallis justo augue et turpis. Sed ut tempor elit. Pellentesque congue turpis turpis, nec lobortis arcu sollicitudin non. Nunc pellentesque luctus massa ac faucibus. Nulla ac libero ut diam consectetur euismod sed eget odio. Phasellus maximus justo eget ultricies consectetur. Curabitur nec mi lectus. Nunc vel varius enim. Praesent pulvinar nisi volutpat, facilisis ligula at, volutpat lorem. Mauris nec cursus libero, eget dictum arcu. Praesent tristique lacinia erat sed vestibulum. Cras vestibulum tellus vel urna bibendum eleifend. Proin non nisi ut sapien mattis blandit ut in tellus. Maecenas congue magna nec purus suscipit, in pellentesque quam blandit.
</p>
</article>
</section>
<aside class="ads">
<p>
Advertisment can run the size out to the margin of the previous container element, no more!
</p>
<p>
Advertisment
</p>
<p>
Advertisment
</p>
<p>
Advertisment
</p>
<p>
Advertisment
</p>
<p>
Advertisment
</p>
</aside>
<footer>
<p>
Copyright © 2016 All Right Reserved
</p>
</footer>
</div>
</body>
</html>
My CSS code is as follows:
#charset "utf-8";
/*Browser Reset*/
body, p, header, aside, section, article, h1, h2, h3, nav, div, footer{
padding: 0;
margin: 0;
}
/*Style Start*/
#font-face {
font-family: battext;
src: url(../Fonts/batmfa.eot), /* IE9 Compat Modes */
src: url(../Fonts/batmfa.eot?#iefix) format(embedded-opentype), /* IE6-IE8 */
url(../Fonts/batmfa.woff2) format(woff2), /* Super Modern Browsers */
url(../Fonts/batmfa.woff) format(woff), /* Pretty Modern Browsers */
url(../Fonts/batmfa.ttf) format(truetype), /* Safari, Android, iOS */
url(../Fonts/batmfa.svg#svgFontName) format(svg); /* Legacy iOS */
}
.ads{
float: right;
text-align: center;
font-size: 90%;
color: #b498989;
}
.ads p{
background-color: #29292C;
padding-top: 0.3em;
}
aside{
overflow: hidden;
max-width: 200px;
float: left;
min-height: 900px;
background-color: #29292C;
}
aside p{
padding: 0px 20px;
}
article p{
text-indent: 2em;
padding-left: 1.5em;
}
body{
font-family: "battext";
color: #FFFD5D;
background-color: #252122;
font: 100% Verdana;
}
#ctrtitle{
text-align: center;
}
.cols{
/*-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 10px;
-moz-colum-gap: 10px;
column-gap: 10px;*/
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}
.cols-span{
-webkit-coloumn-span: all;
-moz-column-span: all;
column-span: all;
font-size: 1.2em;
margin-bottom: 0.2em;
line-height: 1.2em;
}
.cols p{
margin-bottom:1.1em;
text-align: justify;
}
footer{
clear: both;
background-color: #29292C;
text-align: center;
font-size: 85%;
min-height: 100px;
}
footer p{
padding-top: 3%;
}
header{
background-color: #29292C;
padding-bottom: 1em;
}
header h1{
text-align: center;
color: #252122;
font-weight: 900;
font-size: 2.5em;
margin: 0 0 1em 0;
}
.lead{
font-family: Georgia;
font-size: 1.3em;
text-align: left;
font-style: italic;
}
nav ul{
text-align: center;
margin: 1em;
list-style: none;
}
nav ul li{
display: inline-block;
margin: 0 0.35em;
nav ul li a{
background-image: url(../Images/bat-button1.jpg);
background-size:contain;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
color: #e1e2dd;
text-decoration: none;
padding: 0.6em 1.2em 0.6em 1.2em;
outline: 0;
}
nav ul li a:hover{
background-image: url(../Images/bat-button2.jpg);
background-size:contain;
background-position: center;
background-repeat: no-repeat;
}
nav ul li ul{
display: none;
}
p{
margin-bottom: 1.2em;
}
.rgt{
float: right;
max-width: 30%;
padding: 0.3em;
}
section{
padding: 10px;
float: left;
max-width: 65%;
}
.spec{
margin: -5px 0 10px 0;
border-bottom: 1px dashed #000000;
line-height: 0;
}
.text{
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
#title{
color: #FFFD5D;
}
#wrapper{
max-width: 1200px;
margin: 0 auto;
background-color: #403E3A;
}
Can you guys off me any help?
Thanks,
-dark_nemesis
what i understand from your question is that you want to know how to use fonts, isn't it?
you can always visit https://www.google.com/fonts and under every font there is a button about how to use this font.
You're just missing a line of code (I think) it is
font-family: battext, sans-serif;
If you insert that under the body element as well as the font-face. Then I think it will work. Hope this helps...
take the quotations off the css
font-family: "battext"
side note, check to make sure you have right to use it in whatever you're doing
also check to make sure the file path is correct.
If your structure is like this: (upper case = folders)
HTML
index.html
CSS
styles.css
FONT
myfont.ttf
then.. these should be your code
html: <link type="text/css" rel="stylesheet" href="../css/styles.css" />
take off "../" if index.html is same level as CSS/FONT folder
css: #font-face { font-family: myfont; src: url(../font/myfont.ttf); }
the src for css will start where in the folder it's in, so styles.css has to go back a directory, then go to font and your file
Related
I know this question has been asked 100 million times... but I am truly at a loss as to why this is happening. I have a simple website with a header, a 'hero' section and a div of the body content. Everything with the layout is fine except for when I go under around 600 pixels in the responsive view in Chrome. The 'hero' image starts to skew heavily to the left as if there is something off the screen pulling it. I checked to make sure there were no margins or fixed width elements and there is none that could be causing this (the only fixed width element is an image that is around 300px). While troubleshooting, it appears that the entire body tag is the correct width as the viewport but is being pushed to the left as the screen is made smaller.
That being said, the 'content' div is not being skewed to the left and a last minute fix I came up with was putting the hero section inside the body content div. But this is not ideal because I need them to be separate for styling reasons.
I did Google around quite a bit to see why this is happening. I tried adding 'overflow: hidden' to the body and html tags. It helped a little bit, but the problem persisted as I made the width smaller. I also added 'margin:0', 'width: 100%' to the body, html and hero container tags and it didn't do anything.
One possible issue is the size of the hero image, but I'm not sure why there would be so much white space to the right if it's too big.
Here is the HTML for the website:
<body>
<header class="header">
<nav>
<a href="#" class="header__logo">
<img src="images/logo_nostroke.png" alt="Header logo" />
</a>
<a href="#" class="header__hamburger_menu">
<span class="bar one"></span>
<span class="bar two"></span>
<span class="bar three"></span>
</a>
<ul class="header__links">
<li class="nav_item">
About
</li>
<li class="nav_item">
Clinical Work
</li>
<li class="nav_item">
<a href="#consultation_supervision"
>Consultation and <br />Supervision</a
>
</li>
<li class="nav_item">
Writing Projects
</li>
<li class="nav_item">
Resources
</li>
</ul>
</nav>
</header>
<section class="hero">
<div class="hero__image"></div>
<div class="hero__text">
<h2 class="quote">
“Without community there is no liberation” – Audre Lorde
</h2>
Nullam euismod eget ex eget hendrerit. Proin pharetra mi dolor, et fermentum velit
porttitor in. Proin lacinia metus in erat suscipit, non auctor lacus cursus. Vivamus
ullamcorper, felis id pretium vulputate, urna ligula finibus ante, sit amet accumsan
nisl lorem eu tortor. Donec finibus semper tellus ut pellentesque. Vestibulum at
imperdiet eros. Nam vel nibh vitae nisl consequat varius ac a leo. Quisque ut ligula
tincidunt, dignissim mi eu, eleifend augue. Aenean hendrerit egestas nibh non
faucibus. In malesuada nunc nec diam rutrum facilisis. Cras porta velit ut bibendum
maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus.
</div>
</section>
<div class="content">
<div class="about" id="about">
<div class="portrait_img">
<img
src="images/portrait_image.jpg"
alt="image of reese."
class="portrait"
/>
</div>
<div class="p1">
<h2 class="strong_title">About me...</h2>
<span class="bold">Welcome!</span> Nam mollis nisi turpis, gravida varius nibh tempus a. In magna risus, pretium non magna eu, rutrum suscipit nisl. Donec laoreet ante non nisi tincidunt, sed bibendum est commodo. Nunc sollicitudin laoreet dui. Cras vel volutpat turpis, eget vulputate nulla. Phasellus tincidunt maximus eros eu ultrices. In diam velit, lobortis ac scelerisque ac, sollicitudin sed ipsum. Vivamus non lorem nec libero vehicula condimentum quis placerat lacus. Maecenas id nibh a risus eleifend venenatis et sed metus. Fusce lobortis lectus augue, quis cursus magna ullamcorper sed.
</div>
</div>
<div class="clinical_work content_box" id="clinical_work">
<div class="p2">
<h2 class="strong_title">Clinical Work</h2>
<hr width="500px;" color="black" size="3" align="left" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu condimentum
nunc. Aliquam erat nunc, aliquam molestie velit a, lobortis hendrerit eros.
Pellentesque et maximus sem, porta volutpat nibh. Pellentesque a feugiat tellus,
id placerat tellus. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Pellentesque vulputate lorem eu ipsum
facilisis, id tristique orci ultrices. Fusce ac ornare nibh. Nullam commodo et
neque sed varius. Cras nulla enim, bibendum eget euismod vel, rhoncus eget arcu.
Nulla facilisi. Vivamus imperdiet mi nec nibh semper sollicitudin. Nunc sed purus
quis tortor vulputate cursus. Vivamus massa sapien, faucibus et pulvinar at,
gravida a nulla. Vivamus auctor egestas scelerisque.
</div>
</div>
</div>
<script src="script.js"></script>
</body>
Here is the SCSS for the hero section:
.hero {
&__image {
background-image: url("../images/heroimage_fadeout.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
min-height: 110vh;
width: 100%;
position: relative;
}
&__text {
position: absolute;
bottom: 50px;
padding: 1em;
margin-left: 10em;
margin-right: 10em;
text-align: center;
background-color: #f8f069;
border: solid black;
font-size: 1.2em;
}
}
And here is the SCSS for the body content section that is perfectly placed on the site:
.content {
padding: 1.6em;
#include breakpoint-up(large) {
margin: 0 0 5rem;
}
#include breakpoint-down(small) {
padding: 5em 1em 1em 1em;
width: fit-content;
}
.about {
display: grid;
grid-template-columns: 1fr 2fr;
margin: 13em 18em 3em;
padding: 2em 3em 1em 3em;
border: black solid;
background-color: #f8f069;
#include breakpoint-down(medium) {
grid-row-gap: 0px;
grid-template-columns: 1fr;
grid-template-rows: auto;
padding: 0;
margin: 0;
}
#include btw-mobile-desktop {
margin: 1em 4em;
padding: 2em;
}
.portrait_img {
align-self: end;
justify-self: center;
margin-right: 1em;
#include breakpoint-down(small) {
grid-area: auto;
align-self: center;
justify-self: center;
padding: 0.3em;
}
#include btw-mobile-desktop {
justify-self: center;
align-self: center;
}
.portrait {
max-width: 300px;
#include breakpoint-down(small) {
max-width: 230px;
}
}
}
.p1 {
align-self: end;
#include breakpoint-down(small) {
grid-area: auto;
justify-self: center;
padding: 0em 1em 0em 1em;
}
.strong_title {
font-size: 3em;
margin: 0;
#include breakpoint-down(small) {
text-align: center;
font-size: 2.6em;
}
}
}
}
}
.bold {
font-weight: bolder;
font-size: 1.4rem;
}
.content_box {
margin: 13em 18em 3em;
padding: 3em;
border: black solid;
background-color: #f8f069;
#include breakpoint-down(medium) {
padding: 1em;
margin: 2em 0;
}
#include btw-mobile-desktop {
margin: 1em 4em;
padding: 2em;
}
.strong_title {
font-size: 3em;
margin: 0;
}
}
Here is a picture of the problem. Please ignore the very thin text box with the words scribbled out. That is the next issue I was going to fix on mobile. The issue is the hero image behind the text box being skewed:
HTML:
<div class="img-wrapper">
<div class="hero__image"></div>
</div>
instead of :
<div class="hero__image"></div>
in css remove width:100%; for the image
and add these styles for the wrapper
.img-wrapper{
width: 100%;
overflow-x:hidden;
height: max-content;
}
SOLVED:
There were elements in the code that were forcing the layout be too wide.
The first problem was the 'hr' tag in the clinical work div.
Also the margins on the hero text were not responsive.
Solution:
Adding in responsive sizing to the hr tag in CSS.
Set the width of the hero__text to a percentage of the screen and then center it horizontally with transform:translate.
transform: translate(-50%);
margin-left: 50%;
Div should not be over Div with background image with divs inside, but for some reason the about div is displayed over the nav:
body {
margin: 0;
padding: 0;
/*background-color: blue;*/
}
.divider {
background-color: #be2b27;
width: 100%;
height: 100px;
position: absolute;
display: block;
padding: 0;
}
.divider h1 {
font-family: "Nexa Light";
font-size: 2em;
color: white;
text-align:left;
padding-left: 10px;
}
.lorem-text {
font-family: "Menlo";
font-size: 1.2em;
color: white;
}
.start-section {
margin-top: 30px;
/* position: absolute; */
padding-left: 20px;
padding-top: 20px;
}
#start-bg {
background-image: url(water.jpg);
background-color:#9abee1;
background-repeat: round;
height:100%;
position: absolute;
}
#home-head {
font-family: 'Nexa Light';
/* font-size: ; */
padding-top: 30px;
color: white;
}
.nav { }
<div id="start-bg">
<!--<div class="nav"...>...</div>-->
<div class="start-section">
<h1 id="home-head">Landing Page</h1>
<p class="lorem-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare est in maximus vestibulum.
Mauris eu tincidunt quam.<br> In commodo neque id tortor mattis, non consectetur ante tincidunt.
Nunc ultrices ultricies purus, id finibus justo eleifend sit amet.<br>
Sed in iaculis libero, et gravida nibh.
Proin mollis, nibh eu rhoncus scelerisque, orci ex posuere mi, id pharetra purus est suscipit sapien.
Aliquam fermentum dignissim ultricies. Cras vitae neque tincidunt, tristique neque at, ornare leo.<br>
Integer gravida lectus sed venenatis auctor. Vestibulum sed ligula eget dui ultrices luctus.<br>
Etiam dapibus auctor sollicitudin. Nam vel dui non lorem semper scelerisque. Donec sed condimentum mauris.
Maecenas ac enim sit amet orci sodales porta.
</p>
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150"><br>
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150"><br>
</div>
</div>
<div class="divider">
<h1>About</h1>
</div>
There must be something wrong with the positions or something or the fact that when the div has a background image it is not registered as holding any content so the about div is displayed above it.
What do I need to do?
I want the div to be displayed after the background image ends and stays there when I remove the images. If you need the nav html and css code i will give it to you.
#start-bg {
background-image: url(water.jpg);
background-color:#9abee1;
background-repeat: round;
height:100%;
position: absolute;
}
If you remove:
position: absolute;
Red bar go to bottom bottom of the page.
Im trying to re-create my mockup from photoshop in code. I've managed to get all elements in the page.
I want a picture and then to have to text directly to the right of it.
Any CSS help would be amazing, thank you in advance!
HTML
<h1>About Me</h1>
<div id="about">
<img src="images/me.png" class="meimage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lectus tortor, sodales ac velit sit amet, imperdiet posuere risus. Nam congue volutpat vehicula. Sed convallis tempor orci vitae aliquam. Quisque at faucibus eros. Sed laoreet, orci et ultricies luctus, turpis leo pharetra felis, ac tristique ligula nisl id enim. Nullam porta quam et dolor eleifend placerat. Aenean rhoncus, tellus ut sodales suscipit, nunc enim ornare dui, cursus tincidunt urna nisl vitae lacus. Nunc tincidunt auctor dolor, eget laoreet justo gravida vel. In convallis arcu massa, quis gravida purus vestibulum eget.
</div>
CSS
.meimage{
margin: 20px 20px 20px 20px;
height:200px;
width:200px;
}
#about{
text-align: center;
width:800px;
text-shadow:0 -1px 1px rgba(0,0,0,0.6);
font-family: 'Verdana', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Cantarell', sans-serif;
font-weight:700;}
h1{
display: block;
padding: 0px 155px;
font-family: 'Cantarell', sans-serif;
text-shadow:0 -1px 1px rgba(0,0,0,0.6);
}
You can use CSS float to wrap text around an image. Though I'd say it looks a little strange with the text centered:
.meimage {
float:left;
margin:0 1em 1em 0;
}
http://jsfiddle.net/SJTDS/1/
Edit
If this is a static page and the content won't be changing, you can probably just update the padding on your <h1> to get it to align with the image.
h1 {
...
padding: 0px 20px;
}
http://jsfiddle.net/SJTDS/4/
Keep in mind that fixed pixel settings can be fragile and break when, for instance, you upload a larger image.
If this is an issue, I'd use a different structure.
.meimage, #about {
float: left;
}
Edit: You wanted header floated left too:
.col {
float: left;
margin: ...;
}
<div class="col"><h1>About Me</h1><img ... /></div>
<div class="col"><p>Lorem Ipsum...</p></div>
in my CSS example I've created a horizontal menu with 50px height. Also tried to use a sticky footer but the BODY is longer with the height of the top menu, and because of it a 50px big white place appeared on the bottom of the page under the Footer. [The problem exists on IE10. Not tested in other browsers yet.]
JSFiddle
html file:
<!doctype html>
<html>
<head>
<!-- Load jQuery from Google's CDN -->
<script src="jquery-1.9.1.js"></script>
<!-- Source our javascript file with the jQUERY code -->
<script src="script.js"></script>
<link rel="stylesheet" href="runnable.css" />
</head>
<body>
<div id="header">
<div id="headerline">
<div class="wrapper">
<ul class="navigation">
<li class="logo">
WebApp
</li>
<li class="tmenu">
<span class="menuItem">Site Events</span>
<ul class="smenu">
<li><span>Consulting</span></li>
<li><span>Sales</span></li>
<li><span>Support</span></li>
</ul>
</li>
<li class="tmenu">
<span class="menuItem">Text files</span>
<ul class="smenu">
<li>Company</li>
<li>Mission</li>
<li>Contact Information</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="content">
<div class="wrapper">
<div class="contentbox">
<h1>Welcome Message</h1>
<p class="date">3/31/2014 - 4:37 PM</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel dui tempus, iaculis arcu sit amet, porttitor turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu quam mi. Morbi ac nulla eget diam commodo faucibus. Proin dignissim elit a ligula rhoncus, vitae viverra justo dignissim. In congue quam molestie, mollis ante sed, viverra urna. Pellentesque massa velit, eleifend a magna nec, vulputate gravida dui. Integer pulvinar id arcu ut faucibus. Phasellus vitae augue ac eros sollicitudin vehicula. Nunc aliquam leo a laoreet consequat. Fusce tristique mauris sed neque feugiat, id dignissim dui bibendum. Ut hendrerit commodo mi. Nunc pharetra, eros ut ultricies ultricies, erat lectus vehicula odio, vel suscipit odio nisi eu tellus. Integer interdum adipiscing gravida. Donec vitae neque diam. Mauris interdum eu nulla nec interdum.</p>
<p class="text">Vivamus eu quam ut felis hendrerit mattis ac nec urna. Maecenas erat felis, gravida ut porttitor at, congue eget mauris. Phasellus interdum dolor sem, et gravida massa scelerisque ac. Pellentesque non rhoncus orci. Quisque viverra tellus justo, eu congue mi mattis eget. Fusce a nulla urna. Fusce et mauris eget lorem lacinia sollicitudin. Fusce condimentum neque quis est tristique,aliquet dui sodales.</p>
<p class="text">Donec at velit nec nibh porttitor auctor quis non ipsum. Vestibulum condimentum viverra mattis. Praesent sed quam ultricies magna tempor tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed venenatis nulla eget sapien hendrerit vulputate. Donec sed libero justo. Aliquam diam felis, feugiat ac vulputate vel, iaculis at lorem. Nam facilisis lacus nec turpis bibendum, sit amet rutrum eros ultrices. </p>
<p class="text">Quisque quis scelerisque risus. Fusce a lacinia velit, non vestibulum ipsum. Donec nunc ipsum, semper quis sagittis nec, facilisis id felis. Morbi eget magna volutpat, adipiscing dui ac, elementum est. Curabitur sem diam, rhoncus in lorem eu, sodales eleifend sem. Etiam bibendum convallis fermentum. Donec ullamcorper pulvinar neque in auctor. Vestibulum tincidunt arcu vel orci molestie porta. Quisque quis commodo velit, eget vulputate nibh. Cras eu venenatis tellus. </p>
<p class="text">Duis ultricies accumsan euismod. Nulla pulvinar felis placerat vehicula rutrum. Etiam placerat vitae lacus nec laoreet. In nunc nibh, tincidunt sed dictum sit amet, ultrices vel enim. Nulla in urna molestie, pulvinar massa non, consectetur augue. Ut et ligula vitae libero vehicula mollis. Suspendisse nisl felis, pretium eget libero in, pharetra porttitor lectus. Nunc tincidunt nunc neque. Donec eget interdum ante. Pellentesque vehicula sapien eu lectus tempus interdum. Suspendisse pharetra purus id lectus cursus dapibus. Proin sed lorem dignissim, placerat est sit amet, blandit diam. Ut ut risus vitae neque sodales rhoncus nec ac massa. Fusce ac augue tincidunt, vulputate augue sit amet, varius tellus. Vivamus a tortor ipsum. Vestibulum in tellus neque.</p>
</div>
</div>
</div>
<div id="footer">
<div id="fback">
<div class="wrapper">
<div id="fContent">
<ul><p>Help</p>
<li>About WebApp</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<ul><p>FAQ</p>
<li>Question</li>
<li>Question</li>
<li>Question</li>
</ul>
<ul><p>Contacts</p>
<li>Person</li>
<li>Person</li>
<li>Person</li>
<li>Person</li>
<li>Person</li>
<li>Person</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS file:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
/*border: 2px solid red;*/
}
body {
font-family: arial;
text-align: center;
background:url(foo) fixed;
height: 100%;
/*border: 2px solid red;*/
}
div.wrapper {
width: 1100px;
margin: 0 auto;
padding: 0;
}
/*=== header ===*/
div#header {
text-align: center;
position: fixed;
_position: absolute;
top: 0;
left: 0;
_top:expression(eval(document.body.scrollTop));
display: block;
width: 100%;
}
div#headerline {
padding: 0;
margin: 0;
background: #e6e6e6;
height: 50px;
border-bottom: solid 1px #172740;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.navigation li{
float: left;
}
ul.navigation a {
text-decoration: none;
display: block;
}
span.menuItem {
display: inline;
display: inline-table;
display: inline-block;
line-height: 68px;
}
li.logo {
font-family: tahoma;
font-size: 40px;
font-weight: bold;
}
li.logo a {
padding: 0;
height: 50px;
width: 180px;
text-align: left;
}
li.tmenu {
float: left;
width: 160px;
position: relative;
}
li.logo a, li.tmenu > a { /* ">" means the first level of this type of children*/
color: #172740;
text-shadow: 2px 2px white;
}
li.tmenu a {
width: 160px;
height: 50px;
}
li.tmenu > a {
font-weight: 600;
}
li.tmenu > a:hover {
font-weight: 900;
}
ul.smenu {
display: none;
position: absolute;
margin-left: 0px;
list-style: none;
padding: 0px;
background: #172740;
border: solid 1px #000;
}
ul.smenu, ul.smenu li {
width: 160px;
float: left;
}
ul.smenu a {
display: block;
height: 20px;
padding: 8px 0px;
color: #fff;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px #000;
}
ul.smenu a:hover {
font-weight: bold;
}
/*=== content ===*/
div#content {
text-align: left;
/*position: relative;*/
min-height: 60%;
margin-top: 50px;
}
h1 {
padding: 0;
margin: 0;
padding-top: 50px;
color: #253e66;
font-size: 25px;
}
p.date {
font-size: 8px;
color: #aaa;
}
p.text {
font-size: 14px;
margin-bottom: 6px;
}
/*=== Footer ===*/
div#footer {
padding-top: 50px;
width: 100%;
min-height: 20%;
}
div#fback {
overflow: hidden;
padding: 0;
margin: 0;
background: #253e66;
text-align: center;
}
div#fContent {
color: #e6e6e6;
text-align: center;
}
div#fContent ul {
text-align: left;
float: left;
padding: 40px 70px 50px 0px;
font-size: 14px;
}
div#fContent ul > p {
font-weight: bold;
padding-bottom: 12px;
}
div#fContent li {
padding-bottom: 3px;
}
/*=== Copyright content ===*/
JS file:
$(document).ready(
/* This is the function that will get executed after the DOM is fully loaded */
function () {
/* Next part of code handles hovering effect and submenu appearing */
$('.tmenu').hover(
function () { //appearing on hover
$('ul', this).fadeIn();
},
function () { //disappearing on hover
$('ul', this).fadeOut();
}
);
}
);
Also weird that, if I set a border on the BODY, big part of the white space is disappear. Please help me out, what I've messed in the CSS, and how can I repair my code. Thanks a lot in advance.
sorry the was indeed a problem didnt understand the question.
I changed div#fContent ul from:
div#fContent ul {
text-align: left;
float: left;
padding: 40px 70px 50px 0px;
font-size: 14px;
}
to:
div#fContent ul {
text-align: left;
float: left;
padding: 40px 70px 0px 0px;
font-size: 14px;
}
Good luck. Check the fiddle and let me know:
DEMO
don't quote me on this please... but I think that the the paragraph element gives white space so to remove this make its margin 0px. Hope it's the right answer if not please comment back MontyX. thanks
This problem with calling up the font that has been declared at the start of the CSS has been bugging me for a day. I've checked many resources and the code seems to be ok, but maybe i'm missing something. I've put in the #font face and tried to use it in my h1 header but it doesn't work.
Thanks in advance guys.
HTML
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Photoblog</TITLE>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</HEAD>
<BODY>
<div id="container">
<header>
<H1>Howard Tang</H1>
</header>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div id='container'>
<aside>
<h2>About Me</h2>
<p>Hello here is some placeholder text.Hello here is some placeholder text.Hello here is some placeholder text.</p>
</aside>
<article>
<h2>Welcome:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros justo, quis consectetur arcu.
Etiam vel orci massa, vel vestibulum ante. Nam posuere luctus iaculis. In id augue augue.
Integer vel massa purus, sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue interdum. Curabitur tempus accumsan lacus
id accumsan. Nulla fermentum, purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl ac
turpis. </p>
<img src="pic1.jpg" alt="Angry face" class="resize"/>
</article>
<article>
<h2>First Impressions</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros justo, quis consectetur arcu.
Etiam vel orci massa, vel vestibulum ante. Nam posuere luctus iaculis. In id augue augue.
Integer vel massa purus, sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue interdum. Curabitur tempus accumsan lacus
id accumsan. Nulla fermentum, purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl ac
turpis. </p>
<img src="pic2.jpg" alt="Angry face" />
</article>
<article>
<h2>Bro</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros justo, quis consectetur arcu.
Etiam vel orci massa, vel vestibulum ante. Nam posuere luctus iaculis. In id augue augue.
Integer vel massa purus, sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue interdum. Curabitur tempus accumsan lacus
id accumsan. Nulla fermentum, purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl ac
turpis. </p>
<img src="pic3.gif" alt="Angry face" />
</article>
<footer>
<p>By Howard Tang</p>
</footer>
</div>
</BODY>
</HTML>
CSS:
#font-face {
font-family: 'Blackout';
src: url('fonts/Blackout2.ttf');
font-weight: normal;
font-style: normal;
}
body {
background-color:#F2E9E1;
color : #111111;
font-family : "Arial", "helvetica", sans-serif;
font-size : 11pt;
}
header h1 {
background-color: #1C140D;
color: #ffffff;
display:block;
height: 80px;
width: 900px;
text-align : left;
line-height: 80px ;
font-size: 60px;
font-family:'Blackout',Sans-Serif;
margin-bottom: 0px;
}
nav ul {
list-style : none;
padding-top: 20px;
padding-bottom: 20px;
margin: 0px;
padding-left: 0px;
text-align : center;
}
nav ul li {
color : #111111;
margin: 0px;
display : block;
}
nav {
width:1900px;
align:center;
background-color:#F2E9E1;
margin-top: 20px;
margin-left: 0px;
padding: 0 0 0 0;
}
nav a {
color : #111111;
}
nav ul li {
display : inline;
}
article {
background-color: #CBE86B;
float: left;
padding: 20px 20px 40px;
width: 560px;
height: 560px;
}
article img {
float: left;
height : 350px;
width : 550px;
}
aside {
background-color: #1C140D;
color: #CBE86B;
float: right;
padding-left: 20px;
padding-right: 20px;
width: 260px;
height: 1840px;
padding-top: 20px;
}
#container {
width : 900px;
margin : 0 auto;
}
footer {
margin-top: 20px;
text-align: left;
}
Every browser support different type of font ( http://sixrevisions.com/css/font-face-guide/ ):
Internet Explorer only supports EOT
Mozilla browsers support OTF and TTF
Safari and Opera support OTF, TTF and SVG
Chrome supports TTF and SVG.
so your css should look like this:
#font-face {
font-family: 'Blackout';
src: url('/Resources/fonts/Blacout2.eot');
src: url('fonts/Blacout2.ttf'), url('fonts/Blacout2.woff'), url('fonts/Blacout2.svg');
font-weight: normal;
font-style: normal;
}
A possibility is that you have NoScript (or similar) installed? It's known to block web fonts unless you allow them.
It turns out the problem was that font face src pathing is relative to the stylesheet file. So my fonts were actually in the wrong folder, which meant the code was ok but it was a simple pathing error.
I figured it out after a couple of days of frustration and will not be making this simple mistake again, thanks to everyone who helped.