CSS in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

Divisions in Web Studio - div backgrounds and CSS

Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

future link

misc css tips 2

DIVISIONS IN HTML
Div or Division in HTML is a section or containor that holds a block of code
They look like this <div> your stuff </div>
They can hold almost anything from text to images and include other divisions inside them
They basically are what is used to layout, position and group elements on a page.

An example would be the text section above, it's in a division

What is a division?

Divisions in Web Studio

HOW WEB STUDIO USES DIVISIONS
Web Studio uses divisions a little different than normally done in modern HTML
It uses one divison for positioning every element on the page and it's layer (z-index)
but for text it adds another division and uses that for the style or look of the text.
All of those divisions are put into another division then that is put into a table to center it all.

Using a division ID in build 22 & 23

WHAT IS AN ID
An HTML ID is the identification of a division or element, you can only have one specific ID name on a page.
They are not like a CLASS that you can use as many times as you like on a page.
You can't start an ID with a number, like 1colordiv but you can add a number on the end like colordiv1
In an HTML page an ID is written ID="colordiv1" but in the CSS they use a hashmark #colordiv1

In build 22 & 23 up we can re-name the ID or add a CLASS

image borders css3 shadows css3 links div backgrounds

Let's take for example the built in "footer Links" and make them into a menu by re-naming the division ID

On the "Insert tab"
in "Links"
select "Footer Links"
to put all your website links on the page

Select the "Footer Links" and go
to "properties" by right clicking or better from a quick access link you make
and re-name the "ID Number"

myfooterlinks

Copy/paste this for the ID Number

Copy/paste this into the HEAD

On the "Html tab"
in "Insert Page HTML"
select "Inside HEAD"
and paste the style

This is the result

In IE9 and normal browsers they will be round and glow when hovered
you can play around with the colors in the code to change the look

You can also use "Edit HTML" to remove the vertical bars, re-name the
links and remove or add your own links if you want to.
The neat thing is all the page links are put into
the "Footer Links" for you by web studio.

Adding a CLASS to a division ID in build 22 & 23

In this example we'll use the division ID web studio puts in an image and add a CLASS onto the end.

WHAT IS A CLASS
Unlike an ID name that can only be used once on a page a CLASS can be used as many times as you like.
We use ID and CLASS to identify an division that we want to apply a style or look to.
In an HTML page an CLASS is written class="colordiv1" but in the CSS they use a period .colordiv1

Put your image on the page "Double Click"
on it and paste the CLASS after the ID

SGROBJ7DDB415122EC17C1" class="caption

In web studio we add the quotes like above

On the "Html tab"
in "Insert Object HTML"
select "After Object"
and type in your
caption

On the "Html tab"
in "Insert Page HTML"
select "Inside HEAD"
and paste the style

" class="caption

Copy/paste this after the ID Number

Copy/paste this into the HEAD

WSnext Home

B25 Mitchel

F4U Corsair

A6M Zero

You can add a link to the image like you always do.
In IE browsers it uses the color in the code for links
but normal browsers use your page link colors

If you want more room for the caption
adjust 20px in padding: 6px 6px 20px 6px;
You can play around with the colors

Adding a CLASS and another division in build 22 & 23

We'll do one more caption this time with a little css3 and put another division inside

" class="caption2

Copy/paste this after the ID Number

Copy/paste this into the HEAD

P-51 Mustang

Copy/paste this in After Object

<DIV class="cap-overlay">
Your caption here
</DIV>

This time we also put
a Division inside the Division
that we use for the over-lay
instead of just typing the caption

Hover the image to see the caption
You can change the border color
but everthing else is pretty well set

You can preview this in web studio but it looks best in a normal browser

Division Backgrounds in Web Studio

I show you how to add backgrounds for text on the paragraph page.

paragraph & text

Images in web studio are put into a division that is the same size as image, but you can add borders and padding.
I show you how to do that on the picture borders page

image borders

Screen wide backgrounds in web studio need to be placed outside of the centering table
I show you how to do that on the banners page.

screen-wide banners

Division backgrounds that get centered with your website you have a couple of options.
For color backgrounds the easiest is to use the built in draw shapes images in the "Draw tab"
but we can do those without any images and more using the HTML Object division we'll look at that next

Full screen background images are a different thing than using divisions and are covered in page backgrounds.
For an image background it's best to use a small image and have it scale to your screen.
I have a add on to do that with here:

full-screen images

Division Backgrounds using an HTML Object

In these examples we'll use the HTML Object's division for background html colors with no images

WHAT IS A HTML OBJECT
In web studio one way to add HTML to your page is by using the HTML Object
You place it on your page and double click on it to get to the editor
It is a division that has the position code built into it for you.

On the "Html tab"
in "Add HTML"
select "HTML Object"

That places this on
on your page
"Double Click"
on it to go to the editor

Press
"OK"
to save

You can click on the HTML object and drag it by the handles to change it's size

Copy/paste this in HTML Object

------------- Color Only -------------

change the backround color

Use any html color name or hex color

color chart

Use px for the border size

------------- Border Outside -------------

change the px size and border color

Copy/paste this in HTML Object

------------- Border Inside -------------

This one includes border-size code that forces
the border inside the division.

Copy/paste this in HTML Object

------------- Border Radius -------------

change the px size for the radius

Copy/paste this in HTML Object

------------- Box Shadow -------------

change the color for the shadow

Copy/paste this in HTML Object

------------- Border Only -------------

change the px size or color

Copy/paste this in HTML Object

you can copy a line from one to another too

Copy/paste this in HTML Object

------------- Opacity -------------

change the opacity number to match - if you want it
less see through - use 50 and 0.5 or 80 and 0.8

Copy/paste this in HTML Object

------------- Circle -------------

make a sqaure object and match
the radius 60px to it's size

The radius and box shadow css requires up to date IE browsers

TIP

In web studio when working with an HTML Object you can make it look like an image just for web studio work
So for colored objects you could use a tiny gif the color of your object for example.

html object as image

TIP

Web Studio uses a special code for the "Footer Links" so if you wanted to use this technique to make a menu that doesn't change when you add Footer Links again to the page.
Insert the Footer Links and use Edit HTML to copy and paste it all into a new text object,
then do the above to that text instead.

CSS in Web Studio 5 - Working with Division backgrounds and css - by Web Studio Next

Thank-you