Jump to content

how to make a bar like youtube has?


xbl1
 Share

Recommended Posts

Hello; :):) I'd like to ask you how to make a bar like youtubewww.youtube.com, which it is under the 4 buttons(Video, Categories, Channels and Comnunity).

<html><body><center><form><input type="button" name="Video" Value="Video"><input type="button" name="Categories" Value="Categories"><input type="button" name="Channels" Value="Channels"><input type="button" name="Community" Value="Comnunity"></form> </center></body></html>

Link to comment
Share on other sites

ok first you need to make the tab buttons you will be using in Photoshop or whatever graphics program you use.an example of one of youtubes butons:tab_videos_118x28c3a.gif heres a tutorial on making tabs:http://www.spoono.com/photoshop/tutorials/tutorial.php?id=55youtube also has a bottom image background. e.g. (click for actual size)pic_globalnav_gradation_875x24678.png once you have your 4 different buttons and background. you can move on to the html/cssno need to put it in a form like you have above.html:

<div id="navigation"><div class="tab"><a href="#"><img src="tab1.gif" /></a></div>	<div class="tab"><a href="#"><img src="tab2.gif" /></a></div><div class="tab"><a href="#"><img src="tab3.gif" /></a></div><div class="tab"><a href="#"><img src="tab4.gif" /></a></div></div><div id="NavBottom"> </div>

css:

navigation { height: 28px; }.tab 	{ float: left; width: 124px; border:0px }#NavBottom { clear: both; width: 100%; height: 24px; background: url(backgroundimage.gif) top left no-repeat; margin-bottom: 6px;}

heres a finished example: (you can view the source code to see how it works)http://www.stefairclough.com/xbl1/

Link to comment
Share on other sites

ok first you need to make the tab buttons you will be using in Photoshop or whatever graphics program you use.an example of one of youtubes butons:tab_videos_118x28c3a.gif heres a tutorial on making tabs:http://www.spoono.com/photoshop/tutorials/tutorial.php?id=55youtube also has a bottom image background. e.g. (click for actual size)pic_globalnav_gradation_875x24678.png once you have your 4 different buttons and background. you can move on to the html/cssno need to put it in a form like you have above.html:
<div id="navigation"><div class="tab"><a href="#"><img src="tab1.gif" /></a></div>	<div class="tab"><a href="#"><img src="tab2.gif" /></a></div><div class="tab"><a href="#"><img src="tab3.gif" /></a></div><div class="tab"><a href="#"><img src="tab4.gif" /></a></div></div><div id="NavBottom"> </div>

css:

navigation { height: 28px; }.tab 	{ float: left; width: 124px; border:0px }#NavBottom { clear: both; width: 100%; height: 24px; background: url(backgroundimage.gif) top left no-repeat; margin-bottom: 6px;}

heres a finished example: (you can view the source code to see how it works)http://www.stefairclough.com/xbl1/

So nice the buttons you maked. i envy your job.Thanks for your time. :):):)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...