CSS Forum

**mrflume** · 02:41 PM

Ok, so let me give you an example of what I'm talking about. I'm piecing together a website in Dreamweaver and I have an image that goes across the top of the "header" div and then a side image below it to the left with a flash swf in the middle and then a side image on the right of that. What's wierd is initially when I dropped in the swf it added like 5 pixels of white space between the image on the left side of it. (The header div IS the proper dimensions to fit all my images perfectly) So basically my first instinct was to drop my swf into a seperate div and fine tune it's relative positioning to close up that gap. What I want to know is do alot of you run into these kinds of things in Dreamweaver? I feel like it's wrong or something to make up for that whitespace when Dreamweaver shouldn't have put it there in the first place...but then again when I preview it in the browsers it looks fine the way I did obviously because I used relative positioning to position the flash swf correctly so there were no gaps. Any helpful suggestions or comments would be great. Thanks!

**LadynRed** · 09-15-2008, 03:17 PM

Quote:

What's wierd is initially when I dropped in the swf it added like 5 pixels of white space between the image on the left side of it.

Did you zero out the default margins and padding ???

That being said, you simply can NOT rely on DW's internal viewer to be accurate, because to date, it's not. It's better than it was pre-CS3, but the only way you can see what is REALLY going on is to preview in the browser - and preview in more than one browser too.

**mrflume** · 09-15-2008, 03:26 PM

on my header div the default is "same for all" for padding and margins but the boxes are empty...should I put 0's in there anyway?

**LadynRed** · 09-15-2008, 03:28 PM

It is always a good idea to level the playing field and zero out margins and padding on the body and all major elements you'll be using. It'll save a lot of hair-pulling.

**mrflume** · 09-15-2008, 03:41 PM

I have my header and navigation setup perfectly in dreamweaver and when i test it in the browser the side bar on the right appears in the middle of the page and the navigation is pushed down below it. It always seems like images on the right side of the page always mess things up on me. I was thinking about just throwing it in a div and floating it right? Is this what I should do? but I feel like it seems pointless to do that because logically they should all sit neatly with each other on the same plane.

**LadynRed** · 09-15-2008, 03:44 PM

I can't tell you what I'd do without seeing all the code.

Floating is most likely your best bet, but without actually seeing how you've got things laid out, I can't make any constructive suggestions. Floats are usually the better way to do things when it comes to a columnar layout though.

**mrflume** · 09-15-2008, 03:49 PM

HTML Code

Code:

<!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=ISO-8859-1" />
<title></title>
<link href="layout.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="wrapper">

	<div id="header">
  	<img src="http://www.webmaster-talk.com/images/steeldoorarmor4imgrdy_01.gif" width="950" height="37" /><img src="http://www.webmaster-talk.com/images/steeldoorarmor4imgrdy_02.gif" width="53" height="366" />
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="844" height="366">
        <param name="movie" value="header.swf" />
        <param name="quality" value="high" />
        <embed src="header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="844" height="366"></embed>
      </object>
      <img src="http://www.webmaster-talk.com/images/steeldoorarmor4imgrdy_04.gif" width="53" height="366" />
	  </div>

<div id="nav">
<img src="http://www.webmaster-talk.com/images/steeldoorarmor4imgrdy_05.gif" width="158" height="73" /><img src="http://www.webmaster-talk.com/images/steeldoorarmor4imgrdy_06.gif" width="86" height="73" /><img src="http://www.webmaster-talk.com/images/steeldoorarmor4imgrdy_07.gif" width=	"20" height="73" /><img src="http://www.webmaster-talk.com/images/steeldoorarmor4imgrdy_08.gif" width="86" height="73" /><img src="http://www.webmaster-talk.com/images/steeldoorarmor4imgrdy_09.gif" width="23" height="73" /><img src="http://www.webmaster-talk.com/images/steeldoorarmor4imgrdy_10.gif" width="148" height="73" /><img src="http://www.webmaster-talk.com/images/steeldoorarmor4imgrdy_11.gif" width="19" height="73" /><img src="http://www.webmaster-talk.com/images/steeldoorarmor4imgrdy_12.gif" width="78" height="73" /><img src="http://www.webmaster-talk.com/images/steeldoorarmor4imgrdy_13.gif" width="20" height="73" /><img src="http://www.webmaster-talk.com/images/steeldoorarmor4imgrdy_14.gif" width="58" height="73" /><img src="http://www.webmaster-talk.com/images/steeldoorarmor4imgrdy_15.gif" width="24" height="73" /><img src="http://www.webmaster-talk.com/images/steeldoorarmor4imgrdy_16.gif" width="140" height="73" /><img src="http://www.webmaster-talk.com/images/steeldoorarmor4imgrdy_17.gif" width="90" height="73" />
</div>
 
</div>
</body>
</html>

CSS code

Code:

/* CSS Document */
body {
	background-color: #FFFFFF;
	padding: 0;
	text-align: left;
	margin: 0;
}
#wrapper {
	position:relative;
	width:950px;
	height:auto;
	z-index:1;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
#header {
	width:950px;
	height:403;
	z-index:2;
	position: relative;
	margin: 0px;
	padding: 0px;
	text-align: center;
	left: 0px;
	top: 0px;
}
#nav {
	position:relative;
	width:950px;
	height:73px;
	z-index:2;
	margin: 0px;
	padding: 0px;
}

**LadynRed** · 09-16-2008, 05:14 PM

Well, the image is in the center of the page because you have text-align: center on everything. It's doing exactly what you told it to do - putting it in the middle.

You do not need the position: relative on anything except #wrapper, and all the z-indexing is completely unnecessary. The top:0 left: 0 on #header isn't necessary either, that's going to be the default position in the normal document flow.

To put that image to the left of the swf, float it right, but make sure the floated element goes in your code before the non-floated element.

You really shouldn't use images for navigation like that, it's inaccessible. Better to use real text, a background image, and put it all in an unordered list.