Log in

View Full Version : Resolved Small Gaps between elements



Kage Kazumi
10-13-2012, 10:02 AM
I have 4 main parts to my TABLE:

1)tb-wrapper (Table)
2)tb-header (TR)
3)tb-body (TR)
4)tb-footer (TR)

However, the TB-HEADER & TB-FOOTER are not taking up the whole space. If you go here (http://zanime.net/list/), you will see small gaps that allows the background image from TB-WRAPPER to show through. I looked padding, margin, issues, but could not find them.

Layout.css: http://zanime.net/list/css/layout.css
Style css: http://zanime.net/list/css/style.css

coothead
10-13-2012, 12:54 PM
Hi there Kage Kazumi,

I have simplified your code and also replaced the "table element"...

<!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

Kage Kazumi
10-13-2012, 03:45 PM
Thank you, looks way better then what I had. Perhaps I should take that HTML/CSS course at w3schools.com.

~Kage

coothead
10-13-2012, 04:52 PM
Hi there Kage Kazumi,

check out some of the links given here for html and css...

Learn HTML (https://developer.mozilla.org/en-US/learn/html)
Learn CSS (https://developer.mozilla.org/en-US/learn/css)

coothead

Kage Kazumi
10-13-2012, 07:25 PM
Thanks for the links. I'm going to check them out as I would like to get better at this.

~Kage

coothead
10-13-2012, 10:45 PM
No problem, you're very welcome. ;)

coothead