rearrange the header and get rid of wrapper

views/elements/authnav.html.php

@@ -1,39 +1,23 @@
 <nav>
 <ul id="nav">
 	<li class="current"><a href="/users/feed">Home</a></li>
-	<li><a href="about.html">Anime</a>
-    <ul>
-      <li><a href="about.html">Top Anime</a>
-      <li><a href="#">Recomendations</a></li>
-      <li><a href="/animelist/view/<?= $user['username'] ?>">My Animelist</a></li>
-    </ul>
-  </li>
-  <li><a href="#">Manga</a>
-    <ul>
-      <li><a href="#">Top Manga</a></li>
-      <li><a href="#">Recomendations</a></li>
-    </ul>
-    </li>
-   <li><a href="#">Friends</a>
-    <ul>
-      <li><a href="">Add Friend</a></li>
-    </ul>
-  </li>  
-  <li><a href="/users/settings"> Settings </a></li>
-  <li><a href="/logout">Logout</a></li>
-      <li>
-        <?= $this->form->create(null, array('url' => '/search/index/anime', 'class' => 'search', 'style' => 'height:20px', 'method' => 'get')); ?>
-        <?= $this->form->text('search', array('value' => 'Search...', 'onFocus' => 'clearDefault(this)', 'class' => 'sidebar-search', 'style' => 'width:200px')); ?>
-        <button class="search" type="submit">Go</button>
-        <br class="cl"/>
-        <?= $this->form->end(); ?>
-      </li>
+	<li><a href="about.html">Anime</a></li>
+	<li><a href="/animelist/view/<?= $user['username'] ?>">My List</a></li>
+	<li><a href="#">Manga</a></li>
+	<li><a href="#">Friends</a></li>
+	<li><a href="/users/settings">Settings</a></li>
+	<li><a href="/logout">Logout</a></li>
 </ul>
-<br class="cl" />
 </nav>
+
+<?= $this->form->create(null, array('url' => '/search/index/anime', 'class' => 'search', 'method' => 'get')); ?>
+<?= $this->form->text('search', array('value' => 'Search...', 'onFocus' => 'clearDefault(this)', 'style' => 'width: 200px')); ?>
+<button class="search" type="submit">Go</button>
+<?= $this->form->end(); ?>
+
 <div id="friend" style="display:none">
-  <?= $this->form->create(); ?>
-   <?= $this->form->field('username', array('type' => 'textbox')); ?>
-   <?= $this->form->submit('Add'); ?>
-  <?= $this->form->end(); ?>
-</div>  
+	<?= $this->form->create(); ?>
+	<?= $this->form->field('username', array('type' => 'textbox')); ?>
+	<?= $this->form->submit('Add'); ?>
+	<?= $this->form->end(); ?>
+</div>

views/elements/normalnav.html.php

@@ -1,50 +1,24 @@
-<script type="text/javascript">
-</script>
-    <nav>
+<nav>
 <ul id="nav">
 	<li class="current"><a href="/users/feed">Home</a></li>
-	<li><a href="about.html">Anime</a>
-    <ul>
-      <li><a href="about.html">Top Anime</a></li>
-      <li><a href="#">recomendations</a>
-    </ul>
-    <li><a href="about.html">Manga</a>
-    <ul>
-      <li><a href="about.html">Top Manga</a></li>
-      <li><a href="#">recomendations</a>
-    </ul>
-    </li>    
-    </li>
+	<li><a href="about.html">Anime</a></li>
+    <li><a href="about.html">Manga</a></li>
 	<li><a href="portfolio.html">Stuff</a>
-    
-    <ul>
-    <li><a href="portfolio.html">3 Column Portfolio</a></li>
-    <li><a href="portfolio-list.html">Portfolio List</a></li>
-    </ul>
-    
-    </li>	
-	<li><a href="services.html">Foo</a>
-    <ul>
-    <li><a href="pricing.html">Pricing Table</a></li>
-    </ul>
-    </li>
 	<li><a href="contact.html">Contact Us</a></li>
-  <li><a href="#login" rel="prettyPhoto">Login</a></li>
-      <li>
-        <?= $this->form->create(null, array('url' => '/search/index/anime', 'class' => 'search', 'style' => 'height:20px', 'method' => 'get')); ?>
-        <?= $this->form->text('search', array('value' => 'Search...', 'onFocus' => 'clearDefault(this)', 'class' => 'sidebar-search', 'style' => 'width:200px')); ?>
-        <button class="search" type="submit">Go</button>
-        <br class="cl"/>
-        <?= $this->form->end(); ?>
-      </li>
+	<li><a href="#login" rel="prettyPhoto">Login</a></li>
 </ul>
-<br class="cl" />
-    </nav>
+</nav>
+
+<?= $this->form->create(null, array('url' => '/search/index/anime', 'class' => 'search', 'method' => 'get')); ?>
+<?= $this->form->text('search', array('value' => 'Search...', 'onFocus' => 'clearDefault(this)', 'style' => 'width: 200px')); ?>
+<button class="search" type="submit">Go</button>
+<?= $this->form->end(); ?>
+
 <div id="login" style="display: none;">
-<h2> Login </h2>
-  <?= $this->form->create(null, array('url' => '/login', 'id' => 'login')); ?>
-    <?= $this->form->field('username', array('type' => 'textbox')); ?>
-    <?= $this->form->field('password', array('type' => 'password')); ?>
-    <?= $this->form->submit('Login'); ?>
-  <?= $this->form->end(); ?>
-</div>
+<h2>Login</h2>
+	<?= $this->form->create(null, array('url' => '/login', 'id' => 'login')); ?>
+	<?= $this->form->field('username', array('type' => 'textbox')); ?>
+	<?= $this->form->field('password', array('type' => 'password')); ?>
+	<?= $this->form->submit('Login'); ?>
+	<?= $this->form->end(); ?>
+</div>

views/layouts/default.html.php

@@ -1,108 +1,81 @@
 <?php
-
-use \lithium\security\Auth; 
-/**
- * Lithium: the most rad php framework
- *
- * @copyright     Copyright 2010, Union of RAD (http://union-of-rad.org)
- * @license       http://opensource.org/licenses/bsd-license.php The BSD License
- */
+use \lithium\security\Auth;
 ?>
-<!doctype html>
+<!DOCTYPE html>
 <html>
 <head>
-	<?php echo $this->html->charset();?>
-	<title>OtakuHub > <?php echo $this->title(); ?></title>
-	<?php echo $this->html->style(array('style', 'base', 'grid')); ?>
-	<?php echo $this->html->style(array('themes/light', 'themes/green')); ?>
-  <?php echo $this->html->style(array('prettyPhoto')); ?>
- 
-  <script src="/js/jquery-1.6.1.min.js" type="text/javascript"></script>  
-  <?php echo $this->html->style(array('jquery.tagsinput')); ?>
-  <?= $this->html->script("/js/jquery.tagsinput.min.js"); ?>
+	<?= $this->html->charset() ?>
+	<title>OtakuHub > <?= $this->title()  ?></title>
+	<?= $this->html->style(array('style', 'base', 'grid')) ?>
+	<?= $this->html->style(array('themes/light', 'themes/green')) ?>
+	<?= $this->html->style(array('prettyPhoto')) ?>
 
+	<script src="/js/jquery-1.6.1.min.js" type="text/javascript"></script>
+	<?= $this->html->style(array('jquery.tagsinput')) ?>
+	<?= $this->html->script("/js/jquery.tagsinput.min.js") ?>
 
 	<script type="text/javascript" >
-		function clearDefault(el) {
-  				if (el.defaultValue==el.value) el.value = ""
-			}
-		function resetValue(el) {
-			el.value = "Search..."
-		}
-		</script>
-	<?php echo $this->html->link('Icon', null, array('type' => 'icon')); ?>
+	function clearDefault(el) {
+		if (el.defaultValue == el.value)
+			el.value = ""
+	}
+	function resetValue(el) {
+		el.value = "Search..."
+	}
+	</script>
+	<?= $this->html->link('Icon', null, array('type' => 'icon')) ?>
 </head>
