Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Using css Relative Positioning with php inlcudes/problem in IE 6

    I have recently been coding a new website using php includes , I am using a tabless design with CSS relative positioning: ,
    My problem is that for some reason when I try to overlap one on the div columns with another it pushes it down:\

    here is alink to my template , Still messy/work in progress,,

    http://www.dcmconvert.com/dcmonline_info.php

    any help would be appreciated,,, also if you view this page in IE you will notice that on drop down of the left naveigation menu I am having a problem with the menu div popping the border out like 38 px or something, Please Help! ,, thanks

  • #2
    New Coder
    Join Date
    May 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Give a fix size in px to the wrapper, left-column, right-column and a percentage % value for the main-content and then modify the % value for the main content untill you get it right.

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi , thanks for the reply ,

    Ok I tried

    .wrapper {
    background-image: url('wrapper.gif');
    width: 798px fixed;
    margin: 0 auto ;
    }
    and I Changed the content class

    .content {
    position: relative;
    background:#fff;
    width:100%;
    left:13px;
    top: 1px;
    }

    but It has seemed to change everything on my page

  • #4
    New Coder
    Join Date
    May 2007
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    could you possibly look at my code and see if you can spot the problem ? , I've been at this for a day now with progress ,, thanks for the help

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by johnn7Devlpr View Post
    Hi , thanks for the reply ,
    .content {
    position: relative;
    background:#fff;
    width:100%;
    left:13px;
    top: 1px;
    }

    but It has seemed to change everything on my page
    .content it's the center column ? If so you got to change the width to a smaller value , the float:left your left column and float:right your right column .

  • #6
    New Coder
    Join Date
    May 2007
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I am using the .content class to position all three included html's

    (start of .php code)
    <div class="content">
    <?php include ("right_menu.html"); ?>
    <?php include ("main_content.html"); ?>
    <?php include ("menu.html"); ?>

    </div>


    (start of menu.html)
    ------------------------------------
    <div class="menu_header"></div>
    <div class="menudiv">
    <dl id="menu">
    <dt onclick="javascript:show('smenu
    <li><a
    ETC......

    (start of main_content.html)
    </head>
    <body>
    <img class="img_eng" src="mainPageEnginr.png" />
    <div class="mid_box">
    <div class="text_head">
    Document Conversion <br /></div>
    <div class="text_main">


    (css used )
    ----------------------------------------------------
    menu_header {

    float:inherit;
    position:relative;
    margin: 0;
    top: 23px;
    left: 5px;
    padding-bottom: 0px;
    width: 152px;
    height: 18px;

    background: url(menu_top.gif) no-repeat;
    }

    .menudiv {
    position:relative;
    width: 150px fixed;
    top: 23px !IMPORTANT;
    left: 5px;
    border: 1px solid #b1b3b8;
    font: 12px ,Arial, Helvetica, sans-serif ;
    }


    * html body .menudiv {
    position:relative;
    width: 150px fixed;
    top: 23px !IMPORTANT;
    top: 21px;
    left: 5px;
    border: 1px solid #b1b3b8;
    font: 12px ,Arial, Helvetica, sans-serif ;
    }

    .mid_box {
    position: relative;
    top: -4px;
    left: 164px;
    width: 450px;
    height: auto;
    min-height: 400px;
    background:#e6e6fa;
    border-top: 1px solid #bababa;
    }
    .text_head {
    position: relative;
    top: 10px;
    left: 10px ;
    width: auto;
    height: auto;
    font: Geneva, Arial, Helvetica, sans-serif;
    font-weight:700;
    font-size:14px;
    color: #0a77d5;


    }
    .text_main {

    position: relative;
    top: -220px;
    left: 15px;
    width: 420px;
    height: auto;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color: #3e3b61;

    }

    .right_box {
    position: relative;
    top: -157px;
    left: 453px;
    width: 150px;
    height: 200px;
    background:#e6e6fa;
    border-top: 1px solid #bababa;
    }

    These are the main structural position class/id's iam using-- the right column isnt in use right now,,

  • #7
    New Coder
    Join Date
    May 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I use a simple one and then use include() inside divs :
    this is css :
    #wrapper {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 950px;
    }
    #header {
    margin: 0 0 15px 0;
    background: yellow;
    }
    #side-left {
    float: left;
    width: 165px;
    background-color:#CCCCCC;
    }
    #side-right {
    float: right;
    width: 200px;
    background-color:#CCCCCC;
    }

    #content {
    float: left;
    width: 60%;
    margin:0 0 0 5px;
    }

    #footer {
    clear: both;
    background: #A2A2A2;
    }

    this is php ( or html ) :
    <div id="wrapper">
    <div id="header">
    HEADER
    </div>
    <div id="container">
    <div id="side-left">
    LEFT SIDE
    </div>
    <div id="content">
    CONTENT
    </div>
    <div id="side-right">
    RIGHT SIDE
    </div>
    </div>
    <div id="footer">
    FOOTER
    </div>
    </div>

  • #8
    New Coder
    Join Date
    May 2007
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok thanks alot i will try it that way ,,


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •