CSS: Multi-Column Layout and Replacing Text with Image in Menu

HTML & CSS
1

Hi all,

So, I’m working on a Wordpress site and have two issues on my homepage:

  1. I’ve used jquery to load an image where I should have a link…this is the jquery I used:
<script>$(document).ready(function(){
  $('a:contains("Home")').css({background:'url(http://50.116.87.55/~open2biz/wp-content/themes/open2business/images/home.png) no-repeat top left'});
});</script>

and then for that same menu link, I tried to load in the CSS:


<class for home menu item here> {
display:block;
font:size:0;
height:40px;
width:40px;}

When the CSS loads, the home link is getting the background image but the other CSS is not working…is there anyway to use jquery to set multiple css styles, except just the one OR can I load a class name dynamically to apply that css to?

ALSO:
I have a multi-column layout that is a little bit off…this is the CSS and DOM that it’s using:

div#left-column {
	width: 310px;
	float: left;
	clear: none;
	padding-right:20px;
	}
div#right-column {
	width: 310px;
	float: right;
	clear: none;
	padding-left:20px;
	}

DOM for outputting the content on that page:

<div id="content">

<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>

<div id="left-column">
<div id="post-<?php the_ID(); ?>" <?php post_class('post'); ?>><h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<span class="date_m"><?php the_time('M');?></span>
					<span class="date_d"><?php the_time('d');?></span></div>
<?php the_excerpt(); ?>
</div>

<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>

<?php $i = 0; rewind_posts(); ?>

<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>

<div id="right-column">
<div id="post-<?php the_ID(); ?>" <?php post_class('post'); ?>><h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1><br />
					<span class="date_m"><?php the_time('M');?></span>
					<span class="date_d"><?php the_time('d');?></span></div>
<?php the_excerpt(); ?>
</div>

<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>
<br /><br />

The columns aren’t aligning properly…

This is the homepage, where my issues can be viewed…
http://50.116.87.55/~open2biz/

Can anyone help with this? :wink:

2

OR can I load a class name dynamically to apply that css to

This is usually the ONLY way I use Javascript to manipulate CSS. Though possibly jQuery has some good reason to encourage JS meddling directly with CSS…

I have my possible styles pre-written in my CSS

#menu a {
blah blah;
}
#menu a.home {
blah blah;
}

DOM
<ul id=“menu”>
<li><a href=“home”>Home</a></li>
…
</ul>

JS adds in the class to the DOM

New DOM
<ul id=“menu”>
<li><a class=“home” href=“home”>Home</a></li>
…
</ul>

I might be misunderstanding your question though. I’m not sure how JS forcibly adding in a background image to something messes up the rest of your CSS.

The columns aren’t aligning properly…

They’re all floated everywhere but they’re not clearing the floats above them. Floats are like soap bubbles: they all want to go up as high as they can, so if they can ride up higher than an adjacent float, they’ll do it. Also, when the box underneath isn’t fully to the left, that’s float snag. They also want to be as far to the left as possible, but if the float above them “hangs” down a bit, the next float will bump into it and snag instead of going all the way to the left.

That’s crappy DOM though. I’d make two columns:
<div id=“left”>
<div>article</div>
<div>article</div>
…
</div>
<div id=“right”>
<div>article</div>
<div>article</div>
…
</div>

That way, you really only have two columns, rather than hundreds of little left and right floated thingies.

Mostly because, while you could have each of your left floats only clearing rights, and your right floats only clearing lefts, IE (at least, older IE… I haven’t had a copy of IE8,9 or 10 yet, sadpanda) ignores clears in the same direction and I think I’d not trust clears in the opposite direction then either.

You could also try using display: inline-block on those divs instead of floats, I suppose… you’re probably not supporting Firefox 2 anymore. Just give IE6 and 7 a secret display: inline after your inline-block declaration section, and since your two boxes are fixed width in a fixed-widdth container, they’d probably look the way you want. Inline-blocks don’t snag like floats can.

3

Hi Stomme,

So I did as you said for the columns: display:inline-block…WORKED perfectly…

For the home menu item, I just did it manually instead of trying to style the home link manually…tsk…the rest of the menu is dynamic though so if the menu ever changes, at least it won’t be like pulling teeth, 'cause the home link never changes…

Check it out now…http://50.116.87.55/~open2biz/

What browser did you view the site in?

4

What browser did you view the site in?

Chrome for Linux. I see a house image (took me a whole to “see” it though) but I’m not sure what I’m supposed to be seeing.