0

I have a PHP script that makes a "newsbox" (a HTML div) for each news item I have in my database using while{. The problem is that the CSS rules that are supposed to align each of these boxes are not being applied.

PHP/HTML:

<div class="bottomnews">

<?php
    $gnewsq = "SELECT * FROM news";
    $gnewsr = mysqli_query($mysqli,$gnewsq);

    if ($gnewsr->num_rows > 0) {
        // output data of each row
        while($nrow = $gnewsr->fetch_assoc()) {
?>

    <div class='newssquare'>
        <div style=background-image:url(uploads/<?php echo "$nrow[pic])"; ?> />
        <div style='padding-top:125px;'/>
        <div class='newscaption'>

            <a href='nyheder.php?a=<?php echo "$nrow[ID]"; ?>'><?php echo "$nrow[titel]" ?></a>

        </div>
    </div>

<?php
        }
    } else {
        echo "EMPTY";
    }
?>

CSS:

.bottomnews {
    position: absolute;
    width: 1050px;
    height: auto;
}

The CSS rules for .bottomnews aren't applying, but the CSS rules for other things like .newssquare are. It's really odd, and any help is appreciated.

Klors
  • 2,665
  • 2
  • 25
  • 42
NotKimJongUn
  • 51
  • 2
  • 11
  • 6
    2 things would make it possible to answer this question: 1. The relevant CSS, 2. The actual, rendered HTML. CSS isn't applied to PHP, it's applied to the HTML that shows up in the browser. – Paul Roub Jan 12 '15 at 17:27
  • 3
    But in the meantime: those two self-closing `div` tags (the one with the background-image and the one with `padding-top`) are going to behave differently in different browsers. (see http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5 for more on that) – Paul Roub Jan 12 '15 at 17:29
  • Thanks for the heads up. Will do that for the future. I'll add what you requested in a min. Working on a smartphone with a simple IDE takes its time ;) – NotKimJongUn Jan 12 '15 at 17:39
  • How do you know the CSS styles aren't applying, have you used an inspector or are you just not seeing the layout you expected? It may just be that you haven't used the right CSS to achieve what you are trying to. `Width:1050px` should be `width: 1050px;` and `Height` should be `height` if those aren't just example code errors. – Klors Jan 12 '15 at 17:56
  • I simply put on a background color on the CSS and looks if its appearing. If it is, the CSS code is applying to the div. – NotKimJongUn Jan 12 '15 at 18:21

3 Answers3

1

Fix your html. This,

<div style='padding-top:125px;'/>

...should be:

<div style='padding-top:125px;'></div>
Andres SK
  • 10,779
  • 25
  • 90
  • 152
0

If that really is your code exactly as it is, then it’s no wonder the CSS defined for the class .bottomnews is not being applied. The .bottomnews div won’t be there at all on the page.

You can’t just write HTML inside your PHP code without switching out:

$gnewsq = "SELECT * FROM news";
$gnewsr = mysqli_query($mysqli,$gnewsq);

// Here you need to switch to HTML: ?>

<div class="bottomnews">

// Here you switch back to PHP: <?php
if ($gnewsr->num_rows > 0)

The way you’ve written it, it should give you a fatal parse error, because <div class="bottomnews"> is not valid PHP code.

Janus Bahs Jacquet
  • 859
  • 1
  • 11
  • 27
0

For your CSS, Width:1050px should be width: 1050px; and Height should be height if those aren't just example code errors. position: absolute; is generally also teamed up with one or two of the top, bottom, left or right properties too, but you might be pairing that with other styles.

The code seems confusing as you seem to be missing <? tags. I'll add in what I assume you have and correct the obvious errors.

I would suggest you change what is presumably this: (and if it isn't then you've got something weird going on in your PHP)

<?php
$gnewsq = "SELECT * FROM news";
$gnewsr = mysqli_query($mysqli,$gnewsq);
?>
<div class="bottomnews">

<?php
if ($gnewsr->num_rows > 0) {


    // output data of each row
    while($nrow = $gnewsr->fetch_assoc()) {
?>

    <div class='newssquare'>
    <div style=background-image:url(uploads/<?php echo "$nrow[pic])"; ?> />
  <div style='padding-top:125px;'/>
        <div class='newscaption'>

        <a href='nyheder.php?a=<?php echo "$nrow[ID]"; ?>'><?php echo "$nrow[titel]" ?></a>

     </div>
    </div>
<?php
    }

    }else{
    echo "EMPTY";
    }
?>

to this:

<?php
    $gnewsq = "SELECT * FROM news";
    $gnewsr = mysqli_query($mysqli,$gnewsq);
?>

<div class="bottomnews">

<?php
    if ($gnewsr->num_rows > 0) {

        // output data of each row
        while($nrow = $gnewsr->fetch_assoc()) {
?>

    <div class="newssquare">
        <div style="background-image:url(uploads/<?php echo $nrow[pic]; ?>"></div>
        <div style="padding-top:125px;"></div>
        <div class="newscaption">
            <a href="nyheder.php?a=<?php echo $nrow[ID]; ?>"><?php echo $nrow[titel] ?></a>
        </div>
    </div>
<?php
    }

    }else{
        echo "EMPTY";
    }
?>
</div>
Klors
  • 2,665
  • 2
  • 25
  • 42
  • The CSS is not like that in the code. It is working properly. Your improved code made it work, so now the CSS rules are applying. Do you by any chance know how to line the newsboxes horizontally? Currently they're aligning vertically which I don't quite understand. – NotKimJongUn Jan 12 '15 at 18:19
  • @NotKimJongUn I'm not quite sure what you're asking. Do you mean they appear underneath the previous one, or that they appear to the side of the previous one? – Klors Jan 12 '15 at 18:22
  • Underneath, and I want them to align on the side of each other with like a 20px gap – NotKimJongUn Jan 12 '15 at 18:26
  • @NotKimJongUn You need an `inline-block`, you can find many questions on here that will show you how. `div`s naturally `break` after the `div` as they are `block` elements, so the next piece of HTML then appears below it. – Klors Jan 12 '15 at 18:28