Win a copy of Svelte and Sapper in Action this week in the JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

Using tableless layout

 
Ranch Hand
Posts: 837
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm trying to find the best way to lay out my form while being table-less. I want a header row and label-text field pairings to go down the page. Using the below I found this to be strange, if the browser is resized to be fairly small the Street and associated text field wraps down instead of going across the bottom of the name fields. If someone could explain why this is happening I'd appreciate it but also, add on, if there's a better way of accomplishing the below? Thanks in advance for any helpful information / suggestions.

 
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
First steps:

1) Write semantic HTML. Use label tags for labels; not spans.

2) You are overusing ids.

3) Use classes to apply similar rules to similar elements. If you have a rule duplicated a number of times, it's a red flag that you should be using a class.

4) Ditch the floats. Explore using a display of inline-block for the labels, and giving them a width to line things up.
 
Rob Hunter
Ranch Hand
Posts: 837
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Appreciate the info / suggestions Bear. With the first name, initials, and last name divs I want them lined up on the same line. I tried using display: inline for each but they drop to new lines.
 
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You could position your DIVs in absolute way, like this:
<input id='hdn_base_width' type='hidden' value='800' />
<input id='hdn_base_heigth' type='hidden' value='600' />
<div id='dv_layou_container_1' initial_layout_top='192' initial_layout_left='222' initial_layout_width='150' initial_layout_height='100'
style="position: fixed; overflow-y: hidden; overflow-x: hidden; background-color: #ADADAD;">

1

</div>

And use a javascript funcion to resize and reposition it when the browser resolution changes. Like this
<script type='text/javascript'>
function resizeComponents() {
var w=window.innerWidth;
var h=window.innerHeight;
if(typeof (w) !== 'number') {
w=document.documentElement.clientWidth;
h=document.documentElement.clientHeight;
}
if(typeof (w) !== 'number') {
w=document.body.clientWidth;
h=document.body.clientHeight;
}
var txt='Window size: width=' + w + ', height=' + h;
var base_w = document.getElementById('hdn_base_width').value;
var base_h = document.getElementById('hdn_base_heigth').value;
var cont = 1;
var element_dv_layou_container = document.getElementById('dv_layou_container_' + cont);
while (element_dv_layou_container !== null && (typeof (element_dv_layou_container)) === 'object') {
var w_elem_num_base = element_dv_layou_container.getAttribute('initial_layout_width');
var h_elem_num_base = element_dv_layou_container.getAttribute('initial_layout_height');
var t_elem_num_base = element_dv_layou_container.getAttribute('initial_layout_top');
var l_elem_num_base = element_dv_layou_container.getAttribute('initial_layout_left');
var w_element = element_dv_layou_container.style.width;
var h_element = element_dv_layou_container.style.height;
var t_element = element_dv_layou_container.style.top;
var l_element = element_dv_layou_container.style.left;
var w_elem_num = w_element.substring(0, w_element.length - 2);
var h_elem_num = h_element.substring(0, h_element.length - 2);
var t_elem_num = t_element.substring(0, t_element.length - 2);
var l_elem_num = l_element.substring(0, l_element.length - 2);
var factor_w = (base_w / w);
var factor_h = (base_h / h);
var w_new_elem = (w_elem_num_base / factor_w);
var h_new_elem = (h_elem_num_base / factor_h);
var t_new_elem = (t_elem_num_base / factor_h);
var l_new_elem = (l_elem_num_base / factor_w);
element_dv_layou_container.style.width = (w_new_elem + 'px');
element_dv_layou_container.style.height = (h_new_elem + 'px');
element_dv_layou_container.style.top = (t_new_elem + 'px');
element_dv_layou_container.style.left = (l_new_elem + 'px');
cont++;
element_dv_layou_container = document.getElementById('dv_layou_container_' + cont);
}
}
window.onresize = function onWindowResize()
{
resizeComponents();
};
resizeComponents();
</script>

Also this tool here can do it for you: http://easyhtmlpositioner.appspot.com/

Regards.
Rogerio.
 
Bear Bibeault
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Will need more info. Have you cleaned up your HTML?

For comparison, here's a canonical example of some HTML markup I use to lay out a form. Note the lack of ids. People tend to way overuse ids. This markup makes it easy to style the form using CSS.



Hint: applying inline-block to the span in the label allows it to be give a specific width.

 
Bear Bibeault
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hint: more elements can be added to the end of the "form-group" to stay "on the same line". Be sure they are inline elements (e.g. labels, inputs). Be sure any CSS to style the first label element of the "line" is not applied to interior labels.
 
Bear Bibeault
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Rogerio Robetti wrote:You could position your DIVs in absolute way ...
And use a javascript funcion to resize and reposition it when the browser resolution changes.


I think some semantic HTML and a few lines of responsive CSS is a simpler approach.
 
Rogerio Robetti
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Bear Bibeault wrote:

Rogerio Robetti wrote:You could position your DIVs in absolute way ...
And use a javascript funcion to resize and reposition it when the browser resolution changes.


I think some semantic HTML and a few lines of responsive CSS is a simpler approach.


Is an option to not use responsive CSS witch can have some problems with browsers like IE7, also is an approach that gives you pixel level proportionality, in positioning and in sizes of each component, when you use responsive CSS you can loose your initial layou in some resolutions. It's made for perfectionists =)
 
Rob Hunter
Ranch Hand
Posts: 837
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hey Bear, disregard the last post. I messed up with something in the CSS. Thanks for the info and suggestions, much appreciated.
 
Rob Hunter
Ranch Hand
Posts: 837
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Took another look at it. The widths combined with what I'm trying to do don't seem to be working. I have 3 label-text field pairings I want to display across the page separated by a separator space of 10 pixels. It's not recognizing width in any case and using inline-block caused each label-value pairing to drop down a line. I'm looking to set the area each label-text field pair takes up and also have a separator between each (i.e. fldSep class).

 
Don't get me started about those stupid light bulbs.
    Bookmark Topic Watch Topic
  • New Topic