Ok, after years of table corruption 
I am going to try my first 100% css based website. Loving every second of it, except this second. I can't seem to get this to work.
Here's my page code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Who's Who User Management</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css" />
</head>
<body>
<div id="center">
<h1>Who's Who User Management System</h1>
<form>
<div id="leftside">
First Name: <input type="text">
</div>
<div id="rightside">
Address: <input type="text">
</div>
</form>
</div>
</body>
</html>
Here's my CSS file:
#center
{
background: skyblue;
width: 600px;
border: 1px solid black;
padding: 10;
}
#leftside
{
position:absolute; left:10px; top:70px;
background: yellow;
width: 250px;
border: 1px solid black;
padding: 10;
}
#rightside
{
position:absolute; left:300px; top:70px;
background: yellow;
width: 250px;
border: 1px solid black;
padding: 10;
}
h1
{
font-family: arial;
color: black;
}
form, input
{
font-family: arial;
font-size: 12px;
font-color: black;
}
Here's the problem, (you can see my attachment for the pic) I need the two yellow boxes to be INSIDE the blue box as a part of it. If I do relative instead of absolute, the first box works great, however the second box becomes relative to the first box, not to the skyblue box as it should. I have the yellow box <div> inside the original <div> but it doesnt seem to matter. How can I make BOTH boxes relative to the blue, or a part of the blue box. Do you see what I mean?I don't believe there's any way to make both relative to the blue box. But, you could just change the height of the blue box to 120px and it seems to work fine:
#center
{
background: skyblue;
width: 600px;
height: 120px;
border: 1px solid black;
padding: 10;
}
Also, I noticed that if the user has their browser text size on anything above "Smaller", the word System gets put under the Login box. You might either want to make the blue box wider, or specify a font size for the text so it doesn't ever wrap.Try this...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Who's Who User Management</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="author" content="Joshua J Mallory (<!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->)" />
<link href=http://www.webdeveloper.com/forum/archive/index.php/"style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<h1>Who's Who User Management System</h1>
<form action="">
<div class="left">
First Name: <input type="text" />
</div>
<div class="right">
Address: <input type="text" />
</div>
</form>
<br />
<br />
<br />
</div>
</body>
</html>
and this...
div.main {
background-color: #87ceeb;
color: #000000;
border: #000000 solid 1px;
padding: 10px;
width: 600px;
font-family: Arial, Verdana, serif;
}
div.left {
background-color: #ffff00;
color: #000000;
border: #000000 solid 1px;
padding: 10px;
width: 250px;
float: left;
}
div.right {
background-color: #ffff00;
color: #000000;
border: #000000 solid 1px;
padding: 10px;
width: 250px;
float: right;
}
Let me know if it works for youHere's the screenshot using Internet Explorer.Here's the same one using Netscape Navigator.
I am going to try my first 100% css based website. Loving every second of it, except this second. I can't seem to get this to work.Here's my page code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Who's Who User Management</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css" />
</head>
<body>
<div id="center">
<h1>Who's Who User Management System</h1>
<form>
<div id="leftside">
First Name: <input type="text">
</div>
<div id="rightside">
Address: <input type="text">
</div>
</form>
</div>
</body>
</html>
Here's my CSS file:
#center
{
background: skyblue;
width: 600px;
border: 1px solid black;
padding: 10;
}
#leftside
{
position:absolute; left:10px; top:70px;
background: yellow;
width: 250px;
border: 1px solid black;
padding: 10;
}
#rightside
{
position:absolute; left:300px; top:70px;
background: yellow;
width: 250px;
border: 1px solid black;
padding: 10;
}
h1
{
font-family: arial;
color: black;
}
form, input
{
font-family: arial;
font-size: 12px;
font-color: black;
}
Here's the problem, (you can see my attachment for the pic) I need the two yellow boxes to be INSIDE the blue box as a part of it. If I do relative instead of absolute, the first box works great, however the second box becomes relative to the first box, not to the skyblue box as it should. I have the yellow box <div> inside the original <div> but it doesnt seem to matter. How can I make BOTH boxes relative to the blue, or a part of the blue box. Do you see what I mean?I don't believe there's any way to make both relative to the blue box. But, you could just change the height of the blue box to 120px and it seems to work fine:
#center
{
background: skyblue;
width: 600px;
height: 120px;
border: 1px solid black;
padding: 10;
}
Also, I noticed that if the user has their browser text size on anything above "Smaller", the word System gets put under the Login box. You might either want to make the blue box wider, or specify a font size for the text so it doesn't ever wrap.Try this...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Who's Who User Management</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="author" content="Joshua J Mallory (<!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->)" />
<link href=http://www.webdeveloper.com/forum/archive/index.php/"style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<h1>Who's Who User Management System</h1>
<form action="">
<div class="left">
First Name: <input type="text" />
</div>
<div class="right">
Address: <input type="text" />
</div>
</form>
<br />
<br />
<br />
</div>
</body>
</html>
and this...
div.main {
background-color: #87ceeb;
color: #000000;
border: #000000 solid 1px;
padding: 10px;
width: 600px;
font-family: Arial, Verdana, serif;
}
div.left {
background-color: #ffff00;
color: #000000;
border: #000000 solid 1px;
padding: 10px;
width: 250px;
float: left;
}
div.right {
background-color: #ffff00;
color: #000000;
border: #000000 solid 1px;
padding: 10px;
width: 250px;
float: right;
}
Let me know if it works for youHere's the screenshot using Internet Explorer.Here's the same one using Netscape Navigator.