stopping div elements from realigning when windows too small

code3hree · 06-03-2005, 04:38 PM

i have 3 drop down boxes created with DOM which are contained wihtin a DIV element. They are align to the middle of the screen using margin-right:auto;
margin-left:auto;, which works fine. When the browser is made smaller the elements reshuffle so that they are on top of each other rather than side by side, I've tried using

html {
overflow: hidden;
}

but no luck. I need the elements to stay next to each other within the div element when browser is resized. any ideas?

_Aerospace_Eng_ · 06-03-2005, 04:46 PM

How do you expect us to have an idea when we can't even see your code? Show us your code or a link (which would be ideal).

code3hree · 06-03-2005, 05:00 PM

web page --

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Z-order positioning</TITLE>
		<LINK REL="stylesheet" HREF="/mycss.css" TYPE="text/css">
  </HEAD>
<BODY>
<DIV CLASS="top">
	<TABLE ID='top_table'>
	<TR>
			<TD>KCL ID:</TD>
			<TD>FIRST NAME:</TD>
			<TD>SURNAME:</TD>
	</TR>
	<TR>
			<TD><INPUT TYPE="text" NAME="cid" SIZE=15 MAXLENGTH=15 VALUE=""></TD>
			<TD><INPUT TYPE="text" NAME="fn" SIZE=25 MAXLENGTH=55 VALUE=""></TD>
			<TD><INPUT TYPE="text" NAME="sn" SIZE=25 MAXLENGTH=55 VALUE=""></TD>
	</TR>
	<TR>
			<TD>DEPT:</TD>
			<TD>EMAIL:</TD>
	</TR>
	<TR>
			<TD><INPUT TYPE="text" NAME="dpt" SIZE=25 MAXLENGTH=55 VALUE=""></TD>
			<TD><INPUT TYPE="text" NAME="email" SIZE=42 MAXLENGTH=55 VALUE=""></TD>
	</TR>
	</TABLE>
</DIV>


<DIV CLASS="bottom">
<TABLE>
	<TR><TD>PROBLEM DETAIL:</TD></TR>
	<TR><TD>

	<TEXTAREA COLS=76 ROWS=10 WRAP="hard" NAME="DETAIL"></TEXTAREA>
	</TD></TR>
</TABLE>
</DIV>

<!--<DIV>
<INPUT TYPE="submit" NAME="submit" VALUE="           SUBMIT          ">
</DIV>-->

<SCRIPT LANGUAGE="JavaScript">
<!--

var area= new Array(3);


area[0] = "information gateway";

	var infor_gate= new Array(9);
	infor_gate[0] = "archives catalogue";

			var arch_cat = "archives catalogue";

	infor_gate[1] = "databases";

			var databases = new Array(4);
			databases[0]= "all access";
			databases[1]= "individual access";
			databases[2]= "other";
			databases[3]= "speed";

	infor_gate[2] = "ebooks";

			var ebooks = new Array(4);
			ebooks[0]= "all access";
			ebooks[1]= "individual access";
			ebooks[2]= "other";
			ebooks[3]= "speed";

	infor_gate[3] = "ejournals";

			var ejournals = new Array(4);
			ejournals[0]= "all access";
			ejournals[1]= "individual access";
			ejournals[2]= "other";
			ejournals[3]= "speed";

	infor_gate[4] = "legal compliance";

			var legal_comp = new Array(2);
			legal_comp[0]= "data protection";
			legal_comp[1]= "freedom of information - records management";


	infor_gate[5] = "library catalogue";

			var lib_cat = new Array(4);
			lib_cat[0]= "all access";
			lib_cat[1]= "alterations to item record";
			lib_cat[2]= "individual access";
			lib_cat[3]= "other";

	infor_gate[6] = "metalib";

			var metalib = new Array(5);
			metalib[0]= "all access";
			metalib[1]= "individual access";
			metalib[2]= "other";
			metalib[3]= "password";
			metalib[4]= "search help";

	infor_gate[7] = "special collections";

			var spec_col= "special collections";

	infor_gate[8] = "subject resources";

area[1] = "iss support";

var _form;
var dd_sel1;
var dd_sel2;
var dd_sel3;
var form_submit;
var _label;
var _label2;
var _label3;
var dd_sel1_options;
var dd_sel2_options;
var dd_sel3_options;
var default_str = "- - - - - - - - - - - - - - - - - ";
var ati_div;


function showlinks()
{

			var sel;

			ati_div=document.createElement('div');
			ati_div.className = "ati";

			create_form();
			pop_dd1();
			pop_dd2(0);
			pop_dd2(0);


	// add the javascript to send the browser to the dropdown location
			_form.onsubmit=function(){
				sel=document.getElementById(dropdownid);
				self.location=sel.options[sel.selectedIndex].value;
				return false;
			};


// assemble the form HTML and append it to the element
			_form.appendChild(_label);
			_form.appendChild(dd_sel1);
			_form.appendChild(_label2);
			_form.appendChild(dd_sel2);
			_form.appendChild(_label3);
			_form.appendChild(dd_sel3);

			//_form.appendChild(form_submit);
			ati_div.appendChild(_form);

// add the element as the first body child if it is not there yet


			document.body.insertBefore(ati_div,document.body.firstChild);



}
// call showlinks when the page is loaded
window.onload=showlinks


function getValue(source, index)
{


if (source=="dd_sel1")
	{//alert("g1"+index);
	pop_dd2(index);}

if (source=="dd_sel2")
	{//alert("g2"+index) ;
	pop_dd3(index);}


//alert( i+ "" +source);

//if (source == "dd_sel1")
}

function create_form()
{
				_form=document.createElement('form');
				_form.setAttribute('name', "ATI_form");
				_label=document.createElement('label')
				_label.appendChild(document.createTextNode("Area  "));
				//_label.setAttribute('for',dropdownid);  ?????

				dd_sel1=document.createElement('select');
				dd_sel1.setAttribute('name', "dd_sel1");
				dd_sel1.onchange = function() {getValue(this.name, this.selectedIndex)};
				dd_sel1.setAttribute('id',"area_drop");

				_label2=document.createElement('label')
				_label2.appendChild(document.createTextNode("Area 2 "));

				dd_sel2=document.createElement('select');
				dd_sel2.setAttribute('name', "dd_sel2");
				dd_sel2.onchange = function() {getValue(this.name, this.selectedIndex)};
				dd_sel2.setAttribute('id',"area_drop2");

				_label3=document.createElement('label')
				_label3.appendChild(document.createTextNode("Area3 "));
				dd_sel3=document.createElement('select');
				dd_sel3.setAttribute('name', "dd_sel3");
				dd_sel3.onchange = function() {getValue(this.name, this.selectedIndex)};
				dd_sel3.setAttribute('id',"area_drop3");


				//form_submit=document.createElement('input');
				//form_submit.setAttribute('type','submit');
				//form_submit.setAttribute('value','GO');
}


function insert_options()
{
// insert area elements

			for(i=0;i<area.length;i++)
			{
				dd_sel1_options=document.createElement('option');
				dd_sel1_options.appendChild(document.createTextNode(area[i]));
				dd_sel1_options.setAttribute('value',area[i]);
				dd_sel1.appendChild(dd_sel1_options);
			}

			dd_sel2_options=document.createElement('option');
			dd_sel2_options.appendChild(document.createTextNode(infor_gate[0]));
			dd_sel2_options.setAttribute('value',"d2");
			dd_sel2.appendChild(dd_sel2_options);

			dd_sel3_options=document.createElement('option');
			dd_sel3_options.appendChild(document.createTextNode(arch_cat));
			dd_sel3_options.setAttribute('value',"d3");
			dd_sel3.appendChild(dd_sel3_options);
}

function removeAllChildNodes(node) {

	if (node && node.hasChildNodes && node.removeChild)
		while (node.hasChildNodes())
			node.removeChild(node.firstChild);
}

function pop_dd1()
{
	for(i=0;i<area.length;i++)
			{
				dd_sel1_options=document.createElement('option');
				dd_sel1_options.appendChild(document.createTextNode(area[i]));
				dd_sel1_options.setAttribute('value',area[i]);
				dd_sel1.appendChild(dd_sel1_options);
			}
}

function pop_dd2(index)
{

			removeAllChildNodes(dd_sel2);
			removeAllChildNodes(dd_sel3);

	if (index==0)
		{
			for(i=0;i<infor_gate.length;i++)
			{
				dd_sel2_options=document.createElement('option');
				dd_sel2_options.appendChild(document.createTextNode(infor_gate[i]));
				dd_sel2_options.setAttribute('value',infor_gate[i]);
				dd_sel2.appendChild(dd_sel2_options);



			}

			dd_sel3_options=document.createElement('option');
			dd_sel3_options.appendChild(document.createTextNode(arch_cat));
			dd_sel3_options.setAttribute('value',arch_cat);
			dd_sel3.appendChild(dd_sel3_options);
		}

}

function pop_dd3(index)
{


			//empty_dd3();
			removeAllChildNodes(dd_sel3);

		if (index==0)
			{
			dd_sel3_options=document.createElement('option');
			dd_sel3_options.appendChild(document.createTextNode(arch_cat));
			dd_sel3_options.setAttribute('value',arch_cat);
			dd_sel3.appendChild(dd_sel3_options);
			}
		else if (index==1)
			for(i=0;i<databases.length;i++)
			{
				dd_sel3_options=document.createElement('option');
				dd_sel3_options.appendChild(document.createTextNode(databases[i]));
				dd_sel3_options.setAttribute('value',databases[i]);
				dd_sel3.appendChild(dd_sel3_options);
			}
		else if (index==2)
			for(i=0;i<ebooks.length;i++)
			{
				dd_sel3_options=document.createElement('option');
				dd_sel3_options.appendChild(document.createTextNode(ebooks[i]));
				dd_sel3_options.setAttribute('value',ebooks[i]);
				dd_sel3.appendChild(dd_sel3_options);
			}
		else if (index==3)
			for(i=0;i<ejournals.length;i++)
			{
				dd_sel3_options=document.createElement('option');
				dd_sel3_options.appendChild(document.createTextNode(ejournals[i]));
				dd_sel3_options.setAttribute('value',ejournals[i]);
				dd_sel3.appendChild(dd_sel3_options);
			}
		else if (index==4)
			for(i=0;i<legal_comp.length;i++)
			{
				dd_sel3_options=document.createElement('option');
				dd_sel3_options.appendChild(document.createTextNode(legal_comp[i]));
				dd_sel3_options.setAttribute('value',legal_comp[i]);
				dd_sel3.appendChild(dd_sel3_options);
			}
		else if (index==5)
			for(i=0;i<lib_cat.length;i++)
			{
				dd_sel3_options=document.createElement('option');
				dd_sel3_options.appendChild(document.createTextNode(lib_cat[i]));
				dd_sel3_options.setAttribute('value',lib_cat[i]);
				dd_sel3.appendChild(dd_sel3_options);
			}
		else if (index==6)
			for(i=0;i<metalib.length;i++)
			{
				dd_sel3_options=document.createElement('option');
				dd_sel3_options.appendChild(document.createTextNode(metalib[i]));
				dd_sel3_options.setAttribute('value',metalib[i]);
				dd_sel3.appendChild(dd_sel3_options);
			}
		else if (index==7)
			{
				dd_sel3_options=document.createElement('option');
				dd_sel3_options.appendChild(document.createTextNode(spec_col));
				dd_sel3_options.setAttribute('value',spec_col);
				dd_sel3.appendChild(dd_sel3_options);
			}
}


-->
</SCRIPT>

</BODY>
</HTML>

css file --

Code:

html {
 overflow-x: hidden
}

div {

width : 50%;
margin-right:auto;
margin-left:auto;
}

body {
 background-color: #FFFFFF; 
 font-color: #000000;
 font-family: verdana,arial;
 font-size: 10px;
}

.top {
position: absolute; 
left: 160px; 
top: 60px;
}

.ati {
position: relative; 
top: 200px;
}

.bottom {
position: absolute; 
left: 160px; 
top: 260px;
}

_Aerospace_Eng_ · 06-03-2005, 07:14 PM

If you expect the divs not to overlap you can't use absolute positioning. Like I said the link would be better so we can see what is actually happening.

code3hree · 06-03-2005, 07:38 PM

http://84.66.146.204/

its only the middle div thats got the problem and it has settings
.ati {
position: relative;
top: 200px;
}
if you resize the browser horizontally you will see what i mean

_Aerospace_Eng_ · 06-03-2005, 07:48 PM

That link doesn't work.

