Thursday, November 24, 2011

How can i make a horizontal navigation bar using CSS?

I want it like this, if possible:





http://www.swimchick.net/





So if you could tell me how,or give me a good website that would be awesome! :) Also, i can make graphics if thats what you need to make a navigation bar like that.





thanks!|||STWBE Pretty much got it, but here is a second way.





CSS


%26lt;style type="text/css"%26gt;


#navbar


{


position: absolute;


top: 0px;


width: 100%;


height: 50px; (edit)


}


#navbar td


{


width: 20% (edit)


}


a:link#navbar td


{


background-color: black; (edit)


}


a:hover#navbar td


{


background-color: white; (edit)


{


%26lt;/style%26gt;








HTML


%26lt;table id="navbar"%26gt;%26lt;tr%26gt;


%26lt;td%26gt;Home%26lt;/td%26gt;


DO REST OF BUTTONS


%26lt;/tr%26gt;%26lt;/table%26gt;





That should do it! Email me if something doesn't work right. You can change anything with (edit) next to it, but make sure to takes those out when you put the code in your page.|||hello ,


this is an easy bar , and with CSS you can make more than this , anyway


now i haven't a lot of time ,so i will tell you the head line to make it


and if you couldn't figure out how to do it , feel free to contact me :





at first you need to make a div with an fixed position and then give it top:0px; and left:0px; (note:fixed not computable with all browsers so , if you want to make it working 100% you must implement some JavaScript code)


then make the width:100%;


then you need a small PNG image to make it transparent or you have to use a small technique to make it with css but you must have to make it computable with all browser .





then you need an UN ,LI , A and make some hover and margin over them


%26lt;ul%26gt;


%26lt;li%26gt;%26lt;a href="#' %26gt;what ever%26lt;/a%26gt;%26lt;/li%26gt;


%26lt;li%26gt;%26lt;a href="#' %26gt;what ever%26lt;/a%26gt;%26lt;/li%26gt;


%26lt;li%26gt;%26lt;a href="#' %26gt;what ever%26lt;/a%26gt;%26lt;/li%26gt;


%26lt;/ul%26gt;





and don't forget to make IL tag display inline


display:inline;


to display them in a line with an order

No comments:

Post a Comment