Positioning buttons on a page problem

Question

0.00/5 (No votes)

See more:

Here is my navigation bar:
http://puu.sh/hB6pC/a9f36ee5ff.png[^]

As you can see all the buttons are on top and there is space between each button and they poke out at the top. If you look at the last button that says "0" it is poking out at the button and not the top:
http://puu.sh/hB6tM/fc0e21f5fa.png[^]

Any ideas? I have already tried changing the margin, padding and position of it and no luck.

Here is my code for the button:
HTML:

HTML

<div id="navBar">

    <a href="index.html" class="button1">Login/ Sign up</a>
    <a href="index.html" class="button1">Debating Categories</a>
    <a href="index.html" class="button1">Top Debates</a>
    <a href="index.html" class="button1">Archived Debates</a>
    <a href="index.html" class="button1">Start A New Debate!</a>
    <a href="index.html" class="button1">Debating Guidelines</a>
    <a href="index.html" class="button1" style="float: right;">0</a>

</div>

CSS:

CSS

.button1 {
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: #000000;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.button1:hover {
  background: #ff0000;
  text-decoration: none;
}

Here is my CSS for the nav bar:

CSS

#navBar
{
	background-color: black;
	height: 35px;
	margin: auto;
	color: white;
	margin-left: 200px;
	margin-right: 200px;
	margin-bottom: 20px;
	margin-top: 50px;
	text-align: left;
}

#navBar ul li
{
	display: inline;
}

Posted 4-May-15 4:05am

Dark Envious

Updated 4-May-15 4:17am

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 4-May-15 10:25am

I would advise: keep it simple. It all looks pretty bad, heavy.
—SA

Dark Envious 4-May-15 13:38pm

How about now: http://puu.sh/hBiPX/dc2ca21ad7.png

Sergey Alexandrovich Kryukov 4-May-15 13:52pm

Overcomplicated, with glitches and visual garbage. The problem is really simple.
—SA

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Accepted Answer · 2015-05-04T04:37:00

Solution 1

Many disagree with this methodology, but I was forced into it and now have adapted to it very nicely: use position:absolute and put the items where you want.

You can put items inside absolutely located <div> elements and then the outer <<div>> relative to the page and inner elements with respect to the <div> container.

One reason this became important is that working on multiple version of multiple browser on both local and virtual instances of the browser I got erratic results. Especially with %, but even with margins and the like declared in pixels.

You can, should this suit your needs, create a style-sheet with column locations defined (in pixels) and position:absolute as part of their definition.

There are other routes - but this is easy.

Posted 4-May-15 4:37am

W∴ Balboos, GHB

Comments

Dark Envious 4-May-15 10:41am

So let me get this right, you mean have the buttons wrapped with a div which is set to position: absolute; and then have the inner div set to position: relative;?

W∴ Balboos, GHB 4-May-15 11:17am

Inner elements can be set to absolute or relative, as it suits your needs. A quick experiment in your page should answer that (try absolute, first).

I actually use this for 'higher purposes': pages created totally from data in a database with no information beyond their order on the page and type of element (input, select, etc.) that will be rendered. They all line up as expected by the users.

You don't need the outer div wrappers at all - it's just another level of control. One thing: you may wish to declare the location of the body in the tab/frame/iframe as absolute positioning is always relative to such things.

Sergey Alexandrovich Kryukov 4-May-15 13:55pm

This could be considered as a viable approach, as soon as you take into account actual inner page size correctly, so some smaller size won't screw up things. Apparently, this is not exactly the inquirer's problem. Overall, I think default positioning is the best. Absolute is good when you need to overlap the element on top of z-order. This is unavoidable in some designs, and only good for temporary elements, such as small help content, temporary menu (the one which disappears upon use). I'm not sure this is what the inquirer needs.
—SA

W∴ Balboos, GHB 4-May-15 14:04pm

(This is not a disagreement with your comment)

My coding philosophy "inveniam viam aut faciam"*: If I cannot find a way I'll make one. If positioning is his problem he can (I hope) force a solution with absolute positioning. More elegant solutions can wait time and experience. That being said, I still don't accept tying things up with spit and tape - too expensive down the line.

*Hannibal

Sergey Alexandrovich Kryukov 4-May-15 14:09pm

Respected, but this is a problem is hardly a "cannot find a way" problem. There are clear ways of creation of nice menu. The choice between absolute and default positioning rather depends on requirements, first of all, is the menu supposed to be overlapped with other elements on page or not.
—SA