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

Back to my inbox
prev page ... next page

Pages: 1 2 3

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
slimmatt
top work iain!! will read up fully, and ask questions later ;)
Reply Quote
Posted Thu 31 Aug 2006
Neatandtidy
Wow, u are on it Mr C, i might have to come back to this tomorrow tho when the birds arent so blurry..2much jd doh!
Reply Quote
Posted Thu 31 Aug 2006
Snowphi
Fantastic - I've still got 6 and a half hours spare to learn this
Reply Quote
Posted Thu 31 Aug 2006
UP-YOUR-TRANCE
nice 1 on the effort mate

Headz UP ;-)
Reply Quote
Posted Thu 31 Aug 2006
DJWILFEEC-XTNRG
im impressed ian... gettin all the kit as we speak and will be baffling myself over the sunday comedown with it.... ;)
Reply Quote
Posted Thu 31 Aug 2006
RICARDO
Ok, while you all wait for the main event

Main event?
Reply Quote
Posted Thu 31 Aug 2006
IainC
Main event?

The "proper" tutorial on how to put DIVs together...
Reply Quote
Posted Thu 31 Aug 2006
RICARDO
Oh. Sorry. Cool.
Reply Quote
Posted Thu 31 Aug 2006
RICARDO
Thought this had something to do with the new DSI redesign coming up.
Reply Quote
Posted Thu 31 Aug 2006
Miss-Kiki
ppffft....u lost me at the heading...lol!!

and to think i got an a* in I.T!!

xkx
Reply Quote
Posted Thu 31 Aug 2006
adamgoswell
thats awesome! that little program is v.useful.. makes dreamweaver redundant!
Reply Quote
Posted Thu 31 Aug 2006
IainC
Thought this had something to do with the new DSI redesign coming up.

Not that I know of!
Reply Quote
Posted Thu 31 Aug 2006
Edited Thu 31 Aug 2006
DJWILFEEC-XTNRG
and to think i got an a* in I.T

yes but i.t. is just basic pc skills.....
Reply Quote
Posted Thu 31 Aug 2006
Miss-Kiki
no shit......i dnt even know what ud use this for, let alone wot it all means.....

y dnt they teach u nethin decent in school like????

ggrrr. rite, rant over, can u explain in layman terms pls?

xkx
Reply Quote
Posted Thu 31 Aug 2006
DJWILFEEC-XTNRG
can u explain in layman terms pls

i dont think it gets any easier than wat ians put.... that was the layest ov the laymens terms.....
Who laughed: Matt-Farrell
 Reply Quote
Posted Thu 31 Aug 2006
IainC
Right, there's a couple of edits just gone in to try and make things even clearer!
Reply Quote
Posted Thu 31 Aug 2006
Miss-Kiki
rite,......ok....wots a 'div tag'????

im assumin it aint a tag for divvys like me...lmao!!

xkx
Who laughed: DJWILFEEC-XTNRG and Pompey-Reevesy
 Reply Quote
Posted Thu 31 Aug 2006
Naked-J-Kid
he does all that for you and you can't even be bothered to spell his name right!

ian...

it's Iain!
Who laughed: DJWILFEEC-XTNRG and IainC
 Reply Quote
Posted Thu 31 Aug 2006
IainC
Ok, I've altered the introduction to show one instance when DIV tags might be useful...
Reply Quote
Posted Thu 31 Aug 2006

Pages: 1 2 3

Back to my inbox
prev page ... next page

Post a reply

To post a comment you must first log on - use the links below to log on or create a free account.

Log in

If you've already signed-up

Sign up FREE!

If you've not used the site before

You can't post until you are logged in!

All content Copyright Development Hell Limited 2003 - 2009 | All rights reserved | Terms and conditions | Contact us

Don't Stay In mix of the week

Chat

Your browser looks like it's not compatible with our live chat box. We recommend FireFox.