-<!-- start header -->
-<div id="wrapper"> 
-  <header> 
-    <!-- logo -->
-    <h1 id="logo"><a href="/">Kameleon</a></h1>
-    <!-- nav -->
-   
-  
-<?php 
-    //Get the current user from the session
-    $user = Auth::check('default'); 
-    
-    //If their is data (the user has logged in)
-    if ($user) {
-        echo $this->_render('element', 'authnav', compact('user')); 
-    }
-    else {
-       echo  $this->_render('element', 'normalnav', compact('user'));
-    } 
- ?>
-
-<br class="cl" />  
+<header>
+	<?php
+	$user = Auth::check('default');
+	if ($user)
+	{
+		echo $this->_render('element', 'authnav', compact('user'));
+	}
+	else
+	{
+		echo $this->_render('element', 'normalnav', compact('user'));
+	}
+	?>
+	<br class="cl" />
 </header>
-  <!-- end header --> 
-  <div id="page">
-  	<?php echo $this->content(); ?>
-  	</div>
-   <!-- footer Start -->
-  <footer>
-    <ul class="footer-nav">
-      <li><a href="index.html">Home</a> |</li>
-      <li><a href="about.html">About</a> |</li>
-      <li><a href="portfolio.html">Terms of Use</a> |</li>
-            <li><a href="portfolio.html">Terms of Use</a> |</li>
-      <li><a href="contact.html">Contact</a></li>
-    </ul>
-    <p>Copyright ©2011, <a href="http://www.melenion.org">Melenion Dev Studios</a> Designed by: <a href="http://www.mudodesigns.com">Chris Mooney</a></p>
-    <br class="cl" />
-  </footer>
-  <!-- footer end --> 
-
-  <!-- Javascript at the bottom for fast page loading -->
-  <script src="/js/jquery.tools.min.js" type="text/javascript"></script> 
-  <script src="/js/jquery.lightbox-0.5.min.js" type="text/javascript"></script> 
-  <script src="/js/jquery.form.js" type="text/javascript"></script> 
-  <script src="/js/cufon-yui.js" type="text/javascript"></script> 
-  <script src="/js/Aller.font.js" type="text/javascript"></script> 
-  <script src="/js/jquery.tipsy.js" type="text/javascript"></script> 
-  <script src="/js/functions.js" type="text/javascript"></script> 
-  <?= $this->html->script("/js/jquery.anchor.js"); ?>
-  <?= $this->html->script("/js/jquery.prettyPhoto.js"); ?>
+<div id="page">
+  	<?= $this->content() ?>
+</div>
+<footer>
+	<p>Copyright ©2011, <a href="http://www.melenion.org">Melenion Dev Studios</a></p>
+	<br class="cl" />
+</footer>
 
+<script src="/js/jquery.tools.min.js" type="text/javascript"></script>
+<script src="/js/jquery.lightbox-0.5.min.js" type="text/javascript"></script>
+<script src="/js/jquery.form.js" type="text/javascript"></script>
+<script src="/js/cufon-yui.js" type="text/javascript"></script>
+<script src="/js/Aller.font.js" type="text/javascript"></script>
+<script src="/js/jquery.tipsy.js" type="text/javascript"></script>
+<script src="/js/functions.js" type="text/javascript"></script>
+<?= $this->html->script("/js/jquery.anchor.js"); ?>
+<?= $this->html->script("/js/jquery.prettyPhoto.js"); ?>
 
 <script type="text/javascript" charset="utf-8">
-  $(document).ready(function(){
-    $("a[rel^='prettyPhoto']").prettyPhoto();
-  });
+$(document).ready(function(){
+	$("a[rel^='prettyPhoto']").prettyPhoto();
+});
 </script>
 
-  <?php echo $this->scripts(); ?>
-  <script type="text/javascript">
-     $(document).ready(function(){
-      setTimeout(function(){
-  $(".flash-message").fadeOut("slow", function () {
-  $(".flash-message").remove();
-      }); }, 2000);
- });
-  </script>
+<?= $this->scripts(); ?>
+<script type="text/javascript">
+$(document).ready(function() {
+	setTimeout(function() {
+		$(".flash-message").fadeOut("slow", function () {
+			$(".flash-message").remove();
+		});
+	}, 2000);
+});
+</script>
 
-  <!--[if lt IE 7 ]>
-    <script src="js/dd_belatedpng.js"></script>
-  <![endif]--> 
+<!--[if lt IE 7 ]>
+<script src="js/dd_belatedpng.js"></script>
+<![endif]-->
 </body>
 </html>

webroot/css/base.css

