I'm having some trouble fitting navigation tabs onto an <article> element, especially in Firefox and on different screen sizes. Does anyone have a solution that works across all browsers and maintains consistency when the screen is resized?
The desired outcome is as follows:
I want it to look exactly like that, but without using a fixed margin-top.
EDIT:
Code:
Navigation:
nav {
width: 100%;
height: 4%;
}
nav ul {
list-style-type: none;
}
nav li {
width: 100%;
background-color: #9A9489;
display: inline-block;
text-align: center;
width: 11%;
font: 1.4em/1.3em Bonveno, Open Sans, Sans-Serif;
float: right;
cursor: pointer;
margin-right: 0.5%;
border-top-left-radius: 0.3125em;
border-top-right-radius: 0.3125em;
transition: background-color 0.2s ease-in-out;
}
Article (without margin-top):
article {
width: 99.5%;
margin-left: auto;
margin-right: auto;
box-shadow: 0 0.3125em 0 #9A9489;
padding: 0 0 0.5% 1.5%;
}
HTML:
<nav>
<ul>
<a href="contact.php">
<li>Contact</li>
</a>
<a href="pictures.php">
<li>Pictures</li>
</a>
<a href="about.php">
<li class="selected">About</li>
</a>
<a link="black" href="index.php">
<li>Home</li>
</a>
</ul>
</nav>
<article>
<h1>Hello World</h1>
<p>Hello world</p>
</article>