Header

Question

I am trying to accomplish the image below in the header with buttons and vertical lines between each button. Whats the HTML code for this.

Iftikar Hussain · Answer

I have just shown you how to do it. You can use DIV over TABLE. Here it is Menu 1 Menu 2 Menu 3 Here is the main content Regards, Iftikar

Iftikar Hussain · Answer

Hi, Please refer the below link http://webdesignerwall.com/tutorials/cross-browser-css-gradient Regards, Iftikar

David Smith · Answer

I have a question. I see values all the time on the internet in HTML code in examples below in red, like -moz -linear-gradient, -webkit-gradient, can you point me to a website so that I can learn about the values below to the background image. Will all these values work for the common browsers, IE, firefox, chrome etc...... body header.headerBackground { background-color: #414246; background-image: -moz-linear-gradient(top,#54565a,#242427) ; background-image: -webkit-gradient(linear,0 0,0 100%,from(#54565a),to(#242427)); background-image: -webkit-linear-gradient(top,#54565a,#242427); background-image: -o-linear-gradient(top,#54565a,#242427); background-image: linear-gradient(to bottom,#54565a,#242427); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff54565a',endColorstr='#ff242427',GradientType=0); box-shadow: 0 1px 1px #4b4b4b; height: 100%; }

David Smith · Answer

I coded the very minimum. Review below. body { color: #000000; font: 12px/1.5em Arial,Helvetica,sans-serif; margin: 0; padding: 0; width: 100%; } body header.headerBackground { background-color: #414246; background-image: -moz-linear-gradient(top,#54565a,#242427); background-image: -webkit-gradient(linear,0 0,0 100%,from(#54565a),to(#242427)); background-image: -webkit-linear-gradient(top,#54565a,#242427); background-image: -o-linear-gradient(top,#54565a,#242427); background-image: linear-gradient(to bottom,#54565a,#242427); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff54565a',endColorstr='#ff242427',GradientType=0); box-shadow: 0 1px 1px #4b4b4b; height: 100%; } .navbar { float: left; list-style: none outside none; margin: 0; padding: 0; position: relative; width: 100%; } .navbar li { float: left; } .navbar li { position: relative; text-align: left; } .navbar a { color: #FFFFFF; float: left; font-weight: bold; line-height: 28px; height: 28px; padding: 0 14px; text-decoration: none; cursor: pointer; } .navbar a:hover { background-color: #00224C; text-decoration: none; } .navbar a img { padding-top: 2px; } Menu 1 Menu 2 Menu 3

David Smith · Answer

Can you explain the form elements. What's the purpose of the form element and also the value runat ="server". I'm also getting ready to test out

David Smith · Answer

Is there another way to do this without tables. Tables are bad practicing habits. How come you don't name your divs?

Iftikar Hussain · Answer

Hi, Try this Test body { color: #000000; font: 12px/1.5em Arial,Helvetica,sans-serif; margin: 0; padding: 0; width: 100%; } .pagewrapper { width: 100%; margin: 0; padding: 0; position:fixed; } .navbar { float: left; list-style: none outside none; margin: 0; padding: 0; position: relative; width: 100%; } .navbar li { float: left; } .navbar li { position: relative; text-align: left; } .navbar li a { border-right: 1px solid #8FB8E2; } .navbar a { color: #FFFFFF; float: left; font-weight: bold; line-height: 28px; height: 28px; padding: 0 14px; text-decoration: none; cursor: pointer; } .navbar a:hover { background-color: #00224C; color: #FFFFFF; text-decoration: none; } .navbar a img { padding-top: 5px; } Menu 1 Menu 2 Menu 3 Here is the main content Regards, Iftikar

David Smith · Answer

Sorry about that. I just attach the image. I am trying to fixed my header to be that way from the left side to the right side.

Sanjeeb Lenka · Answer

please provide the sample

Header

Answers (9)