Topic: Border under scroll bars (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=9628" title="Pages that link to Topic: Border under scroll bars (Page 1 of 1)" rel="nofollow" >Topic: Border under scroll bars <span class="small">(Page 1 of 1)</span>\
 
JJ
Nervous Wreck (II) Inmate

From: Lard
Insane since: Apr 2003

 posted posted 04-28-2003 13:13

see what i'm talking about, go here in IE: http://www.billboard.com/bb/index.jsp

See the black pixel wide line around it all?

I tried to see how thats done. I saved files, launched editors, but couldnt find it. I thank you to help me out.

P.S. I'm new here. Hello
Xdreamer.ch
Maniac (V) Inmate

From: Switzerland
Insane since: Mar 2001

 posted posted 04-28-2003 13:20

which border are you talking about? i can't see
a border under a scrollbar sorry...

perhaps you can post a screeni in here, thanks

and btw: welcome to the asylum :]
JJ
Nervous Wreck (II) Inmate

From: Lard
Insane since: Apr 2003

 posted posted 04-28-2003 13:55

its very thin, not exactly under, but most visible to the right of the scroll bar in IE (haven't checked in others) but its there, like frames
Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

 posted posted 04-28-2003 14:57

JJ: OK I see it - there is a border style on your body - like:

code:
body {

  border: 1px solid #000;

}



It doesn't have wide browser support (works fine in IE/Win) but can be used to provide interesting effects - it just looks a bit ugly here. If you want to get rid of it ind the style and remove it.

___________________
Emps

FAQs: Emperor
JJ
Nervous Wreck (II) Inmate

From: Lard
Insane since: Apr 2003

 posted posted 04-28-2003 16:33

It is ugly there but quite peculiar. What "interesting effects" have you for this?
Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

 posted posted 04-28-2003 16:44

JJ: Its not that peculiar its just badly done there

What kind of effects can you get? Plenty but one of the god ones is to use that trick (but get rid of the border and margin) and the CSS which allows you to grab the user's GUI colour scheme and integrate your web page into the browser like:
http://webfx.eae.net/webboard/

See here for an explanation of the UI CSS colour schemes:
http://webfx.eae.net/docs/environ.html

___________________
Emps

FAQs: Emperor
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 posted posted 04-28-2003 19:21

Not sure about the specific effect in question here, but I use a border on the body tag on my site, combined with a margin to get the red stripes down the left side. It works in IE/MO/NN and I'm pretty sure Opera as well (I'll have to recheck that when I get home ). The border part of it works in IE4 even...but not the margin.

I am using mozilla here at work, and I do *not* see the black border on that site...so I'm wondering why I can see it my site but not that one...?



[This message has been edited by DL-44 (edited 04-28-2003).]
ClevaTreva
Obsessive-Compulsive (I) Inmate

From:
Insane since: May 2003

 posted posted 05-16-2003 11:31

JJ

I had a look and if you view the source and copy it and then display it from your own system (using a HTML editor, you will see an ordinary page).

So, how did they do that?

Easy.

Set a page up with no content other than an iframe. Point this to the real file you want to display. Switch off the scroll bars on the blank page. Set borders as appropriate, and styles. I couldn't be bothered to exactly replicate the page you refered to, but this does something similar:

<html>
<head>
<title>(Type a title for your page here)</title>
<style type=text/css>
body {
margin: 0;
padding: 0;
border: 0
}
iframe {
margin: 0;
padding: 0;
border-width; 1
border-color: black;
border-style:solid;
overflow: visible
}
</style>

</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" scroll=no border=0 margin=0>
<iframe border=1 height=100% width=100% src="anotherpage.htm"></iframe>

</body>

</html>

To get a scroll bar the page must be longer than the window. The advantage of this is that if the page is not longer than the window, no scrollbar appears at all, giving a bit more width.

Now, iframe is a bit IE'ish, not so good on other browsers, maybe why others don't see the same effect. Anyway, play around with the borders on both the body of the blank page and that of the source file.


Trev

"Good artists copy, great artists steal." Pablo Picasso
ClevaTreva
Obsessive-Compulsive (I) Inmate

From:
Insane since: May 2003

 posted posted 05-16-2003 20:21

Me again

Spotted a typo, and got it right in all coding so it looks just right:

Set a page up with no content other than an iframe. Point this to the real file you want to display. Switch off the scroll bars on the blank page. Set borders as appropriate, and styles. I couldn't be bothered to exactly replicate the page you refered to, but this does something similar:

<html>
<head>
<title>(Type a title for your page here)</title>
<style type=text/css>
body {
margin: 0;
border: 0
}
iframe {
position: absolute;
top:0;
left:0;
visibility:hidden;
border: 1;
border-width: 1;
border-style: solid;
}
</style>

</head>

<body scroll=no>
<iframe height=100% width=100% src="anotherpage.htm"></iframe>

</body>

</html>


In the source file, the body needs some style too:

<style type=text/css>
body {
margin: 0;
border: 1;
border-style: solid;
border-width: 1;
}
</style>

Only problem I can see is that you need to be rreal careful designing your source file to makes sure all frames and div's are positioned correctly, or they might move to odd places in an iframe, AND

If the source page is small so it won't need scrollbars, they won't appear, leaving some unusable whitespace (or whatever your background color is) at the right. As my site has some bars across the top, it looks a little weird, but the site you refered to looks ok.

Now, I can see some potential here, coz you won't need to reload the main page all the time. Watch this space for a cool page preloader script based on this!

Trev

"Good artists copy, great artists steal." Pablo Picasso


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu