I'm trying real hard to understand CSS but I hit a wall.
Im working on a site in Wordpress and trying to get this design to work. I never used WP before and while its no different, trying to make sense of CSS and WP(non theme related stuff) is just confusing me.

What Im trying to do is drop this image of the flower/white design over the blog window and heading. The actual site consists of top, middle and bottom images. The middle expands so I cant just add the picture in

But is there a way to just overlay the image?.

The first image is what I want it to look like and the second is whats showing on WP now


And bonus if someone can give me the correct color code the match the grey in the background with the grey in the inside(which I wanna use)

Thanks

We really need to see the code or a URL.
You are probably going to need absolute positioning to get the flower/decoration in place, but w/o seeing the code, it's hard to say for sure.

ahhhh silly me

thedaintyflower.com

Ok I took a shot at it and wiped out all the active links-

Heres my CSS

/*
THEME NAME: flower
THEME URI: 
DESCRIPTION: adblock-ready theme with customisable author/post graphics
VERSION: 1.2
AUTHOR: delvec</a>
AUTHOR URI: 
TAGS:two columns, fixed width, widgets, penfold, gtzero, papersurfer
*/

/* core layout elements */


body {
    background: #56504C; 
    color: #444;
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: 'Verdana', Helvetica, Arial, sans-serif;
    text-align: center;
    }

div#wrapper {
    width: 950px;
    position: relative;
    background: url('images/pagemid.png') repeat-y 0 0;
    margin: 0 auto;
    text-align: left;
    }

div#header {
    position: relative;
    height: 243px;
    background: url('images/pagetop.png') no-repeat 0 0;
    }

#titlebox {
    float: left;
    position: relative;
    display: block;
    width: 50%;
    height: 150px;
    margin: 0px 0 0 10px;
    }

#blog-title {
    float: left;
    position: relative;
    display: block;
    width: 50%;
    height: 220px;
    margin: 0px 0 0 10px;
    }

#blog-description {
    position: relative;
    font-size: 1.5em;
    }

div#container {
    float:left;
    margin:0 -310px 0 0;
    width:100%;
    }

div#content {
    width: 550px;
    margin-left: 180px;
    margin-top: 190px;
    }
    
div.sidebar {
    float:right;
    overflow:hidden;
    font-size: 1.1em;
    width: 260px;
    margin-right: 40px;
    }

div#primary {
    margin-top: 5px;
    }

div#secondary {
    margin-top: 5px;
    clear:right;
    padding-bottom: 20px ;
    }

div#footer {
    clear:both;
    width:100%;
    height: 99px;
    background: #FFF url('images/pagebot.png') no-repeat bottom right;
    }

div#footernav {
    color: #000000;
    position: absolute;
    bottom: 30px;
    left: 30px;
    }
    
#flowerwrapper {
    background: url(images/flower.png); no-repeat; 
    z-index: 7;
    top: 0px;
    left: -120px;
    width: 100%;
    height: 100%;    
    background-repeat: no-repeat;
    margin-top: 0px;
    position: absolute;
    }

/* key typography */

/* headings */

h1, h2, h3, h4 {
    font-family: 'Verdana', Trebuchet, MS Sans-Serif;
    }

h1 {
    font-size: 3em;
    }

h2 {
    font-size: 2em;
    line-height: 0.5em;
    margin: 10px 0 10px 0;
    }

h3 {
    font-size: 1.5em;
    }

/* nav menu */

#nav {
    position: relative;
    float: left;
    width: 96%;
    }

#nav ul {
    margin-top: 30px;
    list-style: none;
    }

#nav ul li {
    padding-top: 0px;
    font-size: 2.6em;
    float: left;
    }
    
#nav ul li a, #nav ul li a:visited {
    display: block;
    font-family: 'Helvetica', Verdana, sans-serif;
    color: #F7C9D6;
    font-weight: bold;
    margin: 0px 20px 0 10px;
    text-decoration:none;
    }
    
#nav ul li a:hover, #nav ul li a.current:hover {
    color: #EEEEEE;
    }
        
#nav ul li a.current, #nav ul li a.current:visited { color: #FFFFFF; text-decoration: underline; }


/* content */

.panel {
    width: 400px;
    position: relative;
    float: left;
    margin: 15px 0 0 10px;
    height:100px;
    }

.leftpanel {
     height: 100px;
    background: url(images/panel_left.jpg) no-repeat left top;
    padding:0;
    margin-right: 20px;
    }
    
.rightpanel {
     height:100px;
    background: url(images/panel_right.jpg) no-repeat right top;
    padding:0;
    margin-right: 0;
    }

.panelcontent {
    position: relative;
    float: left;
    padding: 0px 20px 0 90px;
    margin: 0;
    }

.entry-content {
    font-size: 1.2em; 
    }

.entry-content a {
    color: #036;
    text-decoration: underline;
    }

.entry-content a:hover {
    color: #036;
    text-decoration: none;
    background: #DDDDDD;
    }

blockquote {
    border-left: solid #CCC 8px;
    padding-left: 10px;
    }

.post {
    border-bottom: solid #CCC 5px;
    margin: 30px 0 0 0;
    padding-bottom: 30px;
    }

.author-admin {
    background: url('images/avatarwatermark.jpg') no-repeat 100% 98%;
    }

.author-penfold {
    background: url('images/penfold.jpg') no-repeat 100% 98%;
    }

.date_cal {
    float:right;
    display:block;
    width: 60px;
    height: 80px;
    font-family: Arial, 'Lucida Grande', Verdana, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center !important;
    margin: 0 0px 0 0;
    background: url('images/datebutton.gif') no-repeat;
    }


.date_cal .day {
    color: #ffffff;
    font-size: 18px;
    margin: 6px 0 0 0;
    }

.date_cal .date {
    color: #333;
    font-size: 18px;
    margin: 4px 0 0 0;
    }

.date_cal .month {
    color: #333;
    font-size: 14px;
    margin: 0 0 0 0;
    text-transform: uppercase;
    }

.date_cal .year {
    display: none;
    color: #333;
    font-size: 9px;
    margin: 0 0 0 0;
    }

 .entry-meta {
clear:both;
}

.adblock {
    float: left;
    display: block;
    width: 125px;
    height: 125px;
    margin: 5px;
    }

abbr.published {
    font-size: 0.9em;
    line-height: 1.0em;
    border-bottom: none;
    }

.alignright,img.alignright{
float:right;
margin:0.5em 0 0 1em;
border:solid #CCC 1px;
}

.alignleft,img.alignleft{
float:left;
margin:0.5em 1em 0 0;
border:solid #CCC 1px;
}

.aligncenter,img.aligncenter{
display:block;
margin:0.5em auto;
text-align:center;
border:solid #CCC 1px;
}

.formcontainer {
    margin-bottom: 20px;
    }

/* links */

a {
    color: #000000;
    text-decoration: none;
    }

a:hover {
    color: #888888;
    text-decoration: underline;
    }

a:active {
    color: #000000;
    text-decoration: none;
    }

#blog-title a {
    }

#blog-title a:hover {
    }

div#footer a {
    font-size: 1.3em;
    color: #999999;
    }

div.skip-link {
    display:none;
    position:absolute;
    right:0em;
    top:0em;
    }

.comments p {
    font-size: 1.2em;
    }

form#commentform .form-label {
    margin:1em 0 0.5em 0;
    font-size:1.2em;
    }

form#commentform span.required {
background:#fff;
color:#c30;
}

form#commentform,form#commentform p {
padding:0;
}

input#author,input#email,input#url,textarea#comment {
padding:0.2em;
}

div.comments ol li {
margin:0 0 3.5em;
}

textarea#comment {
height:13em;
margin:0 0 0.5em;
overflow:auto;
width:66%;
}

.widget {
    padding: 0 5px 0 0;
    }

.xoxo li{
    }

div.gallery {
clear:both;
height:180px;
margin:1em 0;
width:100%;
}

p.wp-caption-text{
font-style:italic;
}

div.gallery dl{
margin:1em auto;
overflow:hidden;
text-align:center;
}

div.gallery dl.gallery-columns-1 {
width:100%;
}

div.gallery dl.gallery-columns-2 {
width:49%;
}

div.gallery dl.gallery-columns-3 {
width:33%;
}

div.gallery dl.gallery-columns-4 {
width:24%;
}

div.gallery dl.gallery-columns-5 {
width:19%;
}

div#nav-above {
margin-bottom:1em;
margin-top:1em;
}

div#nav-below {
margin-top:1em;
}

div#nav-images {
height:150px;
margin:1em 0;
}

div.navigation {
height:1.25em;
}

div.navigation div.nav-next {
float:right;
text-align:right;
}

div.sidebar h3 {
font-size:1.2em;
}

div.sidebar input#s {
width:7em;
}

div.sidebar li {
list-style:none;
margin:0 0 2em;
}

div.sidebar li form {
margin:0.2em 0 0;
padding:0;
}

div.sidebar ul ul {
margin:0 0 0 1em;
}

div.sidebar ul ul li {
    list-style-image: url(images/list-icon.gif);
    margin: 2px 0 0 7px;
    }

div.sidebar ul ul ul {
margin:0 0 0 0.5em;
}

div.sidebar ul ul ul li {
    list-style-image: url(images/list-smallicon.gif);
    margin: 2px 0 0 7px;
    }

div#menu ul li,div.gallery dl,div.navigation div.nav-previous {
float:left;
}

div#header,div#footer {
text-align:center;
}

input#author,input#email,input#url,div.navigation div {
width:50%;
}

div.gallery *,div.sidebar div,div.sidebar h3,div.sidebar ul {
margin:0;
padding:0;
}

and my html

<?php get_header() ?>
    <div id="flowerwrapper">
    <div id="container">
        <div id="content">

            <div id="nav-above" class="navigation">
                <div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">&laquo;</span> Older posts', 'sandbox' )) ?></div>
                <div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">&raquo;</span>', 'sandbox' )) ?></div>
            </div>

<?php while ( have_posts() ) : the_post() ?>

            <div id="post-<?php the_ID() ?>" class="<?php sandbox_post_class() ?>">
    <div class="date_cal">
        <div class="day"><?php the_time ('D'); ?></div>
        <div class="date"><?php the_time ('j'); ?></div>
        <div class="month"><?php the_time ('M'); ?></div>
        <div class="year"><?php the_time ('Y'); ?></div>
    </div>
                <h2 class="entry-title"><a href="<?php the_permalink() ?>" title="<?php printf( __('Permalink to %s', 'sandbox'), the_title_attribute('echo=0') ) ?>" rel="bookmark"><?php the_title() ?></a></h2>
            <!-- <div class="entry-date"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php unset($previousday); printf( __( '%1$s – %2$s', 'sandbox' ), the_date( '', '', '', false ), get_the_time() ) ?></abbr></div> -->
                <div class="entry-content">
<?php the_content( __( 'Read More <span class="meta-nav">&raquo;</span>', 'sandbox' ) ) ?>

                <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'sandbox' ) . '&after=</div>') ?>
                </div>
                <div class="entry-meta">
                    <span class="author vcard"><?php printf( __( 'By %s', 'sandbox' ), '<a class="url fn n" href="' . get_author_link( false, $authordata->ID, $authordata->user_nicename ) . '" title="' . sprintf( __( 'View all posts by %s', 'sandbox' ), $authordata->display_name ) . '">' . get_the_author() . '</a>' ) ?></span>
                    <span class="meta-sep">|</span>
                    <span class="cat-links"><?php printf( __( 'Posted in %s', 'sandbox' ), get_the_category_list(', ') ) ?></span>
                    <span class="meta-sep">|</span>
                    <?php the_tags( __( '<span class="tag-links">Tagged ', 'sandbox' ), ", ", "</span>\n\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>
<?php edit_post_link( __( 'Edit', 'sandbox' ), "\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>
                    <span class="comments-link"><?php comments_popup_link( __( 'Comments (0)', 'sandbox' ), __( 'Comments (1)', 'sandbox' ), __( 'Comments (%)', 'sandbox' ) ) ?></span>
                </div>
            </div><!-- .post -->

<?php comments_template() ?>

<?php endwhile; ?>

            <div id="nav-below" class="navigation">
                <div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">&laquo;</span> Older posts', 'sandbox' )) ?></div>
                <div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">&raquo;</span>', 'sandbox' )) ?></div>
            </div>

        </div><!-- #content -->
    </div><!-- #container -->
</div>
<?php get_sidebar() ?>
<?php get_footer() ?>

If you add a height and width, tack off the 100% it will work. As it is you have z-index which brings it on top and at 100% covering your other content (links).
I didn't check it in IE.

#flowerwrapper {
    background: url(images/flower.png); no-repeat; 
    z-index: 7;
    top: 0px;
    left: -120px;
    width: 100%;
    height: 100%;    
    background-repeat: no-repeat;
    margin-top: 0px;
    position: absolute;
width:234px;
height:737px;
    }

Originally Posted by GeekSpecialties

If you add a height and width, tack off the 100% it will work. As it is you have z-index which brings it on top and at 100% covering your other content (links).
I didn't check it in IE.

Thanks- that sorta worked.
The links on the sidebar work but the Pages links at top appear to only be active links from the top half of the words. Is there anyway to fix this?

That's because your #content div is too high and partially overlapping the top nav. Increase the top margin on #content and the problem will go away.

Originally Posted by LadynRed

That's because your #content div is too high and partially overlapping the top nav. Increase the top margin on #content and the problem will go away.

You so F'in rock!!!

Thanks!

Lol.. you're welcome

Originally Posted by LadynRed

Lol.. you're welcome

OK now I need you again-

I want to move the big flower over more but the closer i move it- the more it overlaps the any links in the content- (the left side of the social network links, part of the titles and the Submit button on the Contact page)

Hmmm... I'll have to look at it from home.. can't get to it right now.

Yes, that is because your flower image is on top (z-index) of all content. When the flower div covers a link, you can not click on it because the link is underneath the positioned flower div. Ideally you should slice up the flower image and make it part of the background images.

Here is a screen capture so you can see what is happening.

http://dl-client.getdropbox.com/u/41...flower-com.jpg

Originally Posted by GeekSpecialties

Yes, that is because your flower image is on top (z-index) of all content. When the flower div covers a link, you can not click on it because the link is underneath the positioned flower div. Ideally you should slice up the flower image and make it part of the background images.

Here is a screen capture so you can see what is happening.

http://dl-client.getdropbox.com/u/41...flower-com.jpg

Grazie molto
I was thinking of the same thing-
I thought because it was transparent the link would show through
I wanted to avoid the slice But one wont kill me