Hello i have a next problem, i wan't my page to stretch in height if content will be more than window height, otherwise just be fullscreen. But now it looks like this:
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="width=1100" name="viewport">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<script src="js/jquery-1.11.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script>
var previousPage;
$(document).ready( function() {
SwitchPage("home");
FixNavigation();
$("#home").on("click", function() {
SwitchPage("home")
});
$("#info").on("click", function() {
SwitchPage("info")
});
$("#prices").on("click", function() {
SwitchPage("prices")
});
$("#schedule").on("click", function() {
SwitchPage("schedule")
});
$("#kontacts").on("click", function() {
SwitchPage("kontacts")
});
$("#education").on("click", function() {
SwitchPage("education")
});
});
function SwitchPage(name) {
if (previousPage!=name)
{
$('#'+name).addClass('active');
if(previousPage!=null){
$('#'+previousPage).removeClass('active');
}
previousPage=name;
$("#content-inner").load("pages/"+name+".html");
}
}
function FixNavigation() {
}
</script>
</head>
<body>
<div>
<div class="header">
<div class="header-inner">
</div>
</div>
<div class="tabs">
<div class="tabs-inner">
<ul>
<li><a id="home">Sākums</a></li>
<li><a id="info">Informācija</a></li>
<li><a id="prices">Pakalpojumi un cenas</a></li>
<li><a id="schedule">Darba laiks</a></li>
<li><a id="kontacts">Kontakti</a></li>
<li><a id="education">Izglītība</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="content-inner" id="content-inner">
</div>
</div>
<div class="footer">
<div class="footer-inner">
</div>
</div>
</div>
</body>
And here is my CSS:
body{
min-width: 960px;
min-height: 100%;
margin: 0;
padding: 0 0 1px;
position: relative;
display: block;
background: #ff8b10 url(images/main_background.jpg) no-repeat;
font: normal normal 18px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
color: #000000;
}
.header{
margin-top: 30px;
height: 300px;
}
.header-inner{
height: 300px;
width: 960px;
margin: 0 auto;
}
.tabs{
margin-top: 30px;
}
.tabs-inner{
width: 900px;
margin: 0 auto;
}
ul {
width: 100%;
background: transparent none no-repeat scroll left;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
line-height: 1.2;
display: table;
table-layout: fixed;
}
li{
border: none;
margin: 0;
padding: 0;
float: left;
text-indent: 0;
display: table-cell;
width: auto;
text-align: center;
}
a{
background-image: url('images/pixel.png');
display: inline-block;
padding: .25em 1em;
font: normal normal 20px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
border-right: 1px solid transparent;
color: #000000;
text-decoration: none;
}
a:hover {
background-color: #ffb267;
color: #660000;
cursor: pointer;
}
.active{
background-color: #ffd7ae;
color: #660000;
}
.content{
margin-top: 30px;
}
.content-inner{
width: 880px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.footer{
margin-top: 30px;
color: #ff8b10;
height: 100px;
background: #000000 url(images/footer.png) repeat scroll top left;
}
.footer-inner{
}
.home_content{
background: transparent url(images/content.png) repeat scroll top left;
}
You need height: 100% both on html and body.
Here's a similar question: Make full page white.
Related
I'm making a website for school, but i have a problem with my css code. I want to place the section1 and the section2 underneath the header so that it looks like that :
WANTED
The problem is that it looks like that (the problem is this enormous gap on the left) :
REALITY
I know that the problem comes from the float on the header and nav bar but i don't know how to keep the header look and having the two boxes ("section1" and "section2", grouped as "content").
The CSS code :
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
color: black;
background-color: white;
font-size: 16px;
text-align:justify;
text-justify:inter-word;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.header_nav {
width: 65%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo {
height: 100%;
display: table;
float: left;
}
.logo h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Trebuchet MS";
font-size: 32px;
font-weight: 600;
}
.nav {
float: right;
height: 50%;
line-height: 70px;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
line-height: normal
}
.nav-option {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Trebuchet MS";
font-size: 20px;
font-weight: 50;
}
.nav-option:hover {
text-decoration: underline;
}
.content {
overflow: hidden;
}
.section1 {
background-color: red;
width: 40%;
height: 300px;
margin: 1%;
float: left;
border: inset #101010 6px ;
}
.section2 {
background-color: blue;
width: 40%;
height: 300px;
float: right;
margin: 1%;
border-left: solid #101010 10px;
}
.section2:hover {
transform: scale(1.05);
}
The HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Histoire de l'Informatique</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="header_nav">
<div class="logo">
<img src="logo.png">
<h1> HISTOIRE DE L'INFORMATIQUE </h1>
</div>
<div class="nav">
<nav>
<ul>
<li>Données</li>
<li>Algorithmes</li>
<li>Langages</li>
<li>Machines</li>
</ul>
</nav>
</div>
</div>
</<div>
<div class= "content">
<section class="section1">
<h1>Données</h1>
<article>
</article>
</section>
<section class="section2">
<h1>Algorithmes</h1>
<article>
</article>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
Thanks for your help !
Your example seems to work for me provided .container has a width: 100% on it.
But for what you want exactly, I would use the following:
.container {
display: flex;
align-items: center;
justify-content: space-evenly; // google all the different options for this
}
// Get rid of the `float` properties on the sections, you won't need them
Below, is your original code in a snippet, and with that width property it's working for me.
But I highly recommend switching to flex box over floats, as it will give you way more control and better results.
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
color: black;
background-color: white;
font-size: 16px;
text-align:justify;
text-justify:inter-word;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.header_nav {
width: 65%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo {
height: 100%;
display: table;
float: left;
}
.logo h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Trebuchet MS";
font-size: 32px;
font-weight: 600;
}
.nav {
float: right;
height: 50%;
line-height: 70px;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
line-height: normal
}
.nav-option {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Trebuchet MS";
font-size: 20px;
font-weight: 50;
}
.nav-option:hover {
text-decoration: underline;
}
.content {
width: 100%;
overflow: hidden;
}
.section1 {
background-color: red;
width: 40%;
height: 300px;
margin: 1%;
float: left;
border: inset #101010 6px ;
}
.section2 {
background-color: blue;
width: 40%;
height: 300px;
float: right;
margin: 1%;
border-left: solid #101010 10px;
}
.section2:hover {
transform: scale(1.05);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Histoire de l'Informatique</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="header_nav">
<div class="logo">
<img src="logo.png">
<h1> HISTOIRE DE L'INFORMATIQUE </h1>
</div>
<div class="nav">
<nav>
<ul>
<li>Données</li>
<li>Algorithmes</li>
<li>Langages</li>
<li>Machines</li>
</ul>
</nav>
</div>
</div>
</div>
<div class= "content">
<section class="section1">
<h1>Données</h1>
<article>
</article>
</section>
<section class="section2">
<h1>Algorithmes</h1>
<article>
</article>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
So i made a Watchlist which is actually just a picture gallery and a menu right now. but on the second, the bigger screen the pictures are overlaying my menu.
https://imgur.com/a/FUycbCo
well i think that its because i used px instead of % or smth like that so i tried changing it but the problem is finding out where. some of the tags dont even work with % for some reason. also im not even sure that thats the problem. thats just a guess from me.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>HTML</title>
</head>
<body>
<div class="menu">
<button class="untermenu">TV</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
<button class="untermenu">Anime</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/A121lm-WoYL._AC_UY218_.jpg" alt="Shadowhunters">
<div class="desc"><p>Staffel 2/3<br>Folge 20/20<br>am schauen</p></div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/81b+18Wg5dL._AC_UY218_.jpg" alt="Brooklyn Nine Nine">
<div class="desc"><p>Staffel 5/6<br>Folge 22/22<br>am schauen</p></div>
<script>
var untermenu = document.getElementsByClassName("untermenu");
var i;
for (i = 0; i < untermenu.length; i++)
{
untermenu[i].addEventListener("click", function()
{
this.classList.toggle("active");
var untermenuContent = this.nextElementSibling;
if (untermenuContent.style.display === "block")
{
untermenuContent.style.display = "none";
}
else
{
untermenuContent.style.display = "block";
}
});
}
</script>
</body>
</html>
CSS:
body
{
background-color: #e2e2e0;
}
h1
{
font-family: Arial, "Times new roman";
position: relative;
left: 170px;
}
.menu
{
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 50px;
}
.menu a, .untermenu
{
padding: 8px 15px 10px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
cursor: pointer;
}
div.gallery
{
position: relative;
left: 9%;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 230px;
}
div.gallery:hover
{
border: 1px solid #777;
}
div.gallery img
{
width: 100%;
height: 10em;
}
div.desc
{
padding: 15px;
text-align: center;
background-color: white;
}
p
{
padding: 0;
margin: 0;
line-height: 1.5;
}
.menu a:hover, .untermenu:hover
{
color: #f1f1f1;
}
.untermenu-links
{
display: none;
background-color: #262626;
}
.active
{
background-color: #093802;
color: white;
}
#kleiner
{
font-size: 15px;
}
i expect it to look nice
it doesnt look nice.
I would suggest you to post the whole HTML and CSS somewhere here or maybe on share a codepen, so that we can debug your code.
Also, I would suggest you to use grid and flex for making layouts for your website. For example I can see that your design structure can we implemented using basic grid and flex . The implementation in your case would be basic and it would be a good start for you. Consider learning them.
I have made changes in your code, added flex and grid. I have also implimented a responsiveness code, so that if the screen size reduces things still look good.
https://codepen.io/bhanusinghR/pen/LYPbazK?editors=1100
Code used:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>HTML</title>
</head>
<body>
<div class="body-wrapper">
<div class="menu">
<button class="untermenu">TV</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
<button class="untermenu">Anime</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
</div>
<div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/A121lm-WoYL._AC_UY218_.jpg" alt="Shadowhunters">
<div class="desc"><p>Staffel 2/3<br>Folge 20/20<br>am schauen</p></div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/81b+18Wg5dL._AC_UY218_.jpg" alt="Brooklyn Nine Nine">
<div class="desc"><p>Staffel 5/6<br>Folge 22/22<br>am schauen</p></div>
</div>
</div>
CSS
body
{
background-color: #e2e2e0;
padding:0px;
margin:0px;
}
.body-wrapper{
display: grid;
grid-template-columns: 18% auto;
grid-template-rows:auto;
}
h1
{
font-family: Arial, "Times new roman";
position: relative;
left: 170px;
}
.menu
{
min-width: 100%;
top: 0;
left: 0;
background-color: #111;
padding-top: 50px;
height: 100vh;
}
.menu a, .untermenu
{
padding: 8px 15px 10px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
cursor: pointer;
}
div.gallery
{
position: relative;
left: 9%;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 230px;
}
div.gallery:hover
{
border: 1px solid #777;
}
div.gallery img
{
width: 100%;
height: 10em;
}
div.desc
{
padding: 15px;
text-align: center;
background-color: white;
}
p
{
padding: 0;
margin: 0;
line-height: 1.5;
}
.menu a:hover, .untermenu:hover
{
color: #f1f1f1;
}
.untermenu-links
{
display: none;
background-color: #262626;
}
.active
{
background-color: #093802;
color: white;
}
#kleiner
{
font-size: 15px;
}
#media only screen and (max-width: 600px) {
.body-wrapper {
display: flex;
flex-direction: column;
}
.menu {
height:100%;
padding-top: 0px;
display: flex;
}
}
I have created your layout using basic simple use of grid and flex.
I have a project for a photography site. I am fairly new so still struggling with some of the basics. My project will have a header, a main div where the photos will be displayed and a footer. I want my main div to fill as much space as possible with the footer right at the bottom (as you'd expect). But this is what I am getting:
I have provisionally set the background-color of the header and footer to yellow, the color of the main div to red and the body is set to green. This is to better solve the issue. What I want is no green and the footer to be right at the bottom, with the rest being red, no matter the size of the window.
Here is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="JavaScript2b.js"></script>
<script type="text/javascript" src="JavaScript2.js"></script>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
</head>
<body>
<div id="header">
</div>
<div id="wrap">
<div id="container">
<div id="controllers">
<div id="previous" class="buttons">
<p id="try" onclick="change(-1);">PREVIOUS</p>
</div>
<div id="next" class="buttons">
<p id="try2" onclick="change(1);">NEXT</p>
</div>
</div>
<div id="imagewrap">
<img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
</div>
<div>
<p id="tag">Text</p>
</div>
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="JavaScript2.js"></script>
</body>
</html>
css
#font-face {font-family: Eagle-Light;
src: url("Eagle-Light.otf") format("opentype");
}
#font-face {font-family: Raleway Light;
src: url("Raleway Light.otf") format("opentype");
}
body {
/* height: 100%;*/
background-color: green;
}
#header {
height: 100px;
width: 100%;
background-color: yellow;
}
#footer {
height: 100px;
width: 100%;
background-color: yellow;
}
p {
color: #818181;
font-family: Eagle-Light;
line-height: 1.7em;
padding: 0px;
margin: 0px;
font-size: 0.5em;
letter-spacing: 0.21em;
}
a:link {
text-decoration: none;
color: inherit;
}
a:visited {
text-decoration: none;
color: inherit;
}
div {
margin: 0px;
padding: 0px;
}
#wrap {
clear: both;
padding: 0px;
width: 100%;
background-color: red;
}
body {
margin: 0px;
padding: 0px;
}
#container {
min-width: auto;
position: relative;
/* height: 77%;*/
width: 550px;
margin: 0 auto;
/* margin-top:7%;*/
}
#controllers {
position: static;
height: 20px;
}
#previous {
position: absolute;
left: 0px;
}
#next {
position: absolute;
right: 0px;
}
#tag {
position: static;
height: 20px;
line-height: 1.7em;
padding-top: 5px;
}
.buttons {
cursor: pointer;
}
#imagewrap{
border: 1px solid #818181;
overflow: hidden;
z-index: 2;
background-color: red;
}
#front {
display: block;
}
Thank you,
David
The problem is that your main div takes up very little space and therefore the body extends to cover the screen. In this case you could fix the footer always in the lowest position
#font-face {font-family: Eagle-Light;
src: url("Eagle-Light.otf") format("opentype");
}
#font-face {font-family: Raleway Light;
src: url("Raleway Light.otf") format("opentype");
}
body {
/* height: 100%;*/
background-color: green;
}
#header {
height: 100px;
width: 100%;
background-color: yellow;
}
#footer {
position: absolute;
height: 100px;
width: 100%;
background-color: yellow;
display: block;
bottom: 0;
}
p {
color: #818181;
font-family: Eagle-Light;
line-height: 1.7em;
padding: 0px;
margin: 0px;
font-size: 0.5em;
letter-spacing: 0.21em;
}
a:link {
text-decoration: none;
color: inherit;
}
a:visited {
text-decoration: none;
color: inherit;
}
div {
margin: 0px;
padding: 0px;
}
#wrap {
clear: both;
padding: 0px;
width: 100%;
background-color: red;
}
body {
margin: 0px;
padding: 0px;
}
#container {
min-width: auto;
position: relative;
/* height: 77%;*/
width: 550px;
margin: 0 auto;
/* margin-top:7%;*/
}
#controllers {
position: static;
height: 20px;
}
#previous {
position: absolute;
left: 0px;
}
#next {
position: absolute;
right: 0px;
}
#tag {
position: static;
height: 20px;
line-height: 1.7em;
padding-top: 5px;
}
.buttons {
cursor: pointer;
}
#imagewrap{
border: 1px solid #818181;
overflow: hidden;
z-index: 2;
background-color: red;
}
#front {
display: block;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<div id="header">
</div>
<div id="wrap">
<div id="container">
<div id="controllers">
<div id="previous" class="buttons">
<p id="try" onclick="change(-1);">PREVIOUS</p>
</div>
<div id="next" class="buttons">
<p id="try2" onclick="change(1);">NEXT</p>
</div>
</div>
<div id="imagewrap">
<img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
</div>
<div>
<p id="tag">Text</p>
</div>
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="JavaScript2.js"></script>
</body>
</html>
#wrap {
min-height: calc(100vh-200px);
}
This will set the wrap to be the screen height minus the height of the header and footer.
The 200px value can just be changed to be the combined height of the header and footer.
I see this question a lot but I can't find the answer with either padding or margin. For some reason I can't center the ul element correctly inside the div and the div needs to be this way.
Can someone explain what I am doing wrong and how to solve it?
https://jsfiddle.net/norbertoalexander/4ea23bbn/2/
/* FUENTES
font-family: 'Lobster', cursive;
font-family: 'Playfair Display', serif;
*/
/*
Fondo = #FEFFA0
Borde = #ACDB86
Fondo Texto = #EEEEEE
Hoover = #547C66
Letras = #3B5B5D
*/
html, body {
height: 100%;
margin: 0;
background-color: #FEFFA0;
}
div.head {
height: 70px;
background-color: #ACDB86;
margin: 0 auto;
}
h1 {
font-family: 'Lobster', cursive;
font-size: 45px;
text-align: center;
}
div.menu {
border-style: solid;
border-color: blue;
margin: 5px;
float: left;
width: 150px;
height: 500px;
list-style: none;
text-align: center;
}
ul {
margin: 0 auto;
list-style: none;
text-align: center;
font-size: 20px;
}
li {
margin: 0 auto;
text-align: center;
}
h2 {
text-align: center;
font-size: 25px;
font-family: 'Lobster', cursive;
}
div.fuent {
border-style: solid;
border-color: blue;
margin: 5px;
float: right;
width: 150px;
height: 500px;
}
div.leng {
border-style: solid;
border-color: yellow;
margin: 5px;
width: 72%;
float: left;
}
div.resu {
border-style: solid;
border-color: blue;
margin: 5px;
width: 72%;
float: left;
}
<!DOCTYPE HTML">
<html>
<head>
<title>Lenguajes</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Lobster|Playfair+Display" rel="stylesheet">
<link href="styles/leng.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--titulo-->
<div class="head">
<h1>Lenguajes</h1>
</div>
<div class="menu">
<ul>
<li><h2>Menu</h2></li>
<li>Incio</li>
<li>Algoritmos</li>
<li>Lenguajes</li>
<li>Problemas</li>
<li>Sobre mi</li>
</ul>
</div>
<div class="fuent">
Fuentes
</div>
<div class="resu">
Resumen
</div>
<div class="leng">
Lenguaje
</div>
</body>
</html>
There's a padding on the <ul>, remove it and the menu is centered:
ul {
padding: 0;
}
my website is essentially styled to be a full screen site, taking up any available space it can to show the website. As a result, the contents of the page has to automatically adjust to the screen size it's displaying on.
For some elements I have used float so that paragraphs can appear side-by-side to each other, and as a result I had to float the footer so that if the height of the content area increases the footer will move down to accommodate for the extra space the main text needs to take up.
Without float, the footer will not move down and the main content will overflow on to it should someone have a narrow screen.
Because of this, the main content area and the footer trails off the side of the screen on an iPad. I know this is an issue with the float because the header doesn't do it; only the content area and the footer.
I would like to fix this but not sure what to do.
The website is http://neerajmorar.co.uk
It works perfectly on PC, Linux and I assume the Mac since it works fine on Safari, but not on the iPad.
HTML code for index page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Neeraj Morar | Home</title>
<meta charset="UTF-8">
<meta name="description" content="This is the personal website of Neeraj Morar.">
<meta name="keywords" content="Neeraj, Morar, neerajmorar, neerajmorar.co.uk, personal, website, portfolio, home, computing, information, systems, university, of, west, london, sql, server, web, design">
<meta name="google-site-verification" content="k3NDZl5POUlqaDoEEOTdrX50XrOcQ9nmQr9IFJK1NlU" />
<meta name="msvalidate.01" content="6F4E786D9BE746A1AC789E62D2C0F961" />
<link type="text/css" rel="stylesheet" href="StyleSheet1.css">
<link type="text/css" rel="stylesheet" href="mobile.css" media="only screen and (max-device-width: 480px)">
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script>(function (a, b) { if (/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) window.location = b })(navigator.userAgent || navigator.vendor || window.opera, 'http://m.neerajmorar.co.uk');</script>
<script type="text/javascript">
$(document).ready(function () {
$(".content").css("display", "none");
$(".content").fadeIn(5000);
if ($(".header a").click(function (event) {
event.preventDefault();
linkLocation = this.href;
$(".content").fadeOut(1000, redirectPage);
}));
else if ($(".transition").click(function (event) {
event.preventDefault();
linkLocation = this.href;
$(".content").fadeOut(1000, redirectPage);
}));
function redirectPage() {
window.location = linkLocation;
}
});
</script>
</head>
<body>
<div class="header">
<ul class="index">
<li>NeerajMorar.co.uk</li>
</ul>
<ul class="nav">
<li class="links">Home</li>
<li class="links">About Me</li>
<li class="links">Computing Skills</li>
<li class="links">Web Design</li>
<li>Contact</li>
</ul>
</div>
<div class="box">
<div class="content">
<div class="hello">
<h2>Hello, I'm Neeraj</h2>
<p>Business Systems Apprentice at Stanmore College, Student at University of West London, and TIME's Person of the Year 2006. (No, seriously, it's true!)</p>
</div>
<div class="taken">
<h2>I have a very particular set of skills...</h2>
<p>Oh, boy, do I! Pianist at heart (or a pedantic Organist, depending on how you look at it), a Black Belt in Tae Kwon Do, and a true nerd - not a skill, but I thought it would be nice to throw it in there!</p>
</div>
<div class="site">
<h2>This site?</h2>
<p>This website has been designed to give you an overview of who I am and what I do; it's a chance for you to be seduced by me! Please feel free to look around, and don't hesitate to contact me.</p>
</div>
</div>
</div>
<div class="footer">
<div class="info">
<a href="http://www.w3.org/html/logo/">
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3.png" width="133" height="64" alt="HTML5 Powered with CSS3 / Styling" title="HTML5 Powered with CSS3 / Styling">
</a>
<small>© Copyright 2013 by Neeraj Morar. All Rights Reserved.</small>
</div>
</div>
</body>
</html>
CSS code:
#font-face
{
font-family: "Skolar OT";
src: url("fonts/SKOLAR-REGULAR-PVT.OTF");
}
html
{
overflow-y: scroll;
overflow-x: hidden;
}
body
{
font-family: "Skolar OT", Calibri, Arial, sans-serif;
margin-top: -18px;
margin-left: auto;
margin-right: auto;
text-align: justify;
font-size: larger;
background-color: #e6e6e6;
}
.header
{
height: 224px;
background-color: #ab0000;
box-shadow: 0px 4px 5px #696969;
}
.index
{
display: block;
position: relative;
top: 44%;
width: 505px;
margin-left: auto;
margin-right: auto;
}
.index li
{
display: inline;
font-size: 300%;
}
.nav
{
position: relative;
top: -83px;
margin-left: auto;
margin-right: auto;
width: 670px;
background-color: #780000;
padding: 10px;
border-radius: 0px 0px 3px 3px;
}
.nav li
{
display: inline;
font-size: x-large;
padding-left: 10px;
}
.links
{
border-style: none solid none none;
border-width: 2px;
padding-right: 10px;
}
.header a
{
color: #fff;
transition: 0.7s;
}
.header a:hover
{
color: #d2d2d2;
}
.box
{
margin-top: 10px;
min-height: 560px;
border-style: none;
margin-left: auto;
margin-right: auto;
background-color: #e6e6e6;
padding: 25px;
}
.content
{
max-width: 1500px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
}
.footer
{
float: left;
width: 97.45%;
background-color: #780000;
height: 83px;
padding: 25px;
}
.footer small
{
position: relative;
display: block;
top: 10px;
color: #e6e6e6;
}
.hello
{
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.taken
{
max-width: 600px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
.site
{
max-width: 600px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
}
.about
{
width: 47.5%;
float: left;
margin-right: 5%;
}
.job
{
width: 47.5%;
float: left;
}
.ambition
{
width: 47.5%;
float: left;
margin-right: 5%;
}
.other
{
width: 47.5%;
float: left;
}
.compute
{
max-width: 600px;
font-size: larger;
margin-left: auto;
margin-right: auto;
}
.web
{
width: 40%;
float: left;
margin-left: 8%;
margin-right: 5%;
}
.software
{
width: 40%;
float: left;
}
.web2
{
max-width: 700px;
font-size: x-large;
margin-left: auto;
margin-right: auto;
}
.contact
{
margin-left: 22%;
margin-right: 22%;
}
#smooth
{
width: 100%;
float: left;
}
a
{
text-decoration: none;
color: black;
}
fieldset
{
border-style: none;
border-color: black;
border-width: 1px;
}
textarea
{
font-family: Arial, sans-serif;
background-color: #fff;
background-color: rgba(203, 203, 203, 0.5);
border-color: black;
border-width: 1px;
}
input[type="text"]
{
font-family: Arial, sans-serif;
background-color: #fff;
background-color: rgba(203, 203, 203, 0.5);
border-color: black;
border-width: 1px;
}
input[type="email"]
{
font-family: Arial, sans-serif;
background-color: #fff;
background-color: rgba(203, 203, 203, 0.5);
border-color: black;
border-width: 1px;
}
li a.transition
{
font-weight: bold;
transition: 0.5s;
}
li a.transition:hover
{
opacity: 0.5;
}
li a.transition:active
{
color: #000;
}
.content p a.transition
{
font-weight: bold;
transition: 0.5s;
}
.content p a.transition:hover
{
opacity: 0.5;
}
.content p a.transition:active
{
opacity: 0.5;
}
.a1
{
font-weight: bold;
transition: 0.5s;
}
.a1:hover
{
opacity: 0.5;
}
#a1
{
font-weight: bold;
transition: 0.5s;
}
#a1:hover
{
opacity: 0.5;
}
You can just view the source code of my website and the style sheet from there...
Try using clear:both before footer and use overflow:hidden in your content area. That way you can get rid of the floats.