Hi there Kage Kazumi,
I have simplified your code and also replaced the "table element"...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://zanime.net/list/"> <!-- this is for testing and may be removed -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>container</title>
<style type="text/css">
body {
background-color:#f0f0f0; /*this may be removed */
}
#container {
width:500px;
margin:auto; /*this may be removed */
border:1px solid #000;
border-radius:5px 5px 0 0;
background-image:url(images/table-bg.jpg);
overflow:hidden;
box-shadow:6px 6px 6px #666; /*this may be removed */
}
#header {
padding:4px;
background-image:url(images/bg-title.png);
background-repeat:repeat-x;
background-position:0 -2px;
font-size: 18px;
font-weight:bold;
text-shadow: 1px 1px 1px #143607;
filter: dropshadow(color=#143607, offx=1, offy=1);
color:#fff;
}
#os {
float:right;
}
#sample {
float:left;
width:100px;
height:100px;
margin:20px 10px;
}
#descripter {
float:left;
width:360px;
padding:20px 10px;
margin:0;
font-weight:bold;
}
#footer {
clear:both;
padding:4px;
background-color:#466505;
font-size:17px;
text-shadow:1px 1px 1px #143607;
filter: dropshadow(color=#143607, offx=1, offy=1);
color:#eee;
overflow:hidden;
}
#type {
float:left;
}
#price {
float:right;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<span>Software Title</span>
<span id="os">Operating System:
<img src="images/windows-logo-icon.png" alt="Windows">
<img src="images/mac-logo-icon.png" alt="Mac">
<img src="images/linux-logo-icon.png" alt="Linux">
</span>
</div><!-- end #header -->
<img id="sample" src="images/sample-image.jpg" alt="">
<p id="descripter">
The graphical scripter within 001 Game Creator is a simple, yet powerful method
of creating events for your game without the difficulty of learning to write code.
It uses the simplicity of pointing and clicking to allow the user to easily
implement events in the form of a flowchart.
</p>
<div id="footer">
<span id="type">2D/3D</span>
<span id="price">Free/Commercial</span>
</div><!-- end #footer -->
</div><!-- end #container -->
</body>
</html>
coothead
Junior Coders
Small Gaps between elements
Posting Permissions
Reply With Quote
Bookmarks