CODEWITHSUNDEEP
phphtmlcss
coder_learner
coder_learner

Reputation: 95

How to use css alongside php?

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?

Upvotes: 0

Views: 179

Answers (2)

Shauna
Shauna

Reputation: 9596

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:

  1. 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.
  2. 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".

Upvotes: 2

jcho360
jcho360

Reputation: 3759

Your ID is wrong, you should have this:

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

instead of 

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

Upvotes: 0

Related Questions