...

View Full Version : Alignment problems with CSS in Wordpress Blog



noobtocoding
12-14-2009, 10:13 PM
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 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==1 || $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!

Excavator
12-15-2009, 12:40 AM
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 (http://www.apaddedcell.com/div-itis).
Your date and h2 could be all in the same container floated left.

noobtocoding
12-15-2009, 12:53 AM
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:


.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;
}

Excavator
12-15-2009, 01:44 AM
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. (http://www.w3.org/TR/CSS2/box.html)

Try making your CSS look like this -


.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;


}

noobtocoding
12-15-2009, 03:08 AM
Thank you! :D 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!

Excavator
12-15-2009, 03:23 AM
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.

noobtocoding
12-16-2009, 02:09 AM
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.

abduraooft
12-16-2009, 08:36 AM
How about
.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;*/

}

noobtocoding
12-16-2009, 05:33 PM
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.

noobtocoding
12-17-2009, 02:16 AM
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.

abduraooft
12-17-2009, 05:50 AM
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.

SB65
12-17-2009, 12:16 PM
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....:(

noobtocoding
12-17-2009, 04:48 PM
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 :)

noobtocoding
12-17-2009, 04:50 PM
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.

;)

abduraooft
12-17-2009, 05:09 PM
The bar is messed up. How can you guys not see it? Are you talking about the gray background image under titles?

noobtocoding
12-17-2009, 05:26 PM
Yes! I'm talking about the gray background line. It's the first thing you notice when you look at the post that is wrong. :D

It's supposed to look like this: http://tinyurl.com/yj8j2dk. But it looks like this: http://tinyurl.com/yk747z9. I need it to look exactly the same, the only difference is the date image to the left. Thanks!

abduraooft
12-17-2009, 05:45 PM
Your have
.post-top{/* style.css (line 536)*/

margin: 0 0 0 25px;

background: url(images/bgr_post_title.png) no-repeat 115px bottom;


}, remove that background position.

noobtocoding
12-17-2009, 06:32 PM
Oh I see..that was pretty easy. One last problem! After doing that, it moves it to the left. However, the bar is still interfering with the Sub-title.

I tried to move it down by adding values to the background: url(images/bgr_post_title.png) no-repeat bottom; and it looks like the line just disappeared under the body.

How can you move the line down? (It looks like the body needs to be moved down a little as well to make room for the line.)

Thank you!

The background image is just a little too high up and interferes with the things..otherwise everything looks ok. If anyone can help thank you :) All helpful posts are thanked.

noobtocoding
12-18-2009, 03:26 AM
Does anyone know? :D

abduraooft
12-18-2009, 08:02 AM
.post-top {/*style.css (line 536)*/
background:transparent url(images/bgr_post_title.png) no-repeat scroll 0 80%;
margin:0 0 0 25px;
}

noobtocoding
12-18-2009, 05:57 PM
Thanks! Now it looks normal. Sorry about bothering you guys again (I feel bad hehe) but It's not exactly what I meant.

The line is supposed to be under "Posted in Random by Person." However, there is not enough space there so the body needs to be moved down just a little as well.

Just to look like this (except mine has the date sticky): http://tinyurl.com/yj8j2dk.

Thank you and this is all that is needed.

noobtocoding
12-19-2009, 04:22 AM
Sorry for all the questions! Most of the stuff here is pretty easy...I guess I just didn't do it in a long time.

abduraooft
12-19-2009, 08:17 AM
Like
.post-top {style.css (line 536)
background:transparent url(images/bgr_post_title.png) no-repeat scroll 0 bottom;
/*margin:0 0 0 25px;*/
padding-bottom:1.5em;
} ?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum