PDA

View Full Version : Div Positioning gone whack


wghanson
02-06-2012, 02:35 PM
Hey everyone. I am new here and have been floating around the forums for about a week looking for the right answer. I am having a hard time aligning my div tag correctly in dreamweaver. I try to use absolute positioning, padding, etc. but when I preview the page in the browser, the tag will be in a random spot on the page. My background has a box that I want the div to align to that will contain text for "news."

Any suggestions?


--------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background: url(bg%20test.jpg) top center no-repeat;
text-align: center;
}
.navbar {
font-size: 24px;
color: #000000;
font-family: calibri, Calibri, "Calibri Bold";
text-align: center;
}
.news {
font-family: calibri;
font-size: 16.5px;
float: none;
text-align: left;
}
</style>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_effectHighlight(targetElement, duration, startColor, endColor, restoreColor, toggle)
{
Spry.Effect.DoHighlight(targetElement, {duration: duration, from: startColor, to: endColor, restoreColor: restoreColor, toggle: toggle});
}
</script>
</head>

<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="1">
<tr class="navbar">
<td bgcolor="#BBA34E" onmouseover="MM_effectHighlight(this, 600, '#BBA34E', '#FDFFD3', '#FDFFD3', false)" onmouseout="MM_effectHighlight(this, 500, '#FCFFD3', '#BBA34E', '#BBA34E', false)">HOME</td>
<td bgcolor="#BBA34E" onmouseover="MM_effectHighlight(this, 600, '#BBA34E', '#FDFFD3', '#FDFFD3', false)" onmouseout="MM_effectHighlight(this, 500, '#FCFFD3', '#BBA34E', '#BBA34E', false)">ROSTER</td>
<td bgcolor="#BBA34E" onmouseover="MM_effectHighlight(this, 600, '#BBA34E', '#FDFFD3', '#FDFFD3', false)" onmouseout="MM_effectHighlight(this, 500, '#FCFFD3', '#BBA34E', '#BBA34E', false)">SCHEDULE</td>
<td bgcolor="#BBA34E" onmouseover="MM_effectHighlight(this, 600, '#BBA34E', '#FDFFD3', '#FDFFD3', false)" onmouseout="MM_effectHighlight(this, 500, '#FCFFD3', '#BBA34E', '#BBA34E', false)">CONTACT</td>
<td bgcolor="#BBA34E" onmouseover="MM_effectHighlight(this, 600, '#BBA34E', '#FDFFD3', '#FDFFD3', false)" onmouseout="MM_effectHighlight(this, 500, '#FCFFD3', '#BBA34E', '#BBA34E', false)">NEWS/ ARCHIVE</td>
</tr>
</table>
<p><br />
<br />
</p>
<div class="news" id="news">
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

Corrosive
02-06-2012, 03:16 PM
Yes, ideally you need to step away from this project and get the basics of CSS positioning and pageflow down. Using all those empty paragraph tags to lay out your design is a road to disaster. Try this; http://htmldog.com/