Forum Moderators: not2easy
The idea is I'm using divs to generate a nice boarder for the site, including two columns. There is a top left, top right, bottom left and bottom right corner. These are all fixed dimensions (width and height) with a background image. There is a top and bottom edge with a background image that repeats horizontally, and a left and right edge that repeat vertically, along with some background colors.
When I tried creating the same setup by hand in an html page, I did the following:
1. Added a main container div with a fixed width and a height set to 100%.
2. Added the div to contain the top left corner background image. I set this to an inline float, allowed floating elements to appear to the right, and removed the margin and padding.
To my amazement, when I set the Top_Corner div to an inline element, it totally vanished! What is going on?
Here is the HTML file with most styles inline (was going to separate later):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="skin.css" />
<title>Untitled Page</title>
</head>
<body>
<div id="MainDiv" style="width: 760px; height: 100%" class="Boarderless">
<div id="Div_Corner_Top_Left" style="clear: left; display: inline; background-image: url(Corner_Top_Left.gif);
width: 42px; height: 49px" class="Boarderless">
</div>
<div id="Div_Border_Top" style="clear: none; display: inline; background-image: url(Boarder_Top.gif);
width: 526px; background-repeat: repeat-x; height: 49px" class="Boarderless">
</div>
<div id="Div_Menu_Top" style="clear: none; display: inline; background-image: url(Menu_Top.gif);
width: 170px; height: 49px; background-repeat: no-repeat; position: relative;" class="Boarderless">
<div class="Boarderless" style="left: 21px; vertical-align: middle; width: 127px;
position: absolute; top: 18px; height: 26px; text-align: center">
[search]</div>
</div>
<div id="Div_Corner_Top_Right"class="Boarderless" style="clear: right; display: inline; background-image: url(Corner_Top_Right.gif);
width: 21px; height: 49px">
</div>
<div id="Div_Menu_Row" class="Boarderless" style="width: 760px; height: 100%;">
<div id="Div_Boarder_Left" class="Boarderless" style="clear: left; display: inline; background-image: url(Boarder_Left.gif);
width: 42px; background-repeat: repeat-y; height: 100%">
</div>
<div id="Div_Content" class="Boarderless" style="clear: none; display: inline; width: 526px; background-color: #8cc63f; height: 100%;">
[contentpane]</div>
<div id="Div_Menu" class="Boarderless" style="clear: none; display: inline; width: 170px;
height: 100%; text-align: center; position: relative;">
<div id="Logo_Div" class="Boarderless" style="clear: both; display: inline;
width: 143px; height: 52px; margin-top: 15px;">
[logo]</div>
<br />
<div id="Div_Login" style="clear: both; background-position: 30px center; margin-top: 15px;
display: inline; background-attachment: fixed; background-image: url(GHExperts_Icon.gif);
margin-bottom: 15px; width: 100%; background-repeat: no-repeat">
<div id="Div_Login_Container" class="Boarderless" style="clear: both; display: inline;
left: 20px; width: 130px; position: relative; height: 100%">
[login]/[user]</div>
</div>
<br />
<div id="Div_SolpartMenu" style="clear: both; display: inline; vertical-align: top;
width: 100%; text-align: center; background-image: url(Menu_Container_Image.gif); overflow: auto; line-height: 23px; background-repeat: repeat-y;">
[solpartmenu]</div>
<br />
<div style="left: 0px; width: 100%; bottom: 0px; position: absolute">
[contentpane:1]</div>
</div>
<div id="Div_Border_Right" style="clear: right; display: inline; background-image: url(Boarder_Right.gif);
width: 21px; background-repeat: repeat-y; height: 100%" class="Boarderless">
</div>
</div>
<div id="Div_Corner_Bottom_Left" style="clear: left; display: inline; background-image: url(Corner_Bottom_Left.gif);
width: 42px; height: 43px" class="Boarderless">
</div>
<div id="Div_Boarder_Bottom" style="width: 526px; height: 43px; clear: none; display: inline; background-image: url(Boarder_Bottom.gif); background-repeat: repeat-x;" class="Boarderless">
<div id="Div_Footer" class="Boarderless" style="clear: both; display: inline; width: 100%;
position: relative; top: 23px; height: 20px">
[footer stuff]</div>
</div>
<div id="Div_Menu_Bottom" style="width: 170px; height: 43px; clear: none; display: inline; background-image: url(Menu_Bottom.gif);" class="Boarderless">
</div>
<div id="Div_Corner_Bottom_Right" style="width: 21px; height: 43px; clear: right; display: inline; background-image: url(Corner_Bottom_Right.gif);" class="Boarderless">
</div>
</div>
</body>
</html>
and the skin.css file:
<style type="text/css">
body, html {
background-color : #000088;
height: 100%;
margin: 0px;
position:relative;
}
.Boarderless
{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
Please help me, as I've spent WAY WAY too much time on this.
Thanks in advance!
