WordPress.org

1. fifelskik
   Member
   Posted 1 year ago #
   

   I just launched a child theme of twentyeleven at http://DigitalGovGroup.com and I'm having trouble using a negative margin in the div #main. Here's an example of what I'm trying to do on the Mailchimp website: http://connect.mailchimp.com/integrations/go-to-meeting.

   Right now, I'm achieving the affect of rounded corners and 'bumped up' #main area with an image (which is less than ideal).

   I would much rather use this code:
   

   clear:both;
   margin-top: -30px;
   -webkit-border-top-left-radius: 9px;
   -webkit-border-top-right-radius: 9px;
   -moz-border-radius-topleft: 9px;
   -moz-border-radius-topright: 9px;
   border-top-left-radius: 9px;
   border-top-right-radius: 9px;
   box-shadow: 0 0 5px rgba(0,0,0,0.2);
   -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
   -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
   background: #FFF;

   The problem is, the negative margin brings the #main area UNDERNEATH the header, not on top of it. Can anyone help me figure out why? Thanks.

   http://wordpress.org/extend/themes/twentyeleven/

2. faugro
   Member
   Posted 1 year ago #
   

   i think the problem is in z-index, but if you make #page is greater than header, the dropdown menu will be UNDERNEATH the #page.
   so, my suggestion : you must make another # below the header.

3. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #
   

   Try using Firefox with the Firebug add-on for this kind of CSS work.
   http://getfirebug.com/

4. fifelskik
   Member
   Posted 1 year ago #
   

   I've been using Chrome's tool instead of Firebug, but it's pretty much the same type of CSS viewer.

   The main issue is that using a negative top margin (-30) on either #main or #primary brings my content under the header instead of on top of it. I'm sure I'm overlooking something obvious.

   @faugro, sorry, I'm not quite sure what you mean.

5. faugro
   Member
   Posted 1 year ago #
   

   twentyeleven-child > style.css, line 115
   

   header#branding {
   height: 230px;
   min-width: 950px;
   }

   reduce the height about 30px
   remove background from style.css line 109

   create new # below #branding, with 30px height, to replace those code with yours, but don't forget the margin. For example :

   [code moderated - please use the pastebin]

   define all those code in header.php after </header>
   

   <div id="brandig-bottom"><div id="brandig-bottom-with-border-radius"></div></div>

   good luck

6. fifelskik
   Member
   Posted 1 year ago #
   

   Thanks, @faugro. I'm installing a test site on my server right now to try out the style changes above on a duplicate site that is not currently live. I'll report back;)

7. fifelskik
   Member
   Posted 1 year ago #
   

   It worked! (I grabbed your code before they deleted it) http://www.digitalgovgroup.com

   The only change to your code was that I had to add a height to the second # in order to be able to see the white space. Thanks so much for your help - I spent HOURS trying to figure this one out.

8. faugro
   Member
   Posted 1 year ago #
   

   you are welcome.

   well done, it look great.

Topic Closed

This topic has been closed to new replies.