xbl1 Posted December 16, 2006 Share Posted December 16, 2006 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 More sharing options...
ste Posted December 16, 2006 Share Posted December 16, 2006 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: 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) 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 More sharing options...
xbl1 Posted December 16, 2006 Author Share Posted December 16, 2006 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: 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) 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now