PDA

View Full Version : problem in managing div's (css)

itsmani1
01-27-2006, 07:30 AM
here is css code :

<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #000000;
}
#out1{
background-color: #00FFFF;
height: auto;
width: 884px;
height:auto;
border: 1px solid #00FF00;
margin: auto;
}
#left1{
background-color: #0000FF;
border: 0px solid #00CCFF;
width: 200px;
}
#right1{
width: 200px;
background-color: #33CC33;
border: 0px solid #9999FF;
}
-->
</style>
here is my heml code :
<body>
<div id="out1">
<div id="left1">asdf dfsgdfs sdfglkj sdfg asdf asdf asdf</div>
<div id="right1">asdf </div>
</div>
</body>
----------------------------
i want the output something like this:

there should be outer bar
and in that outer there i want two parallel bars, but its not working, out but is two bars one under the other one, plz. help me.

thanks
M. Abdul Mannan


-------------------------------------
http://mannan.zabvision.edu.pk (http://mannan.zabvision.edu.pk)
Outsourcing (http://maair.net)
ronaldb66
01-27-2006, 08:16 AM
Divs are block level elements by default; stacking on top of eachother is what they do.

Try floating:
#left1{
float: left;
background-color: #0000FF;
border: 0px solid #00CCFF;
width: 200px;
}
#right1{
float: right;
width: 200px;
background-color: #33CC33;
border: 0px solid #9999FF;
}
Add the float properties in red; you may want to use "float: left;" on the right1 div as well, depending on the effect you want to accomplish.
itsmani1
01-27-2006, 08:31 AM
okies thanks man, plz. give me some tips when i change the resoluton of the computer it don't work correctly give me some tips if possible

thanks for the help.
Mannan.
itsmani1
01-27-2006, 10:07 AM
<style type="text/css">
<!--
body {
width:100%;
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
background-color: #000000;
}
#out1{
background-color: #00FFFF;
text-align: left;
margin: 0 auto;
height: auto;
width: 880px;
border: 0px solid #00FF00;
}
#left1{
float:left;
background-color: #848877;
border: 0px solid #00CCFF;
width: 154px;
}
#right1{
float: left;
width:726px;
background-color: #33CC33;
border: 0px solid #9999FF;
}
#contactimg{
float: left;
height: 50px;
width: 726px;
background-color: #FFFFFF;
}
-->
</style>
<body>
<div id="out1">
<div id="left1">
<p>Under Left Dive </p>
</div>
<div id="right1">
<div id="contactimg">Under Contact Image</div>
<p>Under Right Div</p>
</div>
</div>
</body>
------------------
here is my current code, its working fine in IE, but when i try it in FF it give me one line break in left1 div tag?
itsmani1
01-27-2006, 12:31 PM
i am trying to copy http://www.stage3.com/contactUs.htm
but there is some problem with my form fields, can any one help me?
here is my code.

--------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style/stage3productions.css" rel="stylesheet" type="text/css">
</head>
<style type="text/css">
<!--
body {
width:100%;
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
background-color: #000000;
}
#out1{
background-color: #FFFFFF;
text-align: left;
margin: 0 auto;
height: auto;
width: 882px;
border: 0px solid #00FF00;
}
#left1{
float:left;
background-color: #5B6370;
border: 0px solid #00CCFF;
width: 155px;
}
#right1{
float: left;
width:727px;
background-color: #FFFFFF;
border: 0px solid #9999FF;
}
#contactimg{
float: left;
height: auto;
width: 726px;
background-color: #FFFFFF;
padding: 82px 0px 0px;
}
#logoimage{
float: none;
height: auto;
width: 115px;
padding-top: 16px;
padding-left: 20px;
}
#cinfo_blank{
height: 12px;
width: auto;
padding-top: 0px;
padding-left: 32px;
}
#cinfo{
height: auto;
width: auto;
padding-top: 2px;
padding-left: 32px;
}
#cinfo1{
height: auto;
width: auto;
padding-top: 2px;
padding-left: 32px;
}
#blank{
background-color: #FFFFFF;
height: 40px;
width: auto;
padding-top: 0px;
padding-left: 32px;
}
#fields{
height: auto;
width: auto;
background-color: #FFFFFF;
padding-left: 6px;
padding-top: 1px;
border: 0px solid #0000FF;
}
#ftext{
float: left;
padding-left: 30px;
height: auto;
width: auto;
border: 0px solid #CCCCCC;
vertical-align: top;
}
#finput{
float: left;
height: auto;
width: auto;
border: 0px solid #CCCCCC;
}

-->
</style>
<body>
<form action="" method="get">
<div id="out1">
<div id="left1">
<div align="center" id="logoimage">
<img src="images/logo_subPge.jpg" width="112" height="112">
</div>
Under Left Dive
asdf asdf
asdf
asdf
asdf sdfsadf asdfsadfsadfas asdf asdf sdf</p>
<p>sadf</p>
<p>sadf</p>
<p>sadf </p>
<p>00</p>
<p>0 </p>
<p>0</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="right1">
<div id="contactimg">
<img src="images/txt_cntctUs.jpg" width="160" height="24">
<div class="txt_itlc_blk" id="cinfo">
Stage 3 Productions, Inc.
</div>
<div id="cinfo" class="txt_itlc_blk">
27500 Donald Ct.
</div>
<div id="cinfo" class="txt_itlc_blk">
Warren MI 48092
</div>
<div id="cinfo_blank" class="txt_itlc_blk">
&nbsp;
</div>
<div id="cinfo1" class="txt_itlc_blk">
<strong>Ph:</strong> 888-330-5179
</div>
<div id="cinfo1" class="txt_itlc_blk">
<strong>Fax:</strong> 586-978-9085
</div>
<div id="cinfo1" class="txt_itlc_blk">
<strong>Email:</strong> <a href="mailto:%20info@stage3.com">info@stage3.com </a>
</div>
<div class="subHding_blk" id="blank" align="left">
<br>
Send Us An Email:
</div>
</div>
<div id="fields">
<div id="ftext" class="txtBld_ltGrn">
Your Name
</div>
<div id="ftext" class="txtBld_ltGrn">
<input type="text" name="abc">
</div>
</div>
<div id="fields">
<div id="ftext" class="txtBld_ltGrn">
Your Name
</div>
<div id="ftext" class="txtBld_ltGrn">
<input type="text" name="abc">
</div>
</div>
<div id="fields">
<div id="ftext" class="txtBld_ltGrn">
Your Name
</div>
<div id="ftext" class="txtBld_ltGrn">
<input type="text" name="abc">
</div>
</div>
</div>
</div>
</form>
</body>
</html>
itsmani1
01-27-2006, 12:32 PM
i am trying to copy http://www.stage3.com/contactUs.htm using css
and found problem with fields section, can any one help me out? here is my css code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style/stage3productions.css" rel="stylesheet" type="text/css">
</head>
<style type="text/css">
<!--
body {
width:100%;
margin-left: 0px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
background-color: #000000;
}
#out1{
background-color: #FFFFFF;
text-align: left;
margin: 0 auto;
height: auto;
width: 882px;
border: 0px solid #00FF00;
}
#left1{
float:left;
background-color: #5B6370;
border: 0px solid #00CCFF;
width: 155px;
}
#right1{
float: left;
width:727px;
background-color: #FFFFFF;
border: 0px solid #9999FF;
}
#contactimg{
float: left;
height: auto;
width: 726px;
background-color: #FFFFFF;
padding: 82px 0px 0px;
}
#logoimage{
float: none;
height: auto;
width: 115px;
padding-top: 16px;
padding-left: 20px;
}
#cinfo_blank{
height: 12px;
width: auto;
padding-top: 0px;
padding-left: 32px;
}
#cinfo{
height: auto;
width: auto;
padding-top: 2px;
padding-left: 32px;
}
#cinfo1{
height: auto;
width: auto;
padding-top: 2px;
padding-left: 32px;
}
#blank{
background-color: #FFFFFF;
height: 40px;
width: auto;
padding-top: 0px;
padding-left: 32px;
}
#fields{
height: auto;
width: auto;
background-color: #FFFFFF;
padding-left: 6px;
padding-top: 1px;
border: 0px solid #0000FF;
}
#ftext{
float: left;
padding-left: 30px;
height: auto;
width: auto;
border: 0px solid #CCCCCC;
vertical-align: top;
}
#finput{
float: left;
height: auto;
width: auto;
border: 0px solid #CCCCCC;
}

-->
</style>
<body>
<form action="" method="get">
<div id="out1">
<div id="left1">
<div align="center" id="logoimage">
<img src="images/logo_subPge.jpg" width="112" height="112">
</div>
Under Left Dive
asdf asdf
asdf
asdf
asdf sdfsadf asdfsadfsadfas asdf asdf sdf</p>
<p>sadf</p>
<p>sadf</p>
<p>sadf </p>
<p>00</p>
<p>0 </p>
<p>0</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="right1">
<div id="contactimg">
<img src="images/txt_cntctUs.jpg" width="160" height="24">
<div class="txt_itlc_blk" id="cinfo">
Stage 3 Productions, Inc.
</div>
<div id="cinfo" class="txt_itlc_blk">
27500 Donald Ct.
</div>
<div id="cinfo" class="txt_itlc_blk">
Warren MI 48092
</div>
<div id="cinfo_blank" class="txt_itlc_blk">
&nbsp;
</div>
<div id="cinfo1" class="txt_itlc_blk">
<strong>Ph:</strong> 888-330-5179
</div>
<div id="cinfo1" class="txt_itlc_blk">
<strong>Fax:</strong> 586-978-9085
</div>
<div id="cinfo1" class="txt_itlc_blk">
<strong>Email:</strong> <a href="mailto:%20info@stage3.com">info@stage3.com </a>
</div>
<div class="subHding_blk" id="blank" align="left">
<br>
Send Us An Email:
</div>
</div>
<div id="fields">
<div id="ftext" class="txtBld_ltGrn">
Your Name
</div>
<div id="ftext" class="txtBld_ltGrn">
<input type="text" name="abc">
</div>
</div>
<div id="fields">
<div id="ftext" class="txtBld_ltGrn">
Your Name
</div>
<div id="ftext" class="txtBld_ltGrn">
<input type="text" name="abc">
</div>
</div>
<div id="fields">
<div id="ftext" class="txtBld_ltGrn">
Your Name
</div>
<div id="ftext" class="txtBld_ltGrn">
<input type="text" name="abc">
</div>
</div>
</div>
</div>
</form>
</body>
</html>