Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    21
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Smile Alignment problems with CSS in Wordpress Blog

    I need a little help adding a calender icon that shows the date next to each post. Here's a link: http://tinyurl.com/yk747z9.

    On the most recent post it says Dec 13. The problem is, after adding this sticky date, the body text is not aligned correctly. Furthermore, if you look at it in Internet Explorer, it is even more messed up.

    Here's the code in index.php:

    PHP Code:
    <?php get_header(); ?>

        <div id="content" class="narrowcolumn">

        <?php if (have_posts()) : ?>



            <?php $i=0; while (have_posts()) : the_post(); $i++; ?>

                <div class="post" id="post-<?php the_ID(); ?>">
                    <div style="position:relative;left:-90px;">
                        <div class="date">
                              <?php the_time('M'?>
                              <p class="date2"><?php the_time('d'?></p>
                        </div>
                        <div class="post-top">
                          <div class="post-title">
                              <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php if ( function_exists('the_title_attribute')) the_title_attribute(); else the_title(); ?>"><?php the_title(); ?></a></h2>
                              <h4><?php comments_number('0''1''%'); ?></h4>
                          </div>
                            <h3>Posted in <span><?php the_category(', '?></span> by <span> <?php the_author() ?></span></h3>
                        </div>
                    </div>


                    <div class="entry">

                        <?php if($i==|| $i==2) : ?>

                        <?php theme_google_468_ads_show(); ?>

                        <? endif; ?>

                        <?php the_content('',FALSE,''); ?>

                    </div>



                    <div class="postmetadata">

                       <p><a href="<?php the_permalink() ?>">Continue Reading</a></p>

                    </div>

                </div>



            <?php endwhile; ?>



            <div class="entry">

                <?php theme_google_468_ads_show(); ?>

            </div>



            <div class="navigation">

                <?php if(!function_exists('wp_pagenavi')) : ?>

                <div class="alignleft"><?php next_posts_link('Previous'?></div>

                <div class="alignright"><?php previous_posts_link('Next'?></div>

                <?php else : wp_pagenavi(); endif; ?>

            </div>



        <?php else : ?>



            <h2 class="center">Not Found</h2>

            <p class="center">Sorry, but you are looking for something that isn't here.</p>

            <?php include (TEMPLATEPATH "/searchform.php"); ?>



        <?php endif; ?>



        </div>



    <?php get_footer(); ?>
    As you can see, I added the "date" classes and divs to represent the date sticky note to the left of each post. Here is the CSS in correlation to this:

    .date{
    background:url(images/date.png) no-repeat scroll 0 0;
    display:inline-block;
    float:left;
    width:115px;
    height:125px;
    text-transform:uppercase;
    font-family:georgia;
    font-size:22px;
    line-height:20px;
    text-align:left;
    color:#F60;
    text-indent:25px;
    left:10px;
    position:relative;
    padding-top:40px;

    }

    .date2{
    font-size:35px;
    color:#F60;
    }

    .datetext{
    margin-right:10px;
    }


    I can't get it to position correctly! How can you prevent the gap between the body text and the title, as well as it not displaying correctly in IE? Please help! Thank you so much!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello noobtocoding,
    Since you move the containing div over -90px with inline styling (hate inline styling) you can move your .post-top back where it should be by adding margin: 0 0 0 90px; to it.
    It might be better to remove the inline bit, add margin:0 0 0 -90px; to .date and leave .post-top alone.

    That is also too many divs for what your doing. See divitis here.
    Your date and h2 could be all in the same container floated left.
    Last edited by Excavator; 12-14-2009 at 11:46 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    noobtocoding (12-17-2009)

  • #3
    New Coder
    Join Date
    Dec 2009
    Posts
    21
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thank you for the help.

    However, this did not fix the problem. It got better in IE, but the title, body, etc is still not positioned well in all browsers. What can be done? I am really confused with this. Here is what it looks like so far: http://tinyurl.com/yk747z9.

    New CSS code:

    Code:
    .date{
    background:url(images/date.png) no-repeat scroll 0 0;
    float:left;
    width:115px;
    height:125px;
    text-transform:uppercase;
    font-family:georgia;
    font-size:22px;
    line-height:20px;
    text-align:left;
    color:#F60;
    text-indent:25px;
    left:10px;
    position:relative;
    padding-top:40px;
    margin:0 0 0 -90px;
    
    }
    
    .date2{
    	font-size:35px;
    	color:#F60;
    }
    
    .datetext{
    	margin-right:10px;
    }

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    However, this did not fix the problem.
    You have only applied half the fix.
    Your still using inline styling on the containing div, so it's not styled from your CSS where it would be easy to fix - it's too much work to dig through the markup to edit it.
    You still have divitis. Have a look at that link I suggested in my earlier reply.
    You now have the date margined over -180px because you apply the -90px twice, once with inline styles on the containing div and again on .date
    Your .date is floated, as it should be, and .post-top could go beside it if it weren't 600px wide. See how the box model works here.

    Try making your CSS look like this -
    Code:
    .date{
    background: #f00 url(images/date.png) no-repeat scroll 0 0;
    float:left;
    width:115px;
    height:100px;
    text-transform:uppercase;
    font-family:georgia;
    font-size:22px;
    line-height:20px;
    text-align:left;
    color:#F60;
    text-indent:25px;
    left:10px;
    position:relative;
    padding-top:40px;
    
    }
    
    .post-top{
    
    	margin: 0 0 0 125px;
    
    	background: #ccc url(images/bgr_post_title.png) no-repeat 115px bottom;
    
    
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    noobtocoding (12-16-2009)

  • #5
    New Coder
    Join Date
    Dec 2009
    Posts
    21
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thank you! I'm very sorry but I'm still not sure what is wrong...

    I followed everything and looked over what you said many times but..it still isn't working..I think I did something incorrect.

    I will try this again. I really appreciate your help, are you able to tell what I did wrong? http://tinyurl.com/yk747z9. Thank you again!

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Your getting closer but now you've snuck postion:relative; in there.

    • Now that you've gotten rid of the inline styling, give that div an id or class so you can style it in your CSS and give it a width.
    • Get rid of the position:relative; and put your margin-left:-90px; back on the date.
    • Play with the left margin on .post-top. It may be that 125px pushes it to far.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    noobtocoding (12-16-2009)

  • #7
    New Coder
    Join Date
    Dec 2009
    Posts
    21
    Thanks
    8
    Thanked 0 Times in 0 Posts
    It's closer than ever now!! There is still a tiny problem and I'm not sure how to resolve it: http://tinyurl.com/yk747z9. Using Firebug in Firefox helps but..still cannot find a solution.

    Here's the CSS: http://tinyurl.com/ybhszg7.

    Thank you.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    How about
    Code:
    .post {/*style.css (line 528)*/
    margin:0 0 40px;
    position:relative;
    /*width:100%;*/
    }
    .date{
    background: url(images/date.png) no-repeat scroll 0 0;
    /*float:left;*/
    width:115px;
    height:100px;
    text-transform:uppercase;
    font-family:georgia;
    font-size:22px;
    line-height:20px;
    text-align:left;
    text-indent:25px;
    position:absolute;;
    left:-90px;
    top:0;
    padding-top:40px;
    /*margin-left:-90px;*/
    
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    noobtocoding (12-16-2009)

  • #9
    New Coder
    Join Date
    Dec 2009
    Posts
    21
    Thanks
    8
    Thanked 0 Times in 0 Posts
    It still didn't work Looks exactly the same. I inserted the code both with the /* you have and without..still the same.

    Does anyone have a fix? http://tinyurl.com/yk747z9.

    CSS: http://tinyurl.com/ybhszg7.

  • #10
    New Coder
    Join Date
    Dec 2009
    Posts
    21
    Thanks
    8
    Thanked 0 Times in 0 Posts
    I tried by rewriting and changing the CSS completely but this ends up with different problems. If anyone can please help me with this issue and fix the problem (I'm sure this is pretty easy for professional coders) I would really appreciate it!

    All helpful posts will be thanked. Thank you.

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    It still didn't work Looks exactly the same. I inserted the code both with the /* you have and without..still the same.

    Does anyone have a fix? http://tinyurl.com/yk747z9.
    Now that gap(between heading and entry) is not there for me in FF2&FF3 (might be a cache issue at your end?). Those highlighted /* is to show you that you have to comment/remove those rules.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Assuming that the problem here is that the date div gets cut off, then I think the issue is due to a combination of #page having width:1000px and #body-top having overflow:hidden.

    I can't see a quick fix though....

  • #13
    New Coder
    Join Date
    Dec 2009
    Posts
    21
    Thanks
    8
    Thanked 0 Times in 0 Posts
    No It's not a cache issue. There no longer is a gap between the text and the title..but now there is a different problem.

    The bar is messed up. How can you guys not see it?

    Can someone please help and fix this problem once and for all

  • #14
    New Coder
    Join Date
    Dec 2009
    Posts
    21
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Sorry for posting twice. Here is what it is supposed to look like: http://tinyurl.com/yj8j2dk. Except this doesn't include the date. All I tried to do is add the date.


  • #15
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The bar is messed up. How can you guys not see it?
    Are you talking about the gray background image under titles?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •