Skip navigation
Seaside333
Currently Being Moderated

Negative Margin Alternative??

Apr 12, 2012 8:25 AM

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

 
Replies
  • Currently Being Moderated
    Apr 12, 2012 8:35 AM   in reply to Seaside333

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 6:45 PM   in reply to Seaside333

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 9:19 PM   in reply to Seaside333

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 9:40 PM   in reply to Seaside333

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 9:49 PM   in reply to Ben Pleysier

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 10:11 PM   in reply to Seaside333

    Another convert

     

    Gramps

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points