Hello everyone.
So I coded a site in HTML and CSS. But I have some problems..
This is how the codes looks like:
HTML CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>TealTemplate</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
<img id="header"/>
<img id="headerbar"/>
<img id="headerunderbar"/>
</head>
<body>
<img id="menu"/>
<img id="contentbg"/>
<DIV STYLE="position:absolute; top:255px; left:140px; width:610px;">
<i>Hello everyone, and welcome to this brand new website!</i>
<br><br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut varius quam in lorem. Nunc turpis.
In vitae libero quis purus luctus bibendum. Etiam volutpat lectus non neque commodo lobortis.
Vestibulum pellentesque elit et eros. Vestibulum rutrum sollicitudin nunc. Etiam tempor molestie urna.
Vivamus dictum. Morbi nunc tortor, aliquam faucibus, porta sed, condimentum at, mi. Etiam vitae quam eu
augue mattis convallis. Suspendisse eros eros, vehicula et, pharetra vitae, varius in, tortor.
Morbi mi felis, imperdiet non, fringilla quis, ullamcorper eu, pede. Etiam a purus ut odio luctus
cursus. Nulla a enim id libero ornare condimentum. Integer congue pulvinar justo.
<br><br><br>
Aliquam purus orci, congue at, pellentesque sit amet, lacinia sed, purus. In hac habitasse platea
dictumst. Sed nibh est, gravida eu, placerat vitae, pretium at, magna. Nunc sollicitudin metus sed mi.
Quisque mollis est ac felis. Nulla luctus. Donec feugiat varius elit. Integer at odio. Curabitur nisi
urna, viverra id, ornare eget, aliquet quis, elit. Donec mattis euismod turpis. Aenean metus pede,
adipiscing in, consequat ut, volutpat et, lectus. Maecenas vitae augue vitae enim varius fringilla.
In erat. Morbi justo. Proin sem massa, eleifend vel, condimentum id, tempor fringilla, nulla.
</DIV>
<img id="rightslice"/>
<img id="copyright"/>
<p class="home"><a href="index.html">Home</a></p>
<p class="news"><a href="news.html">News</a></p>
<p class="articles"><a href="articles.html">Articles</a></p>
<p class="submitnews"><a href="subimtnews.html">Submit News</a></p>
<p class="submitarticles"><a href="submitarticles.html">Submit Articles</a></p>
<p class="forum"><a href="forum.html">Forum</a></p>
<p class="gallery"><a href="gallery.html">Gallery</a></p>
<p class="history"><a href="history.html">History</a></a></p>
<p class="about"><a href="about.html">About</a></p>
<p class="imprint"><a href="imprint.html">Imprint</a></p>
<p class="contact"><a href="contact.html">Contact</a></p>
<font size="3px"><b><p class="contentheading">Welcome</p></b></font>
</body>
</html>CSS CODE:
* {
margin: 0;
padding: 0;
border: none;
}
html, body {
background-color: #666666;
height:100%;
width:100%;
font-family:verdana;
color:#666666;
font-size:12px;
}
img#header{
background:url('images/header.gif');
border:none;
width:800px;
height:168px;
}
img#headerbar{
background:url('images/header_bar.gif');
border:none;
width:800px;
height:28px;
margin: -4px 0px 0px;
}
img#headerunderbar{
background:url('images/tealtemplate_03.gif');
border:none;
width:800px;
height:4px;
margin:-18px 0px 0px;
}
img#menu{
background:url('images/menu_bg.gif');
border:none;
width:125px;
height:600px;
margin:-19px 0px 0px;
float:left;
}
img#contentbg {
background-image: url('images/content.gif');
border:none;
width:638px;
height:557px;
margin:-18px 0px 0px;
}
img#rightslice {
background-image: url('images/tealtemplate_06.gif');
border:none;
height:600px;
width:37px;
margin:-19px 0px 0px -4px;
float:right;
position:absolute;
}
img#copyright{
background-image: url('images/tealtemplate_07.gif');
border:none;
height:43px;
width:638px;
margin:-5px 0px 0px;
float:;
}
p.home {
margin:-525px -747px 0px;
position:absolute;
}
p.news {
margin:-490px -747px 0px;
position:absolute;
}
p.articles {
margin:-455px -747px 0px;
position:absolute;
}
p.submitnews {
margin:-420px -747px 0px;
position:absolute;
}
p.submitarticles {
margin:-385px -747px 0px;
position:absolute;
}
p.forum {
margin:-350px -747px 0px;
position:absolute;
}
p.gallery {
margin:-315px -747px 0px;
position:absolute;
}
p.about {
margin:-280px -747px 0px;
position:absolute;
}
p.history {
margin:-245px -747px 0px;
position:absolute;
}
p.imprint {
margin:-210px -747px 0px;
position:absolute;
}
p.contact{
margin:-175px -747px 0px;
position:absolute;
}
p.contentheading {
margin:-547px -627px 0px;
position:absolute;
}Here is a link to the site: http://logiq.byethost13.com/
As you can see.. Only a few images is displayed, and the loading takes forever.
However, here is a screenshot how it looks locally in my browser:
[IMG][/IMG]
As you can see, all the images is displayed corretly but Im getting that strange frame, and the cannot-display-image icon...
Any ideas?
And how do I center the whole thing? If I use <center> tags in HTML the images will move..
