Chat Inbox Favourites Watching My comments

This news was posted in the chat forum of the DSI hints and tips group

Subject

DSI hints and tips

News

Skip to replies

Subject

A very quick and dirty DIV tags tutorial

IainC

EDITED: 2008-02-24 to account for new container options...

Ok, so you want to post a combination of graphics and text to DSI and you want to be able to control exactly how it appears. One option is to create an image of what you want (text included) and use the "picture" helper to put it in your post, for example:

But then you'd have to go and edit the image and get it hosted whenever you want to make a change and creating links to bits of it means creating a really complicated image map (doh... that could be yet another tutorial coming along... if they're on the whitelist!). Also getting the image the right size to fit on the page can make it all look a bit, well, poo. So why not DIVide up your post using DIVision tags? Well, while you all wait for the main event here's a little something to get you started. The first thing you'll need is some software called HTML kit. You can get it from Chami.com

Make sure that you get the bsStyle, hkViewColor and hkDivStarter plugins as an absolute minimum. They will make your life simple beyond belief.

So got all the bits? What follows is a much abbreviated version of the full tutorial I'm working on!

Get a piece of paper and a pencil, yes even web designers use paper and pencil, sketch on it the places you want to have DIV borders and work out in % roughly the widths for each. For example you might want:

Header

Left image

Centre text

Right image

bottom text

So that's a row of 100% for the header.
Then 3 lots of 33.3% columns in a row (call it 32% each though to allow for borders).
Then another row at 100%.

Now fire up HTML-kit!

Select "new blank html" when it asks you what you want to create.

Now, make sure that on the top row of tabs you have the "tools" tab selected and click on the hkDivStarter button, it looks like this:

Click the "add row" button three times to add rows (since we have three rows where one contains three columns), then click the middle row:

Yes I know these screenshots aren't quite the right size, but you don't miss anything important because of it

And click "add column" three times.

Click the "options" tab and select "inline styles":

Click "create".

Click on the "bsStyle" tab (about 3/4 of the way along the same row as the tools tab was in).

Click in the style="..." bit of a div that you want to modify, if you want to completely change it just delete everything between the quotes. Use the options on the bsStyle tabs to add in styling bits for backgrounds, etc.

Use the "preview" tab at the bottom to see how you're doing. Go back to the "editor" tab at the bottom if there are other things you want to alter and also go to it once you're happy so you can copy and paste your work out. HTML-kit is "web-aware" so if you put in links to files on the internet it should display them correctly in "preview", even better, once/if you really know your shizzle you can link in the DSI css file and preview your work in HTML-kit almost exactly as it will appear when you post it! Anyway...

Note that HTML kit has set widths of 33%, but we decided to use 32% to ensure that our borders don't cause problems with the maximum width allowed by DSI. Also note that rows at 100% don't need any width field.

Once you're happy with your preview copy everything from just after <body> until just before </body> into the comment box on DSI (then save the file in HTML-kit since you may want to alter it in the future). Make sure that you click "Advanced..." and then in the formatting section click "advanced" (otherwise DSI will insert breaks and whitespace for you and things won't look right) and hit "Post comment" [Note that clicking "advanced" means you MUST insert your own line breaks "<br />" at the end of paragraphs]:

Header

Left image

Centre text

Right image

bottom text

To get that what I actually pasted into the comment box is this (note that the spaces I've included below aren't necessary, but they do make your code easier to read since you can see at a glance where tags start and end):

<div style="border: 1px solid #000000; ">

  <div style="clear: both; ">

    Header

  </div>

  <div style="border-top: 1px solid #000000; clear: both; ">

    <div style="float: left; width: 32%; ">

      Left image

    </div>

    <div style="float: left; width: 32%; border-left: 1px solid #000000; ">

      Centre text

    </div>

    <div style="float: left; width: 32%; border-left: 1px solid #000000; ">

      Right image

    </div>

  </div>

  <div style="border-top: 1px solid #000000; clear: both; ">

    bottom text

  </div><div style="clear: both; ">

  </div>

</div>

Hopefully not too bad!?

One top tip for you - don't forget you can preview before you post now so you can see what DSI's going to make of what you're trying to do without having people laugh at any foul-ups you make on the way to getting it right!

I'll be back soon-ish with the main tutorial, which is taking even longer than I'd first thought :o( In the meantime play with the editor and see what you can come up with!

After reading this thread Gekko came up with this

Reply Quote
Posted Thu 31 Aug 2006
Edited Mon 25 Feb 2008

Replies

Back to topics list

prev page ... next page

Pages: 1 2 3

IainC

I've just updated the original post to account for the recent changes to DSI.

Reply Quote
Posted Mon 25 Feb 2008

Gekko-iLoveTrance

I need to get back on this and learn some more. The Queen of Clubs group I was running has been left to way siode for a number of reasons which I will get round to updating soon I hope :)

Nice heads up about the Preview option now available before making a comment :)

Reply Quote
Posted Mon 25 Feb 2008

Gekko-iLoveTrance

Right I have had enough of trying to learn Fireworks to make a squeeze page. It is so fucking alien and time consuming to start learning a new piece of software from scratch.

I'm going back to the old school and going to make it with HTML Kit and DIV Hahaha!

Any arguments here?

Reply Quote
Posted Wed 22 Apr
Edited Wed 22 Apr

Pages: 1 2 3

Back to topics list

prev page ... next page