Solved

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

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This article discusses how to create an extensible mechanism for linked drop downs.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to dynamically set the form action using jQuery.

747 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now