Fixed header using Group

Fixed header using Group

Fix anything in place you group and name "fixed"

Every little bit helps to keep this site up and running, thank-you.


These effects are not officially part of Web Studio
If you have questions see the custom coding page

<style type="text/css">
#fixed {position:fixed !important; z-index:999 !important; left: 50% !important;
width:1000px !important;
margin-left: -500px;}

Go to the HTML tab in Insert Page HTML select Inside Head
copy/paste this

All we do to for this to work is use a little CSS to overide the inline coding that web studio puts on the page when it makes a group

Drag a box around what you want to have FIXED Go to the Create tab in Group select Group

Once grouped double click on it and name the ID fixed

That's all there is to it for most of you

But let's look at the code, and see what we need to do if we need to change anything

The top line looks like this:
#fixed {position:fixed !important; z-index:999 !important; left: 50% !important;

The ID name
#fixed is the ID name so if we wanted to add more than one to a page
we would need to add say #stayinplace (can be anything but numbers) to that
so it looks like this:

#fixed, #stayinplace {position:fixed !important; z-index:999 !important; left: 50% !important;

then name our new GROUP stayinplace

The group size so it centers

width:1000px !important;
margin-left: -500px;}

When you "group" look at the width

1000px needs to be wider than your group (for most 1000 is enough) if you
set the default width for web studio wider than you may need to make it bigger.
If you do than margin-left needs to be half of the size you use

A Fixed Image

A Fixed Image

Just making an image fixed like the WSnext logo on the left
we do a little different, easier actually.

Put the picture on the page, select it and go to
the HTML tab and in Insert Object HTML select Inside Object
copy/paste this in there


Easy huh?
You see the fade out on the bottom? That's hard to do in other programs
not web studio, just add a fade out png image and bottom:0; to the code like this:

This requires build 22 or above to change the ID

This requires build 22 or above to change the ID


Can't select the group?

Not very often but sometimes you can't select a set of grouped objects in Web Studio for some reason?
If that happens all you do is click on the very top left of the Web Studio window. You'll then see the handles, now select un-group. Then you can do what you like and group the original images again.
Remember to do the ID name again though.

Web Studio • Fixed positioning objects • by Web Studio Next