Solved

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

Posted on 2011-09-07
4
835 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

Is Your Team Achieving Their Full Potential?

74% of employees feel they are not achieving their full potential. With Linux Academy, not only will you strengthen your team's core competencies but also their knowledge of of the newest IT topics.

With new material every week, we'll make sure that you stay ahead of the game.

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
This video teaches users how to migrate an existing Wordpress website to a new domain.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

689 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