- This topic is empty.
-
AuthorPosts
-
May 12, 2011 at 3:07 am #32719WildSpiritMember
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,
LyleMay 12, 2011 at 11:43 am #76551groveskMemberHi Lyle. I’m not seeing the ‘splat’. That image link appears to be broken.
May 12, 2011 at 12:33 pm #76570WildSpiritMemberSorry! 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
May 12, 2011 at 2:24 pm #76489groveskMemberFirst, 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?
May 12, 2011 at 2:56 pm #76487groveskMemberThis 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;
}
May 12, 2011 at 3:24 pm #76477WildSpiritMemberThanks 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?…
May 12, 2011 at 3:35 pm #76479groveskMemberYou 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.
May 12, 2011 at 3:44 pm #76483WildSpiritMemberLOL 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,
LyleMay 12, 2011 at 4:28 pm #76467groveskMemberJust 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.
May 12, 2011 at 4:31 pm #76462groveskMemberThis 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?
May 12, 2011 at 5:21 pm #76437chrisburtonParticipantCan 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.
May 13, 2011 at 12:55 am #76397WildSpiritMemberHi 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
May 13, 2011 at 2:10 am #76384chrisburtonParticipantI 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.