im doing a website for videogames news and updates.I have to add a translation option, so i decided to add google translate button, but it disables the links in the menu on the right side.Please help!
HTML:
<!DOCTYPE html>
<head>
<title> GameDog | Video games info </title>
<meta charset = "UTF-8">
<link rel="stylesheet" type = "text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<section class="page">
<nav>
<div class="logo">
<img src = "gamedoglogo.png">
<p> <b> GameDog </b> </p>
</div>
<div>
<ul>
<li>
<div class="toggle"></div>
</li>
<li id="aboutme">About me</li>
<li id="news">
News about ↓
<ul>
<li> Fortnite</li>
<li> Rocket League</li>
<li> League of Legends</li>
<li> CS:GO</li>
</ul>
</li>
<li id="main">Home</li>
</ul>
</div>
</nav>
<h1 class="topic"> Home Page </h1>
<div class = "card-info">
<h3> Hey Gamers, </h3>
<br>
<h4> welcome to the site. Here you can find the latest news about your favourite games. We provide information about the current updates, changes and improvements. Here, in the site, you can also find the patch notes for the last update of your favourite games. Explore by clicking the button below or the News section above.</h4>
</div>
<div class = "button">
Explore
</div>
<div class="social">
<ul>
<li> <img src="facebook%20white.png", id="facebook-main"></li>
<li> <img src="Black-icon-Instagram-logo-transparent-PNG.png", id="instagram-main"></li>
<li> <img src="Black-icon-Twitter-logo-transparent-PNG.png", id="twitter-main"></li>
</ul>
</div>
<div class="translate-1">
<div id="google_translate_element"></div>
<span>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', includedLanguages: 'de,it,fr,ru,tr,bg', autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</span>
</div>
</section>
<div class="menu">
<ul>
<li> Home </li>
<li> News </li>
<li> About me </li>
</ul>
<div class="social-menu">
<ul>
<li> <img src="toppng.com-facebook-black-white-icon-facebook-face-book-png-facebook-icon-for-footer-473x473.png", id="facebook-menu"></li>
<li> <img src="Black-icon-Instagram-logo-transparent-PNG.png", id = "instagram-menu"></li>
<li> <img src="Black-icon-Twitter-logo-transparent-PNG.png", id="twitter-menu"></li>
</ul>
</div>
</div>
<script>
const menuToggle = document.querySelector('.toggle')
const page = document.querySelector('.page')
menuToggle.addEventListener('click', function() {
menuToggle.classList.toggle('active')
page.classList.toggle('active')
})
</script>
<script>
window.addEventListener("scroll", function(){
var navbar = document.querySelector("nav");
var menu = document.querySelector(".menu");
navbar.classList.toggle("sticky", window.scrollY > 0);
menu.classList.toggle("sticky", window.scrollY > 0);
})
</script>
</body>
CSS:
.menu{
position:absolute;
background-color:#ffd700;
top:0;
right:0;
width:15.62vw;
min-height:100vh;
display:flex;
justify-content: center;
align-items:center;
z-index:-5;
}
.menu.sticky{
position:fixed;
}
.menu ul{
position:relative;
list-style:none;
}
.menu ul li{
padding:1.04vh 1.04vw;
}
.menu ul li a{
text-decoration: none;
color:black;
font-size:4.5ch;
}
.menu ul li a:hover{
color:dimgray;
}
.translate-1{
position:absolute;
left:3vw;
top:16vh;
display:flex;
justify-content: center;
align-items:center;
}
.translate-2{
position:absolute;
left:3vw;
top:76vh;
display:flex;
justify-content: center;
align-items:center;
}
Here are some photos:
this is the page with the translate button
this is the menu on the right, when opened
The links in the menu, should become gray when u hover on them, but due to the google translate button, they don't. When i remove the google translate button, it works, so the problem is there.
JS for the menu is included in the html
And also, im really sorry for my bad formatting, im new to this :(
Your menu has a negative z-index value, so it's just falling behind everything. Make it a positive value or remove it altogether and you're set. If you have a specific reason for using the z-index on the menu, then you'll need to add it to the other elements as well so they're layering correctly and the menu items are accessible.
SO's snippet doesn't seem to like the Google translate script so here's a fiddle that shows that it still works with the z-index property modified:
https://jsfiddle.net/astombaugh/hwo73b64/8/
.menu {
position: absolute;
background-color: #ffd700;
top: 0;
right: 0;
width: 15.62vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.menu.sticky {
position: fixed;
}
.menu ul {
position: relative;
list-style: none;
}
.menu ul li {
padding: 1.04vh 1.04vw;
}
.menu ul li a {
text-decoration: none;
color: black;
font-size: 4.5ch;
}
.menu ul li a:hover {
color: dimgray;
}
.translate-1 {
position: absolute;
left: 3vw;
top: 16vh;
display: flex;
justify-content: center;
align-items: center;
}
.translate-2 {
position: absolute;
left: 3vw;
top: 76vh;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<head>
<title> GameDog | Video games info </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<section class="page">
<nav>
<div class="logo">
<img src="gamedoglogo.png">
<p> <b> GameDog </b> </p>
</div>
<div>
<ul>
<li>
<div class="toggle"></div>
</li>
<li id="aboutme">About me</li>
<li id="news">
News about ↓
<ul>
<li> Fortnite</li>
<li> Rocket League</li>
<li> League of Legends</li>
<li> CS:GO</li>
</ul>
</li>
<li id="main">Home</li>
</ul>
</div>
</nav>
<h1 class="topic"> Home Page </h1>
<div class="card-info">
<h3> Hey Gamers, </h3>
<br>
<h4> welcome to the site. Here you can find the latest news about your favourite games. We provide information about the current updates, changes and improvements. Here, in the site, you can also find the patch notes for the last update of your favourite
games. Explore by clicking the button below or the News section above.</h4>
</div>
<div class="button">
Explore
</div>
<div class="social">
<ul>
<li>
<img src="facebook%20white.png" , id="facebook-main">
</li>
<li>
<img src="Black-icon-Instagram-logo-transparent-PNG.png" , id="instagram-main">
</li>
<li>
<img src="Black-icon-Twitter-logo-transparent-PNG.png" , id="twitter-main">
</li>
</ul>
</div>
<div class="translate-1">
<div id="google_translate_element"></div>
<span>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', includedLanguages: 'de,it,fr,ru,tr,bg', autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</span>
</div>
</section>
<div class="menu">
<ul>
<li> Home </li>
<li> News </li>
<li> About me </li>
</ul>
<div class="social-menu">
<ul>
<li>
<img src="toppng.com-facebook-black-white-icon-facebook-face-book-png-facebook-icon-for-footer-473x473.png" , id="facebook-menu">
</li>
<li>
<img src="Black-icon-Instagram-logo-transparent-PNG.png" , id="instagram-menu">
</li>
<li>
<img src="Black-icon-Twitter-logo-transparent-PNG.png" , id="twitter-menu">
</li>
</ul>
</div>
</div>
<script>
const menuToggle = document.querySelector('.toggle')
const page = document.querySelector('.page')
menuToggle.addEventListener('click', function() {
menuToggle.classList.toggle('active')
page.classList.toggle('active')
})
</script>
<script>
window.addEventListener("scroll", function() {
var navbar = document.querySelector("nav");
var menu = document.querySelector(".menu");
navbar.classList.toggle("sticky", window.scrollY > 0);
menu.classList.toggle("sticky", window.scrollY > 0);
})
</script>
</body>
Related
Hello I'm having trouble centering my ul list to my title and main image using css. If you run the code the ul list is a bit to the left of the centered image and title. Also if I type in text-align: center; to the ul list it looks unorganized and the bullets aren't aligned to the left. Here is the code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>McDonalds Tribute Page</title>
<link rel="stylesheet" type="text/css" href="tribute.css">
</head>
<body>
<div id="main">
<header id="title">
<h1>
McDonalds Tribute Page
</h1>
</header>
<div id="main-image">
<!-- <img src="https://i.imgur.com/2YsKZFI.png" alt="McDonalds Golden Arches" /> -->
</div>
<div id="tribute-info">
<body>
<h3 class="color-text">A timeline of all things McDonalds</h3>
<ul id=list-info>
<li>
<strong>1953</strong> - McDonalds opens first franchise in Phoenix
</li>
<li>
<strong>1954</strong> - Ray Kroc approaches McDonald Brothers about opening first franchise outside of CA and AZ
</li>
<li>
<strong>1958</strong> - McDonalds has sold 100 million burgers
</li>
<li>
<strong>1958</strong> - McDonalds spreads to the East Coast
</li>
<li>
<strong>1961</strong> - McDonald Brothers sold business rights to Ray Kroc for $2.7 million
</li>
<li>
<strong>1963</strong> - 1 Billion burgers sold
</li>
<li>
<strong>1968</strong> - The Big Mac was introduced to McDonalds
</li>
<li>
<strong>1980</strong> - Chicken McNuggets are introduced
</li>
<li>
<strong>2015</strong> - All day breakfast introduced
</li>
</ul>
</body>
</div>
<!-- <div class="img-gallery">
<section>
<img src="https://i.imgur.com/2IkFLba.jpg" alt="big mac" />
<img src="https://i.imgur.com/EZ58bYY.jpg" alt="chicken nugget" />
<img src="https://i.imgur.com/EC9zcIT.png" alt="filet o fish" />
<img src="https://i.imgur.com/17piAkN.jpg" alt="McFlurry" />
<img src="https://i.imgur.com/hUog2df.jpg" alt="burger king" />
<img src="https://i.imgur.com/WiDJfLM.jpg" alt="mcdonalds logo" />
</section>
</div> -->
<body>
</body>
</div>
</body>
</html>
and my css
#main {
display: grid;
}
#title {
text-align: center;
}
#main-image {
display: block;
margin-left: auto;
margin-right: auto;
}
#tribute-info {
margin-left: auto;
margin-right: auto;
}
I can't post images so I commented out the picture
Your UL is being centered, but you just need to give the wrapping div a width else it takes up 100%:
#main {
display: grid;
}
#title {
text-align: center;
}
#main-image {
display: block;
margin-left: auto;
margin-right: auto;
}
#tribute-info {
margin-left: auto;
margin-right: auto;
width: 300px;
}
ul {
padding: 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>McDonalds Tribute Page</title>
<link rel="stylesheet" type="text/css" href="tribute.css">
</head>
<body>
<div id="main">
<header id="title">
<h1>
McDonalds Tribute Page
</h1>
</header>
<div id="main-image">
<!-- <img src="https://i.imgur.com/2YsKZFI.png" alt="McDonalds Golden Arches" /> -->
</div>
<div id="tribute-info">
<h3 class="color-text">A timeline of all things McDonalds</h3>
<ul id=list-info>
<li>
<strong>1953</strong> - McDonalds opens first franchise in Phoenix
</li>
<li>
<strong>1954</strong> - Ray Kroc approaches McDonald Brothers about opening first franchise outside of CA and AZ
</li>
<li>
<strong>1958</strong> - McDonalds has sold 100 million burgers
</li>
<li>
<strong>1958</strong> - McDonalds spreads to the East Coast
</li>
<li>
<strong>1961</strong> - McDonald Brothers sold business rights to Ray Kroc for $2.7 million
</li>
<li>
<strong>1963</strong> - 1 Billion burgers sold
</li>
<li>
<strong>1968</strong> - The Big Mac was introduced to McDonalds
</li>
<li>
<strong>1980</strong> - Chicken McNuggets are introduced
</li>
<li>
<strong>2015</strong> - All day breakfast introduced
</li>
</ul>
</div>
<!-- <div class="img-gallery">
<section>
<img src="https://i.imgur.com/2IkFLba.jpg" alt="big mac" />
<img src="https://i.imgur.com/EZ58bYY.jpg" alt="chicken nugget" />
<img src="https://i.imgur.com/EC9zcIT.png" alt="filet o fish" />
<img src="https://i.imgur.com/17piAkN.jpg" alt="McFlurry" />
<img src="https://i.imgur.com/hUog2df.jpg" alt="burger king" />
<img src="https://i.imgur.com/WiDJfLM.jpg" alt="mcdonalds logo" />
</section>
</div> -->
<body>
</body>
</div>
</body>
</html>
I am currently learning how to code html and css and I am not trying to copy them I just want to learn how to do it like that. Yes it's a CS:GO gambling site I know. I want to learn how to add the font awesome icon and make it clickable and also how to add a padding around only that icon. The website: skinup.gg
My Test Website: https://jsfiddle.net/a2yweme3/
HTML:
<!--Default Stuff-->
<title>CS:GOAbyss</title>
<!--Script Links-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/script.js"></script>
<!--Stylesheet Links-->
<link rel="stylesheet" text="text/css" href="css/style.css">
<link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">
<!--Font Links-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<body>
<!--Website Sidebar-->
<div id="sidebar">
<ul>
<li>TEST LINK</li>
<li>TEST LINK</li>
<li>TEST LINK</li>
<li>TEST LINK</li>
<li>TEST LINK</li>
<li>TEST LINK</li>
</ul>
</div>
</body>
CSS:
/* Default Stuff */
body {
margin:0px;
padding:0px;
font-family:"Open Sans", sans-serif;
}
/* Website Sidebar */
#sidebar {
background:rgb(41,41,41);
width:180px;
height:100%;
position:absolute;
left:0px;
top:0px;
}
ul {
margin:0px;
padding:0px;
}
ul li {
list-style:none;
padding:10px;
border-bottom:2px solid #111;
display: block;
}
ul li a {
background:rgb(41,41,41);
color:#ccc;
text-decoration:none;
margin:10px;
}
ul li:before {
content:'\f1ce';
font-family:'FontAwesome';
padding:10px;
background:rgb(125,125,125);
text-align:center;
}
Pretty simple with font-awesome icons, but you can make custom icons by creating pictures and adding :hover to create a hover effect on the pics (it's how that skin site is doing it).
JsFiddle
Updated: JsFiddle
Add icons like this:
<li>
<a href="#" class="navbarLinks">
<div class="icons">
<i class="fa fa-money"></i>
</div>
<div class="textInfo">TEST LINK
</div>
</a>
</li>
And create a hover effect on the fontawesome icon by doing this:
.fa-money:hover{
color: #000;
}
I'm writing some html and css to create a webpage. On the left of the page is a nav section. At the top is a header, below which is a 'main' section containing text in various sections, and below that is a footer.
I have managed to get the header and footer to remain fixed as desired and also get the main section to scroll between the header and footer. The links in the nav are supposed to let the user jump to a section of main as required. However, when clicking on introduction, the introduction section gets positioned at the very top of the page (hidden under the header) where as I would like it to jump to its position just below the header. I've tried various combinations of setting top and position:absolute in main but without success. Can anybody help?
The html and css are below:
index.html:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>John Doe</title>
<link type="text/css" rel="stylesheet" href="homepage.css">
<style type="text/css">
</style>
</head>
<body>
<header id="top">
<h1>
<dl>
<dt>
John Doe
</dt>
<dd>
<img src="logo.jpg" alt="Logo" >
</dd>
</dl>
</h1>
</header>
<nav class="navlist">
<ul class="menuitem">
<li>Introduction</li>
<li>Previous Experience</li>
<li>Skills</li>
<li>Courses Taken</li>
<li>Courses Being Taken</li>
<li>Useful Links</li>
<li>Contact</li>
<img src="selfie.jpg" alt="Selfie" >
</ul>
</nav>
<div id="main">
<h2><a id="introduction">Introduction</a></h2>
<p>Welcome to my home page! This page tells you a little bit about myself.</p>
<p>Blah blah blah</p>
<h2><a id="prevExp">Previous Experience</a></h2>
<p>I have worked at
Prodrive,
Lotus Engineering and
Ricardo.
</p>
<p>At Prodrive I did some stuff.</p>
<p>At Lotus I did some stuff.</p>
<p>At Ricardo I did some stuff.</p>
<h2><a id="skills">Skills</a></h2>
<ol>
<li>Awesomeness</li>
<li>Mathematics</li>
<li>Problem Solving</li>
<li>CSS?</li>
</ol>
<h2><a id="courses_taken">Courses taken</a></h2>
<ul>
<li>BEng Degree</li>
<li>Games Programming</li>
<li>Java</li>
<li>Android Programming</li>
</ul>
<!-- Created nested list to show current course and its modules -->
<h2><a id="courses_being_taken">Courses being taken</a></h2>
<ul>
<li>MSc Degree
<ul>
<li><h3>Modules</h3></li>
<li>Apps</li>
<li>Research</li>
<li>Databases</li>
<li>Internet</li>
</ul>
</li>
</ul>
<h2><a id="useful_links">Useful Links</a></h2>
<ul>
<li>
<a href="http://www.w3schools.com/html/html5_intro.asp" >HTML5 Introduction from w3schools</a>
</li>
</ul>
<h2><a id="contact">Contact</a></h2>
<ul>
<li>Address: xxxx</li>
<li>Telephone: xxxx</li>
<li>Email: <a href="mailto:xxxx#uea.ac.uk" >xxxx</a></li>
</ul>
</div>
<footer>
<!-- Horizontal rule and update comment -->
<hr />
<p>Page last updated 30/09/2016 by Stephen Whiddett</p>
</footer>
</body>
</html>
homepage.css:
body {margin:0; padding:0;}
header {border: 0px solid white;}
nav {border: 2px ;}
footer {border: 2px ;}
div#main {border: 2px ;}
h1 {font-family:Helvetica,Arial,sans-serif;
font-size:x-large;
color:blue;
font-style: italic;}
h2 {font-family:Helvetica,Arial,sans-serif;
font-size:medium;
color:#0088FF;
font-style: italic;}
header{ width: 100%;
height: 12vh;
position: fixed;
top: 0;
background: #AAAAAA;
}
#main {
left:6em;
width: 80%;
margin: 13vh 0 6vh 6em;
}
footer{ position: fixed;
width:100%;
height:6vh;
bottom:0;
text-align:center;
background: white;}
p { font-family:Helvetica,Arial;
font-size:x-small;}
a {background-color:yellow}
header a {background-color:inherit}
nav img {max-width:100%;}
ul.menuitem {font-size:small;
margin:0;
padding:1em;}
nav.navlist {width:6em;
position: fixed;
top:12%;
bottom:94%;}
header dt {float:left;}
header dd {float:right;}
header dl {padding:1%;}
header dt {
position: absolute;
top: 6vh;
transform: translateY(-50%);
}
It may be necessary for you to reduce the window size of your browser in order to see the issue I've described to ensure that main cannot fit on the screen all at once.
I am trying to recreate the Windows 8 application menu ( the new "start menu" )
My goal is to have square divs with a descriptive text next to it, the column splits itself up when it reaches a certain point ( something I have yet to determine but Iv'e come quite far with this )
In other words: I am trying to make a column that goes down and splits itself into 3 columns automatically and beginnen at the left side again after it has reached the end of the wrapper width.
as you can see in my JFIDDLE Iv'e made something that comes quite close.
http://jsfiddle.net/Qq98X/
Stil I can't seem to find the correct solution for this.
Mainly because i cannot use NTH-CHILD etc properties because it is meant to work on IE7
<html>
<head>
<style>
.mp-submenu {
margin-bottom: 1px;
position:relative;
}
.mp-submenu ul{
max-width:500px;
max-height:300px;
list-style:none;
}
.mp-submenu ul li{
float:left;
}
#triple li { width:30.333%; }
.mp-submenu-square-dg,
.mp-submenu-square {
float:left;
margin: 5px 0 5px 0;
padding:5px;
width:50px;
height:50px;
background-color: #8D8D8D;
}
.mp-submenu-square-dg:hover,
.mp-submenu-square:hover {
background-color: #F17B0A;
}
.mp-submenu-square-dg {
background-color: #696969;
}
.mp-submenu-headletter {
margin: 5px 0 5px 0;
font: normal 27px arial;
text-align: left;
vertical-align:bottom;
width:50px;
height:50px;
color: black;
display:inline-block;
background-color:none;
float:left;
}
.mp-submenu-headletter-desc {
padding-top:35px;
font: normal 12px arial;
}
</style>
</head>
<body>
<article class="mp-submenu">
<ul id="triple">
<li>
<div class="mp-submenu-headletter">A</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">2</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">3</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">4</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">5</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-headletter">B</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">2</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">3</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-headletter">C</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">2</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">3</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
</ul>
</article>
</body>
Add this:
#triple li:nth-child(3n+1) {clear:both}
This will cause every third item beginning from the first to clear the float and start a new row.
http://www.mohrdevelopment.com
I'm currently only testing the website with 2 browsers:
Rockmelt & Chrome.
Rockmelt problem:
When opened in rockmelt browser, everything functions correctly except for the "About" tab. When it is pressed my header dissapears. I even tried copying the code from one of my other tabs that looked the same (but didn't have the header problem) but the problem still prevailed.
Chrome problem:
Initially when the website is opened in Google Chrome, the navigation bar is aligned vertically. However if you press some of the other tabs, the bar aligns horizontally like it's supposed to (even if you go back to home tab). But if you click around on the tabs fast, there's a chance that the bar aligns vertically again.
I hope someone is able to help me with this problem, since i cannot see the logic in it.
My HTML Code for Home tab:
<html>
<head>
<!-- Meta information -->
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<!-- Favicon -->
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">
<!-- Title -->
<title> Jonas - Development page </title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Header of page -->
<div class="headerdiv">
<h1 class="header">Mohr Development</h1>
</div>
<!--Navigation bar-->
<ul class="navigation">
<li class="current"><em class="home"/>Home</li> <!-- Current selection -->
<li><em class="photos"/>Photos</li>
<li><em class="projects"/>Projects</li>
<li><em class="about"/>About</li>
<li><em class="contact"/>Contact</li>
</ul>
<div class="wrap">
<div class="content">
<br>My new selection
<form action="" method="get">
<ul>
<li>
<label for="name"><font color="white">Enter your name:</font></label>
<input id="name" name="name"/>
</li>
<li>
<label for="comments"><font color="white">Your comments</font></label>
<textarea id="comments" name="comments"></textarea>
</li>
<li>
<label for="css"><font color="white">Do you like CSS?</font></label>
<input type="checkbox" name="css" id="css" />
</li>
<li>
<label for=""><font color="white">Favorite Language?</font></label>
<input type="radio" /> CSS
<input type="radio" /> HTML
<input type="radio" /> JavaScript
<input type="radio" /> PHP
</li>
<li>
<input type="submit" value="Go!"/>
</li>
</ul>
</form>
</div> <!-- Wrap end -->
<!-- Sidebar -->
<aside>
<h2>Sidebar</h2>
<ul class="sidebar">
<li class="sidebarli">Lol1</li>
<li class="sidebarli">Lol2</li>
<li class="sidebarli">Lol3</li>
<li class="sidebarli">Lol4</li>
</ul>
</aside>
</div> <!-- Content end -->
<div class="footer">
<p>Copyright © Mohrdevelopment.com</p>
</div> <!-- Footer end -->
</body>
</html>
My HTML Code for About tab:
<html>
<head>
<!-- Meta information -->
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<!-- Favicon -->
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">
<!-- Title -->
<title> Jonas - Development page </title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Header of page -->
<div class="headerdiv">
<h1 class="header">Mohr Development</h1>
</div>
<!-- Navigation bar -->
<ul class="navigation">
<li><em class="home"/><b>Home</b></li>
<li><em class="photos"/><b>Photos</b></li>
<li><em class="projects"/><b>Projects</b></li>
<li class="current"><em class="about"/><b>About</b></li>
<li><em class="contact"/><b>Contact</b></li>
</ul>
<div class="wrap">
<div class="content">
<form action="" method="get">
<ul>
<li>
<label for="name"><font color="white">Enter your name:</font></label>
<input id="name" name="name"/>
</li>
<li>
<label for="comments"><font color="white">Your comments</font></label>
<textarea id="comments" name="comments"></textarea>
</li>
<li>
<label for="css"><font color="white">Do you like CSS?</font></label>
<input type="checkbox" name="css" id="css" />
</li>
<li>
<label for=""><font color="white">Favorite Language?</font></label>
<input type="radio" /> CSS
<input type="radio" /> HTML
<input type="radio" /> JavaScript
<input type="radio" /> PHP
</li>
<li>
<input type="submit" value="Go!"/>
</li>
</ul>
</form>
</div> <!-- Wrap end -->
<!-- Sidebar -->
<aside>
<h2>Sidebar</h2>
<ul class="sidebar">
<li class="sidebarli">Lol1</li>
<li class="sidebarli">Lol2</li>
<li class="sidebarli">Lol3</li>
<li class="sidebarli">Lol4</li>
</ul>
</aside>
</div> <!-- Content end -->
<div class="footer">
<p>Copyright © Mohrdevelopment.com</p>
</div> <!-- Footer end -->
</body>
</html>
My CSS Code:
body {
font-family:sans-serif;
background: url(images/background4.png);
margin:0px;
}
/********************\
******* Header *******
\********************/
.header
{
background: url(images/Header.png);
text-indent:-9999px;
width:1092px;
height:132px;
margin:auto;
}
.headerdiv{
width:100%;
margin:0;
background:gray;
}
/********************\
*** Navigation Bar ***
\********************/
.navigation {
background:black url(Navigation/Navigation/nav_background.png);
height:40px;
margin-bottom:0px;
padding-left:10%;
font-size: 0; /*remove whitespace*/
display:block;
width:100%;
}
.navigation li{
display:inline-block;
line-height: 40px;
font-size:16px;
}
.navigation li a{
display:block;
color:#FFFFFF;
padding: 2px 10px;
}
.navigation li a em{
height:32px;
display:inline-block;
padding: 0 5px 6px 60px;
font-weight:bold;
vertical-align: middle;
background-position: 0 50%;
font-size:16px;
}
.navigation li a:hover{
color:#00CCFF;
background: url(Navigation/Navigation/nav_hover.png) no-repeat;
text-decoration:none;
padding: 2px 10px;
}
.navigation .current a {
color:#FFFFFF;
background:url(Navigation/Navigation/nav_hover.png) no-repeat;
padding: 2px 10px;
}
/*Navigation bar icons*/
.navigation li a em.home, em.photos, em.projects, em.about, em.contact{
background-repeat: no-repeat;
margin-bottom:5px;
}
.navigation li a em.home {
background-image: url(Navigation/Icon_images/home.png);
}
.navigation li a em.photos{
background-image: url(Navigation/Icon_images/Photo.png);
}
.navigation li a em.projects{
background-image: url(Navigation/Icon_images/projects.png);
}
.navigation li a em.about{
background-image: url(Navigation/Icon_images/about.png);
}
.navigation li a em.contact{
background-image: url(Navigation/Icon_images/Contact.png);
}
/*Navigation bar icons STOP*/
/* Main Wrapper */
.wrap {
margin:auto;
width:80%;
background:yellow;
}
/********************\
******* Content ******
\********************/
.content
{
background:url(images/outlets.png);
float:left;
width:80%;
height:auto;
min-width:500px;
min-height:900px;
display:inline;
color:white;
border-bottom-left-radius: 50px 50px;
}
.content h1, p, form, label{
color:white;
}
/********************\
******* Sidebar ******
\********************/
aside{
background: url(images/egg_shell2.png);
float:left;
width:20%;
height:inherit;
min-height:900px;
min-width:125px;
display:inline;
border-bottom-right-radius: 50px 50px;
}
aside ul {
padding-left:1px;
list-style:none;
}
/********************\
****** General *******
\********************/
ul a {
text-decoration:none;
color: #666;
}
ul a:hover {
text-decoration:underline;
color:black;
}
li {
list-style:none;
margin-bottom:20px;
}
label {
display: block;
cursor: pointer;
color: #292929;
font-family:sans-serif;
padding-bottom:8px;
}
form ul {
padding-left:0px;
}
textarea {
width:400px;
height:220px;
}
#contact {
padding-left:5px;
font-weight:bolder;
}
#Andapp{
margin-top:50px;
}
/********************\
******* Footer *******
\********************/
.footer{
float:left;
height:150px;
width:100%;
background-color:gray;
margin-top:100px;
text-align:center;
}
<ul class="navigation">
<li class="current"><em class="home"/>Home</li> <!-- Current selection -->
<li><em class="photos"/>Photos</li>
<li><em class="projects"/>Projects</li>
<li><em class="about"/>About</li>
<li><em class="contact"/>Contact</li>
</ul>
<em> tags aren't closed. It's probably best to abstract away the styling into your CSS files and focus on content in the HTML.
You can run your HTML through the W3C Validator tool to help you with these sorts of errors.