How to use css alongside php?

Question

I am trying to take some images from a folder and display it in a neat and presentable manner. For that, I am using PHP to get the images from the folder.

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/custom.css">
<title>Load Images from a folder</title>
</head>
<body>

<?php

$files = glob("*.JPG");
$fileCount = count(glob("*.JPG"));

echo '<ul id = \"gallery\">';
for ($i = ($fileCount -1); $i >= (0); $i--) {
    echo '<li> <img src="' . $files[$i] . '" alt="image" /> </li>';
}
echo '</ul>';

?>
</body>
</html>

Along with this, I am using the following css. The (below) custom.css file is in the same folder as the (above) index.php file.

#gallery li {
    display: inline;
    list-style: none;
    max-width: 250px;
    max-height: 250px;
    float: left;
    margin: 0px 20px 20px 0px;
    text-align: center;
}

But, it is not working. I get the images one below the other (with a bullet for every image) and not one beside the other as I expect to be.

I tried renaming the css file to .php with the text:

<?php "header("Content-type: text/css");" ?>

at the top and tagged 'li' with 'id=gallery' and that didn't help either.

What am I missing here?

You don't need to escape double quotes inside a single quoted string. This might be your problem. — Bojangles
– Bojangles, Commented Mar 5, 2013 at 19:11
Perhaps a stupid comment, but are you sure you want /custom.css instead of custom.css? — ChrisW
– ChrisW, Commented Mar 5, 2013 at 19:11

Shauna · Accepted Answer · 2013-03-06 13:57:35Z

2

display: inline will make the element not honor things like float, height/width, and margins. If you're going to use floats, just remove the display: inline. That should make them flow as expected.

If that's still not working, check your browser's developer tools to make sure that your styles are getting applied, and that they're not being overridden by some other style somewhere else.

If the styles aren't being applied at all, check the following:

It's finding the stylesheet. The leading slash forces the site to look from the root directory. If that's not where your css file is, it's not going to find it.
Your PHP is writing the correct HTML. You don't need to escape double quotes when they're wrapped in single quotes (nor do you need to escape single quotes when in double quotes). id=\"gallery\" is not the same as id="gallery".

edited Mar 6, 2013 at 13:57

answered Mar 5, 2013 at 19:12

Shauna

9,5942 gold badges39 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

coder_learner Over a year ago

Thanks for your suggestions. I checked the developer tools and it was not applying the css at all. Then I removed the slash before the custom.css. Then it started applying the stylesheet. The display: inline didn't affect anything. Also, for the image-related style, I had to put max-height and max-width under img {} in the css file.

jcho360 · Accepted Answer · 2013-03-05 19:13:29Z

0

Your ID is wrong, you should have this:

echo "<ul id='gallery'>";

instead of

echo '<ul id = \"gallery\">';

answered Mar 5, 2013 at 19:13

jcho360

3,7491 gold badge18 silver badges25 bronze badges

2 Comments

coder_learner Over a year ago

Thanks! This actually made the css to be detected.

jcho360 Over a year ago

great!, I would recommend you to use firebug to debug html,css and JS code

Collectives™ on Stack Overflow

How to use css alongside php?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related