buzzkill wrote:CodeXP: I really like what you have done. "thinking outside of the box" budump ump, crash. I have just one question for you. fFrst I should start off by telling you that I have a similar layout that was done for 1.1.5. Actually the only thing that is similar is the rounded corners. With tables its a piece of cake. I have been struggling with the conversion of my layout to CSS-P so I can upgrade to 1.2.3. I have not looked at the source but how did you get the rounded corners to work?
Peace, and TIA
Well, for the outer borders there was no other viable solution other than using tables. Of course, if I decided to use a fixed width it would work just fine with only CSS. Also, if I didn't use the shadow effect, but only a "clean" border it would work just fine as well
That being said, all of the inner borders are CSS and it's actually quite easy to do:
Here's the code for the nav bar:
<div class="s_container">
<div class="left_nav_cap"></div>
<div class="right_nav_cap"></div>
<div class="s_nav"><pun_navlinks></div>
</div>
And here's the corresponding CSS:
.s_container{background: url('../img/style/Elegant_blue/center_nav.gif') repeat-x;}
.s_nav{font-weight:bold;font-size:small;white-space:nowrap;height:30px;}
.left_nav_cap{background: url('../img/style/Elegant_blue/left_nav_cap.gif') right no-repeat;height:30px;width:20px;white-space:nowrap;float:left;}
.right_nav_cap{background: url('../img/style/Elegant_blue/right_nav_cap.gif') left no-repeat;width:25px;height:30px;white-space:nowrap;float:right;}
(Hope you don't mind the messy code, I haven't started cleaning it up yet )