• 0

php Include and CSS


Question

Hi all,

Having a little problem... I'm using a php include to display the latest 2 wordpress posts on the front page of my website... however it doesn't seem to pick up my CSS! Where I've set the "blog_excerpt" to have a margin-top: 0px; so it is closer to the post title, it totally ignores it, despite it being in my CSS and I think my syntax is correct (unless I've completely got it wrong!).

Here's the code:

Included in the index.php:

<?php include("blogposts.php"); ?>

Included in the CSS file:

#blogpost p.blog_excerpt {
	margin-top: 0px;
}

And the html from the php file:

<div class="blogpost">
	<h2><?php echo $blog_date; ?> - <?php echo $blog_title; ?></h2>
	<p class="blog_excerpt"><?php echo $blog_excerpt; ?></p>
	<p><a href="<?php echo $blog_permalink; ?>">Read more...</a></p>
<div>

This *should* work shouldn't it? Any reason why it wouldn't?

For a bigger look, have a look at http://www.fiddy.co.uk/new/ where I've put the page up I'm trying to get to work.

Thanks guys!

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Nix #blogpost p.blog_excerpt. Use #blogpost h2 instead.

 #blogpost h2 {
    margin: 5px 0px 2px 0xp;
    }

The values are just purely example but the 2px will be the bottom margin value that you will change to suit your needs. Make sure you get rid of any margins/padding you set for p.blog_excerpt and look over line-heights you've set as that will impact it as well.

Sorry I'm not being too specific. About to run out the door and just wanted to pop an answer to you :)

Link to comment
Share on other sites

  • 0

You're targeting an id called blogpost and in the html you're using a class called blogpost. Classes and ids are not interchangeable, I would recommend changing your css to target .blogpost rather than #blogpost

  • Like 2
Link to comment
Share on other sites

  • 0

Right - I tried both solutions (see the code on the page now)... however it still doesn't work?

Any ideas?

And for clarification...

#blogpost h2 - this is a class... or ID? or what?

p.blog_excerpt - this is an class

#blogpost p.blog_excerpt - apparantly an ID...?

Sorry, first attempt at a completely full website from scratch hah!

Link to comment
Share on other sites

  • 0

Hash means ID, dot means class. You have a div element with the class blogpost, not a div element with the ID blogpost. Nor should you make it an ID, because you may have multiple blog posts on a page and ID's should be unique. You can keep your HTML as is. Here is the CSS to go along.

.blogpost .blog_excerpt {
	margin-top: 0;
}

Link to comment
Share on other sites

  • 0

Actually, you need to reread Kudos post.

A class uses a period to declare it in CSS. So:

.class {}

<div class="class">

An ID is declared by a pound symbol.

#id {}

<div id="id">

You need to change your HTML from <div class="blogpost"> to <div id="blogpost">.

Link to comment
Share on other sites

  • 0

Hash means ID, dot means class. You have a div element with the class blogpost, not a div element with the ID blogpost. Nor should you make it an ID, because you may have multiple blog posts on a page and ID's should be unique. You can keep your HTML as is. Here is the CSS to go along.

.blogpost .blog_excerpt {
	margin-top: 0;
}

Ah... no the div element can be an ID because the "blogpost" div will only appear once on the page (the posts are then generated and made using <p> and <h2> tags etc.

Actually, you need to reread Kudos post.

A class uses a period to declare it in CSS. So:

.class {}

&lt;div class="class"&gt;

An ID is declared by a pound symbol.

#id {}

&lt;div id="id"&gt;

You need to change your HTML from <div class="blogpost"> to <div id="blogpost">.

Ahhhh! I totally did not spot that! So sorry Kudos... should have read that properly first time!

Link to comment
Share on other sites

  • 0

Have you tried using both together? By that, I mean have you tried using both the "#blogpost h2" and "#blogpost p.blog_excerpt" together? It might be that your CSS puts a bottom margin on the header AND a top margin on the paragraph.

Also, do you have any padding set on the paragraph or header tags?

Link to comment
Share on other sites

  • 0

Have you tried using both together? By that, I mean have you tried using both the "#blogpost h2" and "#blogpost p.blog_excerpt" together? It might be that your CSS puts a bottom margin on the header AND a top margin on the paragraph.

Also, do you have any padding set on the paragraph or header tags?

Yep that was exactly the problem! Thanks for that!

I had set the h2 to margin-bottom: 0px... but there was still a margin on the p. So a margin-top of 0px for that sorted that.

Working great now :D

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.