Forums

Franz

Lead developer

From: Germany

Registered: 2008-05-13

Posts: 3,755

Website

Sliding doors squared

I recently found this blog article on sliding doors squared and wanted to hear your opinion on this.

---

fluxbb.de | develoPHP

"As code is more often read than written it's really important to write clean code."

Paul

Developer

From: Wales, UK

Registered: 2008-04-27

Posts: 1,623

Re: Sliding doors squared

An old idea.  Thats been one of the standard ways of doing flulid rounded corners for a very long time.   The downside is a bunch of empty divs.

If at all possible its better to try and write the markup to allow for this technique with less extra markup.  For example

<div class="module">
    <div class="module-inner">
        <h2><span>Heading</span</h2>
        <p>Some content</p>
     </div>
</div>

The h2 and nested span give you the top corners and the two wrapping divs give you the bottom corners.  The nested span is a good idea anyway for various reasons so the only extra markup is the nested div.  If you want to avoid the complexity of negative margins you can do this instead

<h2><span>Heading</span</h2>
<div class="content">
    <div class="content-inner">
        <p>Some content</p>
     </div>
</div>

---

The only thing worse than finding a bug is knowing I created it in the first place.

Franz

Lead developer

From: Germany

Registered: 2008-05-13

Posts: 3,755

Website

Re: Sliding doors squared

Thank you, Paul.

---

fluxbb.de | develoPHP

"As code is more often read than written it's really important to write clean code."

Mpok

Member

From: France

Registered: 2008-05-12

Posts: 302

Re: Sliding doors squared

An old idea.  Thats been one of the standard ways of doing flulid rounded corners for a very long time.

Indeed. But u forgot to mention that WAS a GOOD way...
Globally, all the "sliding doors" programming are a GREAT improvement to css design.
But ur markup above is also great (used myself).