Box model tutorial question

Hi chaps, I’ve been watching the excellent box model tutes fram Dan and trying to apply the directions to a new site. Could someone please explain just what the difference is between working with these css boxes and the casual “just draw it and stick in some graphics” approach I’ve been using (quite succesfully).

eg - I’ve been trying to create a graphic rollover with just 2 elements … I create an html box, insert a child box into it, import a graphic (a button image) and when I import a second image (the same button image with some changes that are meant to appear when you mouse over it) the second button REPLACES the first so I don’t have 2 layers to ‘combine’ to create the rollover action … this, I’m guessing, is something to do with ‘layers’ and css and, kind of, just shows how little I’ve learnt about this excellent software over the last few weeks.

I suppose I have to make a real effort to learn what ‘CSS’ is, what ‘tables’ are, what ‘layers’ are etc and what the differences are and when to use what for a particular website design. The couple of sites I’ve made seem to work pretty well but I basically built them the same way I would if I were creating a layout in a dtp package. Sorry I’m rambling now but if anyone can pick the bones out of this waffle maybe they could give me some advice. Regards Roger


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Roger

There has been an article running in the last few editions of MacUser in the UK that has looked at CSS - CSS Made Simple.

The article has looked at, among other things, making CSS rollovers with graphics.

Worth a read.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

But if you can’t lay your hands on a copy I am sure that we can help you out.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Dave … I’ll look out for that, I used to subscribe but redundancy forced cut backs and subscriptions was one of them, there’s a great newsagents locally that stocks it. Also I had a good look through the reference manual last night and think I’ve read a little more information about it so, as it’s raining here yet again, I’ll be able to have some time to dig in and try to get my head around it. Best roger


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hey, Roger, have a look at p246 in the reference manual. That may explain the problem you’re having.

I went through the same thing on a site I just finished.

Hope that helps.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Excellent tutorial, however, I have a problem. I’ve tried to recreate what Dan did on my own but the Inspector never looks like Dan’s. That is there’s no Clear or Float in the Dimensions section.
What am I doing wrong?

Secondly, I think I read that this CSS thing can turned off and on while doing your site. Is that correct?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

CSS thing can turned off and on while doing your site. Is that correct?

Yes but it will only affect things that are created after you ‘flick the switch’ ie layers will stay layers and non layered items will stay non layered unless you change their state in the inspector.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you don’t see Clear and Float, that means that the object you have
selected is not inserted as an inline object within another object.
Try this:

Click inside an HTML box until you see a flashing text cursor. Now,
from the main menu, choose Insert > HTML Item. Now click on that
100px-square box and see if you get the Clear and Float options in
your Inspector.

Walter

On Aug 4, 2008, at 6:29 PM, Chod Lang wrote:

Excellent tutorial, however, I have a problem. I’ve tried to
recreate what Dan did on my own but the Inspector never looks like
Dan’s. That is there’s no Clear or Float in the Dimensions section.
What am I doing wrong?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Waltd for clearing that up. I did everything with the CSS Layout button on. From a post production standpoint I muted whenever my mouse got to “clicky” since the microphone is positioned on a stacked external hard-drive (non-running) and an old iPod Nano. That might have misguided a few people as to what I was clicking on or double-clicking in.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walt. That’s what I needed.

Now my next problem is moving the “inline” object within the other object.

Perhaps I need that “spacer” that Don spoke of?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Now my next problem is moving the “inline” object within the other object.

This is not possible the way it is with independant objects.
You have to format inline objects in a very stiff fashion in comparison to objects that are drawn into a layout.

An inline html object can have padding added to it to make any contents inside it farther away from it’s sides, or it can have margins added to make it a specific distance away from other inline items near it.

The other major formating option is Float and Clear. Inline Html objects and float left, float right, or none. Float and Clear only applies to in-line html objects and will not appear as options with any other kind of object.

The above is basic functionality information. The real trick with all of this is experimenting with it to see what happens. I think the most confusing thing to get past at first is knowing that there is no barrier to how many inline objects there can actually be.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I believe the operative word here is instead of “moving” the inline object it should rather be “Inserting” the inline object. In my tutorial it was a box-in-a-box-in-a-box sort of deal and the only way to position those boxes was through Float’s and Clear’s and also through padding (the inside) and margin (the outside) and that was about it.

The “spacer” I mentioned was dealing with the larger container not filling down with the content and by having a empty HTML item (float:none, clear:both) it would bring down the container size. I usually set my padding to the same all around except for the bottom I leave zero. I then use the spacer height (matched to the above padding) to complete the look if it’s not already working.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I can see that this takes a great deal of planning, right? Sort of like Dan’s tutorial. Just create bunches of boxes with a plan in mind and then fill them when the layout is complete.

Seems like a good idea to do a rough layout in a desktop publishing program and then go to Freeway.

Well, I won the Missing Manual for CSS. Maybe it’s time to crack the cover.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Seems like a good idea to do a rough layout in a desktop publishing program and then go to Freeway.

I don’t think you need to go that far. Just think of the overall page as an area to be divided up. The “divisions” are html boxes that create a sort of grid that covers the page. Each box in the grid can have any kind of content you like. For example you could divide the page into four “divisions”, one for the header, one for a left column, one for a right column, and one for a footer. All four of these boxes would be inside one main box that is the parent. It’s kind of like a newspaper or magazine grid idea.

Well, I won the Missing Manual for CSS. Maybe it’s time to crack the cover.

Yeah, that’s a good idea. But a word of warning…
Freeway does not lay out all the CSS options for you in the menu choices. There are alot of CSS options that you have to manually add with the Extended option in the Styles Pallet. Freeway can handle them, it just doesn’t make it easy for you. Once you get the hang of using the Extended options you can pretty much do anything you want with CSS.

If you like, download this sample I did a while back for another user. It is all CSS divisions.
http://www.chucksdesigns.com/downloads/SDA_sample.zip


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options