php css not right

pngtest · June 25, 2008

hey not truly sure if this is a php thing or php thing but i have this css code.

<style type="text/css">

body{
margin: 0;
padding: 0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color:red;}

#maincontainer{
width: 840px; /*width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 12px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 180px; /*margins for content column. should be "0 right columnwidth 0 leftcolumn width*/
}

#leftcolumn{
float: left;
width: 188px; /*width of left column in pixel*/
margin-left: -840px; /*set margin to that of -(maincontainerwidth)*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 190px; /*width of right column in pixel*/
margin-left: -190px; /*set margin to -(rightcolumnwidth)*/
background: #336699;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*margins for inner div inside each column (to provide padding)*/
margin-top: 0;
}

A.menulink{
display: block;
width: 170px;
text-align: left;
text-decoration: none;
font-family: arial;
font-size: 11px;
color: #000000;
border: none;
border: solid 1px #ffffff;
}

A.menulink:hover {
border: solid 1px #6100c1;
background-color: #f0e1ff;
} 

</style>

and i call this with php code here

<html>
<head><?php include "style.css";  ?>
<title></title>
</head>

<body>

<?php

echo "<div id=\"maincontainer\"> \n";

echo   "<div id=\"topsection \"> \n";
echo     "<div class=\"innertube\"> \n";
echo       "<h1>PowerNet Global</h1>  \n";
echo     "</div>  \n";
echo   "</div> \n";



  if(empty($mainContent)){
     $mainContent = "main.html";
}

  if(empty($links)){
     $links = "linktab.html";
}

  if(empty($news)){
    $news= "newsinfo.html";
}


echo "<div id=\"contentwraaper\"> \n";
echo      "<div id=\"contentcolumn\"> \n";
echo           "<div class=\"innertube\"> \n";
include              "main.html";
echo           "</div> \n";
echo       "</div> \n";
echo  "</div> \n";

echo "<div id=\"leftcolumn\"> \n";
echo     "<div class=\"innertube\"> <b>left column</b> \n";
include  "linktab.html";
echo     "</div> \n";
echo  "</div> \n";

echo "<div id=\"rightcolumn\"> \n";
echo    "<div class=\"innertube\"> \n";
include "newinfo.html";
echo    "</div> \n";
echo "</div> \n";

print <<<HERE
<pre>
<div id="footer">
<script language=JavaScript> 
DaysofWeek = new Array() 
DaysofWeek[0]="Sunday"
DaysofWeek[1]="Monday"
DaysofWeek[2]="Tuesday"
DaysofWeek[3]="Wednesday"
DaysofWeek[4]="Thursday"
DaysofWeek[5]="Friday"
DaysofWeek[6]="Saturday"
Months = new Array()
Months[0]="January"
Months[1]="February"
Months[2]="March"
Months[3]="April"
Months[4]="May"
Months[5]="June"
Months[6]="July"
Months[7]="August"
Months[8]="September"
Months[9]="October"
Months[10]="November"
Months[11]="December"
RightNow = new Date()
var day = DaysofWeek[RightNow.getDay()]
var date = RightNow.getDate()
var Month = Months[RightNow.getMonth()]
var Year = RightNow.getFullYear()
if (date == 1 || date == 21 || date == 31)
{ender = "<SUP>st</SUP>"}
else
if (date == 2 || date == 22)
{ender = "<SUP>nd</SUP>"}
else
if (date == 3 || date == 23)
{ender = "<SUP>rd</SUP>"}
else
{ender = "<SUP>th</SUP>"}
document.write("Today is " +day+ " " +Month+ " " +date+ ender+ ", " +Year+ ".")
</SCRIPT>
</pre>
<br>
HERE;
echo "</div> \n";
echo "</div> \n";

?>

</body>
</html>

but it does not look right...... the borders are off. can anyone help me.

pngtest · June 25, 2008

ok sorry notice a typo and prolly didn't give enough info... i ment php or css issue. but when you load the page there is no text and the columns are off and all shifted to the left by like 10% but if you look and what is sent to the browser it should work. as there is no error or major mistake that i can tell. i don't know if it would help but here is the source through firefox

<html>
<head><style type="text/css">

body{
margin: 0;
padding: 0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color:red;}

#maincontainer{
width: 840px; /*width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 12px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 180px; /*margins for content column. should be "0 right columnwidth 0 leftcolumn width*/
}

#leftcolumn{
float: left;
width: 188px; /*width of left column in pixel*/
margin-left: -840px; /*set margin to that of -(maincontainerwidth)*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 190px; /*width of right column in pixel*/
margin-left: -190px; /*set margin to -(rightcolumnwidth)*/
background: #336699;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*margins for inner div inside each column (to provide padding)*/
margin-top: 0;
}

A.menulink{
display: block;
width: 170px;
text-align: left;
text-decoration: none;
font-family: arial;
font-size: 11px;
color: #000000;
border: none;
border: solid 1px #ffffff;
}

A.menulink:hover {
border: solid 1px #6100c1;
background-color: #f0e1ff;
} 

</style>

<title></title>
</head>

<body>

<div id="maincontainer"> 
<div id="topsection "> 
<div class="innertube"> 
<h1>PowerNet Global</h1>  
</div>  
</div> 

<div id="contentwraaper"> 
<div id="contentcolumn"> 
<div class="innertube"> 
this should be content in the main body of the page
</div> 
</div> 
</div> 
<div id="leftcolumn"> 
<div class="innertube"> <b>left column</b> 



<table border="0" width="180">
     <tr>
         <td width="100%" bgcolor="#E6E6E6"><b>Support Links</b>

         </td>
      </tr>
     <tr>
       <td width="100%"><a href= "png.php?mainContent=main.html" class="menulink" class=&{ns4class};>Home</a>
       </td>
     </tr>
