Okay so I have run into this weird bug that I have no clue how to proceed with.
I am building a fairly basic static website, just HTML/CSS and a bit of Jquery for slight animations nothing big.
The html is for the page is
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Quick Metal Finishers</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
<header id="topHeader">
<div id="topName">
<h1>Quick Metal Finishers</h1>
<h2>Electroplating | Powder Coating | Metal Painting</h2>
</div>
<div id="topContact">
<h2>Questions?</h2>
<h1>EMAIL NOW: <strong>info#quickmetalfinishers.com</strong></h1>
</div>
<div class="clearfix"> </div>
</header>
<hr/>
<nav id="topNav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>CONTACT</li>
</ul>
</nav>
<div role="main">
<!--Awesome image slidy thingy-->
<div id='coin-slider'>
<a href="" target="_blank">
<img src='images/main_img1.jpg' >
<span>
Description for img01
</span>
</a>
<a href="">
<img src='images/main_img2.jpg' >
<span>
Description for imgN
</span>
</a>
</div>
<!--Next up we have the business blurb-->
<div id="mainCatchy">
<div id="mainCatchyLine">
Choose Us for we are the best this should be slighly long.
</div>
<div id="mainCatchyDescription">
<p>
Fusce varius euismod lorem, nec semper ante ullamcorper condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tortor eget nunc blandit rutrum. Praesent hendrerit ante sed nulla molestie gravida vestibulum.
</p>
<p>
Ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Nam quis cursus massa. Dapibus, turpis quis ultricies tincidunt , elit augue facilisis turpis, et suscipit nibh eros eget tortor. Vivamus eleifend dictum.
</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<footer>
</footer>
<script src="js/libs/jquery-1.7.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 960, navigation: false, delay: 5000 });
});
</script>
</body>
</html>
The CSS is
html{
background:hsl(50, 7%, 84%) url(images/bg-body.png) repeat top left;
}
body{
width:960px;
margin:4em auto;
background-color: #f9f9f9;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.85);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.85);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.85);
}
#topHeader{
font-family:Arial, Arial, Helvetica, sans-serif;
padding:4em 77px 0 77px ;
}
#topName{
width:auto;
float:left;
vertical-align:baseline;
}
#topName h1, #topName h2{
font-weight:normal;
font-size:14pt;
margin:0;
padding:0;
}
#topName h2{
font-size:10pt;
color:#808080;
}
#topContact{
width:auto;
float:right;
margin-top:3pt;
text-align:right;
}
#topContact h1, #topContact h2{
font-weight:normal;
font-size:10pt;
margin:0;
padding:0;
color:#808080;
}
#topContact strong{
color:#000;
}
/*Top Navigation*/
#topNav{
font-family:Arial, Arial, Helvetica, sans-serif;
padding:0 77px 0 77px ;
}
#topNav ul{
list-style-type:none;
margin:0 0 1em 0;
}
#topNav li{
display:inline;
margin-right:5ex;
}
#topNav a{
text-decoration:none;
font-size:11pt;
color:#808080;
}
#mainCatchy{
margin:2em 77px 0 77px;
padding:0;
}
#mainCatchyLine{
width:240px;
float:left;
font-family:'Open Sans', sans-serif;
font-size:16pt;
padding:20px 30px;
color:#333;
}
#mainCatchyDescription{
float:left;
width: 506px;
font-size:10pt;
color:#555;
}
/*Generic Styles*/
hr{
border:none;
border-top:1px dotted rgba(0,0,0,.2);
height:0;
width:98%;
margin:2em auto 0.7em auto;
}
The issue is the page doesn't render in chrome at all. The blue rotaty thing in the title bar just keeps spinning with nothing rendering.
Here's the kicker: If I remove the <p> tag from just that div and place the text either by itself or inside another <div>, chrome has no issue rendering it.
The page as of now works flawlessly in firefox.
I have no idea what might be causing this issue.
EDIT:
I have uploaded the code to
http://dm.finearts.yorku.ca/~raveesh/test/
Okay the issue seems to be dev version of chrome that I was using, it works fine on the regular channel version. There seem to be a lot of rendering bugs in the Dev channel.
Cheers,
-tR
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I am trying to create a space above "Affordable Professional Web Design" in the image below, so that it creates a space which is occupied by the image
However when I do so, it only seems to push the image down and leaves white space (indicated in red). I am trying to do this by applying margin-top although cannot find a resolution. Any ideas how to resolve?
Web Page Image
/* Global */
.container {
width: 80%;
margin: auto;
overflow;
hidden;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
ul {
margin: 0;
padding: 0;
}
/* Header */
header {
background-color: #35424a;
border-bottom: orange solid;
min-height: 70px;
padding-top: 30px;
color: #ffffff;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header li {
float: left;
list-style: none;
padding: 0 10px 0 10px;
}
header nav {
float: right;
text-transform: uppercase;
}
header a {
text-decoration: none;
color: #ffffff;
}
#highlight,
#current a {
color: #e8491d;
}
nav a:hover {
color: orange;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('../countryside.jpg') no-repeat;
background-size: cover;
text-align: center;
color: #ffffff;
}
#showcase h1 {
margin-top: 100px;
padding: 30px;
text-align: center;
color: #ffffff;
font-size: 50px;
}
#showcase p {
text-align: center;
color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" width="device-width" />
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span id="highlight">Test</span> Web Design</h1>
</div>
<nav>
<ul>
<li id="current">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget nulla molestie, dictum purus vel, dapibus turpis. Aliquam malesuada laoreet ante. Integer dictum ipsum sed arcu commodo laoreet ultrices ac est. Nullam sagittis eget arcu nec
mollis.
</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<form>
<h2>Subscribe to our newsletter</h2>
<input type="email" placeholder="Enter email..." />
<button type="submit">Submit</button>
</form>
</div>
</section>
<section class="boxes">
<div class="container">
<div class="box">
<img src="HTML.png" alt="" />
<h3>HTML Markup</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
<div class="box">
<img src="css.png" height="200px" alt="" />
<h3>CSS3 Styling</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
<div class="box">
<img src="graphic_design.svg" height="300px" alt="" />
<h3>Graphic Design</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
</div>
</section>
</body>
Instead of margin try using padding:
#showcase h1{
padding:100px 30px 30px 30px;
text-align:center;
color:#ffffff;
font-size:50px;
}
I'm trying to move the class .column below 50px, but margin-top: 50px moving along with the #section. Why is that and how it can be fixed?
*{ padding:0; margin:0; }
body { width:100%; font-family:"Source Sans Pro" }
#section { height:400px; background-color:#383838; color:White; }
span { font-size:40px; }
.column { width: 300px; border: 2px solid yellow; margin-left:40px; margin-top:50px; }
<html>
<head>
<title>Breadth</title>
<link rel="Stylesheet" type="text/css" href="breadth.css" />
<link href="fonts.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
<div id="main">
<div id="section">
<div class="column">
<span class="icon icon-cogs"></span>
<h2>Maecenas lectus sapien</h2>
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
You can apply padding-top: 50px to #section rather than margin-top to .column
Referring from Mozilla Documentation:
If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
Read about Margin Collapsing for more details.
*{ padding:0; margin:0; }
body{ width:100%; font-family:"Source Sans Pro" }
#section{height:400px; background-color:#383838; color:White; padding-top: 50px; }
span{ font-size:40px; }
.column{ width: 300px; border: 2px solid yellow; margin-left:40px;}
<html>
<head>
<title>Breadth</title>
<link rel="Stylesheet" type="text/css" href="breadth.css" />
<link href="fonts.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
<div id="main">
<div id="section">
<div class="column">
<span class="icon icon-cogs"></span>
<h2>Maecenas lectus sapien</h2>
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
If you want to use margin-top then give display:block to parent div and display:inline-block to child div.
See here
Fore more info read here
Edited CSS
*{ padding:0; margin:0; }
body{ width:100%; font-family:"Source Sans Pro" }
#section{height:400px; background-color:#383838; color:White;display:block; }
span{ font-size:40px; }
.column{ width: 300px; border: 2px solid yellow; margin-left:40px; margin-top:50px;display:inline-block;}
You should use padding-top for #section like in the fiddle and remove margin-top from child. Since margins will collapse to each other, it's better not to use it for positioning elements. refer this: Margin goes outside div when border is removed
#section {
padding-top: 40px;
...
}
Another approach is use the same code but add overflow:auto to #section like this:
#section {
overflow:auto;
...
}
There's another solutions too like using border on parent, but these are more like hacks since we used margins for positioning.
*{ padding:0; margin:0; }
body { width:100%; font-family:"Source Sans Pro" }
#section { height:400px; background-color:#383838; color:White; padding-top:50px;}
span { font-size:40px; }
.column { width: 300px; border: 2px solid yellow; margin-left:40px; }
<html>
<head>
<title>Breadth</title>
<link rel="Stylesheet" type="text/css" href="breadth.css" />
<link href="fonts.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
<div id="main">
<div id="section">
<div class="column">
<span class="icon icon-cogs"></span>
<h2>Maecenas lectus sapien</h2>
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
My horizontal align (justify-content: center) is not working on one of my sections. When I take the paragraph elements out everything seems to work fine, any help would be appreciated! Thank you.
Here is the code:
https://jsfiddle.net/vfo5urd4/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Wed, 30 Dec 2015 06:31:18 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>St Philips</title>
<link rel="stylesheet" type="text/css" href="stphilipscss.css">
<link href='https://fonts.googleapis.com/css? family=Open+Sans:400,300,700,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:700' rel='stylesheet' type='text/css'>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!--HEADER HEADER HEADER HEADER HEADER HEADER HEADER-->
<header>
<h4 id="textlogo">ST PHILIPS NERI</h4>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!--HEADER HEADER HEADER HEADER HEADER HEADER HEADER-->
<!--SECTION1 SECTION1 SECTION1 SECTION1 SECTION1 SECTION1-->
<section id="section1">
<article>
<h1><i>I am the way,</i> the truth, and the life.</h1>
</article>
<button type="button">Come in</button>
</section>
<!--SECTION1 SECTION1 SECTION1 SECTION1 SECTION1 SECTION1-->
<section id="section2">
<article>
<h1>You're Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut posuere dui. Praesent nisl ante, dapibus eget dolor in, imperdiet pharetra tellus. Aliquam euismod hendrerit massa, sit amet interdum risus accumsan ac. In commodo varius felis, quis feugiat tellus tempor quis.</p>
<p>Donec gravida mauris lacinia, pellentesque nisl nec, vestibulum tellus. Maecenas non varius ligula. Ut sit amet leo quis orci porttitor posuere eget vel ex. Fusce sit amet purus ac eros venenatis efficitur nec eu tortor. </p>
</article>
</section>
</body>
</html>
body{
margin:0px;
/*overflow:hidden;*/
}
header{
display:flex;
align-items:center; /* align vertical */
padding-top:10px;
padding-bottom:10px;
position:fixed;
width:100%;
z-index:1000;
background-color:white;
border-bottom-width:1px;
border-color:#e5e5e5;
border-bottom-style:solid;
justify-content:space-between;
}
#textlogo{
margin:0px;
color:#191919;
font-family: open-sans, sans-serif;f;
font-weight:700;
display:inline-block;
margin-left:100px;
font-size:17px;
visibility:hidden;
}
nav{
margin-right:100px;
}
nav li{
display:inline;
padding:10px;
}
a{
color:#191919;
list-style-type:none;
text-decoration:none;
font-family: 'Open Sans', sans-serif;
font-weight:400;
font-size:15px;
}
#section1{
height:667px;
background- image:url("http://i300.photobucket.com/albums/nn18/ojijimanuel/2560x1440_cobble_ stones_zpsy5twolwx.jpg");
background-repeat:no-repeat;
background-size:100%;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}
#section1 article h1{
color:white;
font-size:63px;
font-family: 'open sans', serif;
font-weight:700;
margin-bottom:100px;
padding-top:150px;
margin-left:100px;
margin-right:100px;
}
button{
background-color:transparent;
color:white;
border-color:white;
border-style:solid;
font-size:25px;
border-width:1px;
font-family:'Open Sans';
font-weight:300;
padding-left:30px;
padding-right:30px;
padding-top:10px;
padding-bottom:10px;
cursor:pointer;
}
#section2{
height:600px;
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
}
h1 i{
font-family: 'Playfair Display', serif;
}
My horizontal align (justify-content: center) is not working on one of my sections.
There are two sections in your code. I'll address both.
In #section1, the flex container has flex-direction: column. This means the main axis is vertical.
The justify-content property works along the main axis, so in this case you would use justify-content for vertical, not horizontal, alignment.
For horizontal alignment in column direction use align-items, align-content and align-self, which work along the cross-axis.
Learn more about main-axis / cross-axis and flex alignment properties here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
In #section2, justify-content: center is working fine. The problem is the flex item occupies the full width of the container, so there's no larger space in which to center.
To see what I mean, give the flex item (article) a width: 50%: Revised Demo
I am trying to add the roboto-regular and roboto-light but it doesn't seem to work, i don't now how to do it so I'm asking for guidance...
This is a link to my code
https://jsfiddle.net/omer1234/rmje7xz3/12/
HTML:
<!doctype html>
<html ng-app="MyApp">
<head>
<link rel="stylesheet" href="noteBack.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
<script src="https://cdn.rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
</head>
<body>
<div class="container-box ">
<header><span>Note Details</span></header>
<div class="sub-header"><span>Friday 25.7.13 </span></div>
<div class="sub-container-box opacity-affect">
<div class="dialog-box"><!--first white box inside the note-->
<div class="dialog-box-circle"></div>
<span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
<span class="dialog-box-name">Lea Poran -<select>
<option>#private</option>
<option>#public</option>
</select>
</span>
<span class="dialog-box-day">2d ago</span>
<div class="dialog-box-text">Don't forget to bring the new calender for the meeting.</div>
</div>
<div class="dialog-box"> <!--second white box inside the note-->
<div class="dialog-box-circle"></div>
<span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
<span class="dialog-box-name">You -<select>
<option>#private</option>
<option>#public</option>
</select>
</span>
<span class="dialog-box-day">2d ago</span>
<div class="dialog-box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet ex vitae mi venenatis odio felis convallis. Praesent ut consequat orci, amet elit mollis molestie. Curabitur rhoncus enim </div>
</div>
<div class="dialog-box"> <!--third white box inside the note-->
<div class="dialog-box-circle"></div>
<span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
<span class="dialog-box-name">You -<select>
<option>#private</option>
<option>#public</option>
</select>
</span>
<span class="dialog-box-day">3d ago</span>
<div class="dialog-box-text">In hac habitasse platea dictumst. Pellentesque scelerisque auctor dui. Pellentesque eget eros pretium, sagittis tortor at, tempor turpis. Morbi porttitor nulla urna, sed tincidunt eros mollis eu. Nam gravida est sit </div>
</div>
<div class="dialog-box-date"> <!--gray box - contains the date-->
<span class="dialog-box-date-text">In hac habitasse platea dictumst. Pellentesque scelerisque auctor dui. Pellentesque eg
</span>
</div>
<div class="dialog-box"><!--replay of the first white box inside the note-->
<div class="dialog-box-circle"></div>
<span class="glyphicon glyphicon-option-vertical dialog-vertical-menu"></span>
<span class="dialog-box-name">Lea Poran -<select>
<option>#private</option>
<option>#public</option>
</select>
</span>
<span class="dialog-box-day">2d ago</span>
<div class="dialog-box-text">Don't forget to bring the new calender for the meeting.</div>
</div>
<img src="D:\Meeter1\first assaiment home\attach.png">
</div> <!--close sub-container-->
<img src="D:\Meeter1\first assaiment home\attach.png">
</div>
</body>
</html>
css:
.container-box{
/*position:absolute;*/
width:382px;
height:529px;
background-color:lightgray;
overflow:hidden;
border:1px solid #cccccc;
margin:auto;
}
/* .opacity-affect{ //After button click blur the background
opacity:0.5;
} */
header{ /*the red head line*/
position:relative;
width:100%;
height:41px;
color:white;
background-color:#de4b4b;
font-weight: bold;
font-size:14px;
margin:auto;
}
header span{ /*text inside the red head line*/
display:inline-block;
padding-left:148px;
padding-top:14px;
padding-bottom:14px;
}
.sub-header{ /*white sub head line*/
position:relative;
width:100%;
height:37px;
background-color:white;
font-size:10px;
color:#454545;
font-family:'roboto_regular';
}
.sub-header span{ /*text inside the white sub head line*/
display:inline-block;
padding-top:14px;
padding-left:10px;
}
.dialog-box{ /*the white boxes inside the note main*/
position:relative;
width:365px;
background-color:white;
margin: 0px 8px 10px 8px;
border:1px solid #cccccc;
}
.dialog-box-circle{
display:inline-block;
float:left;
width:35px;
height:35px;
border-radius:30px;
background-color:#cccccc;
margin:15px 10px 17px 15px;
vertical-align:middle;/*allow text to appear next to the circle div */
}
.dialog-box-name{
display:inline-block;
color:#6495ED;
font-size:12px;
margin-top:21px;
font-weight:bold;
}
.dialog-box-text{
color:#040404;
font-size:10px;
font-family:'roboto_light';
line-height:9px; /*the space between the line*/
margin-left:15px;
margin-bottom:15px;
margin-top:17px;
margin-right:17px;
bottom:0;
left:0;
}
.dialog-box-name select {
border:0px;
font-size:10px;
font-family:'roboto_regular';
color:#454545;
cursor: pointer;
}
.dialog-box-day{
display:block;
font-size:9px;
font-family:'roboto_regular';
margin:0px;
font-weight:bold;
}
.dialog-vertical-menu{
float:right;
margin:8px;
}
.dialog-box-date{ /*the gray box inside the note main*/
position:relative;
width:365px;
height:37px;
margin: 0px 8px 10px 8px;
background-color:#cccccc;
}
.dialog-box-date-text {
display:inline-block;
font-family:'roboto_regular';
font-size:9px;
color:#000000;
margin-left:15px;
margin-top:15px;
}
#font-face {
font-family: 'RobotoLight';
src: url('fonts/RobotoLight.eot');
src: url('fonts/RobotoLight.eot') format('embedded-opentype'),
url('fonts/RobotoLight.woff2') format('woff2'),
url('fonts/RobotoLight.woff') format('woff'),
url('fonts/RobotoLight.ttf') format('truetype'),
url('fonts/RobotoLight.svg#RobotoLight') format('svg');
}
#font-face {
font-family: 'RobotoRegular';
src: url('fonts/RobotoRegular.eot');
src: url('fonts/RobotoRegular.eot') format('embedded-opentype'),
url('fonts/RobotoRegular.woff2') format('woff2'),
url('fonts/RobotoRegular.woff') format('woff'),
url('fonts/RobotoRegular.ttf') format('truetype'),
url('fonts/RobotoRegular.svg#RobotoRegular') format('svg');
}
You can remove all the #font-face clauses and just use this property on whatever class you want to use Roboto:
font-family: 'Roboto', sans-serif;
If you're not sure whether it works at all anywhere, try adding this CSS for debugging:
body{
font-family: 'Roboto', sans-serif;
}
Also, always put your font includes at the top of your <head> element, above your CSS include, like so:
<!DOCTYPE HTML>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <!-- Include font first -->
<link href="style.css" rel="stylesheet"> <!-- Then include stylesheet -->
</head>
<body>
</body>
</html>
Your font-family settings should just be :
font-family: 'Roboto', sans-serif;
And you set different weights for your font using:
font-weight: 400;
or
font-weight: 700;
I'm having a small issue with one of my divs the #divSidebar not wrapping around it's child divs. It's probably something small that I probably overlooked, but I've been fussing with it for quite sometime. I believe it has something to do with a missing . I can get the content over to the side, but I had to add a innerSideBar div that was floated to the right.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html itemscope itemtype="http://schema.org/Blog" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Welcome to TutorialHelp!</title>
<link href="css/tutorialHelp.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="divHeaderContainer">
<div id="divHeader">
<div id="divLogo"></div>
<div id="divNavigtation">
<div id="divNavMenu">
<ul>
<li> Home</li>
<li> Tutorials
<ul>
<li>Photoshop
<li>Dreamweaver
<li>Illustrator
<li>Flash
<li>InDesign
</ul>
</li>
<li>Articles</li>
<li>About</li>
<li>Contact</li>
</ul> <!-- end main UL -->
<br class="clearFloat" />
</div>
<div id="divSocial"></div>
</div>
</div>
</div>
<div id="divContentContainer">
<div id="divWrapper">
<div id="divInnerWrapper">
<div id="divContent">
<div id="divBanner"></div>
<div id="divListing">
<header class="listing">
<div id="divListingLeft">
<a href="#" title="The Basics Of Photoshop">
<img width="200px" height="200px" src="images/photoshopBasicsImage.jpg" alt="PhotoshopBasicsImage" title="PhotoshopBasicsImage" />
</a>
<span class="metaWrapper">Photoshop</span>
<span class="metaWrapper">Beginner</span>
</div>
<div id="divListingRight">
<p class="tags">
Tutorials
>>
Photoshop
</p>
<div class="clearFloat"></div>
<p class="date">
Posted on: October 16, 2012 by
</p>
<h1>The Basics Of Photoshop</h1>
<div id="synopsis"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis viverra lacus. Ut volutpat augue nec nulla sodales facilisis. Duis magna mauris, auctor a hendrerit vitae, adipiscing vel ante. Praesent risus elit, egestas a commodo non, suscipit id mauris. Ut ligula velit, tempor vel accumsan sed, sollicitudin quis sem. Integer nunc sem, feugiat non luctus ut, varius quis enim. Curabitur non odio id leo lobortis gravida acac arcu.</p></div>
</div>
<br class="clearFloat" /></header>
</header>
</div>
<div id="divListing">
<header class="listing">
<div id="divListingLeft">
<a href="#" title="Building A Basic Web Page In Dreamweaver">
<img width="200px" height="200px" src="images/dreamweaverBasicWebPageImage.jpg" alt="DreamweaverBasicWebPageImage" title="DreamweaverBasicWebPageImage" />
</a>
<span class="metaWrapper">Dreamweaver</span>
<span class="metaWrapper">Beginner</span>
</div>
<div id="divListingRight">
<p class="tags">
Tutorials
>>
Dreamweaver
</p>
<div class="clearFloat"></div>
<p class="date">
Posted on: October 16, 2012 by
</p>
<h1>Building A Basic Web Page In Dreamweaver</h1>
<div id="synopsis"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis viverra lacus. Ut volutpat augue nec nulla sodales facilisis. Duis magna mauris, auctor a hendrerit vitae, adipiscing vel ante. Praesent risus elit, egestas a commodo non, suscipit id mauris. Ut ligula velit, tempor vel accumsan sed, sollicitudin quis sem. Integer nunc sem, feugiat non luctus ut, varius quis enim. Curabitur non odio id leo lobortis gravida acac arcu.</p></div>
</div>
<br class="clearFloat" /></header>
</header>
</div>
<div id="divListing">
<header class="listing">
<div id="divListingLeft">
<a href="#" title="Designing A Cartoon Environment">
<img width="200px" height="200px" src="images/flashCartoonEnvironmentImage.png" alt="FlashCartoonEnvironmentImage" title="FlashCartoonEnvironmentImage" />
</a>
<span class="metaWrapper">Flash</span>
<span class="metaWrapper">Beginner</span>
</div>
<div id="divListingRight">
<p class="tags">
Tutorials
>>
Flash
</p>
<div class="clearFloat"></div>
<p class="date">
Posted on: October 16, 2012 by
</p>
<h1>Designing A Cartoon Environment</h1>
<div id="synopsis"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis viverra lacus. Ut volutpat augue nec nulla sodales facilisis. Duis magna mauris, auctor a hendrerit vitae, adipiscing vel ante. Praesent risus elit, egestas a commodo non, suscipit id mauris. Ut ligula velit, tempor vel accumsan sed, sollicitudin quis sem. Integer nunc sem, feugiat non luctus ut, varius quis enim. Curabitur non odio id leo lobortis gravida acac arcu.</p></div>
</div>
<br class="clearFloat" /></header>
</header>
</div>
<div id="divBottomBanner"></div>
</div>
<div id="divSidebar">
<div id="divInnerSideBar">
<div id="divAdWrapper">
<div class="adListing">Advertise Here</div>
<div class="adListing">Advertise Here</div>
<div class="adListing">Advertise Here</div>
<br class="clearFloat" />
</div>
<fb:comments href="http://www.facebook.com/pages/Tutorialhelp/497024140318879"
num_posts="4" width="300"></fb:comments>
<fb:like href="http://www.facebook.com/pages/Tutorialhelp/497024140318879" send="true" width="285" show_faces="true" font="verdana"></fb:like>
<div class="clearFloat"></div>
</div>
</div>
<div class="clearFloat"></div>
</div>
</div>
</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding:0px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#000;
min-width:1300px;
background-color:#83ACBC;
}
#divHeaderContainer{
width:100%;
height:200px;
background-color:#CEDBD9;
margin:0px auto;
}
#divHeader{
width:1120px;
height:200px;
min-width:1120px;
margin:0px auto;
background-image: url(../images/backgroundImage_r1_c1_r1_c1.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
#divLogo{
height:130px;
}
#divNavigation{
height:32px;
position:relative;
background-color:#333;
width:1120px;
}
#divNavMenu {
width:auto;
height:32px;
margin-top: 7px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
#divNavMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#divNavMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#DCE4E3;
}
#divNavMenu ul li a {
text-align:center;
height:30px;
width:148px;
display:block;
color:#000;
font-family:Verdana, Geneva, sans-serif;
text-decoration:none;
border:1px solid #C5D1D0;
font-size: 16px;
font-weight: bold;
}
#divNavMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#divNavMenu ul li:hover ul {
visibility:visible;
z-index:9999;
}
#divNavMenu li:hover {
background:#83ACBC;
}
#divNavMenu ul li:hover ul li a:hover {
color:#FFF;
background:#9EBECB;
}
#divNavMenu a:hover {
color:#FFF;
}
/* Contains the Float */
.clearFloat {
clear:both;
margin:0;
padding:0;
height:0px;
overflow:hidden;
}
/* IE7 Display Fix */
#divNavMenu ul li {
display: inline;
}
#divContentContainer{
margin:0px auto;
padding-bottom:50px;
width:100%;
background-image: url(../images/backgroundImage_r1_c1_r3_c1.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
#divWrapper{
width:1120px;
margin:0px auto;
background-image: url(../images/backgroundImage_r1_c1_r2_c1.jpg);
background-repeat: repeat-y;
background-position: center;
}
#divInnerWrapper{
margin:0px auto;
width:1088px;
}
#divContent{
width:738px;
float:left;
margin:0px auto;
}
#divBanner{
width:700px;
height:60px;
margin:0px auto;
padding-bottom:20px;
background-color:#D3DCDA;
}
#divListing{
padding:20px 20px 0px 18px;
margin:15px 0px 0px 0px;
}
.listing{
height:auto;
background:none;
border-bottom:solid 1px #B7B7B7;
}
#divListingLeft{
width:200px;
float:left;
margin:0px 0px 20px 0px;
}
#divListingRight{
width:480px;
float:right;
}
.metaWrapper{
font-family:Verdana, Geneva, sans-serif;
display:block;
width:200px;
font-size:14px;
text-align:center;
font-weight:bold;
color:#000;
}
.tags{
font-style:italic;
}
.date{
font-style:italic;
}
#divContent #divListing p{
padding:0 20px 0px 10px;
}
#divContent #divListing h1{
font-size:26px;
color:#000;
padding:0px 20px 0px 10px;
margin:0px;
}
h1 a{
font-style:normal;
text-decoration:none;
color:#000;
}
#divBottomBanner{
width:700px;
height:60px;
margin:0px auto;
padding-bottom:20px;
margin-top:35px;
background-color:#D3DCDA;
}
h2{
font-weight:bold;
font-size:24px;
margin:30px 0px 0px 20px;
padding-bottom:5px;
border-bottom:solid 1px #B7B7B7;
}
#contactForm{
padding:0px;
display: block;
height: auto;
margin-top: 30px;
margin-right: 160px;
margin-bottom: 0px;
margin-left: 0px;
font-weight: bold;
}
#divSidebar{
}
#divInnerSideBar{
width:300px;
float:right;
}
#divAdWrapper{
width:260px;
height:auto;
}
.adListing{
display:block;
font-size:11px;
background-color:#D3DCDA;
color:#000;
text-align:center;
text-decoration:none;
overflow:hidden;
float:left;
width:125px;
height:125px;
margin: 0px 4px 4px 0px;
}
I've added both html and css code and hopefully that will help you see where the problem is in the code. Any other problems with the code can be brought up, but looking for a solution to the #divSidebar and its child content.
Define your divSidebar
#divSidebar{
float:right;
}
demo