PremiumBlend
07-18-2006, 10:36 PM
I've spent a long time trying to find an answer but have not been successful as of yet. I know it is a problem with floats and clears, but I haven't found the right combination to fix the problem.
What is happening is that the image (which is in a DT which is inside a DL) aligns at the bottom of the "Links" DIV. If the text on the right pushes it below the "Links" DIV there is no problem. Also, if the "Links" DIV doesn't have many links in it, it doesn't affect the image because it's bottom doesn't reach the top of the image. This will become a major problem if I add more links on the left, which I plan to do. I hope its as clear as possible.
In this image, the dashed line shows where it is always being aligned, the arrow points to where it should be aligned.
http://www.dumpsterdoggy.com/images/Image1.gif
<html><head><title>Dumpster Doggy</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="javascript/dumpster.js"></script>
<script type="text/javascript" src="javascript/doggy.js"></script>
<link rel="stylesheet" type="text/css" href="css/doggystyle.css"></head><body onload="loadContent('ojs')">
<img src="images/long_top.gif" alt="Dumpster Doggy Logo" height="213" width="720">
<div id="ddnav"><h1>Links</h1><a href="index.php?p=hm">Dumpster Home</a><a href="index.php?p=abt">About This Site</a><a href="index.php?p=wdd">Web Design & Development</a><a href="index.php?p=ojs" id="currentLink">Open Source JavaScript</a><a href="javascript:contactPage();" class="bottomLink">Contact Us</a></div>
<div id="ddlinks">
<h2>External Links</h2>
<a href="http://www.pinkish-black.com">
<img src="images/links/pbblinkie2.gif" title="Pinkish-Black" alt="Pinkish-Black Logo">
</a>
<a href="http://www.degradationhell.com">
<img src="images/links/dh.gif" title="Degradation Hell" alt="Degradation Hell Image" width="170">
</a>
<a href="http://www.codingforums.com">
<img src="images/links/codingforums.gif" title="Coding Forums" alt="Coding Forums Logo">
</a>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.dumpsterdoggy.com/css/doggystyle.css">
<img src="images/links/vcss.png" title="This page uses Valid CSS" alt="Valid CSS">
</a>
<a href="http://validator.w3.org/check?uri=referer">
<img src="images/links/valid-xhtml10.png" title="This page uses Valid XHTML" alt="Valid XHTML">
</a>
<span>
These sites are entirely independent of Dumpster Doggy.
</span>
</div>
<div id="ddmain">
<h1>Open Source JavaScript</h1>
<p>
This is a page to demo and share some JavaScripts that I have
created.
</p>
<dl>
<dt>
<a href="javascript:void(0)">
<img src="images/open_source/AACimage.gif" alt="XML Calendar" title="XML Calendar" width="250">
</a>
</dt>
<dd>
This is a script that creates a calendar and allows for
custom XML files to be loaded to highlight certain dates.
When the dates are hovered over, a box appears displaying
some text and an optional link for that date. In my example
I have a drop down box that will load different XML files
changing what dates are loaded into the calendar. If this
is something of no interest, it is not needed.
</dd>
<dd>
<ul>
<li><b>XML Calendar</b></li>
<li>Version: 2.0</li>
<li><a href="javascript:void(0)">View Demo</a></li>
<li><a href="javascript:void(0)">Download All Files (zip file)</a></li>
</ul>
</dd>
</dl>
</div>
<div id="ddlinkbar"><span>Related Links:</span><a href="index.php?p=hm">Dumpster Home</a><a href="index.php?p=wdd">Web Design & Development</a> </div>
<div id="ddcopyright">© 2006 DumpsterDoggy.com version 1.0, all rights reserved.</div>
</body></html>
BODY {
margin: 0% 10% 0% 0%;
padding: 0;
color: #000000;
background: #ACDCFB url('../images/gradient.gif') top repeat-x;
font-family: tahoma,sans-serif;
}
A {
color: #0000FF;
background-color: inherit;
}
A:active {
color: #0000FF;
background-color: inherit;
}
A:visited {
color: #0000FF;
background-color: inherit;
}
DD {
clear: none;
display: block;
padding: 1ex 8ex 1ex 6ex;
font-size: 90%;
text-align: justify;
line-height: 135%;
border-top: 3px double #73B5DE;
border-left: 2px solid #73B5DE;
}
DD UL {
margin: 0;
padding: 0;
border: none;
}
DL {
display: block;
margin: 0;
padding-top: 0;
padding-right: 40px;
padding-bottom: 1ex;
border-left: 2px solid #73B5DE;
}
DT {
display: block;
float: left;
clear: right;
padding-left: 2ex;
padding-right: 2ex;
}
DT IMG {
display: block;
padding: 1ex;
color: inherit;
background-color: #FFFFFF;
border: 1px solid navy;
}
H1 {
margin: 0;
padding-left: 8px;
background: #73B5DE url('../images/small_grad.gif') left repeat-x;
color: #FFFFFF;
font-family: "courier new",monospace;
}
H2 {
margin: 0;
padding: 0 8px;
background: #73B5DE url('../images/small_grad.gif') left repeat-x;
color: #FFFFFF;
font-family: "courier new",monospace;
}
LI {
margin-left: 5ex;
line-height: 150%;
}
P {
margin: 0;
padding: 2ex 40px 2ex 2ex;
border-left: 2px solid #73B5DE;
text-align: justify;
line-height: 125%;
}
P IMG {
display: inline;
padding: 2px 2px;
color: inherit;
background-color: #ACDCFB;
border: 1px solid navy;
}
P IMG.leftSide {
margin: 1px 7px 1px 0;
float: left;
}
P IMG.rightSide {
margin: 1px 0 1px 7px;
float: right;
}
UL {
margin: 0;
padding-left: 4ex;
border-left: 2px solid #73B5DE;
padding-bottom: 2ex;
}
#ddnav {
display: block;
padding: 0;
margin-left: 15px;
width: 180px;
float: left;
clear: left;
color: #000000;
background-color: #B6E6FF;
font-size: 80%;
}
#ddnav A {
display: block;
padding: 1px 8px;
border-left: 3px double #73B5DE;
color: inherit;
background-color: #B6E6FF;
}
#ddnav #currentLink {
color: navy;
background-color: inherit;
text-decoration: none;
}
#ddnav #currentLink:hover {
color: inherit;
background: inherit;
}
#ddnav A:hover {
color: navy;
background-color: #ACDCFB;
}
#ddnav .bottomLink {
padding-bottom: 6px;
border-bottom: 3px double #73B5DE;
}
#ddmain {
max-width: 700px;
margin: 0 auto 0 210px;
color: #000000;
background: #B6E6FF url('../images/slash_dot_back.jpg') right repeat-y;
}
#ddmain A {
color: #0000FF;
background-color: inherit;
}
#ddmain A:hover {
color: navy;
background-color: inherit;
border-bottom: 1px solid navy;
}
#ddlinkbar {
max-width: 680px;
margin: 0 auto 0 210px;
padding: 2px 2px 3px 2ex;
color: #000000;
background-color: #B6E6FF;
border-top: 3px double #73B5DE;
border-bottom: 3px double #73B5DE;
border-left: 2px solid #73B5DE;
font-size: 90%;
}
#ddlinkbar A {
display: block;
float: left;
clear: right;
padding-right: 1ex;
}
#ddlinkbar A:hover {
color: navy;
background-color: inherit;
text-decoration: none;
}
#ddlinkbar .bottomLink {
}
#ddlinkbar SPAN {
display: block;
float: left;
clear: right;
padding-right: 1.5ex;
}
#ddcopyright {
font-size: 80%;
color: #666666;
background-color: inherit;
margin: 0 auto 0 210px;
padding-left: 2ex;
max-width: 680px;
}
#ddlinks {
padding: 0;
margin-top: 15px;
margin-left: 15px;
width: 180px;
float: left;
clear: left;
color: #000000;
background-color: #B6E6FF;
font-size: 80%;
}
#ddlinks IMG {
margin: 0;
float: left;
display: block;
padding: 4px 2px 4px 5px;
border: 0;
border-left: 3px double #73B5DE;
color: inherit;
background-color: inherit;
}
#ddlinks SPAN {
width: 170px;
margin: 0;
padding: 2px 4px;
float: left;
display: block;
border-left: 3px double #73B5DE;
border-bottom: 3px double #73B5DE;
font-size: 80%;
text-align: center;
color: #999999;
background-color: inherit;
}
Here is a link to the page. (http://www.dumpsterdoggy.com/index.php?p=ojs)
Here is a link to the CSS file. (http://www.dumpsterdoggy.com/css/doggystyle.css)
What is happening is that the image (which is in a DT which is inside a DL) aligns at the bottom of the "Links" DIV. If the text on the right pushes it below the "Links" DIV there is no problem. Also, if the "Links" DIV doesn't have many links in it, it doesn't affect the image because it's bottom doesn't reach the top of the image. This will become a major problem if I add more links on the left, which I plan to do. I hope its as clear as possible.
In this image, the dashed line shows where it is always being aligned, the arrow points to where it should be aligned.
http://www.dumpsterdoggy.com/images/Image1.gif
<html><head><title>Dumpster Doggy</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="javascript/dumpster.js"></script>
<script type="text/javascript" src="javascript/doggy.js"></script>
<link rel="stylesheet" type="text/css" href="css/doggystyle.css"></head><body onload="loadContent('ojs')">
<img src="images/long_top.gif" alt="Dumpster Doggy Logo" height="213" width="720">
<div id="ddnav"><h1>Links</h1><a href="index.php?p=hm">Dumpster Home</a><a href="index.php?p=abt">About This Site</a><a href="index.php?p=wdd">Web Design & Development</a><a href="index.php?p=ojs" id="currentLink">Open Source JavaScript</a><a href="javascript:contactPage();" class="bottomLink">Contact Us</a></div>
<div id="ddlinks">
<h2>External Links</h2>
<a href="http://www.pinkish-black.com">
<img src="images/links/pbblinkie2.gif" title="Pinkish-Black" alt="Pinkish-Black Logo">
</a>
<a href="http://www.degradationhell.com">
<img src="images/links/dh.gif" title="Degradation Hell" alt="Degradation Hell Image" width="170">
</a>
<a href="http://www.codingforums.com">
<img src="images/links/codingforums.gif" title="Coding Forums" alt="Coding Forums Logo">
</a>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.dumpsterdoggy.com/css/doggystyle.css">
<img src="images/links/vcss.png" title="This page uses Valid CSS" alt="Valid CSS">
</a>
<a href="http://validator.w3.org/check?uri=referer">
<img src="images/links/valid-xhtml10.png" title="This page uses Valid XHTML" alt="Valid XHTML">
</a>
<span>
These sites are entirely independent of Dumpster Doggy.
</span>
</div>
<div id="ddmain">
<h1>Open Source JavaScript</h1>
<p>
This is a page to demo and share some JavaScripts that I have
created.
</p>
<dl>
<dt>
<a href="javascript:void(0)">
<img src="images/open_source/AACimage.gif" alt="XML Calendar" title="XML Calendar" width="250">
</a>
</dt>
<dd>
This is a script that creates a calendar and allows for
custom XML files to be loaded to highlight certain dates.
When the dates are hovered over, a box appears displaying
some text and an optional link for that date. In my example
I have a drop down box that will load different XML files
changing what dates are loaded into the calendar. If this
is something of no interest, it is not needed.
</dd>
<dd>
<ul>
<li><b>XML Calendar</b></li>
<li>Version: 2.0</li>
<li><a href="javascript:void(0)">View Demo</a></li>
<li><a href="javascript:void(0)">Download All Files (zip file)</a></li>
</ul>
</dd>
</dl>
</div>
<div id="ddlinkbar"><span>Related Links:</span><a href="index.php?p=hm">Dumpster Home</a><a href="index.php?p=wdd">Web Design & Development</a> </div>
<div id="ddcopyright">© 2006 DumpsterDoggy.com version 1.0, all rights reserved.</div>
</body></html>
BODY {
margin: 0% 10% 0% 0%;
padding: 0;
color: #000000;
background: #ACDCFB url('../images/gradient.gif') top repeat-x;
font-family: tahoma,sans-serif;
}
A {
color: #0000FF;
background-color: inherit;
}
A:active {
color: #0000FF;
background-color: inherit;
}
A:visited {
color: #0000FF;
background-color: inherit;
}
DD {
clear: none;
display: block;
padding: 1ex 8ex 1ex 6ex;
font-size: 90%;
text-align: justify;
line-height: 135%;
border-top: 3px double #73B5DE;
border-left: 2px solid #73B5DE;
}
DD UL {
margin: 0;
padding: 0;
border: none;
}
DL {
display: block;
margin: 0;
padding-top: 0;
padding-right: 40px;
padding-bottom: 1ex;
border-left: 2px solid #73B5DE;
}
DT {
display: block;
float: left;
clear: right;
padding-left: 2ex;
padding-right: 2ex;
}
DT IMG {
display: block;
padding: 1ex;
color: inherit;
background-color: #FFFFFF;
border: 1px solid navy;
}
H1 {
margin: 0;
padding-left: 8px;
background: #73B5DE url('../images/small_grad.gif') left repeat-x;
color: #FFFFFF;
font-family: "courier new",monospace;
}
H2 {
margin: 0;
padding: 0 8px;
background: #73B5DE url('../images/small_grad.gif') left repeat-x;
color: #FFFFFF;
font-family: "courier new",monospace;
}
LI {
margin-left: 5ex;
line-height: 150%;
}
P {
margin: 0;
padding: 2ex 40px 2ex 2ex;
border-left: 2px solid #73B5DE;
text-align: justify;
line-height: 125%;
}
P IMG {
display: inline;
padding: 2px 2px;
color: inherit;
background-color: #ACDCFB;
border: 1px solid navy;
}
P IMG.leftSide {
margin: 1px 7px 1px 0;
float: left;
}
P IMG.rightSide {
margin: 1px 0 1px 7px;
float: right;
}
UL {
margin: 0;
padding-left: 4ex;
border-left: 2px solid #73B5DE;
padding-bottom: 2ex;
}
#ddnav {
display: block;
padding: 0;
margin-left: 15px;
width: 180px;
float: left;
clear: left;
color: #000000;
background-color: #B6E6FF;
font-size: 80%;
}
#ddnav A {
display: block;
padding: 1px 8px;
border-left: 3px double #73B5DE;
color: inherit;
background-color: #B6E6FF;
}
#ddnav #currentLink {
color: navy;
background-color: inherit;
text-decoration: none;
}
#ddnav #currentLink:hover {
color: inherit;
background: inherit;
}
#ddnav A:hover {
color: navy;
background-color: #ACDCFB;
}
#ddnav .bottomLink {
padding-bottom: 6px;
border-bottom: 3px double #73B5DE;
}
#ddmain {
max-width: 700px;
margin: 0 auto 0 210px;
color: #000000;
background: #B6E6FF url('../images/slash_dot_back.jpg') right repeat-y;
}
#ddmain A {
color: #0000FF;
background-color: inherit;
}
#ddmain A:hover {
color: navy;
background-color: inherit;
border-bottom: 1px solid navy;
}
#ddlinkbar {
max-width: 680px;
margin: 0 auto 0 210px;
padding: 2px 2px 3px 2ex;
color: #000000;
background-color: #B6E6FF;
border-top: 3px double #73B5DE;
border-bottom: 3px double #73B5DE;
border-left: 2px solid #73B5DE;
font-size: 90%;
}
#ddlinkbar A {
display: block;
float: left;
clear: right;
padding-right: 1ex;
}
#ddlinkbar A:hover {
color: navy;
background-color: inherit;
text-decoration: none;
}
#ddlinkbar .bottomLink {
}
#ddlinkbar SPAN {
display: block;
float: left;
clear: right;
padding-right: 1.5ex;
}
#ddcopyright {
font-size: 80%;
color: #666666;
background-color: inherit;
margin: 0 auto 0 210px;
padding-left: 2ex;
max-width: 680px;
}
#ddlinks {
padding: 0;
margin-top: 15px;
margin-left: 15px;
width: 180px;
float: left;
clear: left;
color: #000000;
background-color: #B6E6FF;
font-size: 80%;
}
#ddlinks IMG {
margin: 0;
float: left;
display: block;
padding: 4px 2px 4px 5px;
border: 0;
border-left: 3px double #73B5DE;
color: inherit;
background-color: inherit;
}
#ddlinks SPAN {
width: 170px;
margin: 0;
padding: 2px 4px;
float: left;
display: block;
border-left: 3px double #73B5DE;
border-bottom: 3px double #73B5DE;
font-size: 80%;
text-align: center;
color: #999999;
background-color: inherit;
}
Here is a link to the page. (http://www.dumpsterdoggy.com/index.php?p=ojs)
Here is a link to the CSS file. (http://www.dumpsterdoggy.com/css/doggystyle.css)