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 3 of 3

Thread: Help needed!

  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help needed!

    Hi! I am currently working on a form which doesn't act quite as I want it to.

    Here's the html-code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    <title>title</title>
    		<link rel="stylesheet" type="text/css" href="interface.css" >
    		<script type="text/javascript" src="interface.js"></script>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
    	</head>
    	<body onload="startup();">
    	
    		<form class='ichildren' id=Form1>
    			<div class='keys bchildren' id='propdiv' style="width: 900px">
    				<input type='text' name='f1' value='Field 1' ID=Text1 />
    				<input type='text' name='f2' value='Field 2' ID=Text2 />
    				<input type='text' name='f3' value='Field 3' ID=Text3 />
    				<input type='text' name='f4' value='Field 4' ID=Text4 />
    				<input type='submit' value='test text' name='b1' ID=Submit1 />
    			<div />
    			<div class='elements bchildren' id='boxdiv'>
    				Hi there
    			</div>
    		</form>
    		
    	</body>
    </html>
    Here's interface.css:
    Code:
    body {
    	background-color: rgb(200,200,200);
    }
    
    .keys {
    	background-color: rgb(200,200,255);
    }
    .elements {
    	background-color: rgb(255,200,200);
    }
    
    /* CLASSES */
    .ichildren * {
    	display: inline;
    }
    .bchildren * {
    	display: block;
    }
    And interface.js is just a file with a so far empty function called startup.

    But it's not acting as I would like it to. First, the form is set to class "ichildren", which should make the two div's in it end up at the same row and not over and under each other. I have heard of other who has had problems making div's act as inline objects, can it be so that "display: inline;" is not working well with divs?

    Another thing, since the first div is set to class 'keys', and contains all the text boxes and the button, I would like the text boxes and the button to have a red background, which class keys specifies. And the text "Hi there" I would like to have a blue background. Instead the text gets a red background, and the rest of the row (to the right of the text) gets a blue background. How comes? I have no clue of what is wrong.

  • #2
    Regular Coder
    Join Date
    Dec 2002
    Location
    Ontario, Canada
    Posts
    183
    Thanks
    0
    Thanked 1 Time in 1 Post
    There are just a couple of little things.

    First the end tag for your first div is <div /> when it should be </div> and your keys class is not red its blue remember (rgb) so your (200,200,255) is blue. This means that you need to change the element class aswell cause right now its red. Last is the display I find that they all need to be inline if you what them to line up like that.

    So your new html should be.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    <title>title</title>
    		<link rel="stylesheet" type="text/css" href="interface.css" >
    		<script type="text/javascript" src="interface.js"></script>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
    	</head>
    	<body onload="startup();">
    	
    		<form class='ichildren' id=Form1>
    			<div class='keys bchildren' id='propdiv' style="width: 900px">
    				<input type='text' name='f1' value='Field 1' ID=Text1 />
    				<input type='text' name='f2' value='Field 2' ID=Text2 />
    				<input type='text' name='f3' value='Field 3' ID=Text3 />
    				<input type='text' name='f4' value='Field 4' ID=Text4 />
    				<input type='submit' value='test text' name='b1' ID=Submit1 />
    			</div >
    			<div class='elements bchildren' id='boxdiv'>
    				Hi there
    			</div>
    		</form>
    		
    	</body>
    </html>
    And your new css should be.
    Code:
    /* CSS Document */
    body {
    	background-color: rgb(200,200,200);
    }
    
    .keys {
    	background-color: rgb(255,200,200);
    }
    .elements {
    	background-color: rgb(200,200,255);
    }
    
    /* CLASSES */
    .ichildren * {
    	display: inline;
    }
    .bchildren * {
    	display: inline;
    }
    Hope this is some help.
    if ( atfirst != succeed)
    tryagain();

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Also:

    Code:
    		<form class="ichildren" id="Form1">
    			<div class="keys bchildren" id="propdiv" style="width: 900px">
    				<input type="text" name="f1" value="Field 1" id="Text1" />
    				<input type="text" name="f2" value="Field 2" id="Text2" />
    				<input type="text" name='f3' value='Field 3' id="Text3" />
    				<input type="text" name="f4" value="Field 4" id="Text4" />
    				<input type="submit" value="test text" name="b1" id="Submit1" />
    			</div >
    			<div class="elements bchildren" id="boxdiv">
    				Hi there
    			</div>
    		</form>
    just fixing up your quotations, though I'm not sure of the importance of these except for validation purposes it may cause you problems later
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools


  •  

    Posting Permissions

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