CSS of Image near Nav/Header

[WildSpirit]

I’m working on a new site and have been beating my head against a brick wall for days now trying to accomplish what I want without ANY luck. I can kind of get what I want if I use position:absolute but when the browser is resized it overlaps my navigation!

Maybe I need to move the div (which I’ve tried in like 4 different locations) or I’m over looking a easy solution (I hope this is it!).

The website address is here:http://beta.wildspiritdesigns.com/

In the top right of the screen you will see a blue/green gradient “splat”. What I would like is for the navigation that is below to move up and line up with the bottom of my logo. The “splat” would move up (like top: -300px) and then it could continue on to the right. I can somewhat accomplish the position I want if I make the “splat” a background image for the header div but it does cut off the little splatters arms due to fitting into the width of the page.

Any ideas on how to accomplish this?? I do have firebug and and like I’ve said spent HOURS messing around with it with no real success.

If you need more info please let me know!

Thanks in advance,
Lyle

[grovesk]

Hi Lyle. I’m not seeing the ‘splat’. That image link appears to be broken.

[WildSpirit]

Sorry! Probably because I’ve been messing around with it… I just put the image back in the .container_12, .container_16 as a background image which kind of shows what I want. I do not want it cut off straight on the right side though (which it’s doing due to the width set for that container).

Worst case scenario I’ll compromise and move the position of left to like 500 and have my navigation (“contact”) run over it… it’s still readable that way :/

Thanks and I’ll stop messing with it for a little bit so maybe you can take a look at it :)

~Lyle

[grovesk]

First, an observation. Your footer div doesn’t seem to have any styles applied to it? When you look at it in Developer Tools, the height goes all the way to the top of the page. I’d fix that first.

Does this achieve what you are looking for?

.container_12, .container_16 {

margin-left: 100px;

width: 100%;

background: white url(../../images/backgroundsplat.png) no-repeat;

background-position: 630px -220px;

padding: 0 20px;

}

I think that using a 100px margin on the left is not an ideal solution so still looking at it. Did you try putting the background image on the body tag?

[grovesk]

This is the CSS to add the image as a background image. If you do this, you’ll need to get rid of the CSS in .container.

body {

margin:0 0 0 0;

color:#666;

background-image: url(splat.png);

background-repeat: no-repeat;

background-position: 730px -220px;

}

And add this to your style sheet also:

.footer {

width:960px;

margin-left:auto;

margin-right:auto;

clear:both;

}

[WildSpirit]

Thanks Grovesk,
I put that in there and it kind of works… If I remove all css styling from .container12 the site is no longer centered in the webpage and if I make my browser smaller or wider, everything in the “container” moves and the splat doesn’t move with it. Hope that makes sense! :)

I have the new css you gave me for the footer and the body in there.

Any ideas on how to make the splat move with the rest of the website?…

[grovesk]

You only need to remove the background image from .container. Leave everything else in there.

Mmm, didn’t realize you wanted the splat to move. Ok, scratching head for a minute.

[WildSpirit]

LOL I was scratching my head about that a few days ago too and as of last night I’m banging my head against the wall trying to figure that part out!

I did remove just the background image, but was playing in firebug with removing everything else from that .container just incase I was missing something!

I’m almost to the point of just leaving it in the .container div and making it a little smaller so it will work with the nav and move with the rest of the site. I would like to think there is as way to do what I would like but after 5 hours of messing around, I’m running out of ideas and my brain is about to go “SPLAT”

Thanks,
Lyle

[grovesk]

Just had another go at this. It’s not cross-browser compliant but is working in FF and Chrome. For IE, you’ll probably need someone smarter than me to help :D

(Or just leave it where it is IE using the other solution from earlier, and only have it move in the other browsers).

Here’s what I did.

First, I added a new div to your HTML right after the body tag.

So:

image here






etc., etc.,

In your CSS, I removed the image from the body and then made the following changes. In your 960.css style sheet, I added a class and changed a few things around.

#background {

width: 500px;

height:500px;

float:right;

background-image: url(splat.png);

background-repeat: no-repeat;

background-position: 10px -220px;

z-index:1;

position: relative;

}



.container_12,.container_16{

margin-left:auto;

margin-right:auto;

width:960px;

padding: 0 20px;



}



.container_12 {

z-index: 2;

position:fixed;

left:5%;

right:5%;

}

Give that a try.

[grovesk]

This is closer to what you are trying to achieve, but it’s definitely not perfect.

The key here is the z-index on the background and .container12. The background is set to 1 and .container to 2 (so, it’s on the ‘second level’ as it were).

The problem I had was getting the .container to position properly, so I used the percentages for left and right. I think this is probably not the most “Perfect” solution, but it does work. Anyone else out there got any suggestions?

[chrisburton]

Can you do us a favor and make sure your images are uploaded so we can better help your situation? There is an image, assuming your logo, that is either not uploaded or has a bad path.

[WildSpirit]

Hi Christopher,
I’ve corrected the path to my logo. Any ideas other than what was mentioned above to make the “splat” do what I would like??

Thanks, Lyle

[chrisburton]

I have to be honest, I think the splat is too much for your page. You already have it in the logo and it just seems too much to have it in the same heading. I would rethink this one.

[Author]

Posts