...

View Full Version : Layout Trouble - Layers



krazykikikatt
08-06-2005, 08:31 PM
Okay, I am attempting to make my first-ever layout, (all by myself!! I'm so proud.) but, seeing as this is my first real attempt, I've run into some problems. My latest seems pretty simple, yet I can't seem to find a solution...

The page in progress is here (http://www.wiseowlcreations.biz/).

Currently I have made divs as a css layout for my content, and have a fixed background.

The problem: I would like it if my content didn't go over the top part of the background; the moon and the brushes/text I plan to add. Now I don't know anything about images and stuff, but my first thought was to cut the image, and make the top part on another layer, so it's not part of the background anymore, and the layers I already have will scroll under it, and not over. But in the css layout I'm using, apparently all layers are on the same... what would I call it, plane?

I don't know if I'm at all on the right track with this, so I'd appreciate your thoughts and suggestions. Thanks. :D

krazykikikatt
08-06-2005, 08:34 PM
By the way, if you posted on my thread last night, you'll see that I finally managed the opacity/transparency problem. :D Thanks for the help. :thumbsup:

rmedek
08-06-2005, 09:42 PM
Now I don't know anything about images and stuff, but my first thought was to cut the image, and make the top part on another layer, so it's not part of the background anymore, and the layers I already have will scroll under it, and not over. But in the css layout I'm using, apparently all layers are on the same... what would I call it, plane?

That's one way to try it. First, you could move the divs holding your content down a little bit using "top" since they're absolutely positioned:


#menu, #content {
top: 100px;
}

And then you could place an image on the top of the screen using position:fixed (http://www.w3schools.com/css/pr_class_position.asp), z-index (http://www.w3schools.com/css/pr_pos_z-index.asp), and slightly overlapping the content. I don't know if this is the way I would do it if I was coding this from scratch, but I think it could work for you.

Hope this helps...

krazykikikatt
08-06-2005, 09:45 PM
Thanks, I'll try that. :)

krazykikikatt
08-06-2005, 09:49 PM
Oh yes, thank you! The z-index was exactly what I was looking for, I'd completely forgotten about it. This should work, I think...

krazykikikatt
08-06-2005, 10:07 PM
The z-index seems to be working, but... The image is still moving when I scroll, I guess because it is still part of my body... how do I fix that? :confused:

mark87
08-06-2005, 10:17 PM
Fixed for me... you're using -

bgproperties="fixed"

But really you should use CSS -

body { background: url(images/background1.jpg) fixed }

krazykikikatt
08-06-2005, 10:19 PM
Yeah, I was just about to do that. I don't think it'll make my image stay put, though. Can I absolute position an image in my css...? (I REALLY need to catch up on this stuff again... -sweatdrop-)

mark87
08-06-2005, 10:42 PM
That will make the background image stay put...

krazykikikatt
08-06-2005, 10:45 PM
Lol yes, sorry, I haven't had problems with that, but the other image won't stay put... Well there isn't one on the page I've linked to, I haven't overwritten it yet, but I'd like my content to scroll under the top part, and the easiest way to do that seems to be to place an image at the top that would be stacked above the others using z-index, but I can't seem to get the image I want to use to stay put; since it's part of the body, it wants to scroll with it...

krazykikikatt
08-06-2005, 10:50 PM
Here's an idea... could I, in fact, instead of just having a fixed background, divide the background up into several images and position them with z-index... So that the parts that I want to still be the background would be behind my content still.. and the one image that I want the content to scroll under would be stacked correspondingly..?

rmedek
08-06-2005, 11:46 PM
Here's an idea... could I, in fact, instead of just having a fixed background, divide the background up into several images and position them with z-index... So that the parts that I want to still be the background would be behind my content still.. and the one image that I want the content to scroll under would be stacked correspondingly..?
I dunno... it's an idea but there seems like there should be a simpler way. I'll see if I can drum up an example for you.

BTW... keep in mind that Internet Explorer chokes on fixed positioning, so without lots of extra markup it's not going to be pretty.

rmedek
08-07-2005, 12:10 AM
Here... see if this give you any ideas:

http://richardmedek.com/temp/example17.htm

Works (so far) in all standards-compliant browsers. Hope this helps, or at least gives you an idea or two.

kiwibrit
08-07-2005, 12:14 AM
.........BTW... keep in mind that Internet Explorer chokes on fixed positioning, so without lots of extra markup it's not going to be pretty.
Care to expand on that? I've used fixed positioning here and there. Seems OK in IE.

rmedek
08-07-2005, 12:20 AM
Care to expand on that? I've used fixed positioning here and there. Seems OK in IE.
Are you sure? Try this in Firefox or Opera, and you'll see what it's supposed to do. I am using IE on a Virtual PC, so maybe I'm mistaken, but I thought IE6 didn't support fixed positioning.

krazykikikatt
08-07-2005, 01:01 AM
What exactly is the goal in fixed positioning, because it didn't say on the link you gave me, and I didn't notice any effect in IE...
Also, the example you gave didn't quite work in IE either...

rmedek
08-07-2005, 01:05 AM
I know. I mentioned several times that it wouldn't work in IE.
It works in standards-compliant browsers only. Firefox, Opera, Safari, et al.

Try it in Firefox to see what it's supposed to do. Maybe it will give you an idea if you want to try something different.

krazykikikatt
08-07-2005, 02:36 AM
Oh, I didn't know that IE wasn't "standards compliant"... It wouldnt hurt to try in other browsers, but isn't IE one of the most common? Well, I'll check it out.

Nightfire
08-07-2005, 03:01 AM
IE is the most common as it comes with almost every computer bought in shops, but firefox useage has increased alot. Even the non-techy people I know are using firefox

krazykikikatt
08-07-2005, 03:03 AM
That's good... well I've been looking at this example and I've never seen anything like it... I'm not so proficient in CSS yet, and it's taking some serious thought to process what exactly was done...

mark87
08-07-2005, 03:07 AM
Ouch it's late lol, still don't understand quite what you want but I've drawn up a more IE-friendly version of rmedek's code -



<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3c.org/tr/1999/rec-html401-19991224/loose.dtd">
<!-- saved from url=(0042)http://richardmedek.com/temp/example17.htm -->
<html lang=en><head><title>some background-ish effects</title>
<meta http-equiv=content-type content="text/html; charset=utf-8">

<style type=text/css>
body {
background: url(http://richardmedek.com/temp/images/smallstar.gif) fixed left top;
font: 0.8em/1.2em "lucida grande", verdana, arial, sans-serif;
color: #333;
}

html, body {
margin: 0;
height: 100%;
max-height: 100%;
overflow-y: auto;
}

h1 {font-size: 1.5em; margin-bottom: 1em}
h2 {font-size: 1.1em; margin-bottom: 1.5em}
h3 {margin-bottom: 1em}
p {margin: 1em 0px}
li {margin: 0.2em 0px; list-style-type: none}

#main {
margin: 20px;
background: #FFF;
border: #333 1px solid;
padding: 20px;
float: right;
width: 50%;
height: 1000px;
}

#sidebar {
margin: 20px;
background: #FFF;
border: #333 1px solid;
padding: 20px;
width: 15%;
position: fixed;
}

* html #sidebar { position: absolute; }

</style>
</head>

<body>

<div id=main>
<h1>a background-ish effect</h1>
<h2><a
href="http://codingforums.com/showthread.php?t=65374">http://codingforums.com/showthread.php?t=65374</a></h2>
<p>this div is set to a huge height so you can see the scrolling effects.</p>
<p>a div wraps the sidebar (where the navigation is). it is set to have 100%
width, a background image that matches the body, padding, and fixed
positioning.</p>
<p>this way, the scrolling part of the body "ducks" underneath when it hits the
background image of the sidebar wrapper.</p>
<p>so far, this works in all standards-compliant browsers.</p>
</div>

<div id=sidebar>
<h3>menu</h3>
<ul id=nav>
<li><a href="http://richardmedek.com/temp/example17.htm#">link one</a>
<li><a href="http://richardmedek.com/temp/example17.htm#">link two</a>
<li><a href="http://richardmedek.com/temp/example17.htm#">link three</a>
<li><a href="http://richardmedek.com/temp/example17.htm#">link four</a>
<li><a href="http://richardmedek.com/temp/example17.htm#">link five</a>
</li>
</ul>
</div>

</body>
</html>

krazykikikatt
08-07-2005, 03:18 AM
Thanks, I'll check that out.

krazykikikatt
08-07-2005, 03:41 AM
...How on earth did you do that?? It surely works... but I compared your code and mine, and substituted everything that was different and significant, and mine didn't work... >.>

rmedek
08-07-2005, 03:44 AM
Ouch it's late lol, still don't understand quite what you want but I've drawn up a more IE-friendly version of rmedek's code
I don't get it... did you try the first example in FF? This code doesn't really do the same thing. :confused:

krazykikikatt
08-07-2005, 03:46 AM
It appears just the same though... the first example in FF looks just the same as the second one in IE, but I can't work out how he did it...

krazykikikatt
08-07-2005, 03:49 AM
I'm starting to feel quite stupid, on the other hand... I can't seem to take any examples and make them fit into what I have. :mad: I've tried many different things and ways, too.

rmedek
08-07-2005, 03:53 AM
Am I missing something here? In the first example, the scrolling content "ducks" underneath the background image of stars. In the second one, the scrolling content doesn't disappear until it hits the top of the browser window...


FF:
http://richardmedek.com/temp/images/screeny_ff.jpg



IE:
http://richardmedek.com/temp/images/screeny_ie.jpg

mark87
08-07-2005, 03:57 AM
It's nearly the same, closest I could get it in IE anyway - didn't mean to jump on your bandwagon...! It takes advantage of the absolute=fixed bug in IE. :)

Make sure you set height of html and body to '100%' with 'overflow-x: auto'. Make sure you also do the '* html #blah etc' thing.

Now I need sleep... far too late!

rmedek
08-07-2005, 04:02 AM
It's nearly the same, closest I could get it in IE anyway - didn't mean to jump on your bandwagon...! It takes advantage of the absolute=fixed bug in IE.
Not a bandwagon jumping issue :D I thought I was just going nuts and everyone was seeing something else. The absolute=fixed bug is news to me... that's a great tip.

Krazykikikatt, I'll see if I can get something a little more explanatory coded for you.

krazykikikatt
08-07-2005, 04:13 AM
I hadn't noticed that it was different... I guess the first difference I noticed from mine is that my menu bar still moves... :\ At least that I can fix, I think. That'll be a little better. Absolute=fixed? Well that does make sense... I wasn't seeing any difference when I put it in IE.

Thanks for all the help, I'm starting to feel like a lot more trouble than I'm worth... lol.

rmedek
08-07-2005, 04:39 AM
Thanks for all the help, I'm starting to feel like a lot more trouble than I'm worth... lol.
No problem... this is kind of a challenge for me, so we're both learning something today. :D

Thanks for being patient this thread... :D

krazykikikatt
08-07-2005, 04:41 AM
Yeah, it must be my siggy. It's like an amulet or something. Lol. Otherwise I don't quite know how I'd be this patient, I stayed up until seven this morning, slept for all of two hours, and began working on this again, I really don't know what's keeping me going...

rmedek
08-07-2005, 05:18 AM
Okay. Try this out:

example:
http://richardmedek.com/temp/example18.htm

css:
http://richardmedek.com/temp/example18.css

IE hacks
http://richardmedek.com/temp/example18_ie.css

krazykikikatt
08-07-2005, 05:20 AM
Okay, I will in a sec, but I just realized (how stupid of me) that it was easy to make this work in FF at least... but for the lack of its use, I think I'll end up making a whole seperate page for IE users... >.> Well, I got one to work for FF though! I'll upload it in a minute so you can see what you think...

krazykikikatt
08-07-2005, 05:26 AM
Here's what I've got for FireFox (http://www.wiseowlcreations.biz/index2ff.html).

Look good?

krazykikikatt
08-07-2005, 05:27 AM
Crud. It's not working! It was working JUST a second ago....

krazykikikatt
08-07-2005, 05:28 AM
Oookay there it is. Good.

rmedek
08-07-2005, 05:36 AM
Sure, that'll work. I still like my way better. ;) You might want to leave the right-click script off of your site, though--it's just annoying. Good thing it's not working.

krazykikikatt
08-07-2005, 05:38 AM
Yes those are annoying, I know.. I attempted to find one that wouldn't alert the person.. >.> How is it not working, anyway? I know people have ways of getting around it, but I figured maybe anyone smart enough to wouldn't even need to steal, so... yeah. But it's really not working? I heard it doesn't for some browsers...

krazykikikatt
08-07-2005, 05:41 AM
Okay, on your #purely_decorative thing, ...how would I fit my top image to that, if I'm not planning to use a transparency or anything...?

rmedek
08-07-2005, 05:46 AM
Yes those are annoying, I know.. I attempted to find one that wouldn't alert the person.. >.> How is it not working, anyway? I know people have ways of getting around it, but I figured maybe anyone smart enough to wouldn't even need to steal, so... yeah. But it's really not working? I heard it doesn't for some browsers...
Yes, it's not working. And those scripts never work; as a matter of fact there is a big fat sticky on this forum addressing just that issue (http://codingforums.com/showthread.php?t=4437).


Okay, on your #purely_decorative thing, ...how would I fit my top image to that, if I'm not planning to use a transparency or anything...?
The top image is a background image of the #purely_decorative div. So you just use any image you want. I made it transparent so the clouds would float over the content. You don't have to use a transparent image. The nice thing about a transparent image, though, is that if you don't use one you get this unappealing flat, abrupt cut-off of the content.

krazykikikatt
08-07-2005, 05:54 AM
...I think my brain just died. X_X

I know I don't have to use a transparent image... I'm not... but... when I.... ......I need sleep, I think. I've been working on this far too long. But... I'm trying to make this fit...
It's... not... working... X_X
Could I give you the style I already have and have you fix it for IE? LOL. I don't know if that's too much to ask, but I am so supremely confused, it might be easier that way...

rmedek
08-07-2005, 06:00 AM
Could I give you the style I already have and have you fix it for IE?
Sure. I charge $35.00/hour.

No, really... I'm not going to code this for you for free. (Other people on here will, though, so maybe you'll get lucky.) But I will help you with this if you'd like.

krazykikikatt
08-07-2005, 06:02 AM
Yikes. I thought about doing that for a living.

. . . I'd die.

Well, I don't think I'm going to be getting this anytime soon, and my time in which I can even use the internet for the next week or so ends in about five minutes, so...

I wonder, frames are, well crap, but I just might be able to make them work, in a pinch, for an IE page.. Do you think?... hmm

rmedek
08-07-2005, 06:10 AM
I wonder, frames are, well crap, but I just might be able to make them work, in a pinch, for an IE page.. Do you think?... hmm
Why??!

You've got an example that works in just about every modern browser, including IE. All you have to do is spend some time with it. For the most part all you have to do is replace the images. If this is your first layout, like you said it was, then just spend some time messing with the code. It doesn't come overnight.... you have to take a little time and learn how to do it. If you don't want to learn, just save your money and have someone do it for you.

krazykikikatt
08-07-2005, 06:16 AM
I do want to, but I'm getting the feeling that all it's doing is getting me more increasingly confused.. but, then again, I haven't had much sleep, and by the time I can get online again, I might have forgot all of it all over again, so... I don't know. I'll see what happens...

krazykikikatt
08-07-2005, 06:21 AM
Well, my time is about up now, so I guess I got to go.... Thanks for all your help, these have been some seriously tiring hours... X_X

I may be back in a week, LOL.

harbingerOTV
08-07-2005, 07:31 AM
I almost feel bad about posting this after Richards response. I have a feleing your not going to actually learn anything form this but I'll do my best to feed you enough info that maybe you'll look into what is going on here

first a post where I covered what I knew about IE and fixed:

http://codingforums.com/showthread.php?t=62998

Now some sites that use it:

http://home.earthlink.net/~harbingerofthevoid/haywire/
http://home.earthlink.net/~harbingerofthevoid/
http://home.earthlink.net/~harbingerofthevoid/brownsmoke/brownsmoke.html
http://home.earthlink.net/~harbingerofthevoid/testing/fixedtest.html
http://www.rammstein.com/ (although they didn't try very hard to make it work as smooth as possible)

now a redo of your page that is fixed in Opera 8/FF/Moz/IE6 not sure how it works in IE5x but I think everything scrolls as normal.

This breaks up in anything less than 1020x? resolution but some image editing can be done and it can work. You have the site built for 1024. Designing for a specific resolution is not a good idea. Your layout should be able to at least go down to 800x600 without failing IMO.

the opacity doesn't work in Opera (im new to opera so..) but it looks better without it to me.

here we go:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Blog</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background: url(kkbodybg.jpg) bottom right no-repeat #000 fixed;
margin: 0;
padding: 0;
color: #fff;
}
#top {
position: absolute;
width: 730px;
height: 237px;
background: url(kktopmoon.jpg) top left no-repeat;
z-index: 20;
top: 0;
left: 0;
}
#top[id] {
position: fixed
}
#menu {
left: 35px;
top: 239px;
background-color:#606061;
width: 150px;
filter:alpha(opacity=60);
opacity:.60;
-moz-opacity:.60;
border:2px solid #FFFFFF;
position: absolute;
}
#menu[id] {
position: fixed;
}
#content {
margin-top: 237px;
margin-left: 110px;
width: 490px;
background-color:#606061;
filter:alpha(opacity=60);
opacity:.60;
-moz-opacity:.60;
border:2px solid #FFFFFF;
float: left;
}
#content[id] {
margin-left:225px;
}
#content p {
margin: 8px;
}
#menu p {
margin: 8px;
}


</style>
<!--[if IE]>
<style type="text/css">
html {
overflow: hidden;
}
body {
height: 100%;
overflow: auto;
}
</style>
<![endif]-->




</head>
<body>
<div id="top"></div>
<div id="menu">
<p>
Your menu will go here. You can place images, text links, etc. in this div. To change the

properties of this layer you can change the #menu selector in the style sheet that is located

on this page between the head tags.
</p>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque arcu dolor, porttitor

vel, cursus vel, accumsan facilisis, nulla. Ut cursus. Nam consequat risus vitae nunc. Etiam

euismod, metus venenatis pretium ultricies, dui ligula bibendum erat, sit amet rhoncus tellus

leo non nisl. Fusce purus. Suspendisse eu arcu. Sed mollis scelerisque risus. Phasellus sit

amet quam id lectus eleifend interdum. Nam massa metus, adipiscing eget, blandit nec, accumsan

eu, leo. Proin turpis erat, scelerisque vitae, commodo vel, consequat vel, metus. Proin luctus

arcu id quam. Quisque varius fermentum pede. Sed non purus porttitor lacus ullamcorper

eleifend. Maecenas sed sapien sollicitudin magna interdum congue.

Sed lobortis lacus eu nisl. Sed luctus felis vitae nulla. Donec tempus. Nullam nulla arcu,

mattis in, aliquet eget, vehicula eget, leo. Quisque elementum, orci vitae blandit tincidunt,

erat quam tempor enim, convallis laoreet sem velit a quam. Nunc a eros eu risus rhoncus

adipiscing. Donec mattis. Nulla magna. Vestibulum tristique lacus ac tortor. Vestibulum viverra

sapien sed orci. Integer lectus. Nunc ac sem eleifend massa euismod faucibus. Cum sociis

natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec hendrerit odio

feugiat dolor. Sed lorem. Maecenas vel risus sit amet erat bibendum tincidunt. Nullam elit

enim, commodo ac, mollis eget, gravida non, nulla. Aliquam dictum, orci id ornare aliquam, eros

neque consequat magna, a condimentum ligula enim sit amet nulla. Pellentesque nec sem. Sed

congue nonummy odio.
Fusce iaculis. Vivamus a wisi. Integer interdum dictum wisi. Praesent adipiscing. Donec

dignissim. Proin posuere neque sed nibh. Maecenas luctus est a diam. Ut purus. Nulla ipsum

urna, porttitor a, semper vel, nonummy nec, libero. Pellentesque habitant morbi tristique

senectus et netus et malesuada fames ac turpis egestas. Aenean sit amet enim. Vestibulum quis

augue. Etiam nonummy iaculis nunc. Vestibulum et odio ut tortor elementum porttitor. Lorem

ipsum dolor sit amet, consectetuer adipiscing elit. Duis nec quam ac justo facilisis

scelerisque.
Sed augue ante, posuere ac, gravida quis, auctor nec, enim. Donec molestie fermentum turpis.

Aenean vel lectus. Morbi eleifend, urna non consequat condimentum, leo nunc placerat purus, nec

congue purus est vel dolor. Sed adipiscing. Etiam nisl tortor, gravida a, sollicitudin sit

amet, consectetuer et, tortor. Praesent vestibulum tortor. Aliquam facilisis nibh sed eros

sodales ultrices. Vestibulum pulvinar dolor a quam. Ut magna magna, pellentesque vitae,

consectetuer at, auctor a, risus. Nullam vehicula imperdiet odio. Integer convallis wisi ut

risus. Sed dapibus, est nec rutrum facilisis, dui nibh rhoncus lacus, non bibendum pede augue

quis diam. In vitae quam eu erat blandit suscipit. Integer in metus ac sem gravida vehicula.

Etiam quis metus. Cras sagittis, wisi at facilisis condimentum, pede pede vestibulum risus, et

dignissim ante augue ut sapien. Integer tempor leo.
</p>
</div>
</body>
</html>


the images are at the end of the post.

do me a favor and read the post in the first link. It covers a little of what is going on with IE in this case.

I sliced the pic up but you could easily put a div in thebottom right corner with the kkbodybg.jpg pic in it and make the body have just stars.

anyway the images:

kiwibrit
08-07-2005, 09:00 AM
Are you sure? Try this in Firefox or Opera, and you'll see what it's supposed to do. I am using IE on a Virtual PC, so maybe I'm mistaken, but I thought IE6 didn't support fixed positioning.

This page (http://www.executive-express.co.uk/) looks the same in Firefox and IE6 to me.

Note: I've dropped some absolute position into an "under construction" page, which shows that a domain is in use - so this example won't be valid for more than a week or so - I hope!

rmedek
08-07-2005, 09:59 AM
This page (http://www.executive-express.co.uk/) looks the same in Firefox and IE6 to me.
Right. That page uses absolute positioning, not fixed, and doesn't scroll, so the effect is lost anyway.

kiwibrit
08-07-2005, 10:38 AM
Right. That page uses absolute positioning, not fixed, and doesn't scroll, so the effect is lost anyway.
Ouch. That'll teach me to leap in without fully realising what I am saying. I have now thrown in fixed positioning for the image, and added a bottom line of text spaced so that a scroll is forced. You are spot on. IE6 does not support it. Lesson learned. Thanks for that.

krazykikikatt
08-13-2005, 07:10 PM
Thank you all so much. I really am trying to learn from these things, and from looking at harbinger's other post I think I'm beginning to better understand the whole fixed positioning in IE thing.
By the way, I haven't fixed up a full stylesheet for the page yet, so it might look better once I do, but i think I can get the transparency thing to work pretty well.
Well once again, thanks to everyone, I think I'm getting closer, but who knows, I might be back again... :o



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum