Home Chat Calendar FAQ Search

Spotters Promoters Log on Sign up

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

Miss-Kiki

ah hah........even i understand that!!

never guna need it i dnt think....but good to know it on ere!! thanx 'iain'!

legend!!

xkx

Reply Quote
Posted Thu 31 Aug 2006

Gekko-iLoveTrance

You star!

I don't think I'm gonna get any sleep tonight Hahaha!

Who laughed: Dr-Beatz and IainC
Reply Quote
Posted Thu 31 Aug 2006

cillit-bang

ok well im not even gonna bother reading coz i got stuck after the 1st couple of lines! lol

Reply Quote
Posted Thu 31 Aug 2006

IainC

If you really want to see the power of DIVs take a look at this...

Reply Quote
Posted Thu 31 Aug 2006

cillit-bang

ok it looks good but im not a computer person! lol i dont know scientific stuff! i dont understand instructions! lol

Reply Quote
Posted Thu 31 Aug 2006

IainC

One final thing before I hit the sack - to carry on the the example I started in my first post, for the complex bit after the NC/DSI logo I'd do this for the percentages:

Three columns, then three rows in the middle and rightmost ones...

The bits above and below this are just "normal" text and images. I'll leave backgrounds for later...

Removing the border styles then gives:

<div><div style="float:left;width:29%;">Big image</div><div style="float:left;width:49%;"><div style="clear:both;">Top-left three small images<br /><br /></div><div style="clear:both;">Text<br /><br /></div><div style="clear:both;">Bottom-left three small images<br /><br /></div></div><div style="float:left;width:19%;"><div style="clear:both;">Top-right small image</div><div style="clear:both;">Middle-right small image</div><div style="clear:both;">Bottom-right small image</div></div><div style="clear:both;"><!-- --></div></div>

Note: I have had to put in the <br /> bits to make the lines of text below appear in the right place, if I had the images used to hand I could just use a height property in the style="..." sections of the appropriate DIVs ("height: ZZZpx;" where ZZZ is the height of the row in pixels and we can easily find that from the file properties!)

Which when copied and pasted in gets us this:

Big image

Top-left three small images

Text

Bottom-left three small images

Top-right small image

Middle-right small image

Bottom-right small image

Of course, any of the text and images can be put into the DIVs as links using standard HTML... which of course you all know how to do already!

Reply Quote
Posted Thu 31 Aug 2006
Edited Thu 31 Aug 2006

cillit-bang

cool! good work

Reply Quote
Posted Thu 31 Aug 2006

Gekko-iLoveTrance

Please do tell me you get paid good money Mon-Fri for this knowledge Iain ;) LoL!

Reply Quote
Posted Thu 31 Aug 2006

Naked-J-Kid

no it just turns him on to know it!

Who laughed: Thai-Wronghorse, IainC, Zippydedodah and Dr-Beatz
Reply Quote
Posted Thu 31 Aug 2006

Dr-Beatz

IainC, thanks very much for the info. I'm gonna give this a really good study later today.

Reply Quote
Posted Thu 31 Aug 2006

Yesideez

Thanks but I'll stick to my tables...

Which gives me...

1	2	3
	4	5
	6	7

I've turned the borders on so they can be seen easily. Never have liked using DIV :D

Reply Quote
Posted Sun 10 Sep 2006

IainC

Using "width" in a TD is deprecated. You should use COL or ~~COLSPAN~~COLGROUP instead.

Reply Quote
Posted Sun 10 Sep 2006
Edited Sun 10 Sep 2006

Yesideez

How can you replace "width" with "colspan" when they're two completely different entities? width specifies the width and colspan sets an overflow.

btw, sites I make are all XHTML compliant and I don't bother with using width anyway - I prefer to use CSS to control everything.

Reply Quote
Posted Sun 10 Sep 2006

IainC

Sorry, I meant COLGROUP, not COLSPAN, I was about to edit my comment when I saw that you'd already replied!

I prefer to use CSS to control everything

No arguments at all there!

Reply Quote
Posted Sun 10 Sep 2006
Edited Sun 10 Sep 2006

Yesideez

heh all good then. Won't turn this into a tables topic lol

Have to say I've never heard of colgroup attribute!

Reply Quote
Posted Sun 10 Sep 2006

IainC

It's not an attribute - it's a tag - you use it to define the columns of a table.

It's in the HTML 4 spec.

Reply Quote
Posted Sun 10 Sep 2006

Yesideez

Just read up on it and its baffling the crap out of me how I've missed this one!

It's not an attribute - it's a tag - you use it to define the columns of a table.

Sorry from me here - I presumed it would have been used as an attribute but now see it is indeed a tag!

Oh well, you learn something new every day!

Who laughed: IainC
Reply Quote
Posted Sun 10 Sep 2006

Dr-Beatz

Any chance getting this linked to the homepage mate?

Reply Quote
Posted Fri 03 Aug 2007

IainC

Any chance getting this linked to the homepage mate?

All done!

Reply Quote
Posted Fri 03 Aug 2007

Dr-Beatz

Thanking you.

Reply Quote
Posted Fri 03 Aug 2007

Pages: 1 2 3

Back to topics list