RE: [WSG] center align
Hey Taco The only problem with your method is that you have to set the left right positions to a fixed value (10%). I think setting margins on the body (margin-left: 10%; margin-right: 10%;)would work in a similar way. In some cases you don't care what the left right margins look like you just wanted some fixed width content positioning in the middle of the screen. The other method allows a bit more flexibility over the width of your content (e.g. width: 600px;, width: 90%; and width: auto; will all work). In your example you are stuck with the content area being relative to the browser window (i.e. 80% of the available width). Apart from that you're method is fine. Cheers Mark -- Mark Stanton Technical Director Gruden Pty Ltd Tel: 9956 6388 Mob: 0410 458 201 Fax: 9956 8433 http://www.gruden.com * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] center align
The first example you gave is designed to work for any situation. It works
for items that have fixed widths or liquid widths (based on the width of the
viewport). And yes, it is not as elegant as it should be.
However, if you have a liquid layout, there is a much simpler method that
only needs two declarations on the containing block:
#container
{
margin-left: 10%;
margin-right: 10%;
}
These two declarations are not needed:
width: 80%;
text-align: left;
Russ
Just been reading about center align, and its problems
The recommendation is
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: left;
and a hack
body { text-align: center; }
I have always been using
left: 10%;
right: 10%;
width: 80%;
text-align: left;
Which seemed to work in all browsers, is this not easier? Is there any reason
why I should not do it that way, and work with the hack instead? (just
wondering)
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] center align
The first one is better as you are not taking the box out of the flow of
the page. Using top and left with absolute positioning will do this...
For example if you had a fixed block to align center, then doing the
margins with top and left is difficult as you don't know the width of
the viewport.
e.g
#parent
{
//gripewhy do we have to write like Americans? - CSS should be in
international english :P/gripe
text-align : center;
}
#child
{
margin : 0 auto;
text-align : left;
width : 600px;
}
The hack is for IE5 Windows only.
Cheers
James
*
The discussion list for http://webstandardsgroup.org/
*
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/ *
[WSG] 3 Columns
Title: Message I hope I am not starting to annoy anyone ;-)) div style="width: 100%; border: 1px solid red;" Creates a area 100% wide, i.e. covering the width of the viewing area, which is great. div style="position: relative; border: 1px solid black; width: 33%; display: inline;"Column 1/divdiv style="position: relative; border: 1px solid black; width: 33%; display: inline;"Column 2/divdiv style="position: relative; border: 1px solid black; width: 33%; display: inline;"Column 3/div/div The there are 3 divs that all have a width of 33%, but they don't fill the 100% wide area covering it. If working with tables this would have worked, why not in CSS? PS. I am new to layout with CSS, I only discovered what INLINE does a couple of days ago ;-)) I had always used CSS for style but never layout, always tried to keep it of for as long as possible Today I decided it was the day to learn it, you guys are the ones suffering for it ;-))
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] 3 Columns
Did you see my earlier post? The 3 col sample I sent through should work fine. The version you mention below will not work because you are misunderstanding the fundamentals of the box model. It takes a while for the posts and my emails to arrive, the mailserver at my host is a bit flaky.. The 3 col sample works, but as soon as I start to adjust to my needs it just falls to pieces, not saying your code is bad, but just saying what already said I do not understand the fundamentals. Padding, border and margins are added to the OUTSIDE of a container in CSS. This means you have three containers set to 100% and then you are adding 6 pixels of border (2px per box) to this total. This makes 100% + 6px = more than 100%. Great now we got something to go on, that what I need. I understand what you are saying above, but would that not only matter if you would be working with fixed sizes? I understand that if you have a div style=padding: 4px; border: 1px; width: 100px;./div and place it in a 100px wide container it would not fit, because we are really working with 110 pixels, due to the padding and border being added. Which is basically the same concept as when working with tables. When working with tables this all does not matter when working with percentages instead of fixed width, and I would assume it would not matter for CSS either, would it? If it would, then are you saying it calculates it like 100% (800px for example) + 10 pixels for the padding and border? Floated items are very blunt - like small kids. If they cannot fit they will tell you. They simply go down, line by line until there is room for them to fit. That is what has happened to your layout. Hold on, do you even see 3 cols that have 33% in size? I look at it in IE and they are no larger than the text it contains. Have a look at the one I sent before. It is very stable and easy to do. It relies on one simple thing - the middle column is static - in the flow - and it has margin on the left and right to make it look like a centre column. I did have a look at it, I also played around with the tutorials, but every time I try to get the design as on development.developer-exchange.com I just completely ruin the layout. Always good to leave something in the normal flow of the document. Another aside, don't get carried away with inline! Especially when you are also trying to float something. Any floated item immediately becomes a box - it has too, so if you convert it back to inline, it will probably do something very odd. * 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/ *
[WSG] OMG *rips hair out*
I have tried everything to correct this bug, but nothing has worked. I have no idea how I made it happen. The problem spans the entire site (i believe) but is blatantly apparant here (http://www.theward.net/wardlings.html) -- I suspect that it's to blame on the main stylesheet (http://www.theward.net/general.css) but I'm not sure at this point. *looks to Russ with puppydog eyes* lol Ryan -- Heck with kids - standards are our future. Webmaster, http://www.theward.net * 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/ *
