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;
Related
I have some difficulty on the responsiveness of a page.
As you can see in the following code when I inspect responsiveness using Google developer tool, the menu bar will disappear after the width go below 768px?
But I want really have the menu bar in the smaller screen like phones with the width of 414px ...
/*these are classes, put in class declaration*/
<!--just for the About and data html sheets-->
.navbar,.navbar-collapse,.navbar-brand,.nav,#aboutlink,#print-link{
background: #332A85;
color: #ffffff;
text-align: right;
}
#menu a.active, #menu a:hover ,.nav>li>a:focus, .nav>li>a:hover{
transition-property: background-color, color;
transition-duration: .2s;
transition-timing-function: ease-out;
background-color: #332A85;
color: #fff;
}
#print-link {
pointer-events: none;
cursor: default;
}
.ccusa_container{
padding-top: 12em;
padding-left: 12em;
padding-right: 12em;
margin-bottom: 10px;
color: black;
font-size: 15px;
font-family: 'Open Sans';
text-align: justify;
background-color: white;
}
.jumbotron {
background-color: black;
border: 2px solid black;
text-align: center;
height: 450px;
color: white;
font-family: 'Open Sans', sans-serif;
padding-top: 12em;
padding-left: 12em;
padding-right: 12em;
margin-bottom: 10px;
}
/*-- # = ids -*/
html, body {
height: 0%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
font-size: 0.9em;
background-color: white;
color: black;
}
h2, h3 {
font-size: 1.2em;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
}
h4 {
font-family: 'Open Sans', sans-serif;
font-size: 1.5em;
margin-top: 1.5em;
margin-bottom: 0.5em;
}
p {
margin: 10px;
text-align: left;
}
a.header1 {
font-family: 'Open Sans', sans-serif;
font-size: 0.8em;
color: #fff;
}
a.body1{
color: purple;
}
hr {
display: block;
margin-top: 1.5em;
margin-bottom: 1.5em;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 2px;
}
.closeinfo {
padding-top: 8em;
padding-left: 8em;
padding-right: 8em;
margin-bottom: 10px;
font-family: 'Open Sans', sans-serif;
font-size: 0.9em;
background-color: black;
color: #fff;
text-align: center;
height: 300px;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td, th {
padding: 8px;
text-align: left;
border: 1px solid black;
}
th {
text-align: left;
}
/*mobile responsivenes*/
#media (max-width: 550px) {
navbar-fixed-top {
width: 400px;
}
#menu {
width: 400px;
position: sticky;
}
h4 {
display: none;
}
.navbar, .navbar-fixed-top, .navbar-header {
width : 100%;
background: #332A85;
color: #332A85;
}
.mapboxgl-canvas-container {
align-content: center;
}
}
<!DOCTYPE>
<html>
<head>
<meta charset = 'utf8'>
<title>Operations - About</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Begin Mapbox requests -->
<script src='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.css' type='text/css' />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One|Exo:400,600|Ropa+Sans' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Arimo|Dosis|Lato' rel='stylesheet' type='text/css'>
<!-- Style Sheets -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<!-- end project-specific asset calls -->
</head>
<body>
<div>
<!--Navbar-->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="navbar-brand"> Project Work</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="nav"> Map</li>
<li class="nav"> About</li>
<li class="nav"> Data</li>
</ul>
</div>
</nav>
</div>
<!----jumbotron---->
<div class="jumbotron">
<h3>vitae non volutpat mi nisl amet in sapien enim eget quam sodales nunc nulla ligula tortor integer pretium vitae sit purus ultricies nec vitae nec quam nunc mauris felis turpis blandit risus nunc felis ornare morbi non id cras per eros dignissim orci aenean elit libero sed morbi pellentesque a libero morbi curabitur in in at cum aliquam sed in libero nam mi amet tincidunt sit sit in eros arcu bibendum tortor eleifend vulputate nisl duis turpis erat tincidunt rhoncus sit sit nulla nascetur in in vulputate neque dignissim nisl mauris wisi ac elit esse per diam nam morbi eros auctor ut lacinia libero malesuada justo sed odio montes dolor duis in maecenas faucibus amet
</h3>
</div>
<!----TEXT---->
<div class="col-md-12 text-justify">
<div class="col-md-1 justify"></div>
<div class="col-md-10 justify" style="background-color:##C0C0C0">
</div>
<div class="col-md-1 justify"></div>
</div>
<!--Center buttons: GitHub MapBox ATTOM-->
<div class="col-md-12 text-center" style="background-color:##C0C0C0">
<div class="col-md-1 text-center"></div>
<!----TEXT---->
<div class="bio container-fluid" id="ccusa_container">
<!----TEXT---->
<div class="col-md-12 text-justify">
<div class="col-md-1 justify"></div>
<div class="col-md-10 justify">
<br><br>
</h3>
</div>
<div class="col-md-1 justify"></div>
</div>
<div class="col-md-12 text-center">
<div class="col-md-2 text-center"></div>
<div class="col-md-4 text-center">
<p align="center"><center><img src='./static/ccusa_logo.png' style="height: 100px"> </img></center>
<br>
<center align="center">Follow #CCharitiesUSA <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></center>
<br>
</p>
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></center>
<br>
<br><br>
</div>
<div class="col-md-2 text-center"></div>
</div>
<br><br>
</div>
</body>
</html>
How we am I improve the responsiveness is my question?
There are 2 solutions to your problem.
The first one and the nice one is something that bootstrap already supports, you're just missing some code to make it work. You have a working demo here
You just need to add the button that will be displayed when the menu is collapsed. Please check the Fiddle example. I also applied some CSS to .navbar-header and .navbar-default .navbar-nav > li > a just to have a example look nice.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
In case you don't want the collapsed menu supported by Bootstrap, you will have to hardcode some CSS classes which is a bit ugly. Here you have an answer that might help you.
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>
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
Basically i have a dropdown menu that is not aligning to the middle of the page as you can see below... It is very annoying because i have tried everything i know possible. I would like to keep it in HTML and CSS please as this part i am not using JavaScript or JQuery to do.
CSS Code:
<style type="text/css">
/* TOP MENU DROP DOWN */
#menu li {
color: #222222;
}
#mega {
list-style:none;
font-weight:bold;
}
#mega li {
float:left;
clear:right;
padding-left: 15px;
}
#mega li div div {
float:none;
clear:both;
}
#mega li:hover {
border-bottom:0;
z-index:1;
position:center;
}
#mega a {
color:#000;
text-decoration:none;
}
#mega a:hover {
color:#077fcc;
}
#mega div {
left:-999em;
}
#mega li:hover div {
position:center;
display:block;
left:0;
}
a:hover, #mega div a:focus, #mega div a:active {
text-decoration:none;
}
.popup {
position:fixed;
width:100%;
height:300px;
text-align:center;
vertical-align:middle;
background-image:url(img/dropdownbg.gif);
background-repeat:no-repeat;
background-position:center;
}
.popup-mid {
text-align:left;
position:center;
height:100%;
width:950px;
}
/* TOP INSIDE*/
#top-dropbg {
width:100%;
height:300px;
}
.drop-box {
margin:30px 15px;
height:240px;
}
.drop-sec1 {
float:left;
clear:right;
height:240px;
width:70%;
}
.drop-sec1-1 {
width:100%;
height:20px;
}
.drop-sec1-2 {
float:left;
clear:right;
width:25%;
height:95px;
}
.drop-sec1-3 {
width:100%;
height:5px;
float:left;
clear:left;
border-bottom:1px dotted #CCC;
}
.drop-sec2 {
float:left;
clear:right;
height:240px;
width:1%;
margin-right:1%;
border-right:1px solid #CCC;
}
.drop-sec3 {
float:left;
clear:right;
height:240px;
width:25%;
}
/* END TOP MENU */
h1 {
color:#858585;
font-size:14px;
}
h2{
color:#333333;
font-size:24px;
}
p {
color:#333333;
font-size:14px;
}
</style>
HTML Code:
<div class="navtop">
<div id="menu">
<ul id="mega">
<li>Bookings
<div class="popup">
<div class="popup-mid">
<span id="top-dropbg">
<span class="drop-box">
<span class="drop-sec1">
<span class="drop-sec1-1"><h2>Our Services</h2></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-3"></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
<span class="drop-sec1-2"><h1>Vehicles for Every Pocket</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue.</p></span>
</span>
<span class="drop-sec2">
</span>
<span class="drop-sec3">
<span class="drop-sec3-1"><h1>Membership and Reward Schemes</h1><p>Lorem ipsum etiam at risus et justo dignissim congue donec congue lacinia dui.</p></span>
</span>
</span>
</span>
</div>
</div>
</li>
<li>Explore Our Fleet
<div class="popup">
<div class="popup-mid">
2
</div>
</div>
</li>
<li>Rental Locator
<div class="popup">
<div class="popup-mid">
3
</div>
</div>
</li>
<li>Services
<div class="popup">
<div class="popup-mid">
4
</div>
</div>
</li>
<li>Partners
<div class="popup">
<div class="popup-mid">
5
</div>
</div>
</li>
<li>Specials
<div class="popup">
<div class="popup-mid">
6
</div>
</div>
</li>
<li>Bluechip
<div class="popup">
<div class="popup-mid">
7
</div>
</div>
</li>
</ul>
</div>
</div>
Thank you in advance all :)
add in style
body
{
text-align: center; /* !!! */
margin: 0 auto;
padding: 0;
width:100%;
}
and change this
#mega li {
float:left;
clear:right;
padding-left: 15px;
}
to
#mega li {
display:inline;
clear:right;
padding-left: 15px;
}
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