CSS in Web Studio Divisions in Web Studio - div backgrounds and CSS![]()
DIVISIONS IN HTML 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 ![]() Using a division ID in build 22 & 23
WHAT IS AN ID In build 22 & 23 up we can re-name the ID or add a CLASS 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" ![]()
Select the "Footer Links" and go
<style type="text/css"> myfooterlinks Copy/paste this for the ID Number Copy/paste this into the HEAD ![]()
On the "Html tab" This is the result
In IE9 and normal browsers they will be round and glow when hovered
You can also use "Edit HTML" to remove the vertical bars, re-name the ![]() ![]() 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 ![]()
Put your image on the page "Double Click" SGROBJ7DDB415122EC17C1" class="caption In web studio we add the quotes like above ![]()
On the "Html tab" ![]()
On the "Html tab"
<style type="text/css"> " class="caption Copy/paste this after the ID Number Copy/paste this into the HEAD ![]() ![]() ![]()
You can add a link to the image like you always do. ![]() 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
<style type="text/css"> " class="caption2 Copy/paste this after the ID Number Copy/paste this into the HEAD ![]() Copy/paste this in After Object
<DIV class="cap-overlay">
This time we also put
Hover the image to see the caption ![]() 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.
Images in web studio are put into a division that is the same size as image, but you can add borders and padding.
Screen wide backgrounds in web studio need to be placed outside of the centering table
Division backgrounds that get centered with your website you have a couple of options.
Full screen background images are a different thing than using divisions and are covered in page backgrounds. ![]() 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
On the "Html tab"
That places this on ![]() ![]()
Press You can click on the HTML object and drag it by the handles to change it's size Copy/paste this in HTML Object
<DIV style="width:100%; height:100%; background:black;"> ------------- Color Only ------------- change the backround color Use any html color name or hex color Use px for the border size ------------- Border Outside ------------- change the px size and border color Copy/paste this in HTML Object
<DIV style="width:100%; height:100%; background:black; ------------- Border Inside -------------
This one includes border-size code that forces Copy/paste this in HTML Object
<DIV style="width:100%; height:100%; ------------- Border Radius ------------- change the px size for the radius Copy/paste this in HTML Object
<DIV style="width:100%; height:100%; background:black; ------------- Box Shadow ------------- change the color for the shadow Copy/paste this in HTML Object
<DIV style="width:100%; height:100%; background:black; ------------- Border Only ------------- change the px size or color Copy/paste this in HTML Object
<DIV style="width:100%; height:100%; you can copy a line from one to another too Copy/paste this in HTML Object
<DIV style="width:100%; height:100%; ![]() ------------- Opacity -------------
change the opacity number to match - if you want it Copy/paste this in HTML Object
<DIV style="width:100%; height:100%; background:black; ![]() ------------- Circle -------------
make a sqaure object and match
<DIV style="width:100%; height:100%; 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 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. CSS in Web Studio 5 - Working with Division backgrounds and css - by Web Studio Next Thank-you |