I am trying to implement a navigation sidebar on left with list of links(<a>) such that on click of each links, corresponding <div> will be loaded on right side.
When I have a function for onclick property in <a>. It gives me error on browser console.
Uncaught ReferenceError: callFunction is not defined
Here is my implementation:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
function callFunction(){alert("Load divs");}
});
</script>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: powderblue;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>My Company</h1>
</header>
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</nav>
<!--<div id="Link1" class="class1">
<h1>Link1</h1>
<p>Link1 detail</p>
</div>
<div id="Link2" class="class1">
<h1>Link2</h1>
<p>Link2 detail</p>
</div>-->
<footer>Copyright © myCompany</footer>
</div>
</body>
</html>
My requirement is to have a list of Links and s, where s should be hidden, and only be appeared when corresponding Links are clicked.
Here is the code that should work for you.
<div>s are not rendered/shown intially.
On click of Links(<a>), corresponding <div>s are shown
Navigation side bar is maintained.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function loadContent(selector){
$("#loadOnClick").html($(selector).html());
};
$(document).ready(function(){
loadContent("#userGuide");
});
</script>
<style>
div.container11 {
width: 100%;
}
section.container1{
display: -webkit-flex; /* Safari */
display: flex;
}
.displayInline{
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: auto;
}
header, footer {
padding: 1em;
color: white;
background-color: powderblue;
clear: left;
text-align: center;
}
nav {
border-right: 2px solid gray;
}
nav ul {
list-style-type: none;
padding-top: 5px;
}
nav ul a {
text-decoration: none;
line-height: 30px;
}
div#loadOnClick {
float: right;
}
.displayOnClick{
display: none;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>My Company</h1>
</header>
<section id="container1">
<nav class="displayInLine" style="width: 20%; float: left;">
<ul>
<li><a href="#userGuide" class="quickLinks" onclick='loadContent("#userGuide")'>User Guide</a></li>
<li><a href="#SOP" class="quickLinks" onclick='loadContent("#SOP")'>SOP</a></li>
<li><a href="#procedurePages" class="quickLinks" onclick='loadContent("#procedurePages")'>Procedure pages</a></li>
<li><a href="#departmentInformation" class="quickLinks" onclick='loadContent("#departmentInformation")'>Department information</a></li>
<li><a href="#hoursOfOperations" class="quickLinks" onclick='loadContent("#hoursOfOperations")'>Hours of operations</a></li>
</ul>
</nav>
<div class="displayInLine" id="loadOnClick" style="width:75%; float: right;">
</div>
</section>
<div id="userGuide" class="displayOnClick">
<h1>User Guide</h1>
<p>This is the userguide for employees</p>
</div>
<div id="SOP" class="displayOnClick">
<h1>SOP</h1>
<p>This is the Statement of purpose for employees</p>
</div>
<div id="procedurePages" class="displayOnClick">
<h1>Procedure pages</h1>
<p>This is the Procedure pages for employees</p>
</div>
<div id="departmentInformation" class="displayOnClick">
<h1>Department information</h1>
<p>This is the Department information for employees</p>
</div>
<div id="hoursOfOperations" class="displayOnClick">
<h1>Hours of operations</h1>
<p>This is the Hours of operations for employees</p>
</div>
<footer>Copyright © Om Sao</footer>
</div>
</body>
</html>
You dont need to call callFunction() on $(document).ready state because thats called only once the page is loaded and by the time document is ready/loaded, the error is thrown. Hence, put definition outside $(document).ready.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function callFunction(){alert("Load divs");}
</script>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: powderblue;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>My Company</h1>
</header>
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</nav>
<!--<div id="Link1" class="class1">
<h1>Link1</h1>
<p>Link1 detail</p>
</div>
<div id="Link2" class="class1">
<h1>Link2</h1>
<p>Link2 detail</p>
</div>-->
<footer>Copyright © myCompany</footer>
</div>
</body>
</html>
Related
I am working on a web application with multiple pages, and am working on styling a navigation bar for my users to go through the different pages. However, when I try to link the navigation bar to the pages, something is going wrong. When I preview the code, clicking on the different tabs doesn't redirect me to the corresponding pages. Attached is my code so far.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
li a:active {
background-color: #51014d;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Contact</li>
<li>About</li>
</ul>
<div id="home">
<h1>Welcome!</h1></div>
<div id="contact" style="visibility: hidden">
<h2>you can reach me
at:</h2></div>
<style>
#home {
background-color: honeydew;
}
</style>
<style>
#contact {
background-color: lightblue;
}
</style>
</body>
</html>
I am trying to make the navigation menu link to different pages of my website (for example, they can go to "contact", and view information regarding that topic). However, the links with this code aren't working. When I click on the different tabs, it does not show the corresponding page. How do I fix this?
Thank you!
try below code:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
li a:active {
background-color: #51014d;
}
#home {
background-color: honeydew;
}
#contact {
background-color: lightblue;
}
#about {
background-color: darkblue;
}
</style>
</head>
<body>
<ul>
<li><a onclick="showDiv('home');" class="active" href="#home">Home</a></li>
<li><a onclick="showDiv('contact');" href="#contact">Contact</a></li>
<li><a onclick="showDiv('about');" href="#about">About</a></li>
</ul>
<div id="home">
<h1>Welcome!</h1>
</div>
<div id="contact">
<h2>you can reach me
at:</h2>
</div>
<div id="about">
<h2>about us
at:</h2>
</div>
<script>
function showDiv(id) {
document.getElementById("home").style.display = "none";
document.getElementById("about").style.display = "none";
document.getElementById("contact").style.display = "none";
document.getElementById(id).style.display = "block";
}
showDiv('home');
</script>
</body>
</html>
I'm creating a website, and when adding a background image to my CSS there appears to be a random white vertical line on the left side of the screen. I've checked this in both Chrome and Safari browsers. Would anyone be able to help fix this and also explain how it originated?
.container-fluid {
background-color: white;
background-image: none;
border-color: white;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
.navbar {
display: flex;
align-items: center;
}
.fb {
height: 50px;
width: 50px;
float: right;
}
a.btn-quote {
float: right;
padding-top: auto;
padding-bottom: auto;
}
.header {
background-image: url(http://images.all-free-download.com/images/graphiclarge/green_grass_04_hd_picture_166122.jpg);
background-repeat: none;
background-size: cover;
}
.logo_img {
height: 150px;
width: 200px;
float: left;
display: block;
}
blockquote.slogan {
font-size: 35px;
color: red;
text-align: center;
}
.quote {
text-align: center;
font-size: 40px;
color: white;
}
span.free {
color: red;
}
.premium {
font-family: 'Graduate';
font-size: 50px;
text-align: center;
color: white;
}
.addy {
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
.fqbutton {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.article {
margin-right: 250px;
margin-left: 250px;
}
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
}
.constructpic {
height: 250px;
width: 250px;
display: block;
margin-right: auto;
margin-left: auto;
}
footer {
text-align: center;
color: black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CCF Lawn Care</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<!-- MAIN CONTAINER -->
<div class="container-fluid">
<body>
<!-- CCF LOGO IMG -->
<img src="http://res.cloudinary.com/hfitzger/image/upload/c_scale,h_650,w_900/v1497668893/CCF_Logo_jsa1ha.jpg" alt="CCF Logo" class="logo_img" />
<!-- NAV BAR -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">CCF Lawn Care</a>
</div>
<ul class="nav navbar-nav">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- FACEBOOK -->
<img src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png" class="fb">
<!-- FREE QUOTE BUTTON -->
Free Quote
</div>
</nav>
<blockquote class="slogan"><em>"We work hard so <strong> <ins>YOU</ins></strong> don't have to!"</em>
</blockquote>
<!-- HEADER -->
<div class="header">
<p class="premium">Premium Lawn Care service in Middle Tennessee</p>
<!-- FREE QUOTE SECTION -->
<div class="addy">
<input class="form-control" type="text" placeholder="Enter your address here" required>
<button type="submit" class="btn btn-primary">Get Free Quote </button>
</div>
<h3 class="quote">Call 615-870-9822 for a <span class="free">FREE QUOTE</span></h3>
<!-- ARTICLE SECTION -->
<blockquote class ="construction">Please come back and view our updates as we are temporarily under construction! <img src="https://server211.web-hosting.com:2083/cpsess0930665082/viewer/home%2fhfitzger%2fpublic_html%2fimages/construction.png" class="constructpic"></blockquote>
<!-- FOOTER -->
<footer>
Created and managed by <img src="https://res.cloudinary.com/hfitzger/image/upload/t_media_lib_thumb/v1497793352/Fitz_Bitz_Logo_jqhmjq.png" alt="Fitz&Bitz Logo" />
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
The white line is because of the blockquote element, you can disable the white border by adding
blockquote {
border-left: none;
}
If I understand, it's the default border on blockquote from bootstrap. Just set border-left: none on an element you want to disable that. In this case, blockquote.construction
.container-fluid {
background-color: white;
background-image: none;
border-color: white;
border-style: solid;
border-width: 15px 15px 15px 15px;
}
.navbar {
display: flex;
align-items: center;
}
.fb {
height: 50px;
width: 50px;
float: right;
}
a.btn-quote {
float: right;
padding-top: auto;
padding-bottom: auto;
}
.header {
background-image: url(http://images.all-free-download.com/images/graphiclarge/green_grass_04_hd_picture_166122.jpg);
background-repeat: none;
background-size: cover;
}
.logo_img {
height: 150px;
width: 200px;
float: left;
display: block;
}
blockquote.slogan {
font-size: 35px;
color: red;
text-align: center;
}
.quote {
text-align: center;
font-size: 40px;
color: white;
}
span.free {
color: red;
}
.premium {
font-family: 'Graduate';
font-size: 50px;
text-align: center;
color: white;
}
.addy {
max-width: 50%;
margin-right: auto;
margin-left: auto;
}
.fqbutton {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.article {
margin-right: 250px;
margin-left: 250px;
}
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
border-left: none;
}
.constructpic {
height: 250px;
width: 250px;
display: block;
margin-right: auto;
margin-left: auto;
}
footer {
text-align: center;
color: black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CCF Lawn Care</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<!-- MAIN CONTAINER -->
<div class="container-fluid">
<body>
<!-- CCF LOGO IMG -->
<img src="http://res.cloudinary.com/hfitzger/image/upload/c_scale,h_650,w_900/v1497668893/CCF_Logo_jsa1ha.jpg" alt="CCF Logo" class="logo_img" />
<!-- NAV BAR -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">CCF Lawn Care</a>
</div>
<ul class="nav navbar-nav">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- FACEBOOK -->
<img src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png" class="fb">
<!-- FREE QUOTE BUTTON -->
Free Quote
</div>
</nav>
<blockquote class="slogan"><em>"We work hard so <strong> <ins>YOU</ins></strong> don't have to!"</em>
</blockquote>
<!-- HEADER -->
<div class="header">
<p class="premium">Premium Lawn Care service in Middle Tennessee</p>
<!-- FREE QUOTE SECTION -->
<div class="addy">
<input class="form-control" type="text" placeholder="Enter your address here" required>
<button type="submit" class="btn btn-primary">Get Free Quote </button>
</div>
<h3 class="quote">Call 615-870-9822 for a <span class="free">FREE QUOTE</span></h3>
<!-- ARTICLE SECTION -->
<blockquote class ="construction">Please come back and view our updates as we are temporarily under construction! <img src="https://server211.web-hosting.com:2083/cpsess0930665082/viewer/home%2fhfitzger%2fpublic_html%2fimages/construction.png" class="constructpic"></blockquote>
<!-- FOOTER -->
<footer>
Created and managed by <img src="https://res.cloudinary.com/hfitzger/image/upload/t_media_lib_thumb/v1497793352/Fitz_Bitz_Logo_jqhmjq.png" alt="Fitz&Bitz Logo" />
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
You are getting the unwanted border from Blockquote tag.
In your Css for of Blockquote class replace with below:
blockquote.construction {
font-size: 15px;
color: white;
text-align: center;
border-left: none;
}
Note : Also I observed the white border is present in the slogan blockquote as well. The reason it is not visible as the background color there is white. But if you will inspect the element, you will see it there.
I will recommend to add a common class to all blockquote with
border-left: none;
I'm new to web-developing. For one of my projects, I want to change the navigation bar's background when the user scrolls.
I want it to look like exactly this:
https://www.nlogic.co/understanding-vlan-hopping-attacks/
Here's my code:
nav .row {
margin-right: 0px;
}
nav {
border: 2px ridge #999;
position: fixed;
}
nav li {
float: left;
list-style: none;
padding: 20px 30px;
}
nav a {
color: white;
font-size: 20px;
}
.btn button {
background-color: transparent;
color: white;
margin: 10px 30px;
padding: 10px 25px;
border: 2px solid #999;
border-radius: 5px;
}
.btn button:hover {
border: 2px solid white;
border-radius: 10px;
}
<nav class="col-md-12">
<div class="row">
<ul class="col-md-8">
<li>About
</li>
<li>Contact
</li>
<div class="clearfix"></div>
</ul>
<div class="btn col-md-4">
<button>Sign Up</button>
<button>Sign In</button>
</div>
</div>
</nav>
I am not good at jQuery. In fact, I only know the basics of Javascript. I will be Very Very Grateful if someone can help me here.
Try this :
$(document).ready(function(){
$(window).on("scroll",function(){
if($(document).scrollTop() > 150)
$(".col-md-12").css({backgroundColor:"gray",position:"fixed"});
else
$(".col-md-12").css({backgroundColor:"transparent",position:"absolute"});
})
})
Final code :
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
height: 1500px;
}
nav .row{
margin-right: 0px;
}
nav{
border: 2px ridge #999;
position:absolute;
}
nav li{
float: left;
list-style: none;
padding: 20px 30px;
}
nav a{
color:white;
font-size: 20px;
}
.btn button{
background-color: transparent;
color: white;
margin: 10px 30px;
padding: 10px 25px;
border: 2px solid #999;
border-radius: 5px;
}
.btn button:hover{
border: 2px solid white;
border-radius: 10px;
}
</style>
</head>
<body>
<nav class="col-md-12">
<div class="row">
<ul class="col-md-8">
<li>About</li>
<li>Contact</li>
<div class="clearfix"></div>
</ul>
<div class="btn col-md-4">
<button>Sign Up</button>
<button>Sign In</button>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on("scroll",function(){
if($(document).scrollTop() > 150)
$(".col-md-12").css({backgroundColor:"gray",position:"fixed"});
else
$(".col-md-12").css({backgroundColor:"transparent",position:"absolute"});
})
})
</script>
</body>
</html>
try this. change the sizes as your need. refer this example and implement it for your project.try below working demo.
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
body{
height: 1000px;
margin: 0;
padding: 0;
}
div.navbar{
width: 100%;
height: 100px;
background-color: black;
position: fixed;
}
</style>
<body>
<div class="navbar"></div>
</body>
<script type="text/javascript">
$(window).scroll(function(){
var thescroll = $('body').scrollTop();
//alert(thescroll);
//in here, get the scroll position, if it is greater than you navbar height then change the color or whatever.
if (thescroll > 80)
{
$("div.navbar").css({"background-color":"pink"});
}
else
{
$("div.navbar").css({"background-color":"black"});
}
});
</script>
</html>
I am currently working on a some columns that include images as thumbnails. I can not work out why the columns are not aligning horizontally like I would like them to be.
Here is the piece of html I'm referring to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Townsville Rentals</title>
<!-- Bootstrap Css -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="Index.css" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="wrapper">
<div class="header">
<img class="logo" src="images/logo.png" alt="logo">
<ul class="nav pull-right">
<li class="nav-text">HOME</li>
<li class="nav-text">ABOUT</li>
<li class="nav-text">PROPERTY OWNERS</li>
<li class="nav-text">TENATS</li>
<li class="nav-text">CONTACT US</li>
<li class="nav-number">1300 702 305</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="top-content">
<img class="arrows" src="images/arrows.png" alt="arrows">
<img class="slider" src="images/slider.png" alt="slider">
</div>
</div>
<div class="wrapper">
<h3 class="thumbnail-title"> OUR GUARANTEE TO YOU </h3>
<div class="row">
<div class=".col-md-2"><img src="images/extra.png" alt="extra"></div>
<div class=".col-md-4"><img src="images/fees.png" alt="fees"></div>
<div class=".col-md-4"><img src="images/four.png" alt="four"></div>
<div class=".col-md-4"><img src="images/realistic.png" alt="real"></div>
<div class=".col-md-4"><img src="images/regular.png" alt="reg"></div>
<div class=".col-md-4"><img src="images/relax.png" alt="relax"></div>
</div>
</div>
<div class="wrapper">
<div class="">
</div>
</div>
</body>
</html>
And here's the associated CSS:
html,body
{
margin-left: auto;
margin-right: auto;
width: 1370px;
}
.wrapper
{
margin-left: auto;
margin-right: auto;
width: 100%;
}
.header
{
margin: auto;
max-width: 1370px;
}
.logo
{
padding-left: 50px;
padding-top: 30px;
}
.nav
{
}
.nav-text
{
display: inline-block;
float: left;
font-family: "GothamSSm Meduim";
font-size: 12px;
font-style: bold;
list-style-type: none;
max-height: 100%;
max-width: 100%;
overflow: hidden;
padding-right: 70px;
top: 45px;
}
.nav-number
{
color: #45aa4a;
display: inline;
float: right;
font-family: "GothamSSm Meduim";
list-style-type: none;
max-height: 100%;
max-width: 100%;
overflow: hidden;
padding-right: 65px;
top: 45px;
}
.arrows
{
padding-left: 575px;
padding-right: 685px;
padding-top: 45px;
}
.slider
{
margin-left: auto;
margin-right: auto;
max-height: 100%;
max-width: 100%;
padding-top: 60px;
}
.thumbnail-title
{
margin-left: auto;
margin-right: auto;
padding-top: 250px;
text-align: center;
}
.thumbnail
{
border: 2px solid red;
display: inline;
}
Actually the whole width of the screen is divided in to 12 sections for all kinds of screen according to bootstrap grid system
So you have to divide according to grig system only
Please dont you .[dot] before class name in the tag like this
<div class=".col-md-2"><img src="images/extra.png" alt="extra"></div>
^
dot should be used in writing styles only!
for yout requirement try like this:
<div class="row">
<div class="col-md-2">
<img src="layouts/08.png" alt="extra"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="fees"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="four"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="real"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="reg"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="relax"></div>
</div>
Please refer to [jsfiddle]http://jsfiddle.net/matildayipan/vzg9fhot/3/
You added dot in your class attributes as it is mentioned.
But you also missed the class declaration in your css
<div class="wrapper">
<div class="header">
<img class="logo" src="images/logo.png" alt="logo">
<ul class="nav pull-right">
<li class="nav-text">HOME</li>
<li class="nav-text">ABOUT</li>
<li class="nav-text">PROPERTY OWNERS</li>
<li class="nav-text">TENATS</li>
<li class="nav-text">CONTACT US</li>
<li class="nav-number">1300 702 305</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="top-content">
<img class="arrows" src="images/arrows.png" alt="arrows">
<img class="slider" src="images/slider.png" alt="slider">
</div>
</div>
<div class="wrapper">
<h3 class="thumbnail-title"> OUR GUARANTEE TO YOU </h3>
<div class="row">
<div class="col-md-2"><img src="images/extra.png" alt="extra"></div>
<div class="col-md-4"><img src="images/fees.png" alt="fees"></div>
<div class="col-md-4"><img src="images/four.png" alt="four"></div>
<div class="col-md-4"><img src="images/realistic.png" alt="real"></div>
<div class="col-md-4"><img src="images/regular.png" alt="reg"></div>
<div class="col-md-4"><img src="images/relax.png" alt="relax"></div>
</div>
</div>
<div class="wrapper">
<div class="">
</div>
</div>
Css:
.col-md-2{
//add your css
}
.col-md-4{
//add your css
}
html,body {
margin-right: auto;
margin-left: auto;
width:1370px;
}
.wrapper{
margin-right: auto;
margin-left: auto;
width:100%;
}
/* Start of header*/
.header{
margin:auto;
max-width: 1370px;
}
.logo{
padding-left:50px;
padding-top:30px;
}
.nav-text{
display: inline-block;
list-style-type:none;
top:45px;
float: left;
font-family: "GothamSSm Meduim";
font-size:12px;
font-style:bold;
padding-right: 70px;
max-width:100%;
max-height: 100%;
overflow: hidden;
}
.nav-number{
display: inline;
list-style-type:none;
float:right;
top:45px;
padding-right:65px;
color:#45aa4a;
font-family: "GothamSSm Meduim";
max-width:100%;
max-height: 100%;
overflow:hidden;
}
/* End of header container*/
/* Start of top content*/
.arrows{
padding-right:685px;
padding-left: 575px;
padding-top:45px;
}
.slider{
margin-left: auto;
margin-right: auto;
padding-top:60px;
max-width:100%;
max-height: 100%;
}
/*end */
.thumbnail-title {
padding-top: 250px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.thumbnail{
display:inline;
border: 2px solid red;
}
My problem is when i resize the window(smaller) One of my divs just go through and on top of my navigation bar... Which is annoying, but i believe there is a easy way to fix it. I can give you the code, but should test it in your editor program - and then resize, youll see what i mean.
HTML CODE HERE:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="WorkFieldStartpage.css"/>
</head>
<body>
<div id="upperblock">
</div>
<div class="topbar"></div>
<div id="pageContainer">
<div id="pageContainer2">
<div>
<div id="leftnavigation">
<ul>
<li> <h4> Navigation </h4> </li>
<li>Test text</li>
<li>Test text</li>
<li>Test text</li>
</ul>
</div>
<div id="mainContainer">
<div id="newsfeed"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
color: #333;
line-height: 1.28;
text-align: left;
direction: ltr;
}
div {
display: block;
}
.topbar {
font-family: sans-serif;
font-size:12px;
font-weight: bold;
background-color: #11BD83;
height: px;
width: 100%;
position:fixed;
left: 0px;
top: 0px;
}
#pageContainer {
margin: 0 auto;
position: relative;
zoom: 1;
min-height: 600px;
}
#pageContainer2 {
margin: 0;
outline: none;
padding: 0;
width: auto;
}
ul {
list-style-type: none;
}
h4 {
text-decoration:underline;
}
#mainContainer {
display: block;
width: 620px;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
min-height: 800px;
margin-left: auto ;
margin-right: auto ;
margin-top: 58px;
}
#leftnavigation {
float: left;
height: 300px;
width: 120.5px;
text-align: left;
font-family: sans-serif;
font-size: 15px;
padding-right: 30px;
display:block;
}
#newsfeed {
}
make #leftnavigation AND #mainContainer div float:left
Set to the maincontainer div an overflow:auto; property. This will disable to overlap on floated elements.