Help required

aziz09 · February 22, 2013, 11:29am

Could someone help me with a website. what is the code so that I make a border in the middle of the page and then the information to be stored inside that box ? can someone help this is an eg in a image.

molona · February 22, 2013, 11:56am

Regarding the line… depending of the type of line you want (if it is horizontal, vertical or a free form as you posted…) there are different ways.

For a free form, you will need a picture and place it inside the box (probably as a background picture) and then place it

Use CSS for that. CSS properties like position, top, left and background should get you sorted.

For a vertical or horizontal line… if it is the border of the box, you simply need to use the CSS property border (that would be for all top, bottom, left and right borders) or border-top, border-left, etc. if you simply one of them.

aziz09 · February 22, 2013, 12:04pm

Hmm… Should I paste the code ? because I am new to the web development and I would like someone to maybe edit the code and input the info inside the border?

webcosmo · February 22, 2013, 4:11pm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html, body {height:100%;margin:0;padding:0;}
body  {
	background:#fff;
	color:#000;
	font-size:12px;
	font-family: Arial, Helvetica, sans-serif;
}
.myDiv {
	position:absolute;
     width:600px;
     height:300px;
     z-index:15;
     top:50%;
     left:50%;
     margin:-150px 0 0 -300px; /* Half the dimensions of the box */
     border:5px solid #000;
}
.myform {
	margin:40px 100px;
}
-->
</style>
</head>

<body>
	<div class="myDiv">
		<div class="myform">
			<form id="form1" name="form1" method="post" action="">
			  <label>Your full name:<br />
			    <input type="text" name="name" id="name" />
				  </label><br />
				  <label>E-mail<br />
			    <input type="text" name="email" id="email" />
				  </label>
			</form>
			<p> Note: Please make sure....</p>
		</div>
	</div>
</body>
</html>

I hope this helps, with little tweaks should be what you need:)

molona · February 22, 2013, 7:31pm

You can always do that (code always help) or you can follow the advice that @webcosmo; has given you so kindly

aziz09 · February 23, 2013, 12:44am

Hello. I need help for final time. the code to move the map to that specific location that is on the image shown

the code for this is :

molona · February 23, 2013, 9:16am

First, put the iframe inside the box. Then simply add to your CSS

iframe{
position: relative; 
bottom: 0,5em; 
right:0,5em
}

aziz09 · February 23, 2013, 11:36am

I don’t know how I did put the code into body then used css code and nothing happened

molona · February 23, 2013, 1:58pm

can you post your html?

aziz09 · February 23, 2013, 2:11pm

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Untitled Document</title>
<style type=“text/css”>

html, body {height:100%;margin:0;padding:0;}
body {
background:#fff;
color:#000;
font-size:13px;
font-family: Arial, Helvetica, sans-serif;
background-image:url(‘backgtround2.jpg’);
background-repeat: no-repeat;
background-position:50% 0px;
background-color:#969696;

</style>
</head>

&lt;/div&gt;

</body>
</html>

molona · February 25, 2013, 7:53am

Sorry I didn’t reply sooner. I had a pretty busy weekend.

It has been my mistake and I do apologize. The position needs to be absolute. Relative means in relation to the space that the object would be if it wasn’t moved while absolute is in relation of the first container that has a position. And if no container has a position, like in this case, that would be in relation to the root element