Forum Moderators: not2easy
I have a database driven site which when it was composed all the css code was internal to the main php templates, however because all the css was written using absolute positioning I decided to re-write it using relative positioning and float so the page would flow as it should.
When I implemented the relative positioning using percents instead of pixels the php began reading the percent signs and threw errors.
I then decided to move the css to an external style sheet and link it accordingly. I would have expected this to work as the css only moved, not changed, but the pages are no longer displaying the php content correctly.
Since I only changed the css from abs to relative and pixels to percent then moved it all outside the file I believe the issue is within my css code, but after three days of trying everything I know or could find online I need some help.
To lay out the sites code some and file structure I've enclosed some code below:
All pages have basically the following layout.
<body onload="MM_preloadImages('img/btn_home.png', 'img/btn_services.png', 'img/btn_products.png', 'img/btn_contact.png', 'img/btn_about.png', 'img/btn_hm_dwn.png', 'img/btn_hm_dwn.png', 'img/btn_svc_dwn.png', 'img/btn_svc_dwn.png', 'img/btn_prod_dwn.png', 'img/btn_prod_dwn.png', 'img/btn_abt_dwn.png', 'img/btn_abt_dwn.png', 'img/btn_contact_dwn.png', 'img/btn_contact_dwn.png')">
<div id="wrap">
<div id="header"></div>
<div id="logo">
<div id="logo_text">Logo Name</div>
</div>
%s
<div id="cnt_top"></div>
<div id="content">%s</div>
<div id="footer">
<div id="ad_1"><img src="img/ads_1.png" alt="chat live" width="133" height="29" /></div>
<div id="skype"><a href="skype:#*$!#*$!#*$!?chat"><img src="http://download.skype.com/share/skypebuttons/buttons/chat_blue_transparent_97x23.png" style="border: none;" width="97" height="23" alt="Chat with me" /></a></div>
<div id="yahoo"><a href="http://messenger.yahoo.com/edit/send/?.target=#*$!#*$!#*$!">
<img border="0" src="http://opi.yahoo.com/yahooonline/u=#*$!#*$!#*$!/m=g/t=2/l=us/opi.jpg" alt="Chat with me!"/>
</a></div>
</div>
</div>
</body>
The css positioning is all set to relative without any margins however I do have a few heights and min-heights in use.
I have omitted some of the css to prevent too much code...
#body {
background-color: #3e2d1a;
font-family: "Myriad Pro";
font-size: 12px;
font-style: normal;
color: #3E2D1A;
text-align: center;
}
#wrap {
margin:0 auto 0 auto;
text-align: left;
width: 822px;
position: relative;
min-height: 100%;
height: 100%;
clear: both;
}
#header {
position:relative;
top:50px;
width:814px;
z-index:1;
background-image: url(img/header.png);
background-repeat: no-repeat;
float: left;
left: 0px;
height: 235px;
}
#logo {
position:absolute; (needed to keep above header)
top:42px;
width:228px;
height:272px;
z-index:2;
background-image: url(img/logo.png);
background-repeat: no-repeat;
float: left;
left: -2px;
}
#logo_text {
position:absolute; (needed to keep above logo)
left:26px;
top:196px;
width:160px;
height:30px;
z-index:18;
font-size: 14px;
color: #F0EBCD;
padding-left: 10px;
}
#nav_holder {
position:relative;
top:50px;
width:401px;
height:28px;
z-index:3;
float: right;
margin-right: 40px;
}
If anyone can help please email me directly with any questions or help.
Thanks,
[edited by: jatar_k at 9:57 pm (utc) on April 28, 2008]
[edit reason] fixed sidescroll [/edit]
- John
