Textpattern CMS

#1 2006-08-21 22:18:08

nasv

Member

Registered: 2005-11-14

Posts: 22

static orange bar on textpattern.com

I am very curious as how textpattern.com is able to achieve the static orange bar at the top of the site and how that orange bar does not scroll with the rest of the content – I think it is a nice design-touch.

If you can please clarify the technique/code necessary, I would greatly appreciate it.

Thanks,
-Nico

#2 2006-08-22 00:02:29

Mary

Sock Enthusiast

Registered: 2004-06-27

Posts: 6,236

Re: static orange bar on textpattern.com

It isn’t static at all. It sounds like your browser doesn’t understand the html element:

html {
border-top: 15px solid #fc3;
}

?

#3 2006-08-22 00:20:36

nasv

Member

Registered: 2005-11-14

Posts: 22

Re: static orange bar on textpattern.com

Thanks for the quick reply, I am using Internet Explorer 6.0 when I visit textpattern.com and the vertical scrollbar does not even overlap the orange bar at the top of the page (everything except that bar scrolls).

I hope that makes sense – I will give that code a try.

Thanks very much!
-Nicholas

#4 2006-08-22 18:23:20

Pat64

Plugin Author

From: France

Registered: 2005-12-12

Posts: 1,674

GitHub Twitter

Re: static orange bar on textpattern.com

Just for the fun : which kind of browser do you use?

?

---

Patrick.

Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.

#5 2006-08-22 19:25:09

NyteOwl

Member

From: Nova Scotia, Canada

Registered: 2005-09-24

Posts: 539

Re: static orange bar on textpattern.com

I get the same effect with IE6. I has to do with the IE box model interpretation and the following css

html {
border-top: 15px solid #fc3;
}

If that had been applied to the body, then it would scroll within the IE window the same way it does in FF. However as html is the enclosing container IE doesn’t consider it part of the active content of the page and inserts the scrollbar below the border. I don’t know if this behaviour has been fixed in IE7 beta or not.

You can create a similar effect for any CSS compliant browser by creating a fixed position DIV at the top of the document. I did a faux-frames effect with fixed header and footer for my previous site design that used that technique.

---

Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;