SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
Thread: What can I improve?
-
Sep 9, 2003, 03:26 #1
- Join Date
- Oct 2002
- Location
- Edinburgh, UK
- Posts
- 1,743
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What can I improve?
I have the following code:
Code:<div style = "line-height: 1.4"> lghjhg<br /> lghjhg<br /> lghjhg<br /> </div> <div style = "position: absolute; left: 90; top: 15"> <select> <option>fghghg</option> </select><br /> <input type = "text"><br /> <input type = "text"><br /> </div>
Code:<table border = "0" cellpadding = "0" cellspacing = "0"> <tr> <td width = "36%"> lghjhg </td> <td> <select> <option>fghghg</option> </select> </td> </tr> <tr> <td width = "36%"> lghjhg </td> <td> <input type = "text"><br /> </td> </tr> <tr width = "36%"> <td> lghjhg </td> <td> <input type = "text"><br /> </td> </tr> </table>
-
Sep 9, 2003, 03:30 #2
- Join Date
- Apr 2001
- Location
- Canada
- Posts
- 5,458
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Code:<div style="float: left; width: 36%;"> blah </div> <div style="float: right;"> <select> <option>fghghg</option> </select><br /> <input type = "text"><br /> <input type = "text"><br /> </div>
Mike
It's not who I am underneath, but what I do that defines me.
-
Sep 9, 2003, 04:19 #3
- Join Date
- Apr 2003
- Location
- Bath, UK
- Posts
- 353
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Couldn't you also use float: left on the second div as well ? The advantage of this is that if you wanted to simulate a 1 or more extra columns in the table you can just carry on adding
Code:<div style="float:left"> ... </div>
However a problem is that across the different broswer platforms you have no guarunttee that your text height will be the same as that of the <input ... > controls.
Again would it not be better to put each separate row in it's own set of divs so that the labels line up properly with the controls better.
Code:<div style="clear:left;float:left;width:36%"> <label for="Ctrl1">label</label> </div> <div style="float:left"> <select id="Ctrl1"> <option>Option 1</option> <option>Option 2</option> </select> </div> <div style="clear:left;float:left;width:36%"> <label for="Ctrl2">label</label> </div> <div style="float:left"> <input id="Ctrl2" ...> </div> <div style="clear:left;float:left;width:36%"> <label for="Ctrl3">label</label> </div> <div style="float:left"> <input id="Ctrl3" ...> </div>
Last edited by BenANFA; Sep 9, 2003 at 04:32.
-
Sep 9, 2003, 05:08 #4
- Join Date
- Apr 2003
- Location
- Bath, UK
- Posts
- 353
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Having thought about it for a bit, conceptually a stardard (but by no means the only) form layout is with 1 label and 1 control on each row of a tabular layout with the labels all the samewidth so that the left hand side of the controls line up. This givens the html as
Code:<form action="FormLayout>html"> <div> <label for="Ctrl1">Select</label> <select multiple="multiple" id="Ctrl1" name="Ctrl1"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> <select> </div> <div> <label for="Ctrl2">Checkbox</label> <input id="Ctrl2" name="Ctrl2" type="checkbox" /> </div> <div> <label for="Ctrl3">Text</label> <input id="Ctrl3" name="Ctrl3" type="text" /> </div> </form>
You then use CSS to adjust the label properties so that the controls line up and to adjust the div properties so that the form is formated for easy use.
Code:<style> form { border-bottom: 1px solid #ccc; } form div { border-top: 1px solid #ccc; margin: 0px; padding: 3px 0px; } form div label { width:36%; vertical-align:top; } </style>
The only problem... I would have liked to use vertical-align:middle; but it doesn't appear to work.
-
Sep 9, 2003, 05:16 #5
- Join Date
- Apr 2003
- Location
- Bath, UK
- Posts
- 353
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Reading another thread it has come to my attention that my solution doesn't work under strict DTDs. This can be solved by changing the style rule for the labels to
Code:form div label { display: block; float: left; width: 36%; }
I still believe my general approach is correct. You shouldn't try to convert tables to CSS, rather you should decide on the conceptual layout of the page and and create it in CSS ignoring what went before. CSS isn't a different way of laying out your page, it is a different way of thinking.
-
Sep 9, 2003, 05:51 #6
- Join Date
- Oct 2002
- Location
- Edinburgh, UK
- Posts
- 1,743
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I use:
Code:<div style = "float: left; width: 5%; line-height: 1.4"> lghjhg<br /> lghjhg<br /> lghjhg<br /> </div> <div style = "float: right; width: 95%;"> <select> <option>fghghg</option> </select><br /> <input type = "text"><br /> <input type = "text"><br /> </div>
-
Sep 9, 2003, 06:57 #7
- Join Date
- Apr 2003
- Location
- Bath, UK
- Posts
- 353
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
display: block Indicates that the tag in question should be display as a block level element (div, p, h1, h2 to name a few). That is there is a line break before and after the element.
I also notice that you have your widths as 5% and 95%. This is not a good idea as they add up to 100%, however with rounding errors in the calulation some browsers will end up with total widths a few pixels greater than 100% so you will get a horizontal scrollbar on your window. It is safer to set your widths to something that adds up to slightly less than 100%, say 5% and 94% to avoid this problem.
-
Sep 9, 2003, 07:03 #8
- Join Date
- Oct 2002
- Location
- Edinburgh, UK
- Posts
- 1,743
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by BenANFA
-
Sep 9, 2003, 18:04 #9
- Join Date
- Apr 2003
- Location
- Bath, UK
- Posts
- 353
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
the clear affects how the element is aligned with other elements that are floated either left or right. It can take values of none, both, left or right with the default being none.
An element with a clear side can not have floated elements to that side. For example if a div that is floated left is followed by a divthat is clear left then the second div will appear benath the first rather than beside it.
Another way of saying it is that an element with a clear side is moved far enough down it's parent so that no other elements appear between it's clear side and that side of it's parent.
Hopefully this code should give you some idea
Code:<style> .floatedLeft { float: left; width: 20%; border: 1px solid #00c; } #NormalDiv { border: 1px solid #0c0; } #ClearedDiv { border: 1px solid #c00; clear: left; } </style> <body> <div class="floatedLeft"> First Floated Div </div> <div id="NormalDiv"> Uncleared Div </div> <div class="floatedLeft"> Second Floated Div </div> <div id="ClearedDiv"> Cleared Div </div> </body>
Bookmarks