I’m slowly trying to add box model style in designing pages. Sometimes a hybrid between “freestyle” and box.
I’m a little confused as to the when and why you use floats, clears, undefined heights, and even whether Overflow is set to Hidden or Visible.
This is especially confusing when some of the boxes are just holding other boxes
Thanks!
Bob
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Robert or Bob, I could have explained it but really a demonstration is far more visually effective. Just scroll down a wee bit on each of these pages.
Floats: http://www.w3schools.com/css/pr_class_float.asp
Clears: http://www.w3schools.com/css/pr_class_clear.asp
Overflow: http://www.w3schools.com/css/pr_pos_overflow.asp
Undefined Height: One way in which CSS boxes differ from table-positioned boxes is that their height is treated inflexibly by browsers. If a box is specified as being 200 pixels high, it will always be 200 pixels high in a browser, regardless of whether this is tall enough for the box’s content to be displayed. By contrast, table-positioned boxes will grow to fit their contents. For this reason, CSS boxes that contain text content should normally be set to have an undefined height by deselecting the height button in the Item General.
panel of the Inspector palette. CSS items whose height is undefined will grow and shrink to fit their content in a browser.
Note: Using CSS items for layout is also regarded as a “cleaner” web design technique than using invisible layout tables, since their use shouldn’t cause problems for unusual browser software. For example, the screen reader software used by visually impaired people may become confused when it encounters a layout table. As more and more web users have adopted modern browsers, the need for web designers to use tables for layout will decrease.
Reference manual page 11 and 12.
Hope this helps.
regards
Chris
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Here is the super simple way to understand your request.
Floats: Floats are used ONLY when you are using columns in your design. For instance if you wanted a two column layout you would float one HTML item to the left and float the other HTML item to the right. Thus making two columns. If you are NOT wanting to use columns you would leave the float set to none.
Clear: Clears are used to better organize the structure of your box-model layout. If you set an HTML item to clear left it will sit under any HTML items that are already floating left but may not sit under any items that are floated right. The same would be for a setting of clear right which would sit under any items that had a float set to right but not necessarily an item that had a float set to left. A clear setting of both would stage an item below any items floated left or right. It clears both float types. Typically when you want a box to be on its on level you would set the clear to be both.
Overflow: Overflow is typically used to hold left and right columns in place through the setting of hidden. If you set up a box with two boxes in it and you then proceeded to float the first inner box left and the second inner box right then you would have to change the overflow of the outside box (that holds the two inner boxes) to hidden so it would hold the layout of the two previously floated items. Otherwise you are pretty much safe leaving your overflow to visible and only changing it when you use columns within a “parent-like” container box.
Hopefully that makes sense.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks very much to both of you.
I never thought I’d use a box model, but, Dan, the last few screen casts of yours have made it a whole lot easier.
The key to making it look the way you want are the margin and padding sections, which was something I never used much, either, and was always dumbfounded when I wanted something to look a certain way and the box model method made it seem very restrictive.
Bob
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Forgot to add…
How do you know when to have height undefined and when it not to?
Once you start to have a box in a box in a box, I’m not sure which need height and which don’t.
Thanks.
Bob
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I’m pretty sure it’s safe to say that all items should have an undefined height in a box-model layout. By allowing expansion of content and flexibility in the design one can achieve better spacing and have less open ‘white space’ in their designs. You can allow some areas to have defined heights, but if you set the padding and margins correctly you will find its easier to use an undefined height more often.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
… and if you are, what you describe, positive in Dan’s Screencast (… and I’m too without any doubt) I’d recommend you the “boxmodel” episode 'cause it is really a great reference.
Although I built a lot of BM in the past, it’s always good to have a quick look in it from time to time.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Dan, you said:========If you set up a box with two boxes in it and you then proceeded to float the first inner box left and the second inner box right then you would have to change the overflow of the outside box (that holds the two inner boxes) to hidden so it would hold the layout of the two previously floated items.==========
So I have to admit I thought I understood it, well I do, but Freeway convinces me otherwise, I would be grateful if you could elaborate upon FW’s use of CSS and HTML please Dan. I created 3 columns within an html item and did not need to float clear anything. I could not get the float and clear options to show in the html dialogue? I placed graphics and text all over the place, within a single item, with no problems. So where in FW does this logic fit in with the real world of HTML and CSS. Oh, I did have my css button on. Under normal HTML/css rules I should have had enormous problems???
Thankyou Dan
Chris.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi, like an idiot I spoke too soon. that’s the trouble with switching between theoretically based learning and a visual interface. My internal lines of communication are hijacked.
Html box - “inline” setting I was forgetting.
Kind Regards
Chris
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I can’t tell if you’re figured it out or not, Chris. When it comes to three-column layouts you could float them all left, with clears set to none, and just add margin-right to two of them to space them out. You would then have to make sure the ‘parent’ box they were in had an overflow set to hidden.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Dan, you’ve said the parent should be overflow:hidden about three times now, but I don’t believe this will have any effect on the layout. If you want the parent to grow with the children, then you need to set its height to undefined (click the icon left of the Height field in the Inspector) and do one of the following:
What have you noticed when toggling this setting? Can you show me a side-by-side where one has the overflow option set to hidden and the other is default and there is an appreciable difference in the result in a browser?
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Dan and Walter both your comments noted in my library of references. Thankyou.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Waltd, I wager your image request and raise you a video clip showing the effects.
Simply put you must have overflow set to hidden on the box that holds the two boxes for it to work. As you’ll see in the results of the video. If you would like a sample file, let me know. Get some popcorn ready, it’s movie time!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Dan, i just watched your movie and really appreciate the demonstration. I see on your website that you have added a new tutorial: box model layouts. Great, but just one minor tinsy winsy point - I signed up last week to the newsletter/notify of new material? but have not received anything. Can you check that you have me on your database please. thankyou Dan, many appreciations.
Also, Mmm, quite ahead now but wish to know, what software/equipment does one need in order to make this sort of quicktime movie, I am so ignorant here that I would not even know the right question to ask about how I go about it? I am thinking of it myself but for completely different subject naturally. No details needed Dan - just the raw basics so that I can begin to learn about it myself. thankyou.
Kind Regards
Chris.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yup, it’s another trick to force a container to the height of its content:
http://www.quirksmode.org/css/clearing.html
Joe
On 20 Dec 2010, at 22:07, Dan J wrote:
Waltd, I wager your image request and raise you a video clip showing the effects.
Simply put you must have overflow set to hidden on the box that holds the two boxes for it to work. As you’ll see in the results of the video. If you would like a sample file, let me know. Get some popcorn ready, it’s movie time!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
This post explains floats, and clearing floats using “overflow method” which I admit I have never tried before. Thanks Dan.
David Owen
On 20 Dec 2010, at 22:07, “Dan J” email@hidden wrote:
Waltd, I wager your image request and raise you a video clip showing the effects.
Simply put you must have overflow set to hidden on the box that holds the two boxes for it to work. As you’ll see in the results of the video. If you would like a sample file, let me know. Get some popcorn ready, it’s movie time!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Glad it worked out for those who viewed it. That article too will be added to a few details pages in a bit here David. Great share!
@Chris - The newsletter system is not automated by any means. I have to make one each month and lots of people sign up and it never sends them a message with the newsletter back after they sign up. I haven’t figured that out yet. The newsletters go out once a month, versus after every new item released like it used to, so here it is viewable online for well…everyone to read:
http://www.danjasker.com/store/newsletters/december-2010-newsletter
Once January 2011 hits, you’ll get the latest in your inbox with a link at the top to view it in the web browser like the one linked above.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hallo Dan, ok no problem. Happy christmas.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Fantastic!
Thanks Dan for the video and Joe and David for your links. I have been using the box model for some time now but never knew what the Overflow option was all about. I often want the container to be a different colour from the floated items and had to resort to applying the colour via the Graphic Effects section of the inspector in order for it to be seen. Now, the only confusing thing is that if I want the container to be seen, I have to set the Overflow to “Hidden” (seems a bit backwards but I’m sure there is an reason). Thanks again for your enlightenment on this subject.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I am sure that I will be corrected here if I am wrong, (and i will be happy about that), but setting the container to <overflow; hidden> forbids the colour of the container dominating and over-ruling the colours for the inner flow items. I suppose a bit like “send to back”? or the z index feature?
Hey have a happy christmas
regards
Chris
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options