Solved

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

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

Industry Leaders: 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

Suggested Solutions

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
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 …
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

738 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