WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Discrepencies with my .post re: bottom border (9 posts)

  1. thewhatwherewhen
    Member
    Posted 6 years ago #

    This is my css
    .post {color: #231F20; border-bottom: 1px solid #003333; padding: 0 20px 10px 0; width:576px; margin: 0 0 10px 0;}

    It is used on my Single Post single.php and Page Template page.php

    However the bottom border only works on the posts not on the pages. I have pasted the php below:

    single.php

    <?php get_header() ?>
    	<div id="container">
    		<div id="content">
    <?php the_post() ?>
    			<div id="post-<?php the_ID(); ?>" class="<?php sandbox_post_class(); ?>">
    				<h2 class="entry-title"><?php the_title(); ?></h2><span class="cat-links"><?php printf(__('%s', 'sandbox'), get_the_category_list(' | ')) ?></span>
    				<div class="entry-content">
    <?php the_content(''.__('Read More <span class="meta-nav">&raquo;</span>', 'sandbox').''); ?><?php the_meta(); ?>
    				</div>
    <!-- .post -->
    		</div></div><!-- #content -->
    <?php get_sidebar() ?>
    <?php get_footer() ?>
    	</div><!-- #container -->

    page.php

    <?php get_header() ?>
    
    	<div id="container">
    		<div id="content">
    
    <?php the_post() ?>
    			<div id="post-<?php the_ID(); ?>" class="<?php sandbox_post_class() ?>">
    				<h2 class="page-title"><?php the_title(); ?></h2>
    				<div class="entry-content">
    <?php the_content() ?>
    
    				</div>
    			</div><!-- .post -->
    
    		</div><!-- #content -->
    
    <?php get_sidebar() ?>
    <?php get_footer() ?>
    </div><!-- #container -->

    Does anyone know why this would be?

    The web address for the site is:
    http://www.thewhatwherewhen.com/art

    Thanks!

  2. whooami
    Member
    Posted 6 years ago #

    how about a link to where it is not working, rather than making us hunt? :(

  3. adamrice
    Member
    Posted 6 years ago #

    .post {whatever} matches elements with the attribute class="post"
    It looks like your blog entries have a lot of classes added to them, one of them being "post"; your pages likewise get a lot of attributes added to them, one being "page" (but none of them being "post")—which makes sense (although with all those classes being added, it's possible you'll wind up with some unintended consequences).

    I suggest changing the matching rule from .post to .entry-content, perhaps. That'll work for both blog posts and pages, and won't change the appearance, I don't think.

  4. thewhatwherewhen
    Member
    Posted 6 years ago #

    Oh right sorry.

    Im no web whizz as I'm sure you have all guessed by my messy code. The best way to see how they arent working is to search for the word 'event'. This brings up both posts and pages, and you can see the pages do not have a line underneath.

    Adamrice – Thanks for your help! But I don't see two 'post' classes, I only see the one i described as .post

    I know I'm not very good at this, so any help is greatly appreciated.

  5. whooami
    Member
    Posted 6 years ago #

    hes trying to explain to you that the CSS in your stylesheet doesn't match whats on your pages -- it matches whats on your posts. So ether you need to add to your CSS, or you need to change what you are styling.

    Look at the source of your page, look at the source of a post.

    One contains class="post" one does not.

    Consequently, this:

    .post {color: #231F20; border-bottom: 1px solid #003333; padding: 0 20px 10px 0; width:576px; margin: 0 0 10px 0;}

    is only going to be applied to the one.

    atleast thats how I read that reply.

  6. thewhatwherewhen
    Member
    Posted 6 years ago #

    Hmmm maybe Im being dense but from what I can see on the 5th line of code, (technically line 7) on the single.php and 5th line of code on page.php they both have <div id="post-<?php the_ID(); ?>" class="<?php sandbox_post_class() ?>"> which I thought was the class defining it?

    Sorry for being dense

  7. thewhatwherewhen
    Member
    Posted 6 years ago #

    i appear to have done it, I changed the border-bottom onto .entry-content and its seems to have worked, I don't understand why. But it works.

    Thanks everyone

  8. adamrice
    Member
    Posted 6 years ago #

    I suggest creating some really simple test-case web pages with classes and IDs on some of the elements, add in some CSS, and see how things work. You'll figure it out.

    Looking at
    <div id="post-<?php the_ID(); ?>" class="<?php sandbox_post_class() ?>">
    you'll see that the div is going to have an ID (not class) that is "post-NN", which will not be matched as "post", and at any rate, is an ID, not class, so it wouldn't match anyhow.

    What you see in the class attribute is a WordPress tag that is going to get replaced by other stuff, so even though you see the letters p-o-s-t in there now, they won't be there once your page gets generated. Look at your web page's actual source code (not the theme file) and line things up to get a sense for all this.

    You might want to read up on IDs vs classes: IDs are meant to be used only once per web page (so you can uniquely identify different parts of the page); a single class name can be used many times. In CSS, you match a class attribute with .classname; you match an ID attribute with #IDname.

  9. liuxxmm
    Member
    Posted 6 years ago #

    I agree with you!

Topic Closed

This topic has been closed to new replies.

About this Topic