Associate
Im looking to put a very basic navigation menu in a web project im doing. My plan is to essentially just have the words there and highlighted if selected...very basic.
However for some reason I cant get my menu to sit inside the header. While I was playing around earlier it was forcing the header height so there was a large whitespace, now it is simply sitting under the header and frankly I cant seem to explain why or fix it. It should be very basic though.
HTML
CSS - Appropriate part near bottom
However for some reason I cant get my menu to sit inside the header. While I was playing around earlier it was forcing the header height so there was a large whitespace, now it is simply sitting under the header and frankly I cant seem to explain why or fix it. It should be very basic though.
HTML
Code:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
<xsl:template match="/">
<html>
<head>
<title>Furious Gadget</title>
<script src="Scripts/jquery-1.5.js" type="text/javascript"></script>
<link href="Style/site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="banner">
<div id="title">
<img height="130px" src="Images/FuriousGadgets3.png" />
</div>
<div id="navi">
<ul id="list-nav">
<li>
<!--No home page as of yet, so just link it to Article page-->
<a href="Article.aspx">Home</a>
</li>
<li>
<a href="Article.aspx">Articles</a>
</li>
<li>
<a href="Authors.aspx">Authors</a>
</li>
<li>
<a href="rss.xml">RSS</a>
</li>
<li>
<a href="#">PDF</a>
</li>
</ul>
</div>
</div>
<div id="main">CSS - Appropriate part near bottom
Code:
/* Clearfix - start */
/* ClearFix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* Clearfix - end */
header, footer, aside, nav, article {
display: block;
}
#banner
{
height:150px;
width:100%;
/*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#AAAAAA', endColorstr='#222222');
background:-webkit-gradient(linear, left top, left bottom, from(#AAAAAA), to(#222222));
background:-moz-linear-gradient(top, #AAAAAA, #222222); */
background-image:url("../Images/headerGradient.png");
background-repeat:repeat-x;
border-bottom :solid 2px #FF0000;
-moz-box-shadow: 0 5px 5px #aaa;
-webkit-box-shadow: 0 5px 5px #aaa;
box-shadow: 0 5px 5px #aaa;
z-index:3;
}
#title
{ text-align:left;
width:1000px;
margin:0 auto;
height:100%;
font-family:Arial;
font-weight:bold;
font-size:40px;
color:#ddd;
padding-top:20px;
}
body
{
margin:0;
font-family:Verdana, Arial;
text-align:center;
}
.headerLink
{
text-decoration:none;
color:black;
}
a.headerLink:hover
{
color:white;
}
#main
{
text-align: left;
width:1000px;
margin:0 auto;
padding-top:12px;
}
h3
{
margin-top:0;
border-bottom:solid 1px #FFF;
}
p
{
color:#333;
text-align:justify;
}
article.post
{
font-size:14px;
border:solid 2px #AAA;
background-color:#ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
z-index:4;
padding:5px;
margin-bottom:5px;
min-height:150px;
}
.label
{
width:120px;
text-align:right;
float:left;
margin-right:3px;
}
.item
{
margin-bottom:3px;
}
h2
{
color:#222;
font-size:16px;
font-weight:bold;
border-top:2px dotted #aaa;
padding-top:3px;
padding-left:5px;
}
.addition
{
font-size:10px;
margin-bottom:10px;
}
.submit
{
display:block;
margin:0px auto;
width:80px;
height: 24px;
border:none;
padding-bottom:3px;
font-weight:bold;
color:#333;
background:url('../Images/buttonbg.png');
background-position:bottom right;
background-repeat:repeat-x;
overflow:hidden;
border:solid 1px #888;
}
.unfocus
{
border:1px solid #aaa;
}
.buttonfocus
{
-moz-box-shadow: 0 0 3px 1px #FFED93;
-webkit-box-shadow: 0 0 3px 1px #FFED93;
box-shadow: 0 0 3px 1px #FFED93;
}
.focus
{
border:1px solid #FFED93;
}
#articleimg
{
width:150px;
padding-bottom:5px;float:right;
}
#authortitle
{
font-size:xx-small;
}
/**** AUthors page ***/
.articles
{
display:none;
}
.articles ul
{
list-style:none;
}
.articles ul li a
{
color:black;
text-decoration:none;
}
.articles ul li a:hover
{
color:white;
}
.author
{
border-bottom:dotted 1px #888;
}
.author p span
{
color:Black;
font-size:18px;
}
.author p a
{
color:#888;
font-size:10px;
}
ul#list-nav {
list-style:none;
margin:0px;
padding:0;
}
ul#list-nav li {
display:inline;
font-size:12px;
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
background:#000000;
color:#eee;
text-align:center;
}
ul#list-nav li a:hover {
background:#a2b3a1;
color:#000
}
/********** EDIT PAGE ******/
.editThumbnail
{
width:160px;
height:120px;
margin-left:10px;
}