@@ -1,33 +1,12 @@
-/* 
-Kameleon Template
-Author: Chris Mooney (http://themeforest.net/user/ChrisMooney)
-*/
-
-/*////   - Body Styles -   ////*/
-#wrapper {
-	width:980px;
-	margin:0 auto;
-}
 a:hover {
 	text-decoration:none;
 }
-/*////   - Headings -   ////*/
 h1 {
 	font-weight:bold;
 	font-size:220%;
 	float:left;
 	margin-top:5px;
 }
-h1#logo {
-	display:inline;
-	height:38px;
-	text-indent:-4000px;
-	width:231px;
-}
-h1#logo a {
-	display:block;
-	height:38px;
-}
 h2 {
 	font-size:200%;
 	margin-bottom:10px;
@@ -193,21 +172,21 @@ img.fr {
 .txt-lighter {
 	color:#666;
 }
-/*////   - Nav -   ////*/
 
+nav {
+	float: left;
+}
 #nav {
-	float:right;
-	line-height:100%;
-	margin:0;
-	padding:10px;
+	line-height: 100%;
+	margin: 0 auto;
+	padding: 10px;
+	width: 100%;
 }
 #nav li {
-	float: left;
-	position: relative;
+	display: inline-block;
 	list-style: none;
-	z-index:100;
-	margin-left:15px;
-	padding-bottom:5px;
+	z-index: 100;
+	margin-left: 15px;
 }
 /* main level link */
 #nav a {
@@ -234,62 +213,6 @@ img.fr {
 	padding:7px 11px 8px;
 	text-shadow:0 1px 0 #FFFFFF;
 }
-/* sub levels link hover */
-#nav ul li:hover a, #nav li:hover li a {
-	background: none;
-	border: none;
-	color: #666;
-	-webkit-box-shadow: none;
-	-moz-box-shadow: none;
-}
-#nav ul a:hover {
-	background: #f2f2f2 !important;
-	color: #1A1A1A !important;
-	padding:10px;
-	-webkit-border-radius: 0;
-	-moz-border-radius: 0;
-}
-/* dropdown */
-#nav li:hover > ul {
-	display: block;
-}
-/* level 2 list */
-#nav ul {
-	display: none;
-	margin: 0;
-	padding: 0;
-	width: 185px;
-	position: absolute;
-	top: 35px;
-	left: 0;
-	background: #fafafa;
-	border: solid 1px #d9d9d9;
-	z-index:100;
-	font-size:100%;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	border-radius: 3px;
-}
-#nav ul li {
-	float: none;
-	margin: 0;
-	padding: 0;
-}
-#nav ul a {
-	font-size:100%;
-	font-weight:normal;
-	padding:10px !important;
-}
-#nav ul a:hover {
-	font-size:100%;
-	font-weight:normal;
-	padding:10px;
-}
-/* level 3+ list */
-#nav ul ul {
-	left: 185px;
-	top: 1px;
-}
 /* rounded corners of first and last link */
 #nav ul li:first-child > a {
 	-webkit-border-top-left-radius: 3px;
@@ -303,56 +226,28 @@ img.fr {
 	-webkit-border-bottom-right-radius: 3px;
 	-moz-border-radius-bottomright: 3px;
 }
-/* clearfix */
-#nav:after {
-	content: ".";
-	display: block;
-	clear: both;
-	visibility: hidden;
-	line-height: 0;
-	height: 0;
-}
-#nav {
-	display: inline-block;
-}
-html[xmlns] #nav {
-	display: block;
-}
-* html #nav {
-	height: 1%;
-}
-/*////   - Page -   ////*/
+
 header {
-	margin:25px 0 20px;
+	width: 980px;
+	margin: 25px auto 20px;
 }
 footer {
-	padding:10px 0;
-}
-.footer-nav {
-	float:right;
-}
-.footer-nav li {
-	display:inline;
-}
-.footer-nav a, .footer-nav a:visited {
-	text-decoration:none;
-	margin:0 10px;
-}
-footer li a:hover {
-	color:#666666;
-	text-decoration:none;
+	padding: 10px 0;
+	width: 980px;
+	margin: 25px auto 20px;
 }
 #page {
 	background: #fff;
-	color:#191919;
-	border:1px solid #d9d9d9;
-	padding:40px;
-	position:relative;
-	width:898px;
-	z-index:1;
-	border-radius:3px;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;
+	color: #191919;
+	border: 1px solid #d9d9d9;
+	padding: 40px;
+	position: relative;
+	width: 898px;
+	margin: 0 auto;
+	z-index: 1;
+	border-radius: 3px;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
 }
 #page-content.two-col {
 	float:left;
