close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Content Boxes

Thread began 3/05/2009 5:58 pm by mike271728 | Last modified 4/07/2009 3:21 pm by kevin_d_allen182238 | 3960 views | 12 replies |

mike271728

Content Boxes

Hi
By any chance is there a tutorial on adding content boxes using CSS Sculptor?

ie
In the main content area I want to add a couple of nice content boxes side by side then the rest of the content underneath (or above in some cases) any pointers into achieving this?

Thanks

Mike

Sign in to reply to this post

Ray BorduinWebAssist

Contents are handled in SiteAssist and would not be added to sculptor. If there is a particular page type or look you are going for, post an example... it could be added to site assist.

Sign in to reply to this post

mike271728

Hi
Thanks for the reply Ray.

As an example take your NEW home page you have 3 boxes on it

Help me Choose
Our Community
Whats New?

Basically that sort of idea. I wanted to use Sculptor to be able to control all aspects of colours layout rather than rely on Site Assist only.

Can this be done?

Thanks

Mike

Sign in to reply to this post

Justin Nemeth

In sculptor, you could select a 3 column layout as a starting point, then adjust each column accordingly to the size you want. After that, add a custom div above the contentWrapper. This would give you a larger area above the 3 columns (or boxes if you make then equal width) and should give the basic effect like on the WA home page. The box tab is really powerful in allowing you to add and position custom divs to achieve a more complex layout like you want.

Sign in to reply to this post

mike271728

Hi Thanks for the reply.

Heres another good example of what I meant:

business-broadband/

This sort of site design is pretty common so an abilty to easily create these using wA Extensions such as CSS Scylptor and SA Pro would be fantastic.

Mike

Sign in to reply to this post

Ray BorduinWebAssist

The new version of Site Assist allows you to define your own page types.

You could manually create this content in a SA Pro site, and then save those contents as a page type to use in the future.

So you actually have the ability to add this feature if you own SA Pro, you just have to develop the page once (copy and paste that one if you like it).

Sign in to reply to this post

mike271728

Hi Ray
I have SA Pro is there a tutorial on that way of working?

Thanks

Mike

Sign in to reply to this post

Ray BorduinWebAssist

It should be covered in the help. It works like this, whenever you create a page with Site Asssist pro, it knows what your content area is on that page. So if you change the content, there is an option available to save that content. Once it is saved, it is available in the wizard. Should be pretty straightforward. Give it a try and let us know if you have any problems.

Just go to Insert->WebAssist->SiteAssist Pro->Create page type once you have created a page you would like to save and make available later.

Sign in to reply to this post

Miguel

Ill try to explain it a bit here lets see open a new page on dreamweaver and click on the webassist tools for eric meyers CSS sculptor then select what ever layout you need on the first tab, then click the second tab "BOX".

There you will find a list look on that list for:

ContentWrapper
|
|---> Content

Now click over content and look for the button on the top that has a plus or Add simbol click over it and add under Content a new Div it would be something like this

ContentWrapper
|
|---> Content
.................|---> Div

Rename it to what ever you like i called it LeftBox.

Repeat again selecting the Content on the list and add a new one and so on until you are satisfied

check the picture attached to this post.

Ok after you got BoxLeft, Boxright, and BoxCenter add boxleft float: left this can be done at the properties options just below, you will find the option just after where you place the width and height also add a size example width: 200px height: 300 for BoxLeft.

Now select BoxRight, and do the same on width and height, 200x300, but select Float: Right.

And now select the last div you added wich we named BoxCenter dont add a size to it Dont!!!! just check down a bit more where you will see Margin & Padding, now here is the tricky part you have to play with the margin i placed all to 0px and the last one with is margin left i placed 200px example

Top: 0px Right: 0px Bottom: 0px Left:200px

ok done with that now click on padding and add what ever you need i placed 0px for all but u can play with it to make it look better, ok after this click on Design and add the backgrounds and settings to your need, also play with the size i placed all depends on how you want them look also depends on the size of the website i used the standard one by default to make the screenshot i placed here.

Good luck with it hope this helps :)

Pd forums needs a but of let us place codes like <strong> and shitz... and sorry my not so good english..

Sign in to reply to this post

Miguel

damn sorry i forgot to mention and i placed the wrong screenshot its the same but i placed the names so u can understand box1 = BoxLeft, Box2 = BoxRight, Box3= BoxCenter,

also on the screen shot i colored the boxed on the design tab

Left = blue
right= red
Center= green

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...