Web Design Forum: ChrisOliver - Viewing Profile - Web Design Forum

Heyy guys..

I've been trying to create a WordPress theme based off a HTML page I created, but because of the way wordpress is coded, I am having some difficulties with the CSS.

This is what I am trying to achieve:


Here's the code from the normal HTML page:

<div class="design">
            <div class="design-details">
                <h2>Design 1</h2>
                <p>This design is being used as an example so that I can work out how the page design looks.</p>
                </div>
             <div class="design-details-preview">
                <img src="img/design1.png" />
             </div>
        </div>

Here's the code from the Wordpress HTML:

 <div class="design">
                    <div class="design-details">
                        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        
                         <?php the_content(); ?>
                   
                        </div>
               </div>

Here's the CSS used for both pages:

 .design{
                width:900px;
                margin: 0 auto;
	            padding: 35px 0;
	            clear: both;
                }
            .design:after {
                
                clear:both;
                }
            .design-details{
                padding-left: 20px;
                width: 40%;
                float:right;
                }
            .design-details h2{
                padding-bottom: 5px;
	            box-shadow:  0 1px 0 #0099cc, 0 2px 0;
                color:#fff;
                }
            .design-details p {
                color: #fff;
	            line-height: 22px;
                }
            .design-details-preview img{
                margin: 0 auto 30px auto;
	            max-width: 100%;
	            display: block;
                }
            .design-details-preview {
	            width: 50%;
	            float: left;
	            position: relative;
                }

I know the WordPress code is missed a Div, but I can't seem to fit it into the code.
Inside the Wordpress post is
Title which is "Hello World"
and the body which is "Welcome to WordPess. This is your first post. Edit or delete it, then start blogging!

<img src="http://localhost:40639/wp-content/uploads/2012/05/design.jpg" alt="" />"

Please could anyone help me solve this issue?

Thanks in advance
and Sorry it's a very long post.

I have an image within a link like this

<a href="#"><img src="images/IMAGE.png" width="250" height="150" alt="IMAGE"></a>

when I hover over that image, I'd like an image to overlay it(it's a semi transparent image).

How could I make this happen?

I've been trying to use code similar to this
#content a:hover
{
background-image:url('images/IMAGE.png');
}

but it doesn't work.

Anyone got any methods?

Thanks in advance.

Hey guys, I was searching the internet and I found this.
I like it because it's a Metro UI design(Zune/WP7).
I want to know if it's possible to recreate something similar in HTML, CSS and PHP, so that when you click a menu link, it doesn't load a new page.

Thanks in advance.