|
 |
|
|
|
| Thread title: Cool little effect, but how? |
 |
|
|
| |
|
Thread tools
Search this thread
Display Modes
|
|
|
10-12-2005, 08:51 PM
|
#1
|
Status: Lurker
Join date: Jun 2005
Location:
Expertise:
Software:
Posts: 1,473
|
 Cool little effect, but how?
http://blueflavor.com/ed/
Look at the bottom of the screen (not the page) There is a little blue bar that's outside the web site. Is there any other way to acheive this effect other than using an Iframe, or php include, with a no scrollbar set?
Thanks. 
|
|
|
|
10-12-2005, 08:58 PM
|
#2
|
Status: I'm new around here
Join date: Oct 2005
Location: Wales, UK
Expertise:
Software:
Posts: 18
|
no scrollbar?
HTML Code:
<iframe src="iframeurl.html" scrolling="no" width="100" height="100" frameborder="0"></iframe>
thats html for iframe without a scrollbar... php include simply copies and pastes the contents of the include file into the coding... so thats completely different..
if you simply wish to remove the blue line at the top of your stylesheet remove the border-bottom: 3px solid #2e4988;
not sure if that covers what ya wanted but there ya go :P
|
|
|
|
10-12-2005, 08:59 PM
|
#3
|
Status: Lurker
Join date: Jun 2005
Location:
Expertise:
Software:
Posts: 1,473
|
Well, actually I was wondering if the blue line at the bottom could be acheived without loads of javascript, but I would have eventually needed the no scroll html, so thanks. 
|
|
|
|
10-12-2005, 09:01 PM
|
#4
|
Status: Member
Join date: Oct 2005
Location: Calgary, Alberta, Canada
Expertise:
Software:
Posts: 278
|
looks like it only works in ie, not ff. maybe its this?
body {
font-family: Myriad, "Myriad Roman", "Myriad Pro", "Myriad Web", "Lucida Grande", "Trebuchet MS", Helvetica, Arial, san-serif;
border-top: 10px solid #2e4988;
margin: 0;
border-bottom: 3px solid #2e4988;
font-weight: normal;
background: white;
}
|
I think its the 'border-bottom' maybe.
|
|
|
|
10-12-2005, 09:20 PM
|
#5
|
Status: I'm new around here
Join date: Oct 2005
Location: Wales, UK
Expertise:
Software:
Posts: 18
|
maybe? lol yea it is m8 if u look at top of page u will notce the top border as well, only like 3 times as thick... thats the border-top part :P
ok back the the quirie in hand... it's not possible to get the borders outside of the page on any other browser than IE. IE uses MS-HTML and changes just about everything u code lol.
the one way i've figured it to work is this:
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
border-top: 10px solid #2e4988;
border-bottom: 3px solid #2e4988;
margin: 0px 0px 0px 0px;
}
-->
</style>
</head>
<body>
<iframe src="main.html" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
</body>
</html>
THEN name the file with all the main page data in it main.html
there ya go its done :P
|
|
|
|
10-12-2005, 09:38 PM
|
#6
|
Status: I love this place
Join date: Mar 2005
Location:
Expertise:
Software:
Posts: 640
|
Another way you could do this is with absolute positioning except it wont be outside of the scrollbar.
Whatever you do I dont think that effect is worth using iframes..thats just my opinion.
|
|
|
|
10-12-2005, 10:29 PM
|
#7
|
Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:
Posts: 2,246
|
#website {
overflow: auto;
}
#footer {
#background: transparent url(your_image.img) repeat-x;
}
<div id="website">everything goes in here</div>
<div id="footer">omg i'll be under the scroolbar</div>
|
|
|
|
10-12-2005, 11:03 PM
|
#8
|
Status: I'm new around here
Join date: Oct 2005
Location: Wales, UK
Expertise:
Software:
Posts: 18
|
|
Originally Posted by dereklapp
#website {
overflow: auto;
}
#footer {
#background: transparent url(your_image.img) repeat-x;
}
<div id="website">everything goes in here</div>
<div id="footer">omg i'll be under the scroolbar</div> |
remember to remove the margine in body { in the css so it appears as though it is actually a normal page with borders above and below scrollbars... or there's gona b a 5 pixel margin on right hand side makin it look slightly dodgy...
HTML Code:
body {
margin: 0px 0px 0px 0px;
}
never thought of that though m8 :P
|
|
|
|
10-13-2005, 03:37 PM
|
#9
|
Status: Lurker
Join date: Jun 2005
Location:
Expertise:
Software:
Posts: 1,473
|
Cool, thanks all.
|
|
|
|
10-13-2005, 03:41 PM
|
#10
|
Status: Junior Member
Join date: Oct 2005
Location: UK
Expertise:
Software:
Posts: 42
|
Wow , that is a kool effect, gd find!
and ty to all the coders !
|
|
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
|
|
Linear Mode
Forum Contains New Posts 
Forum Contains No New Posts 
Forum is Closed