hybrid kill3r Posted December 21, 2012 Share Posted December 21, 2012 (edited) I have a main banner for a template that I am designing. I want the navigation div to overlap the banner by half the height of the navigation bar... basically, the middle of the nav bar would align with the bottom of the banner. Here's an example of what I mean. How do I achieve this? Edited December 21, 2012 by Hybrid Kill3r Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 21, 2012 Share Posted December 21, 2012 (edited) I tested to make sure negative margins work in IE7 so should be fine from then on. <!doctype html><html><head><title>Overlap</title> <style> #banner { margin: 0 auto -15px; width: 500px; height: 200px; border: 1px solid #000000; background: #c0c0c0; text-align: center; font-size: 3em; overflow: hidden; } #nav { margin: 0 auto ; width: 450px; height: 30px; border: 1px solid #cfcfcf; background: #f0f0f0; text-align: center; position: relative; } #content { margin: 10px auto; width: 900px; height: 500px; border: 1px solid #000000; background: transparent; color: #ffffff; text-align: center; } </style></head><body><div id="banner">Banner</div><div id="nav">Nav</div><div id="content">Content</div></body></html> Definitely this is not necessary, but I personally would put a wrapper around the two overlapping elements. Example: <body><wrapper><bannerNavWrapper><banner></banner><nav></nav></bannerNavWrapper><content></content><wrapper></body> Edit: I updated the CSS, was playing and found this is the best way to show the data. Keeps the banner from overflowing, the banners contents from overlapping. You don't need the overflow hidden but I like it. Edited December 21, 2012 by DarkxPunk Link to comment Share on other sites More sharing options...
manojnaanak Posted December 22, 2012 Share Posted December 22, 2012 try this one... <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>.wrapper{ margin:0 auto; width:960px; padding:10px;}.BanDiv{ position:relative; width:500px; height:200px; border:1px solid #999; margin:auto}.SecnDiv{ position:absolute; width:420px; height:40px; border:1px solid #999; bottom:-20px; background-color:#333;left:40px; color:#fff}.content{ width:940px; height:555px; margin:auto; border:1px solid #999}</style></head><body> <div class="wrapper"> <div class="BanDiv"> Banner <div class="SecnDiv"> Navigation </div> </div> <div class="content"> your content goes here </div></div></body></html> Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 22, 2012 Share Posted December 22, 2012 That would work, but I prefer to stay away from positioning like that since on some view ports and devices positioning gets wacky. Negative margins is a legitimate and sure thing! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now