...

View Full Version : Using css Relative Positioning with php inlcudes/problem in IE 6



johnn7Devlpr
05-11-2007, 05:43 PM
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

marian26
05-11-2007, 05:49 PM
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.

johnn7Devlpr
05-11-2007, 06:08 PM
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

johnn7Devlpr
05-11-2007, 06:11 PM
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:confused: ,, thanks for the help

marian26
05-11-2007, 06:15 PM
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 .

johnn7Devlpr
05-11-2007, 06:23 PM
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,,

marian26
05-11-2007, 06:36 PM
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>

johnn7Devlpr
05-11-2007, 06:41 PM
Ok thanks alot i will try it that way ,, :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum