PDA

View Full Version : Help with positioning?

nielle
05-01-2003, 01:11 AM
I can't seem to get my div block to clear the bottom of the page. It just goes right to the bottom of the page and then vanishes. I wanted to put my text on a block of background, something like a table, but have it clear at the bottom. It clears the bottom of one of my pages, but not the other. Here's the CSS I used.

This is the one that won't clear the bottom:

{ background-color: black;
border-style: outset;
border-width: medium;
border-color: #FECC02;
position: relative;
top:130;
left:25;
bottom:25;
padding: 50px;
font-family: sans-serif, sans serif;
width: 565px;
z-index:-1; }

And this is the one that does, but it only clears a little bit. I can't seem to control by how much:

{ background-color: black;
border-style: outset;
border-width: medium;
border-color: #FECC02;
position: relative;
top: 10;
left: 25;
padding: 50px;
font-family: sans-serif, sans serif;
width: 565px;
z-index:-1; }

You can see what I mean by scrolling to the bottom of the pages:
The first one is http://tanela.mx-deus.net
and the second one is http://tanela.mx-deus.net/art.html

I can't for the life of me figure out what I'm doing wrong. I just want it to look like the text is in a black box on the page, but I'd rather that the box ends before the actual bottom of the page.

Also, I can't get the border around my iframe to show up on another page. This is the code I'm using:

<div style="position:absolute; top: 120px; left: 60px; z-index:-5;">
<iframe name="journal"
src="http://myjournalsaddress"
frameborder=3
scrolling="auto" height="400" width="650">
<a href="http://myjournalsaddress">My Journal</a>
</iframe>
</div>

For some reason, there's just no border at all.

If anyone can help me fix my code, I'd greatly appreciate it. I'm not quite sure what I'm doing wrong.
Elentari
05-01-2003, 01:22 AM
For the first question, if you mean that you want your div to end and then for the page to continue for a little bit where it will just show your background, then this is how you do it.

Add a margin tag in your css.

margin-bottom:25px;

or set all four of your margins like so...

margin: 25px 5px 12px 50px;

If you choose to use the second format, the numbers are in the specific order of top margin, right margin, bottom margin and left margin.....

(Obviously change the numbers to whatever you want them to be).




For the second question, I'm not entirely sure which border you mean on which iframe. Can you post a link with an example and explain what you want please. =)
nielle
05-01-2003, 01:27 AM
The margin-bottom tag didn't seem to work, but I've discovered a way around it by position:absolute placing a transparent spacer graphic farther down the page than the div ends. It means I have to keep track of how far down my div blocks go, but at least I know I can see it the way it's supposed to look.

Maybe my old version of IE is interfering with the margin tag? I don't know. It's interfering with my z-index on the iframe, although I know it works on newer IE, so maybe that's the problem.

Here's the example for the iframe:
http://tanela.mx-deus.net/journal.html
I just want the frame to have a black border. I was under the impression that the frameborder quality would put one in, but nothing's showing up that I can see.
Elentari
05-01-2003, 01:40 AM
For the margin problem, did you put the code into the body section of the CSS style?

Your code (for the first example you gave) should look like this...

<head>
<style type="text/css">
<!--
body {
margin-bottom:50px;
}
--->
</style>
</head>

Then of course your entire code goes inbetween two body tags <body>

ALL YOUR CODE FOR YOUR PAGE

</body>

As for the border around the frame...try this...


<iframe src="iframe.html" name="iframe" width="450" height="515" frameborder="0" style="border: 1 dotted #000000"></iframe>


(Obviously change the values like the dotted frame and widths and colours to your own.
nielle
05-01-2003, 06:31 AM
Thanks!

The border is working great now. Thanks for the help there.

I had the margin-bottom working for a while. I have an embedded stylesheet, but for some reason only one of my pages is obeying the margin-bottom code.

Here's my embedded body tag:
body {
background-image:url('pics/watstripes2.JPG');
background-attachment:fixed;
font-family: sans-serif, sans serif;
color: yellow ;
font-size: 10pt;
margin-bottom: 100px; }

Of the pages mentioned above, it seems to be working on art.html, but not the other two. Any ideas?
Elentari
05-01-2003, 07:57 AM
I can't figure out what's wrong with your code. It's probably sometime stupid to do with the order in which you have all your code. I looked at your CSS and you are lacking a lot of things like the start of a stylesheet <style type="text/css"> and all that. You should really try to be neater with your code and then this doesn't happen as much and is easier to fix when it does.

Anyway....all I can offer you right now is a temporary fix to your problem. On the pages that the margin is NOT working, add this in between the <head></head> tags.


<style type="text/css">
<!--
body {
margin:0px 0px 100px;
}
-->
</style>


It's a bandaid and not really a cure but I can't quite figure out what's wrong with your code. Lack of sleep probably.
MaGiCSuN
05-01-2003, 12:36 PM
<style></style> and <style type="text/css"></style> shouldn't make some difference :)
nielle
05-09-2003, 04:16 AM
I fixed most of the main problems with my code by viewing the page through another browser, but the margin-bottom thing still plagues me. Putting the margin-bottom in the body didn't work. I currently have it in the .page class code. In putting another image in position:relative beneath the .page div, I noticed that it's actually behaving as though the bottom of the div is about 100 pixels higher than it actually is, and I can't figure out for the life of me what would make it do that, especially since it does it only on two out of three pages where I use the same class div. The third one works just like you'd expect it to. One of the divs only had two h2 tags in it with some text in them and nothing else, so why it would think the bottom of itself was 100px higher than it was boggles my mind. At the moment it's only affecting the position of the next graphic, but it's livable.

I just don't know what would make it broken like that. This is my .page code:

{ background-color: black;
border-style: outset;
border-width: medium;
border-color: #FECC02;
margin-bottom:100px;
position: relative;
top: 10px;
left: 25px;
font-family: sans-serif, sans serif;
width: 565px;
z-index:2; }

Everything else works exactly the way I want it to. Huh. *shrug*