in the bottom of this site (wordpress) i have four post colum, i try to split it
to two colums. i managed to do something but for a strange reason the right
colum don’t want to apply the css rules i write.
any one have an idea what the problem ?
uh, do you have any code?? Or a url? Which site? What is your CSS?
(styles are gone on SitePoint right now so possibly you’ve posted a link and I just don’t see it)
ohhh i’m such in idiot !!
tip-profile.co.il
<code>
<div id=“bottom_detail_container”>
<div class=“wrapper”>
<div class=“inner_section”>
<div class=“content_box”>
<?php
$the_query = new WP_Query(‘cat=4&showposts=4&orderby=post_date&order=desc’);
$count = 1;
while ($the_query->have_posts()) : $the_query->the_post();
if ($count == 3) { echo ‘</div><div class=“content_box right”>’; } ?>
<div class=“row”>
<?php $count++; ?>
<p><strong><a title=“<?php the_title(); ?>” href=“<?php the_permalink() ?>” rel=“bookmark”><?php the_title(); ?></a> </strong><br /><?php the_excerpt(); ?></p>
<?php the_post_thumbnail(array(82,84)); ?></div>
<?php if ($count == 5) { echo ‘</div>’; } ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div>
</div>
</div>
</div>
</code>
Hm, the PHP doesn’t help me but leave it there for whoever knows WP well and can see what you’re doing.
But I’m confused at what’s going on.
You had 4 columns earlier, but now want 2? or you have 2 (I see 2 now) and want 4?
What I’m seeing is a single box (.link_box) and inside it is a table (which is actually popping out of the box… put a border or something around .link_box and you’ll see what I mean) and the table has two td’s per tr.
For you, this “right column” means all the first td’s in your table. You can hit those with something like
td:first-child
in that table, but since it’s a table you’ll have to worry about the tr’s and total table width too, depending on what you’re trying to do.
Do you have a quick sketch or something of what you want the end result to be? (instead of posting an image as an attachment, load an image up on your server so we can see it right away instead of having to wait for a mod to approve the attachment)
hi
the image
the php code pull four posts in total from database
i want two post in the right and two post in the left.
if you see my code i tryed to split it to two div’s but no matter
what css rule i’m trying to apply the right side doesn’t change.
my final result will be two in the left and two in the right, and the right need to be in look the same as the left
you can say the final html in the web site: tip-profile.co.il
thanks again
Well what CSS are you applying to each section? We can narrow it down from that most likely :).
hi ryan
i don’t think there is point to post something that doesn’t work.
the all point in my question that i need someone that will show me
how do do it in the right way.
I’ll start off by saying your English is somewhat hard to understand.
If you are saying there is no point to post your CSS if it isn’t working correctly, why say that? If you say that because you have no CSS applied to that picture, then ok I can understand it, but I highly doubt it because from the looks of it, you either have a float:right; applied to it or at least a text-align:right;, both of which will make it align to the right hand side instead of being aligned to the left, such as the left column.
the last post look preaty simple english, odd.
if you read my posts i wrote that something is messed up and you can surf to the site and see what’s going on, i’m trying to apply the same classed to the right side
and it doesn’t work.
if you inspect it with chrome you see nothing apply to it
but if you go to the style.css you see this:
div#bottom_detail_container div.wrapper div.inner_section div.content_box_right{
color:black;
margin-top:20px;
}
the css it’s just to check it’s not what i want
as you see nothing is black in the text.
in the last attemps i tryed to make it apper side by side (what i really want)
Largo:
ah, sorry, your web page did the “trick the user into thinking they were already looking at the bottom” thing… I thought the table I was viewing WAS the footer. So my previous reply was talking about the wrong part of the page.
What I see is the text size on the right column is really tiny compared to the left. Is this one of the problems you’re having? (actually checking the site now looks like that problem is gone)
I’m still not sure what’s causing problems for you per se, BUT I do see that your CSS has been made over-complicated and I can see this could cause inheritance issues. Like, that you need to use !important to float the right side right.
<div class="inner_section">
<div class="content_box"></div>
<div class="content_box right"></div>
Am I assuming you are not catering to IE6? (that one has problems with stacking classes on one tag)
If you reduce the list of elements you use to target the left content_box, then targeting the right box (and everything in it) should get easier. Other than haveing maybe too many wrappers, I don’t think you need to change your HTML at all.
This
#bottom_detail_container .inner_section .content_box {
is way more than you need. Now if there are other .content_boxes in the HTML then you do unfortunately need the long id before it. But you can always scrap the inner_section, right?
#bottom_detail_container .content_box {
width: 490px;
float: left;
}
#bottom_detail_container .right {
float: right;
}
Being even “weight” as far as CSS rules go, the second one should automatically be able to override the first one without needing !important.
And then you should be able to target everything else using either .content_box element{} or, if there are other content_boxes,
#bottom_detail_container .content_box element{}
If it weren’t for all the wrappers it could have been #bottom_detail_container div {} .
I think likely what was happening to you was, too much different interference in inheritance because of long, conflicting rules. If you can get rid of wrappers and stuff, wherever you can, do it. And when you write CSS, use the fewest selectors you can get away with.
Also, the way your two columns look to me eyes is different to how it “looks” in the code, like where boxes really are. If you’re completely aware of this then that’s not messing with you, but if you don’t realise that you have “box” in places that don’t look like there is any “box”, then I can see where you might write rules that then don’t do what you expect.
I could be all wrong in this post, this is just what ideas came to me after taking another look at your page and your image. The .right class is only there to have that box float to the right instead of the left, but further all .content_boxes should all have the same styles naturally, by default.
sorry for the delay but i thought the client will leave that but he just mention it again,
stomme thanks for all the info, i didn’t write most of this and i’m not to smart in css rules.
can you or any one can tell me how can make two post in the left and two in the right … the colums above the footer
you can see the text run over the footer.
you can see the problem now
site: tip-profile.co.il
to be more clear an image:
http://img828.imageshack.us/img828/4443/81793208.png
I’m confused because what your image shows, I do not see in my browser (tho also I see different text).
http://stommepoes.nl/tip-profile1.png
http://stommepoes.nl/tip-profile2.png after (more) text-enlarge
Over here it looks like it’s doing exactly what it should be: .inner_section is a 100% wide float, and because it’s a float, it’s containing the floats inside it (left and right content boxes). Inside that is a table holding each column… .which isn’t what I remember seeing before in code.
What your image looks like, is two left floats. What you had before was, a box with the class of .right on it, floating it right. All the other many many floating boxes are all over the place though… but that’s not your fault, that’s WP being WP.