Darkmatter5 Posted May 14, 2009 Share Posted May 14, 2009 I've been experimenting with making round edged divs and I got it working, but with my current code the divs displayed below the rounded div are being overlapped by the round edged div. Attached is a screen shot of the output. Here's my html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="verify-v1" content="b9XukIhbqIeyVH3ohFrrSqcFNNoE4GfQt8uCzrZ3k80=" /> <meta name="description" content="Video game and movies trading" /> <meta name="keywords" content="360,wii,ps2,ps3,xbox,dvd,nintendo,sony,microsoft,video game,video games,movie,movies,trading,video,entertainment" /> <meta name="author" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>V.E.I.N. - "Where the thumb meets the controller"</title> <link href='styles/white_config.css' rel='stylesheet' type='text/css'> <link href='styles/white_divs.css' rel='stylesheet' type='text/css'> </head> <body> <div id="wrap"> <div id="header">header</div> <div id="status"> <div id="theme1" class="roundedBox" style="float: left; width: 175px; height: 100%; padding: 0 1em 0 1em;"> <div class="corner topLeft"></div> <div class="corner topRight"></div> <div class="corner bottomLeft"></div> <div class="corner bottomRight"></div> </div> </div> <div id="navcontainer">navcontainer</div> <div id="content">content</div> </body> </html> Here's the CSS file #wrap { width: 1000px; /*min-height: 100%;*/ position: relative; padding-left: 5px; padding-right: 5px; margin: 0 auto; background-color: White; -moz-opacity: 0.95; filter: alpha(opacity=95); opacity: .95; } #header { position: relative; height: 70px; width: 100%; /*border-bottom: 1px solid;*/ /*background-color: gray;*/ } #status { height: 100px; width: 100%; /*border-bottom: 1px solid;*/ /*background-color: red;*/ } #navcontainer { line-height: 2.5em; height: 30px; width: 100%; border-bottom: 1px solid; background-color: fuchsia; } #content { padding: 1em; /*background-color: blue;*/ } /*- Rounded-cornered divs -*/ .roundedBox { position: relative; padding: 11px; margin: 10px 0; } /*- All the corners -*/ .corner { position: absolute; width: 11px; height: 11px; } /*- Each corner -*/ .topLeft { top: 0; left: 0; background-position: -1px -1px; } .topRight { top: 0; right: 0; background-position: -13px -1px; } .bottomLeft { bottom: 0; left: 0; background-position: -1px -13px; } .bottomRight { bottom: 0; right: 0; background-position: -13px -13px; } /*- Theme 1 - White -*/ #theme1 { background-color: #2B3349; } #theme1 .corner { background-image: url(../images/borders/corners-theme1.png); } So as you can see from the screen shot, the navcontainer div doesn't display below the status div enough to display correctly. I hope that was all the code you might need to help troubleshoot! [attachment deleted by admin] Link to comment https://forums.phpfreaks.com/topic/158144-help-with-css-defined-divs-overlapping/ Share on other sites More sharing options...
TheFilmGod Posted May 16, 2009 Share Posted May 16, 2009 image of the corner shoudl have alpha transparency so the things at the bottom can be shown through. PNG is the best solution. Link to comment https://forums.phpfreaks.com/topic/158144-help-with-css-defined-divs-overlapping/#findComment-835114 Share on other sites More sharing options...
stewart Posted May 17, 2009 Share Posted May 17, 2009 Indeed a png would be the best solution, but not always needed if a solid background is had. And of course IE6 doesn't like png transparency, like the bastard child it is. Either way it looks like the container extends down a bit and would still overlap the other element. Shouldn't you just add a bit of a bottom margin to it (theme1)? It should push that other element down. Link to comment https://forums.phpfreaks.com/topic/158144-help-with-css-defined-divs-overlapping/#findComment-836009 Share on other sites More sharing options...
jlhaslip Posted May 18, 2009 Share Posted May 18, 2009 Clear the floats. Link to comment https://forums.phpfreaks.com/topic/158144-help-with-css-defined-divs-overlapping/#findComment-836177 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.