Hello, I know negative magins are not good practice and you want to avoid using them.
I was wondering if you can help me with this situation.
I am using a DW premade layout fixed, 1 column, header and footer.
I have a footer image that fades up into the content area. I want the content area to overlap the footer image a little. Now I am able to do it with a negative margin and it looks good. But what would be an alternative so I did not have to use negative margins? any ideas?
Thanks
Can you provide a link? There are a couple ways to do this depending on your design.
One is you can certainly use two images instead of one. Have your footer and content area together with no spacing in between and have the bottom part of your footer graphic in the footer and the top half of it in the content area as a background that is aligned to the bottom. Thats just one way, I am sure there is many ways to do this including AP Divs, etc.
sorry don't have link.
so your saying take the image out and slice it in half. Then bring it back in DW use bottom part of the image as bg in the footer and top part of image as bg in the content area?
How would you align bg to just the bottom?
And would I still be able to change the bg color of the content area, even if I am using a bg image at just the bottom?
Seaside333 wrote:
Hello, I know negative magins are not good practice and you want to avoid using them.
Have a look here http://www.communitymx.com/content/article.cfm?cid=b0029
Gramps
Seaside333 wrote:
so basically when it comes to negative margins, you want to avoid them if you can, but if you need to use them its ok, just make sure your site looks good in all browsers...is that a right assumption, or what does everyone think about negative margins?
I don't know who gave the advice to avoid negative margins, I have been using them them since starting with CSS about 12 years ago. Sure the site should look good in all browsers, but that applies to all styling aspects.
Gramps
Have a look at the following document which validates as HTML5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {width: 980px; margin: auto;}
#content {width:100%; float:left; margin-right:-200px;}
#sidebar {width:200px; float:left;}
ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;} /* the clincher */
</style>
</head>
<body>
<div id="content">
<h1>Main content in here</h1>
<ul>
<li class="col1">Eggs</li>
<li class="col1">Ham<li>
<li class="col2 top">Bread<li>
<li class="col2">Butter<li>
<li class="col3 top">Flour<li>
<li class="col3">Cream</li>
</ul>
</div>
<div id="sidebar"> <p>I’m the Sidebar! </p> </div>
</body>
</html>
Gramps
Ooops! Humble Pie, the list does not work in IE<=7. Must find another way for the list until such time that these browsers are not main stram any more, see here http://www.w3schools.com/browsers/browsers_explorer.asp
Gramps
North America
Europe, Middle East and Africa
Asia Pacific