Help needed!

TriKri

08-01-2007, 11:56 AM

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

Here's the html-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:
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.

Frank

08-01-2007, 01:29 PM

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.
<!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.

/* 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.

ahallicks

08-01-2007, 01:52 PM

Also:

<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