www.webdeveloper.com
Results 1 to 9 of 9

Thread: I think I messed up Negative Margins

  1. #1
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004

    I think I messed up Negative Margins

    Yup. Somehow, some way, I think I did.

    I can't post a link, since my computer is borken, and I can't zip the whole thing up, since I've got some PHP mixed in for my styles, but I can post the markup and css.

    The problem is that the sidebar is not floating as it should be. It works just fine in everything but IE. When I first started and there was no styling it was copacetic -- but now it isn't, and I can't for the life of me figure out why.

    Also, the images aren't being zipped, either.
    Attached Files Attached Files
    Thousand different paths
    So many sterile ends
    I chose the Devil's path

    Never shall the sun kiss my face
    And caress me with it's burning light
    For I dwell in the shadows
    And sleep side by side with death

  2. #2
    Join Date
    Jul 2004
    Location
    Aruba
    Posts
    19
    Hi Paul,

    If I'm correct the side bar should be floating on top, right?

    If that's the case the you have to change the position. you have the side bar info last it should be positioned before the content.

    here's what I mean:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head><title>Website</title>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta name="author" content="Paul J. Rakoske Jr." />
    <meta name="copyright" content="Copyright (c) 2004 Paul J. Rakoske Jr." />
    <link rel="stylesheet" type="text/css" href="default.css" />
    </head>
    <body>
    <div id="wrapper">
    <div id="header"><h1>Website</h1></div>

    <div id="global-nav">
    <ul>
    <li><a href="">Main</a></li>
    <li><a href="">Blog Archive</a></li>
    </ul>
    </div>
    <div id="side-bar" style="width: 208; height: 855">
    <h2>Side Bar</h2>
    <ul>
    <li><a href="">Home</a></li>

    <li><a href="">Contact</a></li>
    </ul>
    <h3>List O’ Blogs</h3>
    <ul>
    <li><a href="http://www.ryanbrill.com/" title="Ryan Brill">RyanBrill.com</a></li>
    <li><a href="http://cmm.sonarocabinets.com/jona/" title="Jonathan Fenocci">Blue Panther</a></li>

    <li><a href="http://www.thenamesdan.com/" title="Danial Tomasiewicz">The Name’s Dan</a></li>
    <li><a href="http://www.1976design.com/blog" title="Dunstan Orchard">1976 Design</a></li>
    <li><a href="http://www.meyerweb.com/" title="Eric Meyer">meyerweb</a></li>
    <li><a href="http://www.zeldman.com/" title="Jeffrey Zeldman">The Daily Report</a></li>
    <li><a href="http://www.binarybonsai.com/" title="Michael Heilemann">Binary Bonsai</a></li>
    <li><a href="http://www.photomatt.net/" title="Matthew Mullenweg">Photo Matt</a></li>

    <li><a href="http://www.stuffandnonsense.co.uk" title="Andy Clarke">Malarkey</a></li>
    <li><a href="http://www.airbagindustries.com/" title="Greg Storey">Airbag</a></li>
    <li><a href="http://www.7nights.com/asterisk/" title="D. Keith Robinson">Asterisk*</a></li>
    <li><a href="http://www.sidesh0w.com/" title="Ethan Marcotte">sidesh0w.com</a></li>
    <li><a href="http://www.9rules.com/whitespace/" title="Paul Scrivens">Whitespace</a></li>
    <li><a href="http://www.andybudd.com/" title="Andy Budd">Andy Budd</a></li>

    <li><a href="http://www.mezzoblue.com/" title="Dave Shea">mezzoblue</a></li>
    <li><a href="http://www.cameronmoll.com/" title="Cameron Moll">Authentic Bordom</a></li>
    <li><a href="http://www.whatdoiknow.org/" title="Todd Dominey">What Do I Know</a></li>
    <li><a href="http://www.simplebits.com/" title="Dan Cederholm">SimpleBits</a></li>
    <li><a href="http://www.stopdesign.com/" title="Douglas Bowman">Stopdesign</a></li>
    <li><a href="http://www.hicksdesign.co.uk/journal/" title="Jon Hicks">// hicksdesign journal</a></li>

    <li><a href="http://www.superfluousbanter.org/" title="Dan Rubin">SuperfluousBanter</a></li>
    <li><a href="http://www.shauninman.com/" title="Shaun Inman">ShaunInman.com</a></li>
    <li><a href="http://www.funkwit.com/" title="Paul Jamie Michael Cowan">funkwit.com</a></li>
    <li><a href="http://www.thesneeze.com/" title="Steven ——">The Sneeze</a></li>
    <li><a href="http://www.littleyellowdifferent.com/" title="Ernie ——">little. yellow. different.</a></li>
    <li><a href="http://www.mightygirl.net/" title="Maggie Mason">Mighty Girl</a></li>

    <li><a href="http://belledejour-uk.blogspot.com/" title="London Call Girl">Belle de Jour</a></li>
    <li><a href="http://www.defectiveyeti.com/" title="Matthew Baldwin">defective yeti</a></li>
    <li><a href="http://www.allinthehead.com/" title="Drew Mclellan">all in the &lt;head&gt;</a></li>
    <li><a href="http://www.themaninblue.com/" title="Cameron Adams">The Man in Blue</a></li>
    <li><a href="http://www.joshcagan.com/" title="Josh Cagan">Why Don’t I Like You</a></li>

    <li><a href="http://www.robotjohnny.com/" title="John Martz">RobotJohnny.com</a></li>
    <li><a href="http://www.verybigdesign.com/verybigblog/" title="Jen ——">Very Big Blog</a></li>
    <li><a href="http://www.tenth-muse.com/" title="Joelle ——">Tenth Muse</a></li>
    <li><a href="http://www.popculturejunkmail.com/" title="Gael Fashingbauer Cooper">Pop Culture Junk Mail</a></li>
    </ul>
    <hr />
    </div>

    <div id="container">
    <div id="content">

    <div class="title">
    <h2><a href="archive/2004/07/27/" title="Permanent link for this entry">Hendrerit euismod ex duis</a></h2>
    <p>23 July 2004, 5:16 pm | <a href="archive/2004/07/23/short-title.php" title="View and post comments for this entry">Comments (0)</a></p>
    </div>
    <p>El dolore nulla eros exerci dolor veniam ex dolor vero ut vel in nostrud eum. Vero vulputate aliquip odio zzril eu consequat euismod Ut eu feugait velit nonummy blandit facilisis eros dolore facilisi lobortis. Illum in accumsan eum dolore molestie ut facilisis blandit molestie tation minim ullamcorper qui illum praesent praesent luptatum blandit vero sit at facilisis eros. Euismod at et duis commodo nonummy iusto in quis eros sed suscipit erat elit esse vero blandit eu sit dignissim consectetuer te minim eros praesent.</p>
    <p>Hendrerit euismod ex duis duis facilisis ex eros vero hendrerit dolore et duis laoreet at tation ad exerci tincidunt lorem feugait ut ut in. Augue suscipit et quis in iriure hendrerit sed minim eum euismod eum euismod duis in ut dolore eu eros consequat. Nisl feugait luptatum consectetuer dolore illum sit duis nulla aliquip. Vel eros diam veniam dolore facilisis augue diam. Nulla quis blandit vulputate dolor et ea luptatum at minim nonummy facilisi in dolore dolor et aliquip dolore lorem ut augue.</p>

    <p>Suscipit vel duis autem luptatum nulla Ut iriure vulputate nulla delenit minim ea. Nonummy dolor ea ullamcorper lorem esse magna facilisis in minim hendrerit luptatum commodo quis consectetuer euismod autem odio feugait iusto commodo. Ea duis dolor te ut feugait ut dolor ex eu blandit hendrerit in esse facilisi dolor dolor aliquam laoreet. Luptatum magna ea ut feugait vero in blandit vel laoreet te at in in ullamcorper dolore eum elit.</p>
    <hr />
    <div class="title">
    <h2><a href="archive/2004/07/25/" title="Permanent link for this entry">Suscipit vel duis autem</a></h2>
    <p>23 July 2004, 5:16 pm | <a href="archive/2004/07/23/short-title.php" title="View and post comments for this entry">Comments (0)</a></p>
    </div>
    <p>Hendrerit euismod ex duis duis facilisis ex eros vero hendrerit dolore et duis laoreet at tation ad exerci tincidunt lorem feugait ut ut in. Augue suscipit et quis in iriure hendrerit sed minim eum euismod eum euismod duis in ut dolore eu eros consequat. Nisl feugait luptatum consectetuer dolore illum sit duis nulla aliquip. Vel eros diam veniam dolore facilisis augue diam. Nulla quis blandit vulputate dolor et ea luptatum at minim nonummy facilisi in dolore dolor et aliquip dolore lorem ut augue.</p>

    <p>Suscipit vel duis autem luptatum nulla Ut iriure vulputate nulla delenit minim ea. Nonummy dolor ea ullamcorper lorem esse magna facilisis in minim hendrerit luptatum commodo quis consectetuer euismod autem odio feugait iusto commodo. Ea duis dolor te ut feugait ut dolor ex eu blandit hendrerit in esse facilisi dolor dolor aliquam laoreet. Luptatum magna ea ut feugait vero in blandit vel laoreet te at in in ullamcorper dolore eum elit.</p>
    <hr />
    </div>
    </div>


    <div style="clear: both;" />
    </div>
    </body>
    </html>
    It's important to only think about what you desire, not what you fear to achieve your ultimate goal!!

  3. #3
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004
    I could do that, but the whole point of Negative Margins is to keep the sidebar below the content in the source code. This keeps screenreaders and the like from having to read through all of those links to get to the content.

    Originally posted by senobiah
    If I'm correct the side bar should be floating on top, right?
    If you look at the page in a browser other than IE (not sure if you have one), then you'll see the sidebar should be to the left of the content -- instead of blow as it is now.
    Last edited by Paul Jr; 07-29-2004 at 03:25 PM.
    Thousand different paths
    So many sterile ends
    I chose the Devil's path

    Never shall the sun kiss my face
    And caress me with it's burning light
    For I dwell in the shadows
    And sleep side by side with death

  4. #4
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Try changing your styles to this (not all your styles obviously, that'd be stupid, use your common sense, my God some people are thick ):
    Code:
    #container {
    	width: 100%;
    	margin-left: -13.5em;
    	float: right;
    }
    #content {
    	margin-left: 13.5em;
    }
    Every fight is a food fight when you’re a cannibal.

  5. #5
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004
    Woohoo! C'mere so I can give you a hug, man.
    Thousand different paths
    So many sterile ends
    I chose the Devil's path

    Never shall the sun kiss my face
    And caress me with it's burning light
    For I dwell in the shadows
    And sleep side by side with death

  6. #6
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Originally posted by Paul Jr
    Woohoo! C'mere so I can give you a hug, man.
    No, that'd cost waaay too much for just one hug.

    Happy to help.
    Every fight is a food fight when you’re a cannibal.

  7. #7
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004
    Originally posted by lavalamp
    No, that'd cost waaay too much for just one hug.
    Ewwwwwwwww…

    Originally posted by lavalamp
    Happy to help.
    Of course you are; I made a sacrifice for you (for those who don’t know: I killed my dog).
    Thousand different paths
    So many sterile ends
    I chose the Devil's path

    Never shall the sun kiss my face
    And caress me with it's burning light
    For I dwell in the shadows
    And sleep side by side with death

  8. #8
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Originally posted by Paul Jr
    Ewwwwwwwww…
    That's so not what I meant!
    Every fight is a food fight when you’re a cannibal.

  9. #9
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004
    Originally posted by lavalamp
    That's so not what I meant!
    Oh, but I think it is what you meant.


    ***EDIT***
    Incase anyone wants to know what went wrong, I didn’t fully read the Negative Margins article, which is why it didn’t work and I was wondering why it was called Negative Margins when there were no negative margins. So, chalk this one up to my stupidity.
    Last edited by Paul Jr; 07-29-2004 at 05:46 PM.
    Thousand different paths
    So many sterile ends
    I chose the Devil's path

    Never shall the sun kiss my face
    And caress me with it's burning light
    For I dwell in the shadows
    And sleep side by side with death

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles