Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Jun 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    stopping div elements from realigning when windows too small

    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?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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).

  • #3
    New to the CF scene
    Join Date
    Jun 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;
    }

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Jun 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    That link doesn't work.

  • #7
    New to the CF scene
    Join Date
    Jun 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry wrong ip, http://81.76.105.217

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #9
    New to the CF scene
    Join Date
    Jun 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #10
    New Coder
    Join Date
    Feb 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    That wasn't hard now was it? Tricia showed you what I already said you needed to do.

  • #12
    New to the CF scene
    Join Date
    Jun 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #13
    New Coder
    Join Date
    Feb 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #14
    New to the CF scene
    Join Date
    Jun 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, changed # for a . made it look a bit prettier but still no luck


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •