Fri, 2010-10-01 19:09
Go see the mockup website here:
http://oneillwebs.com/images/luwake.jpg
My idea is to make the skewed header file (arrow, logo, and nav bar) transparent .png images and have the main content/image behind it so it keeps that "behind" look.. so I'm guessing I need to set a z-index on the header .png images and set a z-index on the main content image.. but then i'm concerned about the sidebar and how its going to fit into my plan for this. And I'm also concerned about how im going to make my main content work into all this. The only thing that I'm thinking of how to possibly make this work is with negative margins? Am I on the right thinking pattern with this? Anyone's expertise on this would be highly appreciated!
Thanks!
Justin
http://oneillwebs.com/ ~ yes, my personal website built purely with tables which needs to be updated heavily 
(before i knew anything!)
Fri, 2010-10-01 19:15
#1
And of course I'm going to
And of course I'm going to make everything inside the divs absolute so that I can put them in the appropriate spots
http://oneillwebs.com/ ~ yes, my personal website built purely with tables which needs to be updated heavily
(before i knew anything!)
Fri, 2010-10-01 21:00
#2
oneeezy wrote:And of course
And of course I'm going to make everything inside the divs absolute so that I can put them in the appropriate spots
I would have to see exactly what you're planning to see if it is appropriate use of absolute positioning but until then I'd advise against it. It's really not necessary in this case.
OK, think of it this way. Just because something looks skewed doesn't mean it can't have a rectangular shape. Consider that and if you need a quick example, I'll try to come up with something.
Fri, 2010-10-01 22:33
#3
did you see my example of
did you see my example of what i'm trying to do: http://oneillwebs.com/images/luwake.jpg ?
and here is the live site: http://www.lamarwake.com
I actually achieved what I wanted to do by giving the header img a transparent background and a higher z-index value then the main content and giving the main content a margin-top: -175px or something like that to make it go up and behind the header img. My main goal was trying to make the main image of the guy wakeboarding to sit behind the header. So I made a repeating-x background for the main content that takes care of the "main content and the sidebar" look and feel. The only way to make the z-index work is to give the header absolute positioning and the img the z-index... I'm not sure if theirs another way but it seems to be working so far.
What I will have to do now is give all the content in the header file a bigger z-index then the header image..because you can still see the content but it's not clickable because its still behind it. Is there a better way to achieve what I'm trying?? I'm just kinda freestylin it right now
http://oneillwebs.com/ ~ yes, my personal website built purely with tables which needs to be updated heavily
(before i knew anything!)
Sat, 2010-10-02 05:17
#4
It's confusing. You're using
It's confusing. You're using foreground images that belong in the background. You're taking a simple layout and making it convoluted.
To start move the header image to the background so that you can place the menu on it.
Sun, 2010-10-03 19:05
#5
Ok, i really feel like im
Ok, i really feel like im over thinking this too.. because that header image is just way to big .. (1200px wide).. definitely need to make it a background image..., i was just worried about that wakeboarding img sitting in the background because what i want to eventually make that into a scrolling jquery image thingy.. So what my best option to do is to make that header a bg image, then lay the buttons out on top of it (like normal) but then i still need to make that wakeboarder img sit behind the buttons. so i might still have to use that z-index trick to make the buttons come over the image? and keep the img negative top margined?
http://oneillwebs.com/ ~ yes, my personal website built purely with tables which needs to be updated heavily
(before i knew anything!)
Sun, 2010-10-03 20:36
#6
I see you already have the
I see you already have the gray slash across the top of the main picture. Why not use a portion of the header image instead. There is enough that will allow you to square off a bit and still keep the background and the menu out of its way. You'll just have to add it to each main image in the rotation. A simple photoshop "automate task" should be up to the job.