</table>

</div> 
</div> 

<div id="rightcolumn"> 
<div class="innertube"> 
news news
</div> 
</div> 
<pre>
<div id="footer">
<script language=JavaScript> 
DaysofWeek = new Array() 
DaysofWeek[0]="Sunday"
DaysofWeek[1]="Monday"
DaysofWeek[2]="Tuesday"
DaysofWeek[3]="Wednesday"
DaysofWeek[4]="Thursday"
DaysofWeek[5]="Friday"
DaysofWeek[6]="Saturday"
Months = new Array()
Months[0]="January"
Months[1]="February"
Months[2]="March"
Months[3]="April"
Months[4]="May"
Months[5]="June"
Months[6]="July"
Months[7]="August"
Months[8]="September"
Months[9]="October"
Months[10]="November"
Months[11]="December"
RightNow = new Date()
var day = DaysofWeek[RightNow.getDay()]
var date = RightNow.getDate()
var Month = Months[RightNow.getMonth()]
var Year = RightNow.getFullYear()
if (date == 1 || date == 21 || date == 31)
{ender = "<SUP>st</SUP>"}
else
if (date == 2 || date == 22)
{ender = "<SUP>nd</SUP>"}
else
if (date == 3 || date == 23)
{ender = "<SUP>rd</SUP>"}
else
{ender = "<SUP>th</SUP>"}
document.write("Today is " +day+ " " +Month+ " " +date+ ender+ ", " +Year+ ".")
</SCRIPT>
</pre>
<br></div> 
</div> 

</body>
</html>

TheFilmGod · June 26, 2008

Dumping all your code and hoping we would go through the whole code to diagnose the error is a bit far fetched, isn't it?

Give us only the parsed php. Php does not affect css/html look... you should already know that. Of course, it IS possible that your php is illogically programmed and is creating some errors, but I highly doubt that.

Please repost with only the html/css. Just go to view source and copy and paste it. NO PHP.

Thank you,

haku · June 26, 2008

Seconded. Use 'view source' to get the outputted HTML. From there we can start to diagnose.

dannyb785 · June 26, 2008

borders being off have nothing to do with php. Unless your php is coded wrong in the area that displays the border

pngtest · June 26, 2008

figured i gave to much information just go frustrated

here the the view source from fire fox.

<html>
<head><link href="style.css" rel="stylesheet" type="text/css"><title></title>
</head>

<body>

<div id="maincontainer"> 
<div id="topsection "> 
<div class="innertube"> 
<h1>PowerNet Global</h1>  
</div>  
</div> 
<div id="contentwraaper"> 
<div id="contentcolumn"> 
<div class="innertube"> 

this should be content in the main body of the page
</div> 
</div> 
</div> 
<div id="leftcolumn"> 
<div class="innertube"> <b>left column</b> 



<table border="0" width="180">
     <tr>
         <td width="100%" bgcolor="#E6E6E6"><b>Support Links</b>
         </td>
      </tr>

     <tr>
       <td width="100%"><a href= "png.php?mainContent=main.html" class="menulink" class=&{ns4class};>Home</a>
       </td>
     </tr>
</table>

</div> 
</div> 
<div id="rightcolumn"> 
<div class="innertube"> 
news news
</div> 

</div> 
<pre>
<div id="footer">
<script language=JavaScript> 
DaysofWeek = new Array() 
DaysofWeek[0]="Sunday"
DaysofWeek[1]="Monday"
DaysofWeek[2]="Tuesday"
DaysofWeek[3]="Wednesday"
DaysofWeek[4]="Thursday"
DaysofWeek[5]="Friday"
DaysofWeek[6]="Saturday"
Months = new Array()
Months[0]="January"
Months[1]="February"
Months[2]="March"
Months[3]="April"
Months[4]="May"
Months[5]="June"
Months[6]="July"
Months[7]="August"
Months[8]="September"
Months[9]="October"
Months[10]="November"
Months[11]="December"
RightNow = new Date()
var day = DaysofWeek[RightNow.getDay()]
var date = RightNow.getDate()
var Month = Months[RightNow.getMonth()]
var Year = RightNow.getFullYear()
if (date == 1 || date == 21 || date == 31)
{ender = "<SUP>st</SUP>"}
else
if (date == 2 || date == 22)
{ender = "<SUP>nd</SUP>"}
else
if (date == 3 || date == 23)
{ender = "<SUP>rd</SUP>"}
else
{ender = "<SUP>th</SUP>"}
document.write("Today is " +day+ " " +Month+ " " +date+ ender+ ", " +Year+ ".")
</SCRIPT>
</pre>
<br></div> 
</div> 

</body>
</html>

pngtest · June 27, 2008

okay well i think there is an issue with the php cuz i have been messing around with this all day and finally made a complete html version without any php and it worked fine... can anyone help.

haku · June 27, 2008

What do you mean when you say 'borders are off'?

pngtest · June 27, 2008

the columns are shifted to the left by about the whole page all you can see is the background to the right column.

haku · June 27, 2008

Not really able to visualize it myself. Got a link?

pngtest · June 27, 2008

it is on an internal network but i can describe better the header and footer are in the right place and them main container is in the right place but the left and right column are not..... all you see to the left of the screen about 5 pixel of the right column background.

haku · June 28, 2008

It sounds like you are going for a 3-column layout method, is that correct? If so, you should use the method I outline at the end of this thread: http://www.phpfreaks.com/forums/index.php/topic,203385.0.html

(note, use the code at the end of the thread - I screwed up the code in the middle of the thread)

pngtest · June 30, 2008

Thanks i will see if that helps me out.

Sign In

php css not right

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information