<html>
<head>
<meta charset = "utf-8/">
<title> Jquery </title>
<script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type = "text/javascript" src = "jsi/Scriptz.js" > </script>
<link rel = "stylesheet" type = "text/css" href = "RizzStyle.css"/>
<!-- Start Skider -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End Slider-->
</head>
<body onload = "Slider();" background = "black.jpg" >
<div id = "header">
<div id = "nav">
<div class = "Logo"> <img src = "Logo.png" border = "0" /> </div>
<div id = "nav_wrapper">
<ul>
<li> Home</li><li>
About Us</li><li>
Explore <img src = "Arrow.png"/>
<ul>
<li>Series/Movies</li>
<li>Sports</li>
<li>Games</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id = "container" >
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/north.jpg" alt="North" title="North" id="wows1_0"/></li>
<li><img src="data1/images/wolf.jpg" alt="content slider" title="Wolf" id="wows1_1"/> </li>
<li><img src="data1/images/android.jpg" alt="Android" title="Android" id="wows1_2"/></li>
</ul></div>
<div class="ws_bullets"><div>
<span><img src="data1/tooltips/north.jpg" alt="North"/>1</span>
<span><img src="data1/tooltips/wolf.jpg" alt="Wolf"/>2</span>
<span><img src="data1/tooltips/android.jpg" alt="Android"/>3</span>
</div></div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<div class = "shadow">
</div>
</div>
</body>
</html>
body{
padding:0;
margin:0;
overflow-y:scroll;
font-family: sans-serif;
font-size: 18px;
}
#container {
width:1200px;
height:1000px;
margin: 70px auto;
border : 1px solid;
background-color: aliceblue;
top:0;
}
#header{
width : 100%;
height: 60px;
background-color:#212121;
box-shadow: 0px 4px 2px #333;
top:0px;
z-index: 1000;
margin: 0 auto;
position:fixed;
white-space: nowrap;
}
#header h1{
width : 1024px;
margin : 0px auto;
padding:12px;
color:white;
}
.shadow{
background-image : url(shadow.png);
background-repeat: no-repeat;
background-position: top;
width: 864px;
height:144px;
margin: -60px auto;
}
.Logo{
float:left;
height: 60px;
padding:5px 3px;
line-height:40px;
}
.Logo img{
width:60%;
}
#nav{
background-color: #212121;
}
#nav_wrapper{
width:960px;
margin:0 auto;
text-align: left;
}
#nav ul{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li{
display:inline-block;
}
#nav ul li :hover{
background-color: #FF0000;
}
#nav ul li img{
vertical-align: middle;
padding-left:10px;
width:20;
}
#nav ul li a,visited{
color:#ccc;
display:block;
padding: 15px;
text-decoration: none;
}
#nav ul li a:hover{
background-color:#FF0000;
text-decoration: none;
height:50%;
}
#nav ul li: hover ul{
display: block;
}
#nav ul ul{
position:absolute;
background-color:#212121;
}
#nav ul ul li{
display:block;
}
Hello guys, I have been following a tutorial on Youtube on how to create a dropdow list. Everything was going great untill I inputted - display: none in the css for dropdown and nothing appears but when I disable it appears underneath the correct tab which is explore. Any Idea how I can fix this?
Please check the following code. I hope this solves your problem.
You can find the updated CSS between the /*********************************/ comment.
<html>
<head>
<meta charset="utf-8/">
<title>Jquery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jsi/Scriptz.js">
</script>
<link rel="stylesheet" type="text/css" href="RizzStyle.css" />
<!-- Start Skider -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End Slider-->
<style type="text/css">
body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: sans-serif;
font-size: 18px;
}
#container {
width: 1200px;
height: 1000px;
margin: 70px auto;
border: 1px solid;
background-color: aliceblue;
top: 0;
}
#header {
width: 100%;
height: 60px;
background-color: #212121;
box-shadow: 0px 4px 2px #333;
top: 0px;
z-index: 1000;
margin: 0 auto;
position: fixed;
white-space: nowrap;
}
#header h1 {
width: 1024px;
margin: 0px auto;
padding: 12px;
color: white;
}
.shadow {
background-image: url(shadow.png);
background-repeat: no-repeat;
background-position: top;
width: 864px;
height: 144px;
margin: -60px auto;
}
.Logo {
float: left;
height: 60px;
padding: 5px 3px;
line-height: 40px;
}
.Logo img {
width: 60%;
}
#nav {
background-color: #212121;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #FF0000;
}
#nav ul li img {
vertical-align: middle;
padding-left: 10px;
width: 20;
}
#nav ul li a,
visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li a:hover {
background-color: #FF0000;
text-decoration: none;
height: 50%;
}
/*********************************/
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
position: absolute;
background-color: #212121;
display: none;
}
/*********************************/
#nav ul ul li {
display: block;
}
</style>
</head>
<body onload="Slider();" background="black.jpg">
<div id="header">
<div id="nav">
<div class="Logo">
<a href="Main.html">
<img src="Logo.png" border="0" />
</a>
</div>
<div id="nav_wrapper">
<ul>
<li> Home
</li>
<li>
About Us
</li>
<li>
Explore <img src = "Arrow.png"/>
<ul>
<li>Series/Movies
</li>
<li>Sports
</li>
<li>Games
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="container">
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li>
<img src="data1/images/north.jpg" alt="North" title="North" id="wows1_0" />
</li>
<li>
<a href="http://wowslider.com/vi">
<img src="data1/images/wolf.jpg" alt="content slider" title="Wolf" id="wows1_1" />
</a>
</li>
<li>
<img src="data1/images/android.jpg" alt="Android" title="Android" id="wows1_2" />
</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<span><img src="data1/tooltips/north.jpg" alt="North"/>1</span>
<span><img src="data1/tooltips/wolf.jpg" alt="Wolf"/>2</span>
<span><img src="data1/tooltips/android.jpg" alt="Android"/>3</span>
</div>
</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<div class="shadow">
</div>
</div>
</body>
</html>
Related
I'm trying to make a page, just for exercise, and I came up in a problem, so if you run the code the logo should be on top in center, than the menu centered under it.. but it falls in the background, help please
1. how to add a dropdown under every three menu list items where I can add some text, images and location
body {
background-color:lightgray;
font-family: Tahoma, Cambria;
}
#header {
height: 300px;
}
#logo {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
}
#menu {
position: relative;
max-height:60px;
font-family: Cambria;
font-style: bold, italic;
text-align: center;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
float:none;
}
#menu li a {
display:inline-block;
color:#009CFF;
padding: 10px 200px;
overflow:hidden;
transition: 0.3s;
font-style:italic;
font-weight: bold;
text-decoration:none;
margin: 0 0 0 0;
}
#menu li a:hover {
background-color: dimgray;
color: deepskyblue;
}
body {
border: 2px solid dark-gray ;
}
l>
<!DOCTYPE html >
<html>
<head>
<title></title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<header>
<img src = "http://via.placeholder.com/350x150" id = "logo" alt = "Antomatik logo"/>
</header>
<div id = "menu">
<ul>
<li class="onama">
O nama</li>
<li class="povijest">
Povijest</li>
<li class="kontakt">
Kontakt</li>
</ul>
</div>
<footer>
</footer>
</body>
</html>
Its header, not #header
body {
background-color:lightgray;
font-family: Tahoma, Cambria;
}
header {
height: 100px;
}
#logo {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
}
#menu {
position: relative;
max-height:60px;
font-family: Cambria;
font-style: bold, italic;
text-align: center;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
float:none;
}
#menu li a {
display:inline-block;
color:#009CFF;
padding: 10px 200px;
overflow:hidden;
transition: 0.3s;
font-style:italic;
font-weight: bold;
text-decoration:none;
margin: 0 0 0 0;
}
#menu li a:hover {
background-color: dimgray;
color: deepskyblue;
}
body {
border: 2px solid dark-gray ;
}
l>
<!DOCTYPE html >
<html>
<head>
<title></title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<header>
<img src="http://via.placeholder.com/300x100" id = "logo" alt = "Antomatik logo"/>
</header>
<div id = "menu">
<ul>
<li class="onama">
O nama</li>
<li class="povijest">
Povijest</li>
<li class="kontakt">
Kontakt</li>
</ul>
</div>
<footer>
</footer>
</body>
</html>
My title basically says it all. For some reason I cannot get it to stretch the entire page. I am new to this so any help would be great.
My page
This is my html for the code. I have been told that the width and margin needed to be changed from a friend and I tried doing that but got the same results.
.maincontainer{
width: 990px;
margin: 0 auto;
}
body {
background: #B2906F;
font-family: arial;
margin: 0;
height: 100%;
}
.picture{
display: inline;
margin: 0;
padding: 0;
position: fixed;
z-index: -1;
background-size: 100%
}
.button{
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
background-color: #05280c
}
.button-primary:hover {
background-color: #05370c
}
h1 {
display: inline;
margin: 0;
background-color: #2c421f;
padding: 5px;
position: absolute;
}
ul{
margin: 0;
display: inline;
padding: 0px 0px 0px 250px;
}
ul li {
display: inline-block;
list-style-type: none;
padding: 15px 10px;
color: #050c0c;
margin: 0;
border-radius: 5px;
}
ul li a {
color: black;
}
footer{
clear: both;
}
nav {
color:
height: 40px;
margin: 0;
background-color: #2c421f;
}
<!doctype html>
<div class="maincontainer">
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<h1>NW Wolf Pack</h1>
<div class="picture"><img src="camo.jpg" width="1000" height="150">
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</body>
<footer>2017 Dillan Hall</footer>
</html>
Arrange the html in well structured order and make the container div of with 100% then it will take the whole width: demo below
html,
body{
height: 100%;
}
body {
background: #B2906F;
font-family: arial;
margin: 0;
}
.maincontainer{
width: 100%;
margin: 0 auto;
}
.picture{
display: inline;
margin: 0;
padding: 0;
position: fixed;
z-index: -1;
background-size: 100%;
width: 100%;
}
.button{
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
background-color: #05280c
}
.button-primary:hover {
background-color: #05370c
}
h1 {
display: inline;
margin: 0;
background-color: #2c421f;
padding: 5px;
position: absolute;
}
ul{
margin: 0;
display: inline;
padding: 0px 0px 0px 250px;
}
ul li {
display: inline-block;
list-style-type: none;
padding: 15px 10px;
color: #050c0c;
margin: 0;
border-radius: 5px;
}
ul li a {
color: black;
}
footer{
clear: both;
}
nav {
color:
height: 40px;
margin: 0;
background-color: #2c421f;
}
<!DOCTYPE html>
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="maincontainer">
<h1>NW Wolf Pack</h1>
<div class="picture"><img src="camo.jpg" width="1000" height="150">
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</div>
<footer>2017 Dillan Hall</footer>
</body>
</html>
Your HTML code structure is not correct, I have corrected the HTML structure below:
<!doctype html>
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="maincontainer">
<div class="picture"><img src="camo.jpg" height="150" style="width: 100%" />
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</div>
</div>
</body>
<footer>2017 Dillan Hall</footer>
</html>
And to make the screen full size you need to modify your CSS code .maincontainer and it will solve your issue.
.maincontainer{
width: 100%;
margin: 0 auto;
}
I just started learning HTML and decided I wanted to try to build a simple blog. I decided I wanted a navigation bar with links to other HTML files. I thought I had done this perfectly until I ran it and discovered that only the "Home" link works (which is the HTML file that I had put the href tags in) the other 4 links showed up as links but weren't clickable. All the files are located in the same folder.
<head>
<title>Music Project</title>
<link href="MusicProject.css" rel="stylesheet" />
<div id="header">
<h1 align="center" style="margin-top: -155px"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Artists</li>
<li>Mixtapes/Albums</li>
<li>Suggestions</li>
<li>About</li>
</ul>
</div>
</head>
#header {
background-color: #888888;
height:380px;
margin:0px;
padding:0px;
}
body {
background-color: #C0C0C0;
margin:0px;
padding:0px;
}
#main {
overflow: auto;
}
#content {
float:left;
}
#side {
float:left;
}
#nav {
height: 42px;
background-color: #888888;
}
#nav ul {
list-style-type:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li {
float:left;
margin:10px;
width:246px;
text-align:center;
font-family:"Arial";
font-size: 23px;
color: #00004B;
}
#nav ul li a {
display: inline;
width: 246px;
}
As said you need to place your <header>, and <content> in the <body> tags.
This should help you out:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Music Project</title>
<link href="MusicProject.css" rel="stylesheet">
<style>
#header {
background-color: #888888;
height: 380px;
margin: 0px;
padding: 0px;
}
body {
background-color: #C0C0C0;
margin: 0px;
padding: 0px;
}
#main {
overflow: auto;
}
#content {
float: left;
}
#side {
float: left;
}
#nav {
height: 42px;
background-color: #888888;
}
#nav ul {
list-style-type: none;
height: 30px;
padding: 0px;
margin: 0px;
}
#nav ul li {
float: left;
margin: 10px;
width: 246px;
text-align: center;
font-family: "Arial";
font-size: 23px;
color: #00004B;
}
#nav ul li a {
display: inline;
width: 246px;
}
</style>
</head>
<body>
<header>
<div id="header">
<h1 style="margin-top: -155px; text-align:center;"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Artists</li>
<li>Mixtapes/Albums</li>
<li>Suggestions</li>
<li>About</li>
</ul>
</div>
</header>
<content>
<!-- Page content here -->
</content>
</body>
</html>
Fiddle
Here is a link to help you learn the basics. Link
#google1 {
width: 30%;
height: 30%;
}
#google {
text-align: center;
margin: 200px auto;
position: relative;
}
#gsearch {
height: 30px;
width: 50%;
}
#form {
text-align: center;
top: -30px;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
li {
float: left;
}
a {
display: block;
width: 60px;
color: #7e7070;
}
a:link {
text-decoration: none
}
a:visited {
text-decoration: none
}
#topbar {
position: relative;
right: 0;
top: 0;
margin-right: 200px;
}
#grid,
#bell {
opacity: 0.4;
}
<html>
<head>
<meta charset="utf-8"/>
<title>GOOGLE</title>
<link rel="stylesheet" href="styleg.css"/>
</head>
<body>
<div id="wrapper">
<div id="google">
<img src="google1.jpg" img id="google1" alt="google1"/>
<div id="form">
<form action="" method="post" name="gsearch"></form>
<input type="text" input id="gsearch" name="gsearch">
</div>
</div>
</div>
<div id="topbar">
<ul>
<li>Shan</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="grid.png" alt="grid" img id="grid"></li>
<li><img src="bell.png" alt="bell" img id="bell"></li>
</ul>
</div>
</body>
What I want to do is align the bell.png and grid.png with the other text links to the top right of how google home page would look like.
Right now it displays at the bottom left inline. I have tried absolute positioning, but then I would have to fine tune it with top and left adjustments to get it right.
Q: Is there a simpler way of moving the entire block to the top right and align it?
HTML
<html>
<head>
<meta charset="utf-8"/>
<title>GOOGLE</title>
<link rel="stylesheet" href="styleg.css"/>
</head>
<body>
<div id="wrapper">
<div id="google">
<img src="google1.jpg" img id="google1" alt="google1"/>
<div id="form">
<form action="" method="post" name="gsearch"></form>
<input type="text" input id="gsearch" name="gsearch">
</div>
</div>
</div>
<div id="topbar">
<ul>
<li>Shan</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="grid.png" alt="grid" img id="grid"></li>
<li><img src="bell.png" alt="bell" img id="bell"></li>
</ul>
</div>
</body>
CSS code is as follows:
#google1{
width:30%;
height:30%;
}
#google{
text-align: center;
margin:200px auto;
position: relative;
}
#gsearch{
height:30px;
width:50%;
}
#form{
text-align: center;
top:-30px; position:relative;
}
ul{
list-style-type:none;
margin:0;
padding:0;
display:inline;
}
li{
float:left;
}
a{
display:block;
width:60px;
color:#7e7070;
}
a:link{text-decoration: none}
a:visited{text-decoration: none}
#topbar{
position:relative; right:0; top:0; margin-right: 200px;
}
#grid, #bell{opacity:0.4;}
In your code, position: absolute is the way to go.
#google1 {
width: 30%;
height: 30%;
}
#google {
text-align: center;
margin: 200px auto;
position: relative;
}
#gsearch {
height: 30px;
width: 50%;
}
#form {
text-align: center;
top: -30px;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
li {
float: left;
}
a {
display: block;
width: 60px;
color: #7e7070;
}
a:link {
text-decoration: none
}
a:visited {
text-decoration: none
}
#topbar {
position: absolute;
right: 0;
top: 0;
}
#grid,
#bell {
opacity: 0.4;
}
<html>
<head>
<meta charset="utf-8"/>
<title>GOOGLE</title>
<link rel="stylesheet" href="styleg.css"/>
</head>
<body>
<div id="topbar">
<ul>
<li>Shan</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="grid.png" alt="grid" img id="grid"></li>
<li><img src="bell.png" alt="bell" img id="bell"></li>
</ul>
</div>
<div id="wrapper">
<div id="google">
<img src="google1.jpg" img id="google1" alt="google1"/>
<div id="form">
<form action="" method="post" name="gsearch"></form>
<input type="text" input id="gsearch" name="gsearch">
</div>
</div>
</div>
</body>
I restructured your HTML and modified your CSS to place the nav elements at the top right. I set text-align:right on #topbar so that the items will be aligned to the right side. I also set the <li> elements to display:inline-block so that they will all appear on the same line but still accept some margin.
#google1 {
width: 30%;
height: 30%;
}
#google {
text-align: center;
margin: 200px auto;
position: relative;
}
#gsearch {
height: 30px;
width: 50%;
}
form#search_form {
text-align: center;
top: -30px;
position: relative;
}
#topbar {
text-align:right;
}
#topbar ul {
list-style:none;
margin: 0;
padding: 0;
}
#topbar ul li {
display:inline-block;
vertical-align:middle;
margin:0 0 0 1em;
}
#topbar ul li a {
color: #7e7070;
text-decoration: none
}
#topbar ul li a #grid,
#topbar ul li a #bell {
opacity: 0.4;
}
<div id="topbar">
<ul>
<li>Shan</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="grid.png" alt="grid" img id="grid"></li>
<li><img src="bell.png" alt="bell" img id="bell"></li>
</ul>
</div>
<div id="wrapper">
<div id="google">
<img src="google1.jpg" id="google1" alt="google1" />
<form action="" method="post" name="gsearch" id="search_form">
<input type="text" input id="gsearch" name="gsearch">
</form>
</div>
</div>
I have a really annoying issue. Im trying to create a page with a full background image which resizes and fills the browser screen. Currently its half working but for some reason have to scroll like 20-30px down. Which the user should not be able to do.
This is the page source:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="/Content/css/reset.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/menu.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/layout.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/scroll.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="/Scripts/backstretch.js" type="text/javascript"></script>
<script type="text/javascript">
/** var images = [
"/content/images/bghome.jpg",
"/content/images/background.jpg"
];
var index = 0;
$.backstretch(images[index], { speed: 500 });
setInterval(function () {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 5000);
**/
$.backstretch("/content/images/background.jpg");
</script>
</head>
<div class="menu-link">
<ul>
<li>
home
</li>
<li>
profile
</li>
<li>
portfolio
</li>
<li>
news
</li>
<li>
current projects
</li>
<li class="on">
awards
</li>
<li>
contact
</li>
</ul> </div>
<div id="left-sidebar">
<div id ="logo">
<image src="/content/images/logo.png"/>
</div>
<div id = "leftcontent">
<p>
</p>
</div>
<div id ="foot">
<ul>
<li>
Privacy
</li>
<li>
Sitemap
</li>
<li class="last">
Terms & Conditions
</li>
</ul>
© 2012 SH Structures. All rights reserved. <image src="/content/images/footimg.png"/>
</div>
</div>
<div id="right-sidebar">
</div>
<div id="content">
<div id = "freestylecontent">
<h1>awards</h1>
<br><br><br>
<div id = "freecontent">
<p>
</p>
<br><br>
</div>
</div>
</div>
</html>
Css:
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
body {
}
/* IE7 Fix */
* html #container {
display: table;
height: 100%
}
/* Opera Fix */
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;
}
/* IE6 Fix */
* html div#body {
overflow: visible;
}
div#container {
height: 100%;
height: auto !important;
background: url("left-sidebar-back.gif") repeat-y top left;
}
div#main {
overflow: auto;
padding-bottom: 100px;
}
div#header {
height: 100px;
background: #ba6f19;
border-bottom: 1px solid #000;
padding: 20px;
}
div#body {
overflow: hidden;
height: 100%;
}
div#content {
margin: 0px 0px 0px 415px;
width: 375px;
padding: 20px;
background:url(../images/greenfade.png);
opacity:0.8;
height:100%;
color:White;
}
div#left-sidebar {
width: 375px;
float: left;
height:100%;
padding: 20px;
background:black;
opacity:0.8;
color:White;
}
div#right-sidebar {
width: 260px;
float: right;
padding: 20px;
}
div#footer {
background: #ba6f19;
border-top: 1px solid #000;
position: relative;
height: 100px;
margin-top: -101px;
clear: both;
}
div#footer p {
padding: 20px;
margin: 0px;
}
.menu-link{
font-size:1em;
height:40px;
padding-left:10px;
width:100%;
margin-left:auto;
margin-right:auto;
background:black;
}
.menu-link a{
padding: 10px 0px 10px 0px;
height:40px;
color:#fff;
text-decoration:none;
float:left;
}
.menu-link ul {
padding:0px 0px 0px 20px;
}
.menu-link ul li
{
text-decoration:none;
float:left;
/**background: url(/Content/img/border-line-inside.png) no-repeat right;**/
}
.menu-link ul li a {
color:#fff;
padding: 0px 10px 0px 10px;
line-height:40px;
display: block;
text-align:center;
}
.menu-link a:hover{
background:url(../images/menu-nav-hov.png) repeat-x;
cursor:pointer;
}
.menu-link ul li.on {
background:url(../images/menu-nav-hov.png) repeat-x;
/** background-position:center bottom;
background-repeat:no-repeat;
**/
}
/** Side Menu **/
.sideMenu ul li.on a
{
height:2em;
padding-top: 2px;
background:url(../images/point.png) no-repeat;
font-weight:bold;
}
.sideMenu ul
{
padding: 15px 0px 0px 0px;
list-style-type:none;
font-size:0.9em;
width:20em;
color:#fff;
margin-left:-10px;
}
.sideMenu ul a{
padding: 2px 20px 0px 0px;
color:#fff;
text-decoration:none;
float:left;
width:19.2em;
}
.sideMenu li a
{
height:2em;
padding-top: 1px;
padding-left:15px;
}
.sideMenu li a:hover{
background:url(../images/point.png) no-repeat;
cursor:pointer;
padding-left:-15px;
}
.sideMenu h4{
display:none;
}
/** Footer **/
#foot
{
padding-left: 20px;
padding-right: 20px;
position:absolute;
bottom:0;
height:60px;
height:1.5em;
font-size:.8em;
}
#foot li a
{
padding: 10px 0px 10px 0px;
color:#fff;
text-decoration:none;
}
Am i missing something obvious? thanks
It's hard to tell exactly what you're asking, but if all you want to do is disable scrolling the page, you first need to add a <body> tag and give it the following style properties:
<body style="overflow:hidden;">
<!-- Page contents -->
</body>
$('body').on('touchmove', function (event) {
event.preventDefault();
});
this might work