@@ -504,27 +399,7 @@ blockquote cite {
 .portfolio-list li p {
 	margin-bottom:15px;
 }
-/*//   Sidebar   //*/
-.social-list {
-	margin:0 0 20px;
-	list-style:none;
-}
-.social-list li {
-	display:inline;
-	margin:0 15px 10px 0;
-	width:100%;
-}
-#twitter_update_list {
-	margin:0 0 40px;
-	list-style:none;
-}
-#twitter_update_list li {
-	margin-bottom:10px;
-	padding-bottom:10px;
-	line-height:1.6;
-	border-bottom:1px solid #d9d9d9;
-}
-/*////   - General Styling -   ////*/
+
 p {
 	line-height:1.6;
 	margin-bottom:20px;
@@ -707,105 +582,21 @@ a.down:active {
 a.disabled {
 	visibility:hidden !important;
 }
-/* Sidebar Elements */
-.sidebar-nav {
-	margin:0 0 40px;
-	list-style:none;
-}
-.sidebar-nav li {
-	border:1px solid #d9d9d9;
-	border-top:0;
-	background:#f2f2f2;
-	border-radius:3px 0 0 3px;
-	-moz-border-radius:3px 0 0 3px;
-	-webkit-border-radius:3px 0 0 3px;
-}
-.sidebar-nav li.first {
-	border-top:1px solid #d9d9d9;
-}
-.sidebar-nav li a {
-	background:url("../img/arrow.png") no-repeat 10px 50%;
-	color:#1A1A1A;
-	display:block;
-	width:100%;
-	padding:10px 27px;
-	text-decoration:none;
-}
-.sidebar-nav li:hover {
-	background:#bebebe;
-	border-color:#969696;
-}
-.sidebar-nav li.current {
-	left:-10px;
-	position:relative;
-	width:268px;
-	background:url("../img/grad-grey.gif") repeat-x scroll center top #166890;
-	border:1px solid #11506F;
-}
-.sidebar-nav li a:hover, .sidebar-nav li.current a {
-	color:#fff;
-	background:url("../img/arrow-active.png") no-repeat 10px 50%;
-}
-.sidebar-search {
-	margin:0 0 40px;
-	width:100%;
-}
-.sidebar-latestblog {
-	margin:-10px 0 40px;
-	list-style:none;
-}
-.sidebar-latestblog li {
-	border-bottom:1px solid #d9d9d9;
-	padding:10px 0;
-	width:100%;
-}
-.sidebar-latestblog img {
-	float:left;
-}
-.sidebar-latestblog a {
-	display:block;
-	margin-bottom:10px;
-	margin-left:75px;
-}
-.sidebar-latestblog time {
-	display:block;
-	font-style:italic;
-	font-size:93%;
-	color:#666666;
-	margin-left:75px;
-}
-.sidebar-latestblog p {
-	margin-bottom:10px;
-	margin-left:75px;
-}
-.sidebar-sponsors {
-	margin:0;
-	list-style:none;
-}
-.sidebar-sponsors li {
-	margin:0 0 10px;
-}
-#search {
-	padding:10px 5px;
-	background:#fff url(../img/bg-input.gif) repeat-x top;
-	border:1px solid #D9D9D9;
-	float:left;
-	width:168px;
-	margin-right:5px;
-	border-radius:3px;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;
+
+.search {
+	float: right;
+	margin-top: 5px;
 }
 button.search {
 	background:#fff url(../img/grad-grey.gif) repeat-x top;
 	border:1px solid #d9d9d9;
 	color:#404040;
-	float:left;
 	height:38px;
 	line-height:12px;
 	font-size:108%;
 	font-weight:bold;
 	padding:8px 8px 10px;
+	margin: 0 0 0 5px;
 	text-shadow:0 1px 0 #FFFFFF;
 	border-radius:5px;
 	-moz-border-radius:5px;
@@ -874,9 +665,6 @@ button.search {
 	border-bottom:0 none;
 }
 /*////   - Forms -   ////*/
-form {
-	margin-bottom:20px;
-}
 body.ie7 form, body.ie8 {
 	margin-bottom:40px;
 }