CODEWITHSUNDEEP
phphtmlcss
G.SINGH
G.SINGH

Reputation: 419

Problems with CSS and include function in PHP

I am trying to develop a website in php. On my main page I use include function (in php) to include other files in it. But when load the main page the CSS in the other files get all screwed up. It is showing as if there is no CSS at all so everything is on top of each other. When I load the files separately everything works perfectly fine.

So in the index.php file I have

//code 
include 'toolbar.php';

Then in toolbar.php I have 

div.fileinputs 
{
    position: relative;
}

div.fakefile 
{
    position: absolute;
    top:0px;
    left:0px;
    z-index: 10;
}
.text_computer
{
    position: absolute;
    top:80px;
    left:20px;
    z-index: 20;
    text-align:center
}
input.file 
{
    cursor: pointer;
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 30;
    width:317;
    height:202;
}
.text_upload
{
    position: absolute;
    top:6px;
    left:80px;
    z-index: 20;
    text-align:center
}
input.submit
{
    cursor: pointer;
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 30;
    width:330;
    height:50;
}
//code
<div class="fileinputs">
            <input type="file" class="file" name='image'/>
            <div class="fakefile">
                <img src='red_frame.png' width='330'>
            </div>
            <div class="text_computer">
                <a style='font-family:Arial;color:white;'><font size='6'>Choose a photo from<br> your Computer</font></a>
            </div>
        </div>
        <div class="des_box">
            <textarea name='description' cols='38' rows='4' placeholder='Enter a description here...' maxlength='500'></textarea><br>
        </div>
        <br>
        <div class="fileinputs">
            <input type="submit" class="submit" value='Upload'>
            <div class="fakefile">
                <img src='red_frame.png' width='330' height='50'>
            </div>
            <div class="text_upload">
                <a style='font-family:Arial;color:white;'><font size='6'>UPLOAD!!!!</font></a>
            </div>
        </div>

This isn't all of the code but this is the part that is piling on top of each other when I include it in index.php

When I just run toolbar.php everything is spaced out fine.

Is there a way to fix this?

Could there be some other sort of problem that is causing this?

Wait never mind i found this <!DOCTYPE html> at the top of my index.php and removed it to see if it would fix the problem and for some reason it did. I have no idea why that fixed it, but now everything works.

Upvotes: 0

Views: 422

Answers (3)

krishna kinnera
krishna kinnera

Reputation: 1543

You can use @import also to load the css styles.

    @import url('/css/styles.css');
    @import url('/css/main.css');
    @import url('/css/color.css');

/* All three CSS files above will be loaded from this single document. */

Upvotes: 0

Shankar Narayana Damodaran
Shankar Narayana Damodaran

Reputation: 68476

Just include your CSS file through PHP. Its legitimate !

<?php include ('yourheader.php'); ?>
<style>
<?php include ('main.css'); ?>
</style>

Upvotes: 0

rushi
rushi

Reputation: 34

I suggest not to use 'include', please try in the following way- 

<?php 
.
.
.
?>
<link href="../bootstrap/css/bootstrap-timepicker.min.css" rel="stylesheet" 
type="text/css"/>
<?php 
.
.
.
?>

Upvotes: 1

Related Questions