1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Problem with css divs

Discussion in 'CSS' started by itsmani1, Jan 26, 2006.

0
  1. #1
    I am using divs instead of using tables and i not able to manage it,

    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
     
    itsmani1, Jan 26, 2006 IP
  2. karmik

    karmik Peon

    Messages:
    329
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I am sure below code will help:

    <style type="text/css">
    <!--
    body {
    width:100%;
    margin-left: 0px;
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #000000;
    }
    #out1{
    background-color: #00FFFF;
    height: auto;
    width: 884px;
    border: 1px solid #00FF00;
    }
    #left1{
    float:left;
    background-color: #0000FF;
    border: 0px solid #00CCFF;
    width: 200px;
    }
    #right1{
    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 dfsgdfs sdfglkj sdfg asdf asdf asdf<br />asdf dfsgdfs sdfglkj sdfg asdf asdf asdf</div>
    </div>
    </body>
     
    karmik, Jan 27, 2006 IP
  3. itsmani1

    itsmani1 Peon

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    but the this in on left side of the page, how can i bring it in center of the page?

    thanks for the help.
     
    itsmani1, Jan 27, 2006 IP
  4. karmik

    karmik Peon

    Messages:
    329
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Just add text-align: center; in your body tag and margin: 0 auto;, text-align: left; in out1 tag.

    Your new code will be something like this and will work great in both IE and FF

    <style type="text/css">
    <!--
    body {
    width:100%;
    margin-left: 0px;
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #000000;
    text-align: center;
    }
    #out1{
    background-color: #00FFFF;
    height: auto;
    width: 884px;
    border: 1px solid #00FF00;
    margin: 0 auto;
    text-align: left;
    }
    #left1{
    float:left;
    background-color: #0000FF;
    border: 0px solid #00CCFF;
    width: 200px;
    }
    #right1{
    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 dfsgdfs sdfglkj sdfg asdf asdf asdf<br />asdf dfsgdfs sdfglkj sdfg asdf asdf asdf</div>
    </div>
    </body>
     
    karmik, Jan 27, 2006 IP
  5. itsmani1

    itsmani1 Peon

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    when i applies text-align = center in body it moved in the middle in IE but when i appled margin 0 auto, then it worked correctly in FF, can you plz. tell me the reason and login behind this?

    thanks very much.
     
    itsmani1, Jan 27, 2006 IP
  6. karmik

    karmik Peon

    Messages:
    329
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #6
    This is more about CSS support issue on various browsers.
    The code margin: 0 auto; gives 0 pixels on top and auto margin on left and right to the body. text-align: center; is used primarily for IE.
     
    karmik, Jan 27, 2006 IP
  7. itsmani1

    itsmani1 Peon

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    now this is my current code :
    <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>
    -------------------------
    Outout is 100% correct on IE but in FF it gives me one line break in left div,
    it should not be there, but i don't know why it is there in FF?
     
    itsmani1, Jan 27, 2006 IP
  8. itsmani1

    itsmani1 Peon

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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>
     
    itsmani1, Jan 27, 2006 IP