Webmaster Forum
Home Register Blogs FAQ Members List Calendar Search Today's Posts Mark Forums Read

Go Back   Webmaster Forum > Webmaster Discussion Forums > Web Design and Graphics
Reload this Page how to make an unmovable header?

Notices

Welcome To Web-Talks.com
The Webmaster Forum

Welcome To Web-Talks.com. You are currently viewing our webmaster forum as a guest!

By registering, you will have access to all of post topics, ask questions, free resources, participate in our discussion, win prizes in our contests and more.

Please do join, we look forward to hearing about all the sites you run and your future plans. If you have any questions or problems please feel free to contact me.

Registration is fast, simple and free, so please Click Here to join our webmaster forum today!

Webmaster Forums

Reply
 
LinkBack (1) Thread Tools Display Modes
Old 06-06-2008, 05:04 AM   1 links from elsewhere to this Post. Click to view. #1
Contributing Member
 
joshchan214's Avatar
 
Join Date: Apr 2008
Location: Perak, MY
Posts: 1,097
My Mood:
Credits: 23
joshchan214 is a jewel in the roughjoshchan214 is a jewel in the roughjoshchan214 is a jewel in the rough
Send a message via MSN to joshchan214
Default how to make an unmovable header?
Hi all, check this,
Geekie.org, a technological blog.
Scroll down the sidebar and you'll see the header is unmovable, plus a little transparent, cool eh?
But how is it done?

thanks.
__________________
Corevor - portfolio + blog
joshchan214 is offline   Reply With Quote
Old 06-06-2008, 05:18 AM   #2
Regular Member
 
Aziz's Avatar
 
Join Date: May 2008
Location: Haifa, Israel
Posts: 630
My Mood:
Credits: 1
Aziz is a jewel in the roughAziz is a jewel in the rough
Send a message via MSN to Aziz
Default
Code:
			<link rel="stylesheet" type="text/css" href="http://www.geekie.org/wp-content/plugins/openid/files/openid.css?ver=svn-47054" /><link rel="stylesheet" href="http://www.geekie.org/wp-content/plugins/wp-postratings/postratings-css.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://javascript.freddyware.info/geekie.org/header.php"></script>
</head>
<body class=" headerfixed"><div id="header"><div class="header_content"> <form method="get" id="searchform" action="http://www.geekie.org">
    <p class="right" id="search">

    <input type="text" value="Search our site" name="s" id="s" alt="Search"/><br />
    <label id="label" for="s"></label>
<span id="feedburner_button"><a href="http://www.geekie.org/feed"><img src="http://feeds.feedburner.com/~fc/geekie?bg=FF9900&amp;fg=000000&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a></span>
    </p>
 </form>
<h1 style='font-family: "Trebuchet MS", sans-serif; font-size: 20px'><a href="http://www.geekie.org" title="Geekie.org">Geekie.org, a technological resource</a><br /></h1><div style="clear: both;"></div>
</div>
<div class="header_bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>

 <div id="bodyowner">

<div class="banner">
		<div class="blogbefore">
			<div class="left"></div>
			<div class="right"></div>
			<div class="middle"></div>
looks like it's a mix of JS, PHP and AJAX with CSS
__________________
http://www.azizgfx.com/
Aziz is offline   Reply With Quote
Old 06-06-2008, 05:43 AM   #3
Contributing Member
 
joshchan214's Avatar
 
Join Date: Apr 2008
Location: Perak, MY
Posts: 1,097
My Mood:
Credits: 23
joshchan214 is a jewel in the roughjoshchan214 is a jewel in the roughjoshchan214 is a jewel in the rough
Send a message via MSN to joshchan214
Default
thats not help. whats it called? maybe i can find it by googling for the right phrase.
__________________
Corevor - portfolio + blog
joshchan214 is offline   Reply With Quote
Old 06-06-2008, 09:02 AM   #4
Contributing Member
 
joshchan214's Avatar
 
Join Date: Apr 2008
Location: Perak, MY
Posts: 1,097
My Mood:
Credits: 23
joshchan214 is a jewel in the roughjoshchan214 is a jewel in the roughjoshchan214 is a jewel in the rough
Send a message via MSN to joshchan214
Default
found a simple way. heres a demo.
jargoncliq.com/projects/fix-header
that thing on top is in "div".
thanks.
__________________
Corevor - portfolio + blog
joshchan214 is offline   Reply With Quote
Old 06-06-2008, 03:47 PM   #5
Contributing Member
 
khena25's Avatar
 
Join Date: Apr 2008
Location: USA
Posts: 470
My Mood:
Credits: 6
khena25 will become famous soon enough
Send a message via AIM to khena25 Send a message via MSN to khena25 Send a message via Yahoo to khena25
Default
It's just frames. very easy to do.
__________________
[+-_I'm Clydee Hena, and I approve this message!_-+]
I'm proud to be Albanian
khena25 is offline   Reply With Quote
Old 06-07-2008, 10:05 AM   #6
New Member
 
Join Date: Jun 2008
Posts: 2
Credits: 0
freddyware is on a distinguished road
Smile
Hello.

I'm the owner of Geekie.org, and I'd love to share how I got the header to work.

Quote:
looks like it's a mix of JS, PHP and AJAX with CSS
Well, the AJAX and JS that you see in the included script file is actually only for my post ratings plugin on WordPress. The header itself is styled in CSS only; with the exception of the search field, which uses a bit of JavaScript to give instructions.

The CSS code that makes this work can be viewed at http://www.geekie.org/wp-content/the.../style.css.php.

Code:
body.headerfixed #header{position:fixed;top:0;left:0;z-index:100}
The CSS code also includes a large number of PNG's with alpha transparency that are used for the transparent bottoms.

To see this in action, change your background preference to "white" or "picture" on Geekie.org Background Preferences and view the home page of the blog to see it in action. This part uses PHP, sessions and cookies to change the site design.

Quote:
It's just frames. very easy to do.
I'm afraid you are mistaken. I strive to avoid iframes and all such sorts of coding on my blog. I do not use frames.

The blog design is heavily modified from the Vistered Little theme for WordPress.

I hope I've helped to explain how it's done!
freddyware is offline   Reply With Quote
Old 06-07-2008, 10:09 AM   #7
Regular Member
 
Aziz's Avatar
 
Join Date: May 2008
Location: Haifa, Israel
Posts: 630
My Mood:
Credits: 1
Aziz is a jewel in the roughAziz is a jewel in the rough
Send a message via MSN to Aziz
Default
Quote:
Originally Posted by freddyware View Post
Hello.

I'm the owner of Geekie.org, and I'd love to share how I got the header to work.


Well, the AJAX and JS that you see in the included script file is actually only for my post ratings plugin on WordPress. The header itself is styled in CSS only; with the exception of the search field, which uses a bit of JavaScript to give instructions.

The CSS code that makes this work can be viewed at http://www.geekie.org/wp-content/the.../style.css.php.

Code:
body.headerfixed #header{position:fixed;top:0;left:0;z-index:100}
The CSS code also includes a large number of PNG's with alpha transparency that are used for the transparent bottoms.

To see this in action, change your background preference to "white" or "picture" on Geekie.org Background Preferences and view the home page of the blog to see it in action. This part uses PHP, sessions and cookies to change the site design.


I'm afraid you are mistaken. I strive to avoid iframes and all such sorts of coding on my blog. I do not use frames.

The blog design is heavily modified from the Vistered Little theme for WordPress.

I hope I've helped to explain how it's done!
thanks for explaining, much appreciated!
__________________
http://www.azizgfx.com/
Aziz is offline   Reply With Quote
Old 06-07-2008, 10:28 AM   #8
Contributing Member
 
khena25's Avatar
 
Join Date: Apr 2008
Location: USA
Posts: 470
My Mood:
Credits: 6
khena25 will become famous soon enough
Send a message via AIM to khena25 Send a message via MSN to khena25 Send a message via Yahoo to khena25
Default
Makes more sense. And welcome to the forum too.
__________________
[+-_I'm Clydee Hena, and I approve this message!_-+]
I'm proud to be Albanian
khena25 is offline   Reply With Quote
Old 06-07-2008, 11:20 AM   #9
Contributing Member
 
joshchan214's Avatar
 
Join Date: Apr 2008
Location: Perak, MY
Posts: 1,097
My Mood:
Credits: 23
joshchan214 is a jewel in the roughjoshchan214 is a jewel in the roughjoshchan214 is a jewel in the rough
Send a message via MSN to joshchan214
Default
hi freddyware, tell you what, im an admirer of your blog. cheers. one of your 17 rss subscriber. lol. nice to have you around!
__________________
Corevor - portfolio + blog
joshchan214 is offline   Reply With Quote
Reply

Bookmarks

« Michael Ballack [Signature + Avatar] | look what i found »
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

LinkBacks (?)
LinkBack to this Thread: http://web-talks.com/f274/how-make-unmovable-header-2716.html
Posted By For Type Date
Technorati: Discussion about “Question how to make an unmovable header?” This thread Refback 06-07-2008 09:55 AM

Similar Threads
Thread Thread Starter Forum Replies Last Post
Make Firefox Faster MurdoC Webmaster Discussion 14 10-09-2008 04:57 PM
Want to make some changes with looking thinkfast Website Reviews 9 06-27-2008 11:03 AM
Make money for doing offers! Garala Marketing and Revenue 5 06-19-2008 12:08 PM
[3.7.0]Welcome box in Header Osirus Web Design and Graphics 4 04-10-2008 10:31 PM



vBCredits v1.4 Copyright ©2007 - 2008, PixelFX Studios

Contact Us - Webmaster Forum - Archive - Top