• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 274
  • Last Modified:

How to place 5 buttons inside HEADER?

I need to create 960px wide header (140px height).
I want to place the header in MASTER page.

After using HEADER on the top, I want to know how to place simple 5 rectangle buttons with very little space in between.

What is the best way to achieve this?


CheapFare.png
0
Ashok
Asked:
Ashok
  • 3
1 Solution
 
COBOLdinosaurCommented:
You don't give much detail on what you want, so here is the basic minimum code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>test page</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />

<style type="text/css">
body {width:1000px;margin:auto;}
#Header             {
                        margin:40px auto 0 auto;
						text-align:center; 
						width:90%;
						}			
</style>
</head>
<body>
<div id="Header">
<button>HOME</button>
<button>DISCUSSION</button>
<button>ARTICLES</button>
<button>TOOLS</button>
<button>NEWS</button>
</div>
</body>
</body>

Open in new window




Cd&
0
 
COBOLdinosaurCommented:
Ooops the header style is wrong.  It should be:


#Header             {
                        margin:40px auto 0 auto;
                  text-align:center;
                  width:945px;
                        height:140px;
                                    }      



Cd&      
0
 
AshokAuthor Commented:
I tried this but not what I am looking for.

I need buttons to be bottom (right) aligned in respect to the header.

0
 
COBOLdinosaurCommented:
Add an addition wrapper around the buttons with styling of float:right a width equal to the total width of the button and enough padding-top to move the to the bottom.

It would be easier to get thing done if you gave the whole requirement at once instead adding after code is posted.


Cd&
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now