[eluser]selman555[/eluser]
This might be a widely discussed topic, but I just can't figure it out.
The layout on my localhost (xampp) is (at least) better then when I upload it to my server.
Are there any basic troubleshooting procedures I can use?
Check out my site:
www.tong-il-neeroeteren.be
I hope you can figure out what it's supposed to look like...
I'll give you a snippet of my html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Tong-Il Neeroeteren</title>
<?php $this->load->view('templates/header');
$this->load->view('templates/menu'); ?>
</head>
<body>
<h1>Welkom bij Tong-Il Neeroeteren!</h1>
<p>Om te navigeren door deze site, dient u het navigatiemenu bovenaan de pagina te gebruiken.</p>
<ul>
<li>start -> Terugkeren naar deze pagina.</li>
<li>galerij -> Foto's van onze club gekijken.</li>
<li>events -> Wat staat er in onze agende?</li>
</ul>
</body>
<?php $this->load->view('templates/footer'); ?>
</html>
And my css
Code:
/* Basis */
body {
margin: auto;
float: center;
width: 90%;
font: normal small Georgia, "Times New Roman", Times, serif;
color: #999999;
}
h1, h2, h3 {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 25px;
font-weight: normal;
}
h1 {
font-size: 3.2em;
}
h2 {
font-size: 2.4em;
}
h3 {
font-size: 1.8em;
}
h4 {
margin-top: 5px;
margin-bottom: 20px;
margin-left: 35px;
}
img {
border: none;
}
a {
color: #333333;
}
a:hover {
text-decoration: none;
color: #000000;
}
p {
margin-top: 5px;
margin-bottom: 15px;
margin-left: 35px;
color: black;
font-size: 18px;
}
label {
color: #404040;
margin-bottom: 10px;
}
li {
color: black;
list-style: none;
margin-bottom: 5px;
margin-top: 10px;
}
/* Admin */
#admin .side {
width: 20%;
background: #404040;
}
#admin .side p {
color: white;
font-size: 16px;
}
#admin .body {
width: 80%;
height: 100%;
}
/* Logo */
#logo {
background: url(images/logo_big.png) no-repeat;
background-size: 110px 110px;
width: 110px;
height: 110px;
}
#logo h1 {
float: left;
padding: 40px 40px 0 0;
letter-spacing: -2px;
font-size: 48px;
}
#logo h2 {
float: right;
padding: 61px 0 0 0;
font-size: 12px;
}
#logo a {
text-decoration: none;
color: #1A1A1A;
}
/* Menu */
#menu {
height: 70px;
width: 100%;
margin-top: auto;
clear: right;
}
#menu ul {
margin: 0;
list-style: none;
}
#menu li {
display: inline;
list-style: none;
}
#menu a {
display: block;
float: left;
width: 140px;
height: 45px;
padding-top: 25px;
text-transform: lowercase;
text-decoration: none;
text-align: center;
letter-spacing: -2px;
font-size: 30px;
color: #B8BD52;
}
#menu a:hover {
color: #1A1A1A;
}
#menu .active a {
background: url(images/img03.jpg) no-repeat;
color: #FFFFFF;
}
/* Header */
#header {
float: center;
background: url(images/banner.png) repeat-x;
background-position: contain;
background-size: 100%;
height: 2%;
clear: right;
}
#header h2 {
font-size: 12pt;
}
#header .login {
float: left;
margin-left: 70em;
margin-top: -110px;
width: 200px;
}
#header .login a {
float: right;
margin-top: 4px;
margin-right: 20px;
color: white;
}
#header .login input{
background: black;
color: white;
border-color: blue;
margin-top: 1px;
}
#header .account {
float: left;
margin-left: 79%;
margin-top: -100px;
width: 250px;
}
#header .account a {
color: white;
}
#header .account p {
color: white;
}
#header .admin {
float: left;
margin-top: -85px;
margin-left: 64%;
font-size: 16px;
color: white;
}
#header .admin a {
color: white;
}
/* Footer */
#footer {
float: center;
clear: both;
width: 100%;
padding: 40px 0 40px 0;
margin-top:40px;
background: grey;
}
#footer p {
margin: 0;
text-align: center;
font-size: smaller;
color: #FFFFFF;
}
#footer a {
color: #FFFFFF;
}
/* Registratie-login formulier */
#formulier {}
#formulier .error {
padding: 5px;
border-style: double;
border-color: red;
}
.clear {
clear: both;
}
.error p {
font-size: 11px;
color: #ff0000;
margin: 0;
padding: 10px 0 0 0;
}
.bottom {
color: #666;
font-weight: bold;
font-size: 11px;
text-align: center;
border: 1px solid #e3e3e3;
padding: 10px;
margin-top: 10px;
}
.bottom a {
color: #0066cc;
font-size: 14px;
}
.bottom a:hover {
text-decoration: none;
color:#fff;
background: #0066cc;
}
Any advice?
