Re: [WSG] Too Much Space..
I did some funky float stuff here: http://my.spamtrap.net.au/join/howitworks/ content is floated to the right and has a fixed width. Inside content is another right floated box with a quote in it. Because of content's fixed width, navigation moves up as its width is less than container width minus content width. If I wanted to put content on the left and nav on the right, I could float : left; on content, float : right; on nav. Cheers James russ weakley wrote: Imagine floats as being similar to the old align=right. For example, you have a block of content and an image. If you want the image to align right beside the content it must be before the content. Floats work in exactly the same way. To quote: Block level elements above a floated element will not be affected by it. However, elements below will wrap around the floated element http://css.maxdesign.com.au/floatutorial/introduction.htm Block level element above a floated element ignore the floated element: http://css.maxdesign.com.au/floatutorial/introduction16.htm Block level element below a floated element is affected by the floated element: http://css.maxdesign.com.au/floatutorial/introduction17.htm Makes sense? Russ * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Too Much Space..
Relaxed after seeing Cabin Fever? Isn't that the one with the
mulleted
kid who bites a lawyer?
Yeah with the flesh eating virus.. I wasn't relaxed for to long, I'm already
stressed again.
Is there anyone on this list who can easily put together a 3 column layout?
Hold on, there is more. All 3 columns need to be 33% (or come to 100%)
I was thinking something like the following which I can't get to work
#testContainer
{
width: 100%;
}
#testContainer div
{
width: 33%;
border: 1px solid black;
display: inline;
}
div id=testContainer
divColumn 1/divdivColumn 2/divdivColumn 3/div/div
And I tried
div style=float:left; width:33%; border: 1px solid black;
display:inline;dd/div
div style=float:left; width:33%; border: 1px solid black;
display:inline;dd/div
div style=float:right; width:33%; border: 1px solid black;
display:inline;dd/div
*
The discussion list for http://webstandardsgroup.org/
*
RE: [WSG] Too Much Space..
Imagine floats as being similar to the old align=right. For example, you have a block of content and an image. If you want the image to align right beside the content it must be before the content. It's starting to sink in a bit now Floats work in exactly the same way. To quote: Block level elements above a floated element will not be affected by it. However, elements below will wrap around the floated element http://css.maxdesign.com.au/floatutorial/intro duction.htm OK got that one now. Cheers. Block level element above a floated element ignore the floated element: http://css.maxdesign.com.au/floatutorial/intro duction16.htm Block level element below a floated element is affected by the floated element: http://css.maxdesign.com.au/floatutorial/introduction17.htm Makes sense? Russ The thing that also gets me is, it's just not logical sometimes, like I have 2 columns, 1. Navigation 2. Content If I have them in that order I can say to the Navigation float: right and all works fine, but if I have them in the following order 1. Content 2. Navigation And I say float: right it is positioned on a new line, I just don't see what the difference is? * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Too Much Space..
Try this: http://www.maxdesign.com.au/jobs/poo.htm Modify as required Russ Is there anyone on this list who can easily put together a 3 column layout? Hold on, there is more. All 3 columns need to be 33% (or come to 100%) * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Too Much Space..
Hi Taco, Don't give up on it - once it clicks, you'll never taint your code with layout tables again! The following isn't really structured, more a collection of statements: Don't attempt to force the CSS into recreating the restrictive confines of a table layout. CSS layouts do require a fundamental change in thinking, but the freedom you have is incredible. Cross-platform / cross-browser support is exceptional for practically all the things you need to do. It's good for most things you want to do, and then there's the fun in pushing the boundaries for things you'd like to do. As with anything, proficiency comes with experience. You have a tremendous wealth of information available to shortcut your learning. You don't need to jump straight in at CSS Zen Garden level (where all the designers have probably been working with CSS for a few years now). My first intro was Rob Chandanais' Layout Reservoir at http://www.bluerobot.com/ Consider building a few dummy sites to test out things, rather than feeling pressured with client deadlines looming over you. Now, not to fob you off or suggest the wise words of a bunch of losers who have nothing better to do on their weekend than work aren't helpful... but have you seen the css-discuss Wiki? http://css-discuss.incutio.com/ And I think Russ' tutorials are fantastic: http://css.maxdesign.com.au/ Anyway, I've got to get back to work :) Cheers, Ben -Original Message- Can I just add, I was convinced, but now back to where I originally stood, that is, I believe there are to many hacks that need to be applied to get the layout as you want it. I might give the total CSS layout a rest for a while again ;-(( * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Too Much Space..
Hi Ben, I'm sure I will not use anything else but table less layout WHEN it clicks, I just hope it clicks soon ;-)) Don't give up on it - once it clicks, you'll never taint your code with layout tables again! The following isn't really structured, more a collection of statements: Don't attempt to force the CSS into recreating the restrictive confines of a table layout. CSS layouts do require a fundamental change in thinking, Is there an easy way trying to get a grasp of what that fundamental change in thinking is? but the freedom you have is incredible. Cross-platform / cross-browser support is exceptional for practically all the things you need to do. It's good for most things you want to do, and then there's the fun in pushing the boundaries for things you'd like to do. Now, not to fob you off or suggest the wise words of a bunch of losers who have nothing better to do on their weekend than work aren't helpful... but have you seen the css-discuss Wiki? http://css-discuss.incutio.com/ I'll have a peek! And I think Russ' tutorials are fantastic: http://css.maxdesign.com.au/ Yeah they are agreat and helped me out a lot. Cheers * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Too Much Space..
ode to poo with centred container: http://www.maxdesign.com.au/jobs/poo2.htm Why poo? Good question. Maybe something to do with a 3 year old child that is hassling me as we speak. :) Russ Cheers Russ, Now a div style=left: 10%; right: 10%; /div Around it and it won't work? Anyway, I let you guys get back to work and see if it all might make sense when I sleep over it... PS. Just curious is poo another word for kakka, i.e. sh^t? Or just something out of the blue. Taco Fleur Tell me and I will forget Show me and I will remember Teach me and I will learn -Original Message- From: russ weakley [mailto:[EMAIL PROTECTED] Sent: Sunday, 7 December 2003 6:05 PM To: Web Standards Group Subject: Re: [WSG] Too Much Space.. Try this: http://www.maxdesign.com.au/jobs/poo.htm Modify as required Russ Is there anyone on this list who can easily put together a 3 column layout? Hold on, there is more. All 3 columns need to be 33% (or come to 100%) * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Too Much Space..
Oops. A flaw in the version I just sent below. Ignore. Teach me to do too many things at once. :( Russ ode to poo with centred container: http://www.maxdesign.com.au/jobs/poo2.htm Why poo? Good question. Maybe something to do with a 3 year old child that is hassling me as we speak. :) Russ Cheers Russ, Now a div style=left: 10%; right: 10%; /div Around it and it won't work? Anyway, I let you guys get back to work and see if it all might make sense when I sleep over it... PS. Just curious is poo another word for kakka, i.e. sh^t? Or just something out of the blue. Taco Fleur Tell me and I will forget Show me and I will remember Teach me and I will learn * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Too Much Space..
Hi James, I am probably lost, why would it matter what width the viewport is, if you only care about having a box aligned to the 2please_jamescentre/2please_james that is 80% wide? Hi, Was referring to centering a fixed width box - can't really do this with a variably size viewport and right/left set to a percentage. Auto will fill in the blanks for you there. e.g: original, for instance -800px--- --auto---600px-auto-- -800px--- --10%640px--10%-- on resize: 1000px--- --auto---600px-auto-- 1000px--- --10%800px--10%-- HTH russ weakley wrote: ode to poo with centred container: http://www.maxdesign.com.au/jobs/poo2.htm Why poo? Good question. Maybe something to do with a 3 year old child that is hassling me as we speak. :) Russ I thought it was because poo floats? sorry, just thought I'd raise the bar a bit there, sorry if I've trodden in it... ahh ok I'll stop now. Cheers James * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Too Much Space..
Don¹t feel bad! Using a basic table grid for layout and everything else via CSS is not evil - it is completely acceptable. However, it is just not as pure as full CSS (from the removing presentation from content point of view). Zeldman would call this hybrid layout. It is still a long way better than nested tables, font tags and invalid code. Russ makes a good point here and I just thought I would that using tables for actual tables is not evil either. That is, in fact, what they were originally for and still allow critical data formatting (such as numbers in rows and columns) to be maintained for non-CSS browsers. The evil is in using tables for page layout (as opposed to presenting tabular content). It's also important to remember that in a devolved content management model that the content creator is not likely to use DIV for tables of numbers/information as they are not likely to have the tools or skills available. Gary Menzel Web Development Manager IT Operations Brisbane -+- ABN AMRO Morgans Limited Level 29, 123 Eagle Street BRISBANE QLD 4000 PH: 07 333 44 828 FX: 07 3834 0828 If this communication is not intended for you and you are not an authorised recipient of this email you are prohibited by law from dealing with or relying on the email or any file attachments. This prohibition includes reading, printing, copying, re-transmitting, disseminating, storing or in any other way dealing or acting in reliance on the information. If you have received this email in error, we request you contact ABN AMRO Morgans Limited immediately by returning the email to [EMAIL PROTECTED] and destroy the original. We will refund any reasonable costs associated with notifying ABN AMRO Morgans. This email is confidential and may contain privileged client information. ABN AMRO Morgans has taken reasonable steps to ensure the accuracy and integrity of all its communications, including electronic communications, but accepts no liability for materials transmitted. Materials may also be transmitted without the knowledge of ABN AMRO Morgans. ABN AMRO Morgans Limited its directors and employees do not accept liability for the results of any actions taken or not on the basis of the information in this report. ABN AMRO Morgans Limited and its associates hold or may hold securities in the companies/trusts mentioned herein. Any recommendation is made on the basis of our research of the investment and may not suit the specific requirements of clients. Assessments of suitability to an individual?s portfolio can only be made after an examination of the particular client?s investments, financial circumstances and requirements. * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Too Much Space..
I noticed in your Stylesheet definitions that on hovering over the a element you change your margin and padding from 3 pixels to 2. I'd say that's probably what is moving your text around there. Yeah, I played around with that, if I did not have anything in there or any other value then I have now it was even worse. So still not sure what the issue is there, anyone? the tables, I won't do away with those just yet no no no ;-)) WUSS! Heh - CSS is so much easier than table hacks .. Have you taken the Selectorial yet? I haven't yet, I probably will get to that at some stage. But for now it's not only that I think the table hacks are easier, it's also because I *think* it works in more browsers than working with CSS lay-out. (wrong/right)? I had a look at the themaninblue.com and wow, that is seriously some brilliant work, but I was not able to make any sense out of the lay-out, I wish I could.. And what would be the minimum browser that would work in? I mean that is just perfect for the audience of his website, but what about an audience that has browsers ranging from ie3, ns3 and up? (http://css.maxdesign.com.au/selectutorial/) It lays down some basic skills on creating CSS-based layouts. To fix the nav buttons on the right side in the mainbody area, try using relative instead of absolute positioning, or just increase the left margin. Thanks, I'll have a look at it, I did notice those when I looked at it in Netscape. Good work Taco! Thanks, it's a start ;-)) Ryan -- Heck with kids - standards are our future. Webmaster, http://www.theward.net - Original Message - From: Taco Fleur To: [EMAIL PROTECTED] Sent: Saturday, December 06, 2003 4:57 AM Subject: [WSG] To much space.. On http://development.developer-exchange.com I have a A element that has to much space on the bottom, I can't figure out why, anyone? Also the text moves on mouse over, I'd like it to not move on hovering over it. The offending text is within the gray area 3 TDs PS. its all still a mess and needs cleaning up, I am finally trying to move a bit more to CSS, except the tables, I won't do away with those just yet no no no ;-)) PPS. any other pointers that you might be able to give is appreciated. Thanks, Taco Fleur Tell me and I will forget Show me and I will remember Teach me and I will learn * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Too Much Space..
I love what you guys are saying and I see the benefit of it TOTALLY. I took a break, went to see a movie (Cabin Fever), I am now relaxed and will try again.. With tables it's just so easy, you see the design and you can create it, with CSS it sort of mix and match, and like James said difficult because it renders different in each browser. So you need to understand each browser. The thing that also gets me is, it's just not logical sometimes, like I have 2 columns, 1. Navigation 2. Content If I have them in that order I can say to the Navigation float: right and all works fine, but if I have them in the following order 1. Content 2. Navigation And I say float: right it is positioned on a new line, I just dont see what the difference is? Anyway, things like that just get my blood boiling because I want to understand it and I need to see the logic of it all before I can understand it..;-) Taco Fleur Tell me and I will forget Show me and I will remember Teach me and I will learn -Original Message- From: russ weakley [mailto:[EMAIL PROTECTED] Sent: Sunday, 7 December 2003 2:10 PM To: Web Standards Group Subject: Re: [WSG] Too Much Space.. Don¹t feel bad! Using a basic table grid for layout and everything else via CSS is not evil - it is completely acceptable. However, it is just not as pure as full CSS (from the removing presentation from content point of view). Zeldman would call this hybrid layout. It is still a long way better than nested tables, font tags and invalid code. The aim of this group is to help people move *towards* web standards. There is no black or white, just a gradual progression. The more I post today the more I sound like a fortune cookie. Russ Can I just add, I was convinced, but now back to where I originally stood, that is, I believe there are to many hacks that need to be applied to get the layout as you want it. I might give the total CSS layout a rest for a while again ;-(( Taco Fleur Tell me and I will forget Show me and I will remember Teach me and I will learn * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Too Much Space..
Imagine floats as being similar to the old align=right. For example, you have a block of content and an image. If you want the image to align right beside the content it must be before the content. Floats work in exactly the same way. To quote: Block level elements above a floated element will not be affected by it. However, elements below will wrap around the floated element http://css.maxdesign.com.au/floatutorial/introduction.htm Block level element above a floated element ignore the floated element: http://css.maxdesign.com.au/floatutorial/introduction16.htm Block level element below a floated element is affected by the floated element: http://css.maxdesign.com.au/floatutorial/introduction17.htm Makes sense? Russ The thing that also gets me is, it's just not logical sometimes, like I have 2 columns, 1. Navigation 2. Content If I have them in that order I can say to the Navigation float: right and all works fine, but if I have them in the following order 1. Content 2. Navigation And I say float: right it is positioned on a new line, I just dont see what the difference is? * The discussion list for http://webstandardsgroup.org/ *