code3hree · 06-03-2005, 07:59 PM

sorry wrong ip, http://81.76.105.217

_Aerospace_Eng_ · 06-03-2005, 08:25 PM

This is what I don't understand. You are worried about the user resizing the browser but yet you have used absolute positioning which means if the user resizes their browser part of the form won't be seen unless the user scrolls over to the right. Like I said before lose the absolute positioning, you don't need it. Put everything in a containing div, use margin:auto; to center it. The content will never change place. The div will automatically center in the browser.

code3hree · 06-03-2005, 08:57 PM

dont worry about the other stuff not being on screen when resized, the moving drop downs just annoyed me. forget about the other elements that are positioned using absolute, i have removed them now, they are nothing to do with my question. i have done as you suggested there only one div now and no absolute posioting anywhere. how do i keep the 3 drop down boxes on the same row all the time with out individually assigning there postions? i thought maybe overflow : hidden may help, obviously not. i'd prefer not to have to do the positioning in the DOM stuff, as i was hoping to do something in a few lines using the css file.

i am i only asking for some help not a narky answer, considering i have only been doing html, css and javascript since monday i think i'm doing fairly well, no need to talk to me like i'm an idiot, you are the one who is not answering the question i asked. hopefully you aren't the only one with suggestion as i doubt you'll be answering my question now, silly me for shooting myself in the foot

Tricia · 06-03-2005, 10:01 PM

ok so it looks like youve taken the table out (or its commented out anyway) so the only thing thats left is the script as far as I can tell and you have a closing div but I cant find an opening div...?

Any reason you used tables to do this anyway?

Take the tables out, put each drop down box in a div; and put a container div around it all.

Something like:

CSS

Code:

body {
	text-align: center;
	}

#box1, #box2, #box3 {
	width: 50px;
	float: left;
	margin-left: 0;
	text-align: left;
	}
	
#box1 {
	background-color: #00FF00;
	}
	
#box2 {
	background-color: #0000FF;
	}
	
#box3 {
	background-color: #FF0000;
	}



#container {
	display: block;
	width: 150px;
	margin-left: auto; 
	margin-right: auto;
	}

and html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
  <head><title>test</title>
     <link rel="stylesheet" type="text/css" href="blah.css" />
  </head>
  <body>
    <div id="container">
      <div id="box1">blah blah</div>
      <div id="box2">blah blah blah</div>
      <div id="box3">blah blah blah blah</div>
    </div>
  </body>
</html>

_Aerospace_Eng_ · 06-03-2005, 10:05 PM

That wasn't hard now was it? Tricia showed you what I already said you needed to do.

code3hree · 06-03-2005, 11:14 PM

thanks Tricia, all points taken on board, i've completely deleted everything in the html file not generated by the DOM stuff. my css file is now --

Code:

body {
 text-align: center;
 background-color: #FFFFFF; 
 font-color: #000000;
 font-family: verdana,arial;
 font-size: 10px;
}


#dd1, #dd2, #dd3 {
	float: left;
	margin-left: 0;
	text-align: left;
	}
	

#container {
	display: block;
	width: 150px;
	margin-left: auto; 
	margin-right: auto;
	}

my problem now is that when i add the elements to the container div like this one at a time

Code:

container.className = "container";
div1.className = "dd1";
div2.className = "dd2";
div3.className = "dd3";

div1.appendChild(_label);
div1.appendChild(dd_sel1);
container.appendChild(div1);

div2.appendChild(_label2);
div2.appendChild(dd_sel2);
container.appendChild(div2);

div3.appendChild(_label3);
div3.appendChild(dd_sel3);
container.appendChild(div3);

_form.appendChild(container);

they end up on top of each other like this http://81.76.105.217 and when i each drop down to only one container they are in the same row but have to same prob as before, http://81.76.105.217/index2.html

sorry if this is going on and on, i just can get them to stay bolted in position the way that your example does

Tricia · 06-03-2005, 11:27 PM

This is where my help stops cuz I know very little about javascript

But, I'll throw my .02 in anyway

in the js, you are calling the divs classes so you gotta change the "#" to a "." ...me thinks. But I could be completely off base.

Sorry I cant be of more help

code3hree · 06-03-2005, 11:47 PM

thanks, changed # for a . made it look a bit prettier but still no luck