• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

CSS alternative to Frames?

T

TechBoyJK

Lifer
I'm working on a web app that includes a wysiwyg html/css editor. The idea is that people can use the editor to create a webpage. Seems simple enough.

The trick is that I want all webpages created to have a small header at the top. Basically a 15-20px tall navigation strip. Currently, I have it setup so that people can create pages using the editor, but as it is now, the header is simply inserted as an 'included document' when they view the page they created.

Depending on the complexity of the page they make, they CSS, and formatting of the banner could affect how their page is displayed. Even as simple as pushing their content down 15pixels and mis-aligning content they may have set against their background. I'd also like to try and prevent user code from affecting how the header is rendered.

I'm hoping there is a way to seperate the rendering of the header and the user content in the browser. Basically, I'd like the css rendering of the user's content to start BELOW the header, rather than the header being combined with the user content. If a user creates a page that has their own header and it's set to be fixed to the top, it would basically cover up my header. I'm hoping that any element they would fix to the top would be fixed BELOW the header I insert.

This almost seems like a job for 'html frames'. With HTML frames, I could basically split the page into two rendered browser pages. Is there a CSS alternative to this?
 
How about AJAX? Sounds like you pretty much just want to load one page from another. Issues are going to arise with absolute positioning.
 
If you can set all the properties of everything in the header with "!important", that should stop user CSS code from modifying your header.
 
Ken thanks; How would it affect positioning though? What if they have their own header at top and it's set to absolute at the top? With two frames, I could have my header in one frame, and the second frame would be their content. Since they would be two different browser windows, technically, neither would interfere with the other.
 
If you stick their content in a div, set with "position: relative !important", I believe that would force any floating objects to be relative to that div. However, they could still use negative numbers to stick their own header on top of yours or something.

If your page was just the header and an iframe, that would contain them.
 
iFrame sounds about right, sadly. Is this running through some kind of scripting lang? You could regexp match the css rules you don't want overwritten and strip them.

You could also specify a high z-index so that if they try to render above, it will not work.
 
Last edited:
question is.. aren't iFrames officially deprecated and potentially a problem for modern browsers? That's why I'm looking for an alternative..
 
Ok I'm just going to use iFrames. It's not deprecated at all.. Gmail uses it heavily and HTML5 is going to have expanded features/switches for it.
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top