A following html markup creates a QA section in my site.
I want it to be this way - sentence in Q section should be positioned on the same line as "Q" symbol; Sentences in A section should be moved slightly to the right and each sentence should start from new line.
Like this:
But for now it looks this way:
<html>
<head>
<style type="text/css">
.qa b {
font-size: 50px;
}
.qa .answer_box {
margin-left: 90px;
display: inline;
}
.qa p {
font-size: 25px;
}
</style>
</head>
<div class="qa">
<div class="question">
<b>Q</b>
<p>
Do you believe in SEO?
</p>
</div>
<div class="answer">
<b>A</b>
<div class="answer_box">
<p>
Yes I Do
</p>
<p>
SEO is a very powerful technique to increase your site ranking in Google.
</p>
<p>
Also it just cool and so so so.
</p>
</div>
</div>
</div>
Would be grateful for your help.
Use float and a padding/margin maneuver, with the b tag replaced with a strong and place within the first p tag per block:
p strong {
float: left;
margin-left: -1.5em;
font-size: 3em;
}
p {
padding-left: 5em;
}
<p>
<strong>Q:</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non turpis cursus, viverra libero a, ultricies enim. Cras quis ornare urna, condimentum luctus lorem. Aliquam et odio et magna pretium molestie. Fusce pulvinar nisi id mi pharetra scelerisque. Sed mollis accumsan tincidunt. Quisque libero erat, gravida sed rutrum et, volutpat non dui. Etiam eget leo in ipsum consectetur iaculis. Vestibulum dictum leo quis tristique feugiat. Donec vestibulum odio placerat, tincidunt orci vel, sagittis nibh. Integer ultricies ultrices ornare. Duis neque ligula, facilisis sit amet metus eget, adipiscing rhoncus justo. Nam fermentum suscipit mauris, nec volutpat augue condimentum ac. Mauris consequat ante sed lacus vehicula scelerisque. In non gravida ligula, at dapibus ligula.
</p>
<p>
<strong>A:</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non turpis cursus, viverra libero a, ultricies enim.
</p>
<p>Cras quis ornare urna, condimentum luctus lorem. Aliquam et odio et magna pretium molestie. Fusce pulvinar nisi id mi pharetra scelerisque. Sed mollis accumsan tincidunt. Quisque libero erat, gravida sed rutrum et, volutpat non dui. Etiam eget leo in ipsum consectetur iaculis. Vestibulum dictum leo quis tristique feugiat. Donec vestibulum odio placerat, tincidunt orci vel, sagittis nibh. Integer ultricies ultrices ornare. Duis neque ligula, facilisis sit amet metus eget, adipiscing rhoncus justo. Nam fermentum suscipit mauris, nec volutpat augue condimentum ac. Mauris consequat ante sed lacus vehicula scelerisque. In non gravida ligula, at dapibus ligula.</p>
http://jsfiddle.net/userdude/cZJhU/5/
Keep in mind you'll want to use classes to add these styles, not element-level selectors like p and p strong. This is for demonstration purposes only.
NOTE
For those claiming it does not look like what the OP asked for, here is what it appears like in every browser I look at it with:
I just rewrote your code as I couldn't deal with it - this looks exactly how you'd like it to be:
http://jsfiddle.net/f8NjK/
<div class="wrapper">
<div class="leftcol">
<strong>Q</strong>
</div>
<div class="rightcol">
<p>Do you believe in SEO?</p>
</div>
<div class="leftcol">
<strong>A</strong>
</div>
<div class="rightcol">
<p>Yes I do</p>
<p>SEO is a very powerful technique to increase your site ranking in Google.</p>
<p>Also it just cool and so and so</p>
</div>
</div>
CSS:
strong {
font-size: 50px;
}
.wrapper {
width:100%;
}
.leftcol {
width:10%;
display:inline-block;
}
.rightcol {
width:80%;
vertical-align:top;
display:inline-block;
}
I put a container. check this fiddle for live demo. http://jsfiddle.net/KdPfz/1/
.container
{
width: 100%;
height: 60px;
}
.letter
{
font-size: 50px;
float: left;
}
.sentence
{
width: 350px;
margin-top: 20px;
margin-left: 20px;
font-size: 20px;
float: left;
z-index: 5;
}
Like this?
<html>
<head>
<style type="text/css">
.qa b {
font-size: 50px;
}
.qa .answer_box {
margin-left: 90px;
display: inline;
}
.qa p {
font-size: 25px;
display: block;
}
.answer_box p {
margin-left: 50px;
}
</style>
</head><body>
<div class="qa">
<div class="question">
<b>Q</b>
<p style="display: inline-block;">
Do you believe in SEO?
</p>
</div>
<div class="answer">
<b>A</b>
<div class="answer_box">
<p style="display: inline-block;">
Yes I Do
</p>
<p>
SEO is a very powerful technique to increase your site ranking in Google.
</p>
<p>
Also it just cool and so so so.
</p>
</div>
</div>
</div>
If you inject a display: inline-block; style into your first p tag, leave the rest to the p tags natural block format, and a conditional margin for the answer block.
This may be more what you are looking for - a fiddle - I re-wrote your html to avoid using styling elements
<div class="qa">
<div class="question">
<div class="bold-letters">Q</div>
<div class="questions">
<p>Do you believe in SEO?</p>
</div>
</div>
<div class="answer">
<div class="answer_box">
<div class="bold-letters">A</div>
<div class="answers">
<p>
Yes I Do
</p>
<p>
SEO is a very powerful technique to increase your site ranking in Google.
</p>
<p>
Also it just cool and so so so.
</p>
</div>
</div>
</div>
and some short css
.bold-letters, .answers, .questions{
display:inline-block;
}
.bold-letters{
font-size:50px;
vertical-align:top;
margin-right: 30px;
}
.questions{
vertical-align:bottom;
}
I was writing this while the other answers popped up
http://jsfiddle.net/tprats108/ugaYM/
css:
.qa {
font-size: 25px;
}
.qa .heading {
font-weight: bold;
font-size: 50px;
float: left;
}
.qa .response {
float: left;
margin-left: 20px;
}
.clear {
clear: both;
}
html:
<div class="qa">
<div class="question">
<div class="heading">Q</div>
<div class="response">
<p>Do you believe in SEO?</p>
</div>
</div>
<div class="clear"></div>
<div class="answer">
<div class="heading">A</div>
<div class="response">
<p>Yes I Do</p>
<p>SEO is a very powerful technique to increase your site ranking in Google.</p>
<p>Also it just cool and so so so.</p>
</div>
</div>
</div>
Related
I'm trying to make the image resolution width dictate the width of the container. The trick is that when a p element gets wider than the image, the whole container stretches. What I want it to do is for the p element to respect the width of the image and never stretch the container width more than the image does. I don't want to set a fixed width. Here's a demo:
#outer, #inner{
border-width: 1px;
border-style: solid;
box-sizing: border-box;
padding: 5px;
text-align: center;
}
#outer {
border-color red;
}
#inner { border-color: red; display:inline-block; }
img{max-width:100%;}
.fixed {
width:300px; /*This is what i'm trying to avoid*/
}
<!DOCTYPE html>
<html>
<head>
<title>containers, img, p test</title>
</head>
<body>
<div id="outer">
<div id="inner">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
<div id="outer">
<div id="inner" class="fixed">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
<p>
This is how the first one is supposed to look. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
</body>
</html>
Changing the CSS to inline-block will mean the elements increase with the size of the image.
I added inline-block for just the id img to show you how it can work.
#outer, #inner, #img {
border-width: 1px;
border-style: solid;
box-sizing: border-box;
padding: 5px;
text-align: center;
}
#outer {
border-color red;
}
#inner { border-color: red; display:inline-block; }
#img { border-color: blue;display:inline-block;}
img{max-width:100%;}
.fixed {
width:300px; /*This is what i'm trying to avoid*/
}
<!DOCTYPE html>
<html>
<head>
<title>containers, img, p test</title>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="img">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
<div id="outer">
<div id="inner" class="fixed">
<div id="img">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
</div>
<p>
This is how the fist one is supposed to look. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
</body>
</html>
Hope that is what you were after.
I am trying to create a layout where an element (.figure) is center aligned when it is shorter (in height) than its container (.timeline-content). But I want the element to have the same height as its container when it is longer than its container.
The height of the container itself depends on its parent.
This image should help clarify the desired behavior.
This is what I have right now, I don't quite understand why img extends past its parent even though its max-height: 100%
https://jsfiddle.net/kgdkyte4/3/
html{
position: relative;
}
.timeline-item{
width: 100%;
overflow:hidden
}
.timeline-content{
width: 50%;
float: left;
text-align: right;
}
.timeline-image{
display:flex;
align-items: center;
position:absolute;
right: 0;
width: 50%;
height:100%;
}
.figure{
width:100%;
max-height: 100%;
margin: 0;
position:relative;
}
img{
max-height:100%;
max-width:100%;
float:left;
}
<div class="timeline-item">
<div class="timeline-content">
<h3 class="timeline-title">Blah blah blah
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ornare sem. In sodales ac nisl facilisis pharetra. Nam non pellentesque mauris. Proin scelerisque, sapien non scelerisque auctor, nunc erat condimentum est, viverra dapibus dui odio a neque. Mauris est dui, posuere at urna in, gravida tincidunt odio. Integer quis egestas est. Praesent tincidunt justo nec nibh malesuada ullamcorper. Nulla convallis et quam vitae posuere.
</p>
</div>
<div class="timeline-image">
<figure class="figure">
<img src="http://via.placeholder.com/550x900">
<figcaption class="figure-caption">blah
</figcaption>
</figure>
</div>
</div>
Without knowing what you're trying to accomplish with the caption, this is the closest I've gotten. Update info on the caption and I'll see what more I can do.
*{
box-sizing:border-box;
margin:0;
padding:0;
}
.timeline-item{
width: 100%;
position:relative;
}
.timeline-leftbox{
width:50%;
text-align:right;
padding:0 8px;
}
.timeline-rightbox{
position:absolute;
height:100%;
width:50%;
top:0;
right:0;
overflow:hidden;
white-space:nowrap;
}
.timeline-rightbox::after{
content:"";
display:inline-block;
height:100%;
width:0;
vertical-align:middle;
}
.timeline-rightbox img{
max-height:100%;
max-width:100%;
width:auto;
height:auto;
vertical-align:middle;
}
<div class="timeline-item">
<div class="timeline-leftbox">
<div>
<h3 class="timeline-title">Blah blah blah</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ornare sem. In sodales ac nisl facilisis pharetra. Nam non pellentesque mauris. Proin scelerisque, sapien non scelerisque auctor, nunc erat condimentum est, viverra dapibus dui odio a neque. Mauris est dui, posuere at urna in, gravida tincidunt odio. Integer quis egestas est. Praesent tincidunt justo nec nibh malesuada ullamcorper. Nulla convallis et quam vitae posuere.
</p>
</div>
</div>
<div class="timeline-rightbox">
<img src="http://via.placeholder.com/550x900" />
</div>
</div>
You can create a caption space under the image using calc css:
https://jsfiddle.net/freer4/r08ujx5p/3/
A similar question has been asked but it didn't provide a solution for my issue. CSS: On hover show and hide different div's at the same time?
I want to hide a div and display an image in the center of the page at the same time when I hover over my list items.
I tried this but it the second div in the middle of the page still shows on hover.
/* absorbing paddings within the div's width, instead of adding it
on top */
* {
box-sizing: border-box;
}
#container {
width: 100%;
}
header {
padding-top: 10px;
}
h1 {
text-align: center;
font-size: 150%;
}
.a {
width: 7%;
height: 48px;
}
.b {
width: 45%;
height: 48px;
}
.a,
.b {
display: inline-block;
vertical-align: top;
padding: 5px;
padding-top: 10px;
margin: 5px;
margin-right: 195px;
}
.a,
ul {
list-style: none;
line-height: 150%;
padding-top: 15px
}
li a {
text-decoration: none;
color: inherit;
}
.b,
h2 {
text-align: center;
}
.projectImage {
display: none;
}
.a:hover .projectImage {
display: block;
}
.a:hover .b {
display: none;
}
.a,
.image1:hover .projectImage {}
<div id="container">
<header id="title">
<h1>Lorem Ipsum</h1>
</header>
<div class="a">
<ul class="projectList">
<li class="projectImage">Project<span><img class="image1" src="" alt="" height="" /></span></li>
<li>Project<span><img src="" alt="" height="" /></span></li>
<li>Project<span><img src="" alt="" height="" /></span></li>
<li>Project<span><img src="" alt="" height="" /></span></li>
<li>Project<span><img src="" alt="" height="" /></span></li>
<li>Project<span><img src="" alt="" height="" /></span></li>
<li>Project<span><img src="" alt="" height="" /></span></li>
</ul>
</div>
<div class="b">
<h2>lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis. Mi elit ante nunc, mi odio congue rhoncus
dui quis dictum, lectus eleifend aliquam sed venenatis vitae lorem, potenti non dictum sit. Condimentum nonummy vitae tristique, pede nullam pretium arcu vestibulum dictum, urna erat aliquam duis sit pede nam. Morbi mauris fermentum luctus morbi
nec eget, vitae fermentum et maecenas, primis ullamcorper mauris et diam nunc, turpis massa sit felis nullam.</p>
<p>Interdum morbi pellentesque. Et semper diam vestibulum, nisl est, porttitor mauris tellus hac, ut dictum massa. Elementum malesuada curabitur non euismod arcu, sit justo suspendisse aliquam purus suspendisse. Felis est leo, quis turpis ornare quis
tellus, fusce neque ut vitae justo penatibus molestie, per labore suscipit corrupti, non sed in id amet velit. Tempor rutrum tristique anim orci massa, arcu dolor eros dictum arcu.</p>
</div>
</div>
https://codepen.io/jordan_miguel/pen/dWNbzL?editors=1100
Since element .a and element .b are right next to each other in the markup you have supplied, you probably want to use the sibling selector to target element .b. Simply change your last declaration block to:
.a:hover + .b {
display: none;
}
Here's an updated Codepen.
Hope this helps! Let me know if you have any questions.
I'm quiet surprise I thought the use of container-fluid will give me a full width carousel but it didn't. It has a padding right and left of 15 px so i add a new class remove-padding in order to have no padding but it didn't work.
Any idea for having a carousel without padding ?
$(document).ready(function(){
$('.slick-carousel').slick({
arrows:true,
prevArrow:'<a class="slick-prev"><span class="glyphicon glyphicon-chevron-left"></span></a>',
nextArrow:'<a class="slick-next"><span class="glyphicon glyphicon-chevron-right"></span></a>'
});
});
.slick-prev {
left: 50px;
}
.slick-next {
right: 50px;
}
.slick-prev, .slick-next {
background: none;
border: medium none;
color: blue;
cursor: pointer;
display: block;
font-size: 24px;
height: 20px;
line-height: 0;
margin-top: -10px;
outline: medium none;
padding: 0;
position: absolute;
top: 50%;
width: 20px;
}
.slick-prev:before {
content: "";
}
.slick-next:before {
content: "";
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: #fff; }
.slick-carousel h1{ position:absolute; top:40px; left:20%; color:#fff; }*/
.remove-padding {padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://sandbox.jsnegley.net/jquery/slick-carousel/slick.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://sandbox.jsnegley.net/jquery/slick-carousel/slick.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-12 pen">
<div class="page-header">
<h5>Slick Carousel</h5>
<h1>Basic Carousel</h1>
<ul class="technology">
<li>Bootstrap <span class="label label-default">3.3.4</span></li>
<li>jQuery <span class="label label-default">2.1.3</span></li>
<li>
<span class="glyphicon glyphicon-book"></span> Documentation
</li>
</ul>
</div>
</div>
</div>
<!-- /container --></div>
<div class="container-fluid remove-padding">
<!-- START MOD -->
<div class="slick-carousel">
<div><img src="http://sandbox.jsnegley.net/pics/carousel-1.jpg" class="img-responsive">
<h1>Title 1</h1>
</div>
<div><img src="http://sandbox.jsnegley.net/pics/carousel-2.jpg" class="img-responsive">
<h1>Very long crazy long mega long title</h1>
</div>
<div><img src="http://sandbox.jsnegley.net/pics/carousel-3.jpg" class="img-responsive"><h1>Title Title title</h1></div>
</div>
<!-- END MOD -->
</div>
<!-- /container --></div>
<div class="container"><div class="row">
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
</div></div>
Add class row next to class slick-carousel.
This fixed the problem.
Some explanation:
.container-fluid adds 15px of padding on the left and right in addition to horizontal auto margin.
You can simply remove .container > .row > .col-sm-12 in your html and just use a div.
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.