I am creating a master page for a website and attempting to use a CSS3 dropdown menu in a .NET Web App. The trouble I am having is that I cannot get the nav element to display a background color. I have implemented this several times before with no issues, but for some reason it will not work in this project.
The markup:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MirandasWebsite.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<link href="Styles/Mir3.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type='text/javascript'></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<title></title>
</head>
<body runat="server">
<form id="form1" runat="server" method="post">
<div class="wrap">
<nav>
<ul class="menu">
<div id="HomePage" class="zoom" runat="server"><li class="menuitem">Home</li></div>
<li class="menuitem"><a id="aMedia" href="#" runat="server">Media</a>
<ul>
<div id="Photos" class="zoom" runat="server"><li class="menuitem">Photos</li></div>
<asp:HiddenField ID="hfPhotos" runat="server" Value="#" />
<div id="Videos" class="zoom" runat="server"><li class="menuitem">Videos</li></div>
<asp:HiddenField ID="hfVideos" runat="server" Value="#" />
<div id="Audio" class="zoom" runat="server"><li class="menuitem">Audio</li></div>
<asp:HiddenField ID="hfAudio" runat="server" Value="#" />
</ul>
</li>
<li class="menuitem"><a id="a1" href="#" runat="server">About Me</a>
<ul>
<div id="Biography" class="zoom" runat="server"><li class="menuitem">Biography</li></div>
<asp:HiddenField ID="hfBiography" runat="server" Value="#" />
<div id="Resume" class="zoom" runat="server"><li class="menuitem">Resume</li></div>
<asp:HiddenField ID="hfResume" runat="server" Value="#" />
</ul>
</li>
<div id="ContactMe" class="zoom" runat="server"><li class="menuitem"><a id="a2" href="#" runat="server">Contact Me</a></li></div>
</ul>
<div class="clearfix"></div>
</nav>
</div>
<div class="Contents">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
The CSS:
/*------------Main Styles------------*/
html
{
height: 100%;
width: 100%;
}
body
{
position: relative;
min-height: 100%;
min-width: 100%;
height: 100%;
width: 100%;
background: -webkit-radial-gradient(center, circle farthest-corner, #680000 0%, Black 100%); /* for Chrome and Safari*/
background: -moz-radial-gradient(center, circle farthest-corner, #680000 0%, Black 95%); /* for Firefoex */
background: -ms-radial-gradient(center, circle farthest-corner, #680000 0%, Black 95%); /* For IE10 */
background: -o-linear-gradient(top, #680000, Black); /* For Opera */
}
ul
{
list-style: none;
}
/*------------Drop Down Menu------------*/
.wrap
{
max-width: 100%;
margin: 4em auto;
}
nav
{
background: -webkit-gradient(linear, center top, center bottom, from(#cccccc), to(#999999));
background: -moz-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%);
background: -ms-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%); /* For IE10 */
background: -o-linear-gradient(top, #cccccc, #999999); /* For Opera */
position: relative;
text-align: center;
}
.menu
{
text-align: center;
margin: auto%;
background-color: Silver;
}
.menu li
{
float: left;
position: relative;
padding: 0% 1%;
}
.menu li a
{
color: #cccccc;
display: block;
font-size: 110%;
line-height: 100%;
padding: 0% 0%;
margin: 0% 0%;
vertical-align: middle;
text-decoration: none;
}
.menu li a:hover
{
background: -webkit-gradient(linear, center top, center bottom, from(#cccccc), to(#999999));
background: -moz-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%);
background: -ms-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%); /* For IE10 */
background: -o-linear-gradient(top, #cccccc, #999999); /* For Opera */
color: #222;
}
/* Dropdown styles */
.menu ul
{
position: absolute;
list-style: none;
opacity: 0;
-webkit-transition: opacity 1.5s ease;/*For Chrome and Safari */
-moz-transition: opacity 1.5s ease;/* For Firefox */
-o-transition: opacity 1.5s ease;/*For Opera */
min-width: 75%;
text-align: left;
}
.menu ul li
{
float: none;
}
.menu ul a
{
white-space: nowrap;
}
/* Displays the dropdown on hover and moves back into position */
.menu li:hover ul
{
background: -webkit-gradient(linear, center top, center bottom, from(#999999), to(#cccccc));
background: -moz-radial-gradient(center, circle farthest-corner, #999999 0%, #cccccc 95%);
background: -o-linear-gradient(top, #999999, #cccccc); /* For Opera */
background: -ms-radial-gradient(center, circle farthest-corner, #999999 0%, #cccccc 95%); /* For IE10 */
left: 5%;
opacity: .8;
text-align: center;
margin: auto;
min-width: 100%;
min-height: 100%;
}
/* Persistant Hover State */
.menu li:hover a
{
background: -webkit-gradient(linear, center top, center bottom, from(#999999), to(#cccccc));/* for Chrome and Safari */
background: -moz-radial-gradient(center, circle farthest-corner, #999999 0%, #cccccc 95%);/* For Firefox */
background: -ms-radial-gradient(center, circle farthest-corner, #999999 0%, #cccccc 95%); /* For IE10 */
background: -o-linear-gradient(top, #999999, ##cccccc); /* For Opera */
color: Black;
}
.menu li:hover ul a
{
background: none;
border-radius: 0%;
box-shadow: none;
}
.menu li:hover ul li a:hover
{
color: #680000;
}
Thanks for helping.
your nav cant compute any width because all elements inside it doesnt have a width, thats why it cant show any background
just give the height property to your nav element :-
CSS
nav
{
background: -webkit-gradient(linear, center top, center bottom, from(#cccccc), to(#999999));
background: -moz-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%);
background: -ms-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%); /* For IE10 */
background: -o-linear-gradient(top, #cccccc, #999999); /* For Opera */
position: relative;
text-align: center;
height:30px;
}
DEMO
Related
Hello I was making some buttons for a client and he needs IE8 support. The issue I'm facing is that when I click on the button (a tag) it works and the button shows as pushed / active but when I click on the child element (span) it doesn't.
Is this an IE8 issue or am I missing something? and is there any way around this without javascript?
Here is a jsfiddle and the source
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
html,
body {
padding: 100px;
margin: 0;
height: 100%;
font-family: arial;
}
div {
min-height: 80px;
}
/* BUTTONS */
.rebrand-btn {
display: table;
table-layout: fixed;
outline: none;
text-decoration: none;
padding: 17px 38px;
border-bottom: 2px solid #497b0d;
-mox-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #509e2f;
/* Old browsers */
background: -moz-linear-gradient(left, #97d700 1%, #509e2f 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%, #97d700), color-stop(100%, #509e2f));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #97d700 1%, #509e2f 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #97d700 1%, #509e2f 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #97d700 1%, #509e2f 100%);
/* IE10+ */
background: linear-gradient(to right, #97d700 1%, #509e2f 100%);
/* W3C */
filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#97d700', endColorstr='#509e2f', GradientType=1)";
/* IE6-9 */
/*
-webkit-transition: border 100ms linear 0s;
-moz-transition: border 100ms linear 0s;
-o-transition: border 100ms linear 0s;
transition: border 100ms linear 0s;
*/
/* transitions */
}
.rebrand-btn,
.rebrand-btn > * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.rebrand-btn:hover {
background: -moz-linear-gradient(left, #d2d755 1%, #509e2f 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%, #d2d755), color-stop(100%, #509e2f));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #d2d755 1%, #509e2f 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #d2d755 1%, #509e2f 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #d2d755 1%, #509e2f 100%);
/* IE10+ */
background: linear-gradient(to right, #d2d755 1%, #509e2f 100%);
/* W3C */
filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d755', endColorstr='#509e2f', GradientType=1)";
/* IE6-9 */
}
.rebrand-btn:active {
border-top: 2px solid transparent !important;
border-bottom: 0px !important;
}
/*
.rebrand-btn[disabled=disabled] {
opacity: 0.5;
pointer-events: none !important;
}
*/
.rebrand-btn > span {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 16px;
color: #fff;
}
.rebrand-btn.sm {
padding: 12px 19px;
}
.rebrand-btn.sm > span {
font-size: 14px;
}
.rebrand-btn.ico {
padding: 9px 20px;
}
.rebrand-btn.ico > span {
padding-right: 5px;
}
.rebrand-btn.ico > i {
display: table-cell;
width: 32px;
height: 32px;
background: blue;
}
</style>
</head>
<body>
<div>
<a class="rebrand-btn" href="#"><span>This is a test button</span></a>
</div>
<br>
<div>
<a class="rebrand-btn" href="#" disabled="disabled"><span>This is a test button</span></a>
</div>
<br>
<div>
<a class="rebrand-btn ico" href="#"><span>This is a test button</span><i></i></a>
</div>
<br>
<div>
<a class="rebrand-btn sm" href="#"><span>This is a test button</span></a>
</div>
</body>
</html>
In Internet Explorer, the :active pseudoclass doesn't propagate upward through parent elements. You can see a reduced case here that better illustrates the problem: http://jsfiddle.net/zx7w346u/2/.
This issue has been fixed in Microsoft Edge, Internet Explorer's successor.
I'm trying to solve the following problem:
The outer div("container") doesn't allow height:auto and just hides the complete div with all the content - but I need the outer div to expand since this will be a dynamically filling list later on.
HTML
<div id="container">
<div id="headline">Headline</div>
<ul id="u_list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
CSS
#container {
width: 200px;
height: auto;
background-image: -webkit-linear-gradient(top, #333333 0%, #242424 100%);
position: absolute;
top: 82px;
left: 25px;
}
#headline {
display: block;
position: absolute;
top: 12px;
left: 12px;
color: white;
}
#u_list {
list-style-type: none;
position: absolute;
top: 20px;
left: 12px;
color: white;
padding-left: 0;
margin-top: 36px;
}
Any ideas what's going on there? :(
Kind regards
Try to remove position:absolute at #u_list and #headline
http://codepen.io/anon/pen/fFsvi
#container {
width: 200px;
height: auto;
background: #333333; /* Old browsers */
background: -moz-linear-gradient(top, #333333 0%, #242424 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#242424)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #333333 0%,#242424 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #333333 0%,#242424 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #333333 0%,#242424 100%); /* IE10+ */
background: linear-gradient(to bottom, #333333 0%,#242424 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#242424',GradientType=0 ); /* IE6-9 */
position: absolute;
top: 82px;
left: 25px;
}
I use this tool http://www.colorzilla.com/gradient-editor/ for gradient
Try below code:
#container{position:relative;}
I've got a simple Bootstrap navbar menu, which works great, but I want to add a little visual indicator to the bottom of the menu div to show which menu item is currently active.
This seems like it should be easy, but particularly notice that the drop shadow needs to move with the indentation - how do we do something like this?
A picture is worth a thousand words, added one below.
EDIT Added Fiddle: http://jsfiddle.net/52VtD/1463/
HTML
<div class="navbar navbar-gradient navbar-static-top">
<div class="container">
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav nav-pills">
<li class="active">
<span class="glyphicon glyphicon-home" />
</li>
<li>
<span class="glyphicon glyphicon-cog" />
</li>
</ul>
</div>
</div>
</div>
CSS
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
/* gradient for main navigation bar */
.navbar-gradient {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
/* drop shadow */
box-shadow: 3px 3px 3px #888888;
}
Here is a solution with a .png image :
FIDDLE
I added this to you css:
li.active{position:relative;}
li.active::after{
content:"";
background: transparent url("http://i41.tinypic.com/29ofuoh.png") no-repeat center center;
background-size: 15px 17px;
height:17px;
width:100%;
position:absolute;
top:43px;
left:0;
}
You could use something like the following. At least if you don't want to use images and don't mind CSS transforms (Other options may include using an image, drawing the thing with CSS backgrounds or SVG maybe.)
demo
.box{
height: 40px;
width: 200px;
position: relative;
box-shadow: 3px 3px 3px #888;
background: #f4f4f4;
}
.box::after{
display: block;
content: " ";
width: 15px;
height: 15px;
background: #fff;
box-shadow: inset 10px 10px 3px -7px #888;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
bottom: -8px;
right: 50px;
}
Probably needs a little more tweaking but here is a 100% CSS solution.
FIDDLE HERE
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.triangle {
margin-top:-7px;
width: 0;
height: 0;
margin-left:31px;
}
.triangle::after {
content:'';
border-bottom: 0;
height: 15px;
width: 15px;
background-color: #fff;
position: absolute;
-webkit-transform: rotate(45deg);
z-index: 2;
box-shadow: inset 2px -4px 9px #888;
}
.triangle-cover {
position:absolute;
margin-top:1px;
margin-left:-7px;
z-index:10;
width: 0;
height: 0;
border-bottom: solid 17px white;
border-left: solid 14px transparent;
border-right: solid 14px transparent;
}
and in each li that you want active (and you might have to use a little JS to insert these elements into the DOM of the li is active...)
<li class="active"><img src="http://icons.iconarchive.com/icons/ampeross/qetto-2/48/settings-icon.png" />
<div class="triangle"><span class="triangle-cover"></span></div>
</li>
Here is my page HTML. Below is my CSS for the main navigation styles. IE7 does not display the padding, hover or drop down items. IE8 padding is good, hover works, but drop downs do not display. My code may be a big mess- probably a lot of unnecessary stuff. I've been working with all sorts of suggestions to no avail. So anyone willing to take the time and help me resolve my navigation issue? I will be so incredibly appreciative! I'm hoping there's something obvious here to someone who is much more knowledgeable than myself. Here is the live site. http://www.tortolasportsclub.com/ Also, my animation's down level poster image loads with scroll bars (Adobe Edge Animate). Not sure what's going on there. Have been unable to find a solution for that also.
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/respond.min.js"></script>
</head>
<body id="home">
<div class="gridContainer clearfix">
<div id="header">
<div id="logo"><img src="images/logo.jpg"></div>
<div id="register">
<span class="button"></span>
</div>
</div>
<div id="nav">
<ul id="menu">
<li>Home </li>
<li>About
<ul>
<li>Committee Members</li>
</ul>
</li>
<li>Sports
<ul>
<li>Squash </li>
<li>Tennis</li>
<li>Gym</li>
<li>Multipurpose</li>
<li>Junior Programs</li>
</ul>
</li>
<li>Clubhouse
<ul>
<li>Restaurant Menu</li>
<li>Events</li>
<li>Staff</li>
</ul>
</li>
<li>News
<ul>
<li>Events</li>
<li>Submit News</li>
</ul>
</li>
<li>Sponsors
<ul>
<li>Become a Sponsor</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
<div id="figure"><object id="bannerframe" data="animation/tsc-index-banner.html" width="100%" height="100%"><embed href="tsc-index-banner.html" width="100%" height="100%"></embed></object>
<div id="blktxtbar"></div>
</div>
<div id="section">
<div id="article1"></div>
<div id="article3"></div>
</div>
<div id="footer-nav"></div>
<div id="footer-nav2"></div>
<div id="footer-co"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/selectnav.min.js"></script>
<script>selectnav('menu'); </script>
<script type="text/javascript" language="javascript">
$(function() {
var resizeObject = function() {
var object = $('#bannerframe');
var width = object.width();
var ratio = 350.0 / 960.0;
var height = Math.floor(width * ratio) + 'px';
object.height(height);
};
$(window).resize(resizeObject);
resizeObject();
});
</script>
</body>
</html>
#nav {
clear: both;
float: left;
margin: 0;
padding: 0;
width: 100%;
background: #FFF;
display: block;
position: relative;
margin-top: 0px;
font: 1.1em Tahoma, Geneva, sans-serif;
}
#nav ul {
clear:left;
float:right;
list-style:none;
margin:0;
padding:0;
position:relative;
right: 50%;
text-align:center;
}
#nav ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
width: 6.5em;
cursor: pointer;
text-align: center;
white-space: nowrap;
font-size: 100%;
font-weight: bold;
padding-top: 2px;
padding-bottom: 2px;
background: #FFF;
}
#nav ul li a {
color: #FFF;
display:block;
right: 50%;
text-align: center;
text-decoration: none;
border:1px solid #224b09;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-right: 1px;
background-color: #36780f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36780f), color-stop(100%, #005900));
background-image: -webkit-linear-gradient(top, #36780f, #005900);
background-image: -moz-linear-gradient(top, #36780f, #005900);
background-image: -ms-linear-gradient(top, #36780f, #005900);
background-image: -o-linear-gradient(top, #36780f, #005900);
background-image: linear-gradient(top, #36780f, #005900);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#005900);
padding: 10px 5px;
}
#nav ul li.active a {
color: #FFFFFF;
background-color: #4ba614;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4ba614), color-stop(100%, #030));
background-image: -webkit-linear-gradient(top, #4ba614, #030);
background-image: -moz-linear-gradient(top, #4ba614, #030);
background-image: -ms-linear-gradient(top, #4ba614, #030);
background-image: -o-linear-gradient(top, #4ba614, #030);
background-image: linear-gradient(top, #4ba614, #030);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4ba614, endColorstr=#030);
display: block;
padding: 10px 5px;
}
#nav ul li:hover a, #nav ul li.hover a /* This line is required for IE 6 and below */{
color: #FFF;
background-color: #36780f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36780f), color-stop(100%, #000));
background-image: -webkit-linear-gradient(top, #36780f, #000);
background-image: -moz-linear-gradient(top, #36780f, #000);
background-image: -ms-linear-gradient(top, #36780f, #000);
background-image: -o-linear-gradient(top, #36780f, #000);
background-image: linear-gradient(top, #36780f, #000);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#000);
}
#nav ul ul {
display: none;
position: absolute;
top: 3em;
left: 1;
padding-top: 0px;
opacity: 1;
right: auto;
font-size: .9em;
width: auto;
padding-top: 0px;
padding-bottom: 0px;
z-index: 1;
}
#nav ul ul li {
padding-top: 0px;
opacity: 0.9;
left: auto;
margin: 0;
clear: left;
width: 100%;
font-size: 0.9em;
padding-top: 0px;
padding-bottom: 0px;
}
#nav ul ul li a,
#nav ul li.active li a,
#nav ul li:hover ul li a,
#nav ul li.hover ul li a { /* This line is required for IE 6 and below */
color: #FFF;
background-color: #36780f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36780f), color-stop(100%, #005900));
background-image: -webkit-linear-gradient(top, #36780f, #005900);
background-image: -moz-linear-gradient(top, #36780f, #005900);
background-image: -ms-linear-gradient(top, #36780f, #005900);
background-image: -o-linear-gradient(top, #36780f, #005900);
background-image: linear-gradient(top, #36780f, #005900);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#005900);
text-align: left;
line-height:1.4em;
border-bottom:1px solid #000;
display: block;
}
#nav ul ul li a:hover,
#nav ul li.active ul li a:hover,
#nav ul li:hover ul li a:hover,
#nav ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
font-size:1em;
color: #FFF;
background-color: #36780f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36780f), color-stop(100%, #000));
background-image: -webkit-linear-gradient(top, #36780f, #000);
background-image: -moz-linear-gradient(top, #36780f, #000);
background-image: -ms-linear-gradient(top, #36780f, #000);
background-image: -o-linear-gradient(top, #36780f, #000);
background-image: linear-gradient(top, #36780f, #000);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#000);
text-align: left;
display: block;
}
#nav ul ul.last {
left:auto;
right:0;
}
#nav ul li:hover ul,
#nav ul li.hover ul { /* This line is required for IE 6 and below */
display:block;
}
When the content of the site is bigger then the window (no matter how high you make the window, this rule applies). This is very unwanted behavior because it looks like ##!*...
I'm quite new to webdesign so I probably really made some big mistakes in my css.. Here is the css file, hope someone can point it out.. (probably using height: 100% was bad, but don't know what else to do =/.
And I know for content and stuff absolute is REALLY bad.
This is what the 'bug' looks like, at the bottom when the content is larger then the window:
http://i49.tinypic.com/1zqa9th.png
Here is a html skeleton:
<!DOCTYPE html>
<html>
<head>
<?php
$title_tags = "TITLE HERE";
$meta_description = "";
include('generalhead.php'); ?>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<div class = "wrap1">
<img src="media/images/blub.png" class="blub"><br>
<div class="cloud">
<img src="media/images/dots.gif">
<img class="cloud_text" src="media/images/cloud.png">
<img src="media/images/dots.gif">
</div>
<div class="menu">
<ul id="nav" class="navig">
<h3 class="big_link">home</h3>
<h3 class="big_link">contact</h3>
<h3>Algemene dakwerken</h3>
<li>Epdm</li>
<li>pannen</li>
<li>zink</li>
<li>koper</li>
<li>dakconstructie</li>
<li>velux steken</li>
<li>uitbekleden oversteking</li>
<h3>binnenhuisinrichting</h3>
<li>ramen en deuren</li>
<li>gyproc</li>
<li>muren en plafonds</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div class="content-top">
<div class="content-head">
blub
</div>
<div class="content-body">
CONTENT TEXT COMES HERE, BELLOW THIS ARE THE CONTENT PICTURES
</div>
<div class="content-pictures">
<!-- Slider-->
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<?php
$directory_name = "index";
include ("generate_photo_content.php");
?>
</div>
</div>
</div>
</div>
</div>
</div>
<?php include ('bottomscripts.php'); ?>
</body>
</html>
CSS HERE
body{
/* FALLBACK KLEUR ALS GRADIENT NIET WERKT*/
background-color: #1b1000;
height: 100%;
font-size: 100%
}
/*ROND ALLES EN ZORGT VOOR GRADIENT OP BACKGROUND*/
.wrapper{
display:block;
/*set the div in the top-left corner of the screen*/
position:absolute;
top:0;
left:0;
/*set the width and height to 100% of the screen*/
width: 100%;
height:100%;
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(left center, circle farthest-side, #4D2D0F 0%, #1B1000 50%, #1B1000 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(left center, circle farthest-side, #4D2D0F 0%, #1B1000 50%, #1B1000 100%);
/* Opera */
background-image: -o-radial-gradient(left center, circle farthest-side, #4D2D0F 0%, #1B1000 50%, #1B1000 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, left center, 0, left center, 973, color-stop(0, #4D2D0F), color-stop(0.5, #1B1000), color-stop(1, #1B1000));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(left center, circle farthest-side, #4D2D0F 0%, #1B1000 50%, #1B1000 100%);
/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-side at left center, #4D2D0F 0%, #1B1000 50%, #1B1000 100%);
}
.sidebar {
z-index: 999;
background-color: #ffcc00;
/*background-image: url(../images/bar-8.png);*/
background-repeat: no-repeat;
background-image: url(../images/bar.jpg);
background-repeat:repeat-y;
-moz-box-shadow: 5px 0px 6px #000000;
-webkit-box-shadow: 5px 0px 6px #000000;
box-shadow: 5px 0px 6px #000000;
width: 200px;
height: 100%;
float: left;
}
.wrap1{
position: relative;
top:15px;
}
.logo{
position: absolute;
top: 0;
left: 4px;
}
.blub{
position: relative;
float:left;
width: 100%;
margin: 0 0 10px 0;
}
.cloud{
position: relative;
float: left;
width: 100%
}
.cloud_text{
margin: 0 0 0 0;
}
.menu{
line-height: 1;
margin: 0 0 0 10px;
position: relative;
float: left;
width: 100%
}
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu {
width: 200px;
margin: 10px auto;
font-size: 0.8125em;
text-transform: uppercase;
}
.navig{
width: auto;
height: auto;
}
.navig > li > a{
border-bottom: 1px solid #c68f00;
width: 100%;
height: 1.5em;
font-size: 0.8em;
line-height: 1.5em;
text-indent: 16px;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Areal, sans-serif;
font-weight: 600;
color: #603913;
text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
-webkit-transition: all 1s linear;
}
.navig > h3{
margin: 0 0 0 0;
border-bottom: 2px solid #c68f00;
width: 100%;
height: 2.25em;
line-height: 2.75em;
text-indent: 10px;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Areal, sans-serif;
font-weight: 600;
color: #603913;
text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
}
.navig > li > a:hover,
.navig > li > a:active{
background-color: #fdda01;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 219, 0)),to(rgb(255,204,0)));
background-image: -webkit-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -moz-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -o-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -ms-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 1px solid #886304;
}
.big_link > a {
margin: 0 0 0 0;
border-bottom: 2px solid #c68f00;
width: 100%;
height: 2.25em;
line-height: 2.75em;
text-indent: 10px;
display: block;
position: relative;
color: #603913;
text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
}
.big_link> a:active,
.big_link > a:hover{
background-color: #fdda01;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 219, 0)),to(rgb(255,204,0)));
background-image: -webkit-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -moz-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -o-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -ms-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 2px solid #886304;
}
.selected{
background-color: #fdda01;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 219, 0)),to(rgb(255,204,0)));
background-image: -webkit-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -moz-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -o-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -ms-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 1px solid #886304;
}
Short answer:
Here's your current HTML markup and CSS definitions with the ending result as requested:
See this working Fiddle Example!
Long Answer
Your current code as presented on the question contains several markup issues:
Child elements of an unordered list (UL):
See the W3C - Lists in HTML documents
<ul/> element can only have <li/> as a child. Currently you're placing <h3/> mixed with <li/> elements.
Closing tags for the <div/> element:
You're using 12 opening tags.
You're using 13 closing tags.
Loose one closing div declaration after your ul to have the markup working as expected.
Regarding your sidebar height issue
I've tried to work with the code you've provided, but the structure is to messy to achieve your goal with a plain CSS solution.
So I went the other way around, prepared the desired structure to have your contents applied to it. The markup on this Fiddle Example solves your issue.
HTML MARKUP the basic layout
<div class="wrapper">
<div class="sidebar">
<ul>
<li>Sidebar stuff.</li>
</ul>
</div>
<div class="content">
CONTENT TEXT COMES HERE, BELLOW THIS ARE THE CONTENT PICTURES
</div>
<div class="clear"></div>
</div>
CSS the basics to prepare the layout
* {
margin: 0;
padding: 0;
}
.clear { clear: both; }
.wrapper {
position: relative;
}
.sidebar {
width: 200px;
float: left;
background-color: #ffcc00;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
.content {
margin-left: 200px;
}
All you have to do is to apply this markup and fill it with your contents.