I want my menu to stay on its place while I scroll, but when I add the following in my CSSposition:fixed; the whole thing goes out of the place from where I want it to be.
In this jsfiddle you can see how it is now and how I want it to be. The only thing wrong with it, is that if I change the position to fixed it doesn't stay where I want it to be anymore.
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<title>random</title>
<!-- <link rel="stylesheet" type="text/css" href="styles/style.css"> -->
</head>
<body>
<div id="container">
<div id="headcontainer">
</div>
<div id="menu">
<div id="logo">
<p>
Hier komt een logo
</p>
</div>
<ul>
<li>
Home
</li>
<li>
Over
</li>
<li>
Contact
</li>
<li>
Producte
</li>
</ul>
</div>
<div id="content">
<div class="text-box">
</div>
<div class="text-box">
</div>
</div>
</div>
</body>
</html>
<style>
/*Global*/
* {
margin: 0px;
}
body {}
h1,
h2,
h3,
h4,
h5,
h6 {}
h1 {}
h2 {}
h3 {}
h4 {}
a {}
img {}
#container {
margin-left: auto;
margin-right: auto;
width: 100%;
}
#headcontainer {
width: 100%;
height: 100vh;
background-color: pink;
}
/* navigation */
#menu {
height: 100px;
width: 100%;
background-color: rgba(0, 0, 255, 0.1);
max-height: 100px;
border: 1px solid black;
border-top: none;
}
#menu li {
display: inline-block;
text-decoration: none;
padding-left: 20px;
position: relative;
padding-right: 20px;
}
#menu ul {
float:right;
height:100%;
width: auto;
line-height: 100px;
margin-right:25px;
}
#menu ul li {
}
#menu ul li:hover {
cursor:pointer;
color: white;
}
#logo {
height: 50px;
width: auto;
background-color: red;
float: left;
margin-top: 0px;
margin-top: 30px;
margin-left: 60px;
}
/*content*/
#content {
width:100%;
height:1000px;
min-height:500px;
margin-left: auto;
margin-right: auto;
}
.text-box {
width:40%;
height:auto;
background-color:blue;
min-height:100px;
float:left;
margin-left:5%;
margin-right:5%;
margin-top:50px;
}
</style>
EDIT:
I'm trying to achieve something like this:
http://themes.lucky-roo.com/resume-cv/berg-v1.7/HTML_Template/home-1-static-image.html
Ok, i see what you want and i think you will code this behaviour in Javascript.
This kind of solution will be okay for you ??
Démo : http://jsfiddle.net/cc48t
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$('#scroller').css('top', $(window).scrollTop());
}
}
);
Use menu inside the headercontainor and give position: fixed; fom #menu
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<title>random</title>
<!-- <link rel="stylesheet" type="text/css" href="styles/style.css"> -->
</head>
<body>
<div id="container">
<div id="headcontainer">
<div id="menu">
<div id="logo">
<p>
Hier komt een logo
</p>
</div>
<ul>
<li>
Home
</li>
<li>
Over
</li>
<li>
Contact
</li>
<li>
Producte
</li>
</ul>
</div>
</div>
<div id="content">
<div class="text-box">
</div>
<div class="text-box">
</div>
</div>
</div>
</body>
</html>
<style>
/*Global*/
* {
margin: 0px;
}
body {}
h1,
h2,
h3,
h4,
h5,
h6 {}
h1 {}
h2 {}
h3 {}
h4 {}
a {}
img {}
#container {
margin-left: auto;
margin-right: auto;
width: 100%;
}
#headcontainer {
width: 100%;
height: 100vh;
background-color: pink;
}
/* navigation */
#menu {
position: fixed;
height: 100px;
width: 100%;
background-color: rgba(0, 0, 255, 0.1);
max-height: 100px;
border: 1px solid black;
border-top: none;
}
#menu li {
display: inline-block;
text-decoration: none;
padding-left: 20px;
position: relative;
padding-right: 20px;
}
#menu ul {
float:right;
height:100%;
width: auto;
line-height: 100px;
margin-right:25px;
}
#menu ul li {
}
#menu ul li:hover {
cursor:pointer;
color: white;
}
#logo {
height: 50px;
width: auto;
background-color: red;
float: left;
margin-top: 0px;
margin-top: 30px;
margin-left: 60px;
}
/*content*/
#content {
width:100%;
height:1000px;
min-height:500px;
margin-left: auto;
margin-right: auto;
}
.text-box {
width:40%;
height:auto;
background-color:blue;
min-height:100px;
float:left;
margin-left:5%;
margin-right:5%;
margin-top:50px;
}
</style>
Since you are not using JQuery, You can achieve it through the simple javascript
var header = document.querySelector('div'),
title = header.querySelector('ul'),
fix_class = 'fixnav';
function stickyScroll(e) {
if( window.pageYOffset > 310 ) {
title.classList.add(fix_class);
}
if( window.pageYOffset < 310 ) {
title.classList.remove(fix_class);
}
}
// Scroll handler to toggle classes.
window.addEventListener('scroll', stickyScroll, false);
<style>
/*Global*/
* {
margin: 0px;
}
body {}
h1,
h2,
h3,
h4,
h5,
h6 {}
h1 {}
h2 {}
h3 {}
h4 {}
a {}
img {}
#container {
margin-left: auto;
margin-right: auto;
width: 100%;
}
#headcontainer {
width: 100%;
height: 100vh;
background-color: pink;
}
/* navigation */
.fixnav{
position:fixed;
z-index:9999;
top:0;
}
#menu {
height: 100px;
width: 100%;
background-color: rgba(0, 0, 255, 0.1);
max-height: 100px;
border: 1px solid black;
border-top: none;
transition: 1s all;
}
#menu li {
display: inline-block;
text-decoration: none;
padding-left: 20px;
position: relative;
padding-right: 20px;
}
#menu ul {
float:right;
height:100%;
width: auto;
line-height: 100px;
margin-right:25px;
}
#menu ul li {
}
#menu ul li:hover {
cursor:pointer;
color: white;
}
#logo {
height: 50px;
width: auto;
background-color: red;
float: left;
margin-top: 0px;
margin-top: 30px;
margin-left: 60px;
}
/*content*/
#content {
width:100%;
height:1000px;
min-height:500px;
margin-left: auto;
margin-right: auto;
}
.text-box {
width:40%;
height:auto;
background-color:blue;
min-height:100px;
float:left;
margin-left:5%;
margin-right:5%;
margin-top:50px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<title>random</title>
<!-- <link rel="stylesheet" type="text/css" href="styles/style.css"> -->
</head>
<body>
<div id="container">
<div id="headcontainer">
</div>
<div id="menu">
<div id="logo">
<p>
Hier komt een logo
</p>
</div>
<ul>
<li>
Home
</li>
<li>
Over
</li>
<li>
Contact
</li>
<li>
Producte
</li>
</ul>
</div>
<div id="content">
<div class="text-box">
</div>
<div class="text-box">
</div>
</div>
</div>
</body>
</html>
Fiddle: https://jsfiddle.net/sank8893/mvmbtcby/3/
I create a jsfiddle.
I just add those lines in #menu and it works for me:
position : fixed;
top: 0;
The menu doesn't move.
JS:
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 100) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 100) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
});
Css:
.navbar-fixed{
position:fixed;
z-index:auto;
Top:0px;
}
Since you need this css to be appended only when you have scrolled a certain height in your webpage, Using this js code you can append navbar-fixed class to menu div after scrolling a certain amount of height.
Add the following script it will work fine
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > 650) {
$('#menu').css('position', 'fixed').css('top', '0');
} else {
$('#menu').css('position', 'static');
}
});
</script>
Add these styles to your menu in css
.
position: fixed
top:0
The combination of these 2 will make sure the menu stays where it has to stay : always at the top.
As #Error404 said:
the fixed elements goes out of the normal flow of the document and this
is why you can position it on the top of the screen.
Related
I was wondering how I could stop div's from falling under my navigation/information bar when I minimize the screen's width. The information bar is 1200px in height, I just want it to sit on the left side without any disturbance from div's and other code when I decide to minimize the width.
Or better yet, if someone could show me how to shrink the "information bar" in height when the browser is minimizing while the div's fall under it that would be very helpful.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href=o>
<link href="https://fonts.googleapis.com/css?family=Abel|Abril+Fatface|Amaranth|Arapey|Armata|Asap+Condensed|Bellefair|Cabin+Condensed|Cormorant+Unicase|Cormorant+Upright|Dancing+Script|EB+Garamond|Economica|Frank+Ruhl+Libre|Great+Vibes|Gruppo|Gudea|Halant|Heebo|Hind+Guntur|IM+Fell+Great+Primer+SC|Italianno|Karla|Kreon|Kristi|Kurale|Molengo|Old+Standard+TT|Open+Sans+Condensed:300|Ovo|Parisienne|Pinyon+Script|Poiret+One|Pontano+Sans|Prata|Quattrocento|Rouge+Script|Share|Spectral|Tangerine|Tenali+Ramakrishna|Trirong|Voces|Yantramanav|Yrsa" rel="stylesheet">
<title></title>
</head>
<body>
<h1>Site</h1>
<nav>
<ul class="menu">
<li>Information</li>
<li>Wanting</li>
<li>To</li>
<li>Stay</li>
<li>Undisruptive</li>
<li>To</li>
<li>Div's</li>
</ul>
</nav>
<div>
<div class=red>
</div>
<div class=red>
</div>
<div class=red>
</div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
text-align:center;
font-family
}
h1{
background-color:black;
color:white;
padding:1em;
font-size:2em;
}
.menu{
background-color:gray;
width:200px;
height:1200px;
position:relative;
float:left;
}
.red{
position:relative;
border:1px solid red;
float:left;
width:350px;
height:350px;
}
#media screen and (min-width:600px){
.red{
}
}
This may helpful:
You can change width into "%"
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
font-family
}
h1 {
background-color: black;
color: white;
padding: 1em;
font-size: 2em;
}
.menu {
background-color: gray;
width: 25%;
height: 1200px;
position: relative;
float: left;
}
.right {
float: left;
width: 75%
}
.red {
position: relative;
border: 1px solid red;
float: left;
width: 100%;
height: 350px;
}
#media (max-width:600px) {
.menu {
width: 35%;
}
.right {
width: 65%
}
}
<h1>Site</h1>
<nav>
<ul class="menu">
<li>Information</li>
<li>Wanting</li>
<li>To</li>
<li>Stay</li>
<li>Undisruptive</li>
<li>To</li>
<li>Div's</li>
</ul>
</nav>
<div class="right">
<div class=red>
</div>
<div class=red>
</div>
<div class=red>
</div>
</div>
I would say, your code is at a very basic level to achieve what you ask for, but I have tried something, hope so that fulfils the requirement.
<div class="site-name">
<h1>Site</h1>
<div class="hamburger" id="hamClick">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav>
<ul class="menu" id="menu">
<li>Information</li>
<li>Wanting</li>
<li>To</li>
<li>Stay</li>
<li>Undisruptive</li>
<li>To</li>
<li>Div's</li>
</ul>
</nav>
<div>
<div class=red></div>
<div class=red></div>
<div class=red></div>
</div>
here is the css:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
text-align:center;
}
.site-name {
padding: 1em;
position: relative;
background-color:black;
}
.site-name h1{
color:white;
font-size:2em;
}
.menu{
background-color:gray;
width:200px;
height:1200px;
position:relative;
float:left;
}
.red{
position:relative;
border:1px solid red;
float:left;
width:350px;
height:350px;
}
.hamburger {
display: none;
position: absolute;
border: 1px solid #fff;
border-radius: 4px;
padding: 4px;
top: 20px;
cursor: pointer;
}
.hamburger span {
width: 20px;
height: 2px;
background: #fff;
margin-top: 2px;
display: block;
}
.hamburger span:first-child {
margin-top: 0px;
}
#media only screen and (max-width:600px){
.hamburger {
display: block;
}
.menu {
height: 0px;
transition: all .3s ease-in-out;
position: absolute;
overflow: hidden;
}
.menu.active {
height: 150px;
transition: all .3s ease-in-out;
z-index: 999;
}
.red {
width: 100%;
/* height: 100vw; */
}
}
and a little bit of Javascript:
document.getElementById('hamClick').addEventListener('click', function() {
var collapse = document.getElementById('menu');
collapse.classList.toggle('active');
});
Look at the JSFiddle code here: JSFiddle
Please refer to the posted image. I want to add a margin-left on the first image and then in the rest of image I don't want them. Can I use the child selectors to achieve this or there is any other way?
Can I make the images, overflow: scroll like we do in case of text? As I don't know jquery/javascript as of now.
* {
box-sizing: border-box;
}
body {
background:gray;
/*border: 2px solid yellow;*/
}
.wrapper {
width: 93%;
height: auto;
margin: auto;
}
.headwrap {
padding-top: 70px;
}
.logo {
margin: 0;
float: left;
}
.socialbuttons {
float: right;
}
.socialbuttons ul {
list-style: none;
float: right;
}
.socialbuttons ul li {
float: left;
width:50px;
height:50px;
padding:0;
margin-right: 30px;
background: #000;
border-radius:30px;
}
.socialbuttons ul li img{
margin-left:20px;
margin-top:20px;
}
.navbar {
margin-top: 40px;
width: 100%;
background: #db3636;
float: left; /* this and see changes */
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0 5px; /* the 0 helps with making the borders span full height of navbar*/
/* float producing wrong results */
}
.navbar ul li {
float: left; /* height of menu bar increases when float is defined */
display: inline; /* does it have any use ? */
padding: 25px 10px;
border-right: 1px solid black;
border-left: 1px solid black;
color: white;
font-size: 14px;
font-weight: bold;
font-family: sans-serif;
text-align: center;
width: 15%;
}
.navbar ul li:first-child {
border-left: none;
}
.navbar ul li:last-child {
border-right: none;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.slider img {
float:left;
width:100%;
}
.text{
color:white;
margin-top:-35%;
float:left;
margin-left: 80px;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
font-size : 50px;
line-height: .5;
}
#project {
background-color: #555653;
width: 100%;
margin-top: 10px;
float: left;
}
.head {
float: left;
background-color: #1D1D1C;
width: 100%;
}
.head h3 {
color: white;
font-family: Arial , sans-serif;
font-weight: lighter;
margin-left: 20px;
}
.imgContainer img {
margin-top: 20px;
padding-left: 40px
}
<!DOCTYPE html>
<html>
<head>
<title>Industrial Website demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link href="damion.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<header class="headwrap">
<div class="logo">
<img src="logo.png" alt="Damion max">
</div>
<div class="socialbuttons">
<ul>
<li><img src="facebook.png"></img></li>
<li><img src="twitter.png"></img> </li>
<li><img src="feed.png"></img></li>
<li><img src="google.png"></img></li>
</ul>
</div>
<nav class="navbar">
<ul class="clearfix">
<li style="width:5%;"><img src="home.png"></li>
<li>ABOUT US</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>BLOG</li>
<li>CONTACTS</li>
<li style="padding:0; width:20%;"><input type="text" style="background:black; height:30px; width:90%; margin:20px 0 0 20px; border:0; border-radius:10px;"></li>
</ul>
</nav>
</header>
<div class="slider">
<img src="industrial.jpg" />
<div class="text">WE ARE PROFESSIONAL,<p><span style="font-weight:lighter; line-height:100%; color: yellow ;">COMPETITIVE AND COMPETENT</span></p></P></div>
</div>
<div id="project">
<div class="head">
<h3>FEATURED PROJECTS</h3>
</div>
<div class="imgContainer">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="5.jpg"/>
<!--<img src="6.jpg"/>-->
</div>
</div>
</div>
</body>
</html>
Use :first-child selector for this:
.imgContainer img:first-child{
margin-left:10px;
}
You can easily achieve this using this css
.imageContainer img:first-child
{
margin-left:20px;
}
You can select the first child with any of the given selectors below:
.imgContainer img:first-of-type
.imgContainer img:first-child
.imgContainer img:nth-child(1)
If you want to set some sort of overflow to your images, you'll need to wrap them in another element, like a generic div and set your overflow rules to this element, standard overflow rules won't apply directly to img elements.
See CSS Tricks - overflow
First of all im a bit confused but i will do my best to explain my problem and what i want.
I have a div and inside that div i have another div, i want that div to move to left and right, nothing more, it has to follow the same path as the image when resizing (see my project).
How do i make that div that is behind the white circle always do the same path as the circle ?
body {
margin: 0;
width:100%;
}
body > div {
height: 200px;
}
.header {
background-color: transperent;
height: 100px;
color: white;
}
.product {
margin-top:0px;
height: 600px;
background-color: blue;
color: white;
float:left;
width:50%;
margin:0;
padding:0;
display: inline-block;
}
.product2 {
height: 600px;
margin-top:0px;
background-color: red;
color: white;
width:50%;
float:left;
margin:0;
padding:0;
position: relative;
display: inline-block;
}
.product2 img{
position: absolute;
right: 0;
bottom: 0;
}
.main{
background-image: url("http://i.imgur.com/Y5hHusa.png");
height:650px;
}
#crew {
height:50px;
clear:both;
background-color: tomato;
color: darkgrey;
}
.stick {
position: fixed;
top: 0;
}
.tour {
background-color: black;
color: darkgrey;
}
.pricing {
background-color: gold;
color: black;
}
.contact {
background-color: black;
color: white;
}
.menu {
float: right;
font-size: 18px;
list-style: outside none none;
margin-top: -5px;
margin-right: 50px;
}
.menu li a {
color: blue;
display: block;
text-decoration: none;
}
.menu li {
display: inline;
float: left;
padding-right: 23px;
}
.menu li a:hover{
background-color:none;
color:red;
}
.div_form {
height:35%;
width:40%;
margin-top:36%;
margin-left:41%;
background-color:blue;
}
.product2 .div_form{
}
.product2 .div_form .form_title{
position:absolute;
z-index:1;
margin-top:270px;
margin-left:1em;
font-size:3em
}
.product2 .div_form .form_circulo{
z-index:1
}
.product2 .div_form .div_email .input_first_email{
margin-top: -70%;
margin-left:50%;
height:3em;
border-radius:5px;
padding:1em;
width:45%;
}
.product2 .div_form .divbtnsubmit{
background-color:red;
margin-left:60%;
width:20em;
height:3em;
border-radius:1em;
text-align:center;
margin-top:1em;
width:45%
}
.product2 .div_form .divbtnsubmit .btnsumnitform
{
font-size:2em;
color:white;
position:absolute;
padding:.3em;
margin-left:-3.5em
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet" type="text/css" >
<title> Layout </title>
</head>
<body>
<div class="main">
<div class="header">
<img src="http://i.imgur.com/48nYArD.png">
<ul class="menu">
<li>Home </li>
<li>Product Tour </li>
<li>Pricing </li>
<li>Try </li>
<li>Vision</li>
</ul>
</div>
<div class="product">
</div>
<div class="product2">
<img src="http://i.imgur.com/3UTs03w.png">
<div class="div_form">
</div>
</div>
</div>
</div>
<div id="crew">
</div>
<div class="tour">
</div>
<div class="pricing">
</div>
<div class="contact">
</body>
</html>
PS: Sorry for argumentation, my english isnt the best, hope you can understand.
Regards,
Duarte Andrade.
The problem is you're trying to position the div_form div vertically by giving it a margin-top of 36%. But a margin with a value in % is always relative to the width of the container, not the height. See the W3C.
The simplest solution is, because you know the height of the container (product2) is 600px, is to set the margin to 36% of 600px, or 216px.
body {
margin: 0;
}
.product {
height: 600px;
background-color: blue;
color: white;
float: left;
width: 50%;
margin: 0;
padding: 0;
display: inline-block;
}
.product2 {
height: 600px;
background-color: red;
color: white;
width: 50%;
float: left;
margin: 0;
padding: 0;
position: relative;
display: inline-block;
}
.product2 img {
position: absolute;
right: 0;
bottom: 0;
}
.div_form {
height: 35%;
width: 40%;
margin-top: 216px; /* This is what I changed */
margin-left: 41%;
background-color: blue;
}
<div class="main">
<div class="header">
<div class="product">
</div>
<div class="product2">
<img src="http://i.imgur.com/3UTs03w.png">
<div class="div_form">
</div>
</div>
</div>
</div>
Or if you really need a percentage of the parent's height, you would remove the margins and give the div position:absolute in the same way as the img. Then you can use left:41%; top:36%; but you will also need to experiment with the z-indexes a bit to get their stacking order right again.
I've begun making a basic porfolio page and I'm starting with a simple header that I want at the top center of the white space of the page, and it seems to be hidden or just not there at all. Can anybody see what I'm doing wrong? Link to site: http://me14ch.leedsnewmedia.net/portfolio/portfolio.html
Here is the HTML bit i'm focusing on:
<div class="header"><h1>Portfolio</h1></div>
and the entire CSS for the whole site is:
* {
margin:0;
border:0;
padding:0;
}
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.navigation li {
display: inline;
}
a {
color: grey;
text-decoration: inherit;
}
a:hover{
color: black;
}
.current {
font-weight:normal;
margin-bottom:5px;
border-bottom: 2px solid;
display: table;
}
.wrapper {
margin-left: 0 auto;
margin-right:0 auto;
margin-top: 15%;
margin-bottom: 10%;
text-align:center;
}
h1 {
font-family:"Kaushan Script";
font-size: 4em;
color:#FADBC8 ;
}
h2 {
font-size: 1em;
text-transform:uppercase;
text-decoration: none;
letter-spacing: 0.2em;
text-decoration: none;
font-family: "Poiret One";
}
#header {
text-align:center;
width: 80%;
float: left;
background-color: black;
}
.photo img {
width: 12%;
height: 12%;
border-radius:50%;
border: 3px solid #FADBC8;
margin-top:30px;
}
#sidebar {
float: left;
margin-right: 5px;
font-family: "Poiret One";
text-transform: uppercase;
letter-spacing: 0.25em;
height: 100%;
width: 20%;
text-align: left;
position: fixed;
background: #F9DBC8;
}
#sidebar li {
list-style-type: none;
color: white;
margin-top: 10%;
margin-bottom: 10%;
margin-left: 10px;
padding: 0;
}
/* drop down menu */
#sidebar ul {
list-style-type:none;
position: relative;
width: 50%;
z-index: 2;
margin-top: 70%;
}
#sidebar ul li ul {
margin: 0;
}
#sidebar ul ul {
display: none;
}
#sidebar ul li:hover > ul {
display: block;
}
.social-sidebar-buttons {
float: right;
width: 3%;
margin-top: 31%;
margin-right: 2%;
}
in your css you have 'header' as id and not a class, use the dot notation for a class
.header {
text-align:center;
width: 80%;
float: left;
background-color: black;
}
adding margin:auto; will center the div in the middle. It automatically gives even spacing either side.
Well.. your defining a class but styling a id selector.
1.) remove the below.
#header { ... }
2.) replace with.
.header { ... }
3.) You need to define a height, you can keep your existing style you had associated with misplaced #header but a few additional suggestions below:
.header {
height: 100px; // define height
margin: 0 auto; // center if you want
}
You have multiple closed head tags and you haven't defined a class for your header.
<!doctype html>
<html>
<head>
<style>
.header {
text-align:center;
width: 80%;
float: left;
background-color: black;
}
</style>
<meta charset="UTF-8">
<title>Chloe Hammond - Digital Portfolio</title>
<link href="stylesheet2.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Bad+Script|Kaushan+Script|Poiret+One' rel='stylesheet' type='text/css'>
<!--METADATA-->
<meta name="description" content="A digital portfolio page showcasing Chloe Hammond's most recent projects from her New Media degree course at the University of Leeds. "/>
<meta name="keywords" content="chloe, hammond, portfolio, digital, new, media, experience, contact, work, university, student, leeds, intern, internship, freelance"/>
</head>
<body>
<div id="sidebar">
<h2><ul>
<li>Home</li>
<li class="current">Portfolio
<ul>
<li>Design</li>
<li><a href="photo.html">Photo</li>
<li><a href="motion.html">Motion</li>
<li><a href="web.html">Web</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul></h2>
</div>
<div class="header"><h1>Portfolio</h1></div>
<div class="social-sidebar-buttons">
<img src="facebook2.png" target="_blank" alt="Connect with Chloe on Facebook"/>
<img src="twitter2.png" target="_blank" alt="Connect with Chloe on Twitter" />
<img src="instagram2.png" target="_blank" alt="View Chloe's Instagram feed" />
<img src="mailto2.png" target="_blank" alt="Email Chloe" />
</div>
</div>
</body>
</html>
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