Dear All,
I have a page here http://183.78.169.54/tree/1.html. I have split into 2 div side by side the problem when it appear on the browser it appear the form div is below the tree div. How to make it appear side by side exactly and the tree div to start exactly from left. Secondly my form have table strucuture but the label and the contents are far separate how to make them side by side too.
The first problem with the form is that you’re using a table when you shouldn’t be.
The reason your inputs are so far from their labels is because the cells with the labels in are as wide as the ‘error’ paragraphs, which you have set to be 680px wide. If you’re going to stick with the table structure, the easiest hack to make it work is to set those error cells to colspan=“2”.
You should associate the labels with their inputs with ‘for’. This means that if you’ve got <input id=“mobile_tel”>, you need to have <label for=“mobile_tel”>. You’ve used ‘for’ once and referenced a form element that doesn’t even exist…
Another thing to mention is <font color=“red”>*</font>. What does that mean? Nothing at all. You haven’t even explained what a red asterisk means. A better way to mark it up would be <abbr title=“required field”>*</abbr>, and then set the style in the CSS with form abbr {color:#f00;}. Now it means something, and that’s better.
As to why the tree and form are above and below rather than side-by-side … that’s because you haven’t told them to be side-by-side. There’s no styling at all applied to either <div id=“leftcolumn”> or the <div> that holds the form. There are various ways of achieving this, including floats and positioning.
Dear Steve,
I dont know what else can I use with out table can you suggest anything? I dont exactly understand what is the use of the for there? The asterick is to label mandatory fields. Why the font method is wrong? So how to make the side by side divs?
Like I said, you can make table work better if you make the changes (ie rowspan) that I outlined in the previous message.
The ‘for’ is there to link the label with the input field. This means that the form will be accessible to people using various forms of AT, eg screen readers, and it can make it easier for people using a normal mouse to access as well (especially in the case of tick boxes or radio buttons).
The font method is wrong because HTML is a markup language, not a presentation language. In other words, you’re marking up the content and its meaning. Presentation is handled by CSS, the purpose of HTML is to describe what the content is and what it does. (You’ll hear the word ‘semantics’ being bandied around a lot.) <font color=“red”> doesn’t mean anything. What is the asterisk there for? It’s a shorthand code. That means that a good way to mark it up is as an abbreviation, ie <abbr>. An added bonus is that you can then give it a title attribute that tells people what it’s shorthand for, ie “required field”.
(You say “The asterick is to label mandatory fields”, but where does it say this on the page? Nowhere. Yes, it’s a fairly common convention, but you should still spell it out)
To get the divs side by side, one method is to use floats. There are plenty of tutorials out there on the web to help you with this.
You have spelled rightcolumn incorrectly as it the css it is “rightcolumn” but the html says “righcolumn” - the t is missing. (It would have been better named as #sidebar or something more appropriate to the content it holds anyway).
You then need to float the element to the left width the correct width.
#container{
overflow:hidden;/* clear the floats*/
}
#rightcolumn {/* with a "t" - remember to change the html to match */
width:380px;
float:left
}
Then remove the width from your paragraph settings as that is nonsense as you never globally declare width for text like that (as I have mentioned before).
p {
margin:0;
padding:1em 0;
}
Dear Steve,
I have done the colspan great it works accordingly. The problem I have implemented the abbr method but is not working well. I still dont quite understand how the for gives what benefit?
Dear Paul,
I have changed to sidebar accordingly. I want to learn why you put this
#container{
overflow:hidden;/* clear the floats*/
}
Another thing why do you set the width of the rightcolumn to 380? When we use float it will not be fixed to a certain place right?
Dear Paul,
Another thing I want the sidebar to begin right from the left meaning left 0px. How to achieve that?
Using “for” directly associates the label with the form control and is a great accessibility tool as well as a usability tool because the label will give focus to the input for elements like checkboxes and radios.
I have changed to sidebar accordingly. I want to learn why you put this Quote:
#container{
overflow:hidden;/* clear the floats*/
}
Overflow on a parent will contain its floated children and keep them within the parent. Floats are removed from the flow and a parent that has only floated children will have no height and its background colour would not be seen. Google “clearing floats” for more information.
Another thing why do you set the width of the rightcolumn to 380? When we use float it will not be fixed to a certain place right?
Floats will shrink wrap their content so if you don’t give them a width then they will stretch as wide as the content makes them which means eventually they will fill a whole line and drop to the next line. They won’t just fill a small space to the side of an object if the content is wider than the space available (which means a line of text will always try to push a float to 100% wide of the containing block). The containing block is what eventually dictates the size of the widthless float and that containing block takes no account of other objects sharing that space.
Another thing I want the sidebar to begin right from the left meaning left 0px. How to achieve that?
“left” only applies to positioned elements and does not apply to floats. Floats will automatically start as far left or as far right as they can so most times you need do nothing. If you want to move floats around you would use margins on the floats themselves. If a float isnt starting where you want then you probably have something in the way.
You can find a relatively good float tutorial here. Also remember to check the CSS FAQ (see my sig) as there is a section of float bugs there also.
Dear Paul,
Thank you for all the information it was really great to give me more knowledge. I really want to learn more about float like your said the parent controlling the float etc. So is there any sample site where I can test and as well learn more on float? Thank you.
Dear Paul,
Thank you for the site but where is the CSS FAQ site which you mentioned there? Another thing here so what is your best suggestion to have whole page centered to put it to the left? What is the norm taking into consideration of cross browser application.
Dear Raptor,
Thank you for the link.
There is no norm but I prefer centered sites if they are fixed width sites rather than having a big gap on one side.
Dear Paul,
To achieve that is best to have a parent div in the center with a particular size set right then have the child divs in it? Correct?
Use the main outer to center the site and then all the content inside that outer will travel with it and not need any special positioning. The whole lot will move together.
Of course it does depend on designs so there as usual isn’t only one answer and sometimes its also down to personal preference.
Dear Paul,
For instance my page here http://183.78.169.54/tree/2.html. The main outer div here is the id=“container”. So what settings must I do for it to be centered all the times. Secondly I want to learn more about span I notice that why a javascript a span is created and it smoothly control the opening and closing of the treeview when you press the button. How does the span able to do this job when the span does not even cover all the listitem?
You are already using the container to centre the page:
#container{ margin:0 auto; width:680px; background:#fff; padding-bottom:20px; }
An element with width and auto margins will automatically be centred. Horizontal auto margins mean that the browser should make the left and right margins equal which effectively means centring the element.
A span is just an inline element and there is nothing different about it from other inline elements. It is just a generic container (like div) except that a span is used for inline content and a div is used for block content.
Spans are inline elements (with a display of display:inline) by default and divs are block elements by default (width a display of display:block).
The rules of html say where each can be used but generally block elements can hold both block and inline elements (except for p and heading tags which although are block can only hold inline content) whereas spans can only contain other inline elements.
Dear Paul,
What will happen if I fail to set the width? This is the width for the whole page right if any element stretch beyong this will wrap below right? Ok I know about the span now but based on the link here http://183.78.169.54/tree/2.html how did it manage to control the item in it smoothly by expand and collapsing?