Söker feedback på html och css kod och berätta om jag kan förbättra något i koden eller hur jag kan tänka istället?
Hej. Jag har nyligen blivit klar med min sida. Första versionen av designen är klar och ska förbättra designen hade jag tänkt. Jag undrar om ni skulle vilja kolla i min kod om det är några fel eller om det är något jag kan förbättra då jag vill bli en bättre programmerare. Jag är faktiskt nöjd med sidan hittills och ska jobba mer med designen bara.
HTML
<!DOCTYPE HTML > <?xml version="1.0" encoding="UTF-8"?>
<?php
include "db/db.php";
session_start();
error_reporting(E_ALL & ~E_NOTICE);
$page = isset($_GET['site']) ? $_GET['site'] : null;
switch($page) {
case 'home':
$page = ('pages/home.php');
$site = ('home');
break;
case 'about':
$page = ('pages/about.php');
$site = ('about');
break;
case 'cv':
$page = ('pages/cv.php');
$site = ('cv');
break;
case 'twitch':
$page = ('pages/twitch.php');
$site = ('twitch');
break;
case 'games':
$page = ('pages/games.php');
$site = ('games');
break;
case 'contact':
$page = ('pages/contact.php');
$site = ('contact');
break;
default:
$page = ('pages/home.php');
break;
}
?>
<html>
<head>
<title>Site - screenwriter, programmer, gamer and streamer</title>
<meta charset="ISO-8859-1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTf-8" />
<link href="css/stylesheet.css" type="text/css" rel="stylesheet"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta charset="UTF-8" />
<meta name="description" content="Screenwriter, Programmer, Webdesigner, Moviemaker, Stream, Streamer, Gamer, Gaming, site, zippiex" />
<meta name="keywords" content="Screenwriter, Programmer, Webdesigner, Moviemaker, Stream, Streamer, Gamer, Gaming, site, zippiex" />
<meta name="author" content="site, Zippiex" />
</head>
<body>
<script type="text/javascript" id="cookieinfo"
src="//cookieinfoscript.com/js/cookieinfo.min.js">
</script>
<div class="wrapper">
<header>
<div id="wrapper-inside">
<h1><a href="?site=<?php echo $site; ?>" style="text-decoration: none;">site </a> </h1>
<b><a href="?site=<?php echo $site; ?>" style="text-decoration: none;">Screenwriter / Web developer / Gamer / Streamer</a></b>
<div class="menu">
<ul>
<li><a href="?site=home">Home</a></li>
<li><a href="?site=cv">Cv</a></li>
<li><a href="?site=about">About</a></li>
<li><a href="?site=contact">Contact</a></li>
</ul>
</div>
</header>
<div id="content">
<p><?php include $page; ?></p>
</div>
</div>
</div>
<div class="footer">
<div class="footerindex">
<p>© SITE 2016.</p>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Youtube</a></li>
<li><a href="?site=twitch">Twitch</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</div></div>
<div id="clearfix"></div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
html, body {
color: black;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
.wrapper{
min-height: 100%;
margin-bottom: -52px; /* Footer height*/
}
.wrapper:after{
content:"";
display: block;
}
header{
background-color: #DC0707;
height: 85px;
border-bottom: 2px solid black;
}
header h1 a {color: white; position: absolute; margin-top: 10px; margin-left: 80px;}
header b a {color:white; position: absolute; margin-top: 50px;}
#wrapper-inside {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.menu a:link {color: white; text-decoration: none;}
.menu a:visited {color: white; text-decoration: none;}
.menu a:hover {color: white; text-decoration: none;}
.menu a:active {color: white; text-decoration: none;}
.menu ul {
float: right;
}
.menu li {
float: left;
list-style-type: none;
}
.menu ul li:hover{
background-color: black;
}
.menu li a {
display: block;
width: 85px;
height: 50px;
text-align: center;
margin-top: 35px;
}
#content {
max-width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
.footer, .wrapper:after{
height: 50px;
}
.footer {
background-color: #DC0707;
border-top: 2px solid black;
height: 50px;
color: white;
}
.footer a {
color: white;
text-decoration: none;
padding: 8px;
float: right;
margin-top: -25px;
}
.footerindex {
max-width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 17px;
}
.footerindex li {
display: inline;
margin-top: -10px;
}
#clearfix{
clear:both;
}
