Solved

[HTML5 - CSS3] Responsive navigation tabs resting at bottom of header element

Posted on 2011-09-07
4
828 Views
Last Modified: 2013-11-19
I am trying to build out a tab based navigation that rests at the bottom of my header element in my web site.  The problem is that I am building it to be a fluid responsive design much like http://joshuasortino.com/.  The problem I have is that my tabs are not resting at the bottom of the header and when I resize my browser it doesn't flow with the rest of the document.  Below is my pertinent code:

HTML:
<header class="pagetop">
	
    <a href="index-html5.php"><img src="../images/template/varasight-logo.png" title="VaraSight Surveillance, A Division Of Feeney Wireless, LLC." alt="VaraSight Surveillance, A Division Of Feeney Wireless, LLC." border="0" class="logo"></a>
    <nav>
    	<ul>
      	<li class="tab"><a href="/">HOME</a></li>
    		<li class="tab"><a href="/">Products</a></li>    
    		<li class="tab"><a href="/">Services</a></li> 
    		<li class="tab"><a href="/">Company</a></li>
    		<li class="tab"><a href="/">Contact</a></li>  
    		<li><a href="http://feeneywireless.com" target="_blank"><img src="../images/template/division-of-feeney-wireless.png" title="A Division Of Feeney Wireless" alt="A Division Of Feeney Wireless" border="0"></a></li> 
    </nav>
</header>

Open in new window


CSS:
header {
	width: 100%;
	margin: 0;
	padding: 0;
}

.pagetop {
	background: url(../images/template/header-background.png) repeat-x top left #233216;
	margin: 0;
	padding: 0 0 1%;
	height: 14.27%;
	display: block;
	width: 100%;
	position: absolute;
	top: 5%;
}
	
	 .pagetop .logo {
			left: 2.64%;
			width: 25%;
			max-width: 100%;
			margin: 2% 2.64%;
		}

nav {
	margin: 0;
	padding: 0;
	bottom:0;
	width:70%;
	float: right;
}

	nav ul {
		list-style: none;
		width:70%;
		float:right;
		right: 5%;
	}

	nav li {
		list-style: none;
		margin: 0 1%;
		padding: 0;
		float: left;
		right: 5%;
	}
	
	nav a {
		text-decoration: none;
	  color: #FFF;
	}
	
.tab {
	-webkit-border-top-right-radius: 1em;
	-webkit-border-top-left-radius: 1em;
	-moz-border-radius-topright: 1em;
	-moz-border-radius-topleft: 1em;
	border-top-left-radius:1em;
	border-top-right-radius: 1em;
	background: #404040; /* Old browsers */
	background: -moz-linear-gradient(top, #404040 0%, #797979 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#404040), color-stop(100%,#797979)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #404040 0%,#797979 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #404040 0%,#797979 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #404040 0%,#797979 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#797979',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #404040 0%,#797979 100%); /* W3C */
	display: block;
	padding: 0.5% 2%;
	color: #f1f1f1;
	font: 110%/normal 'Francois One', sans-serif;
	text-transform: uppercase;
	border-right: 2px solid #797979;
	border-left: 2px solid #797979;
	border-top: 2px solid #797979;
}

Open in new window


Thanks in advance for any help you can offer!
0
Comment
Question by:prileyosborne
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 16

Accepted Solution

by:
SSupreme earned 500 total points
ID: 36500522
It's more like conditional application of CSS rather than simple application of rules.
For example:
@media (min-width: 641px) and (max-width: 960px) {
#navigation #menu {
      width: 75%;
}

@media (max-width: 640px) {
#navigation #menu {
      width: 95%;
}

So you have to style page for each case browser resolution and later add conditions under which rules should be applied.
0
 

Author Closing Comment

by:prileyosborne
ID: 36503367
Thanks so much! That is perfect!  Would you recommend conditional styles rather than multiple CSS files for the different resolutions?  Thanks again!
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 36503768
It works the same, but if you use single file there are less request to server, which improve speed of website download.
0
 

Author Comment

by:prileyosborne
ID: 36504463
Cool, thanks again man!  That helps a ton!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question