I was wondering how can I position navigation titles so that my dropdown menu would work..
The following picture is my perfectly positioned a links, separated thanks to padding-left, which is set to 80 px; Strangely enough, my dropdown category is padded as well, leaving extra space, which makes it very ugly to look. And my dropdown menu link is separated in two lines, although it is only one link. How can I fix this problem? I tried with margin as well, nothing really changed. I would like it to be something like this the third picture..
Picture one - My desired navigation positioning :
http://i61.tinypic.com/2cshw7q.png
Picture two - My dropdown problem :
http://i60.tinypic.com/2z4037c.png
Picture three - The way I would like it to be:
http://i60.tinypic.com/1252ejo.png
How can I accomplish this?
EDIT!
My CSS code:
#menu
{
clear:both;
position: relative;
width: 100%;
height:30px;
background: rgb(38,42,53); /* Old browsers */
background: -moz-linear-gradient(top, rgba(38,42,53,1) 0%, rgba(40,45,63,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(38,42,53,1)), color-stop(100%,rgba(40,45,63,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(38,42,53,1) 0%,rgba(40,45,63,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(38,42,53,1) 0%,rgba(40,45,63,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(38,42,53,1) 0%,rgba(40,45,63,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(38,42,53,1) 0%,rgba(40,45,63,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262a35', endColorstr='#282d3f',GradientType=0 ); /* IE6-9 */
}
ul#menu {
margin:0;
padding:0;
list-style-type: none;
text-transform: uppercase;
font-size: 15px;
}
ul#menu li{
position: relative;
display:inline-block;
/*float:left;*/
margin:0;
padding:0;
}
ul#menu li a{
display:block;
float:left;
color:#84FD00; /* #874B46 */
text-decoration:none;
padding-left: 80px;
padding-top: 5px;
}
ul#menu li ul {
margin-top:20px;
position: absolute;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow:none;
opacity: 0;
visibility: 0;
padding-left: 30px;
}
ul#menu li ul li {
background: rgb(38,42,53); /* Old browsers */
background: -moz-linear-gradient(top, rgba(38,42,53,1) 0%, rgba(40,45,63,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(38,42,53,1)), color-stop(100%,rgba(40,45,63,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(38,42,53,1) 0%,rgba(40,45,63,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(38,42,53,1) 0%,rgba(40,45,63,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(38,42,53,1) 0%,rgba(40,45,63,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(38,42,53,1) 0%,rgba(40,45,63,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262a35', endColorstr='#282d3f',GradientType=0 ); /* IE6-9 */
color: #8BA8C5;
height: 40px;
}
ul#menu li ul li:hover {
background: #666;
}
ul#menu li:hover ul {
display: block;
opacity: 1;
visibility: visible;
margin-right:20px;
}
Set the dropdown ul to have text-align: left; - this should show the text on the left hand side. For some reason your text is right aligned...
Related
I created a hover effect for my navigation bar / the list inside it. On hover I want to create a "pressed button" effect by applying a box shadow. But the shadow only is casted in a small box. (check picture below)
I want the shadow to fill out the whole navbar around the hovered area.
I have no idea where to put my code and would be glad about any help :)
HTML CODE:
<nav>
<div class="nav-wrapper">
<ul>
<li>Home</li>
<li>Projekte</li>
</ul>
</div>
</nav>
CSS CODE:
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color:white;
font-family: 'Open Sans', sans-serif;
}
.nav-wrapper {
margin: 0 auto;
margin-top: 50px;
width: 60%;
padding-top: 5px;
padding-bottom: 5px;
color:#787878;
box-shadow: 2px 2px 3px #BDBDBD;
border-radius: 5px;
background: #f9f9f9; /* Old browsers */
background: -moz-linear-gradient(top, #f9f9f9 0%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f9f9f9 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f9f9f9 0%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f9f9f9 0%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom, #f9f9f9 0%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}
ul {
list-style: none;
}
li {
display: inline;
padding: 0 15px;
}
li:hover {
box-shadow: 2px 2px 3px #BDBDBD inset;
}
a {
text-decoration: none;
color:#787878;
}
Add this:
li:hover {
box-shadow: 2px 2px 3px #BDBDBD inset, 2px 2px 3px #BDBDBD;
}
Preview:
Or the bevelled effect here:
li:hover {
box-shadow: 2px 2px 3px #BDBDBD inset, -2px -2px 3px #BDBDBD inset;
}
Preview:
Fiddle: http://jsbin.com/wolotuxico/1/edit?html,css,output
Update from Comments
Remove padding for .nav-wrapper and give it to li
.nav-wrapper {
padding: 0;
}
li {
display: inline-block;
padding: 15px;
}
Preview:
Fiddle: http://jsbin.com/bowawodode/2/edit
Remove the padding from the navigation and add it to the li's. Remember the border is outside the padding and inside the margin.
Example:
https://jsfiddle.net/m98yedk6/1/
.nav-wrapper {
position: relative;
margin: 0 auto;
margin-top: 50px;
width: 60%;
color:#787878;
box-shadow: 2px 2px 3px #BDBDBD;
border-radius: 5px;
background: #f9f9f9; /* Old browsers */
background: -moz-linear-gradient(top, #f9f9f9 0%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f9f9f9 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f9f9f9 0%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f9f9f9 0%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom, #f9f9f9 0%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}
li {
display: inline-block;
padding: 10px;
}
How can i force the css to make the li tabs i have fill its section. The number of tabs can change to either 4 or 5.
I have tried adding the follow:
.tabs ul li {
display:table-cell;
}
.tabs ul.static
{
display:table !important;
width:750px !important;
table-layout:fixed !important;
}
But it has not worked. When there is a 5th tab the 5th goes to the line below. The current jsfiddle below does this.
How can i get the tabs to cover 100% of the width of its container whether there are 4 or 5 tabs?
http://jsfiddle.net/L7osd1oc/3/
your ul width 750px fix.
so you can add li fix width in % and remove ul left panding
Follow the table structure when you style the elements like below
.tabs{
display:table;
}
.tabs ul.static{
display:table-row;
}
.tabs ul li{
display:table-cell;
}
When you specifying width, in your case 750px, assign this to .tabs which is the table element.
See if this helps you.
try this demo
.tabs {
position: relative;
top: 1px;
z-index: 2;
display: block;
margin: 0 auto 0 auto;
}
.tabs a.static.selected {
width:100%;
padding:10px 0 10px 0;
background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(top, #4096ee 0%, #88bff7 55%, #93c9ff 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4096ee), color-stop(55%,#88bff7), color-stop(99%,#93c9ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4096ee 0%,#88bff7 55%,#93c9ff 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4096ee 0%,#88bff7 55%,#93c9ff 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4096ee 0%,#88bff7 55%,#93c9ff 99%); /* IE10+ */
background: linear-gradient(to bottom, #4096ee 0%,#88bff7 55%,#93c9ff 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#93c9ff',GradientType=0 ); /* IE6-9 */
}
.tabs a.static {
color:#000000 !important;
float:none;
text-decoration:none;
}
.tabs ul li {
list-style: none;
margin-left: 1px;
color: #000000;
margin:0px;
padding:0px;
text-align:center;
background: #93c9ff; /* Old browsers */
background: -moz-linear-gradient(top, #93c9ff 1%, #88bff7 45%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#93c9ff), color-stop(45%,#88bff7), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* IE10+ */
background: linear-gradient(to bottom, #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93c9ff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
display:inline-block ;
}
.tabs a:link {
color: #000000;
text-decoration:none;
}
.tab {
padding: 10px 15px;
position: relative;
display: inline-block;
list-style: none;
text-align:center;
}
.tabs.static.selected:after {
list-style: none;
padding: 10px 15px;
position: relative;
display: inline-block;
}
.tabs ul.static
{
padding:0px;
background: #93c9ff; /* Old browsers */
background: -moz-linear-gradient(top, #93c9ff 1%, #88bff7 45%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#93c9ff), color-stop(45%,#88bff7), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* IE10+ */
background: linear-gradient(to bottom, #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* W3C */
display:table !important;
width:750px !important;
table-layout:fixed !important;
width:100%;
text-align:center;
}
.tab-content {
width:730px;
margin: auto;
background: #fff;
min-height: 200px;
border-radius: 7px;
padding:10px;
text-align:center;
}
.changeButton {
padding: 10px;
margin-left: 25px;
color: #FFFFFF;
background-image: url('data:image/png;base64,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') !important;
background-repeat: repeat-x;
border-style:none;
}
.in-life-container
{
display: block;
margin: auto;
width:750px ;
}
<div class="in-life-container"> <img alt="Skip Navigation Links" src="/WebResource.axd?d=6iNAiGgDBpuUye_ZuQPbwXiF72lVuKy1N2-6JtQmWhRUTLP-_aBCSi-HAD2Zs-eHQCBbOkoJeU_cbrTEvN9ZQUSgy7q8g4vdB9ibfUBW5rM1&t=635418570520000000" width="0" height="0" style="border-width:0px;">
<div class="tabs" id="ContentPlaceHolder_Body_Settings_Repeater_AccountSettings_ctl00_1_Menu_MyVoiceTabMenu_1" style="float: left;">
<ul class="level1 static" tabindex="0" role="menubar" style="position: relative;"><li role="menuitem" class="static" style="position: relative; "><a class="level1 tab static" href="#" onclick="__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$Menu_MyVoiceTabMenu','4')" tabindex="-1">SIP Details</a></li>
<li role="menuitem" class="static" style="position: relative;"><a class="level1 tab selected static" href="#" onclick="__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$Menu_MyVoiceTabMenu','0')" tabindex="-1">Change Address</a>
</li>
<li role="menuitem" class="static" style="position: relative;"><a class="level1 tab static highlighted" href="#" onclick="__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$Menu_MyVoiceTabMenu','1')" tabindex="-1">Change Ownership</a>
</li>
<li role="menuitem" class="static" style="position: relative;"><a class="level1 tab static" href="#" onclick="__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$Menu_MyVoiceTabMenu','2')" tabindex="-1">Re-grade Service</a>
</li>
<li role="menuitem" class="static" style="position: relative;"><a class="level1 tab static" href="#" onclick="__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$Menu_MyVoiceTabMenu','3')" tabindex="-1">Cease Service</a>
</li>
</ul>
</div>
<div style="clear: left;"></div><a id="ContentPlaceHolder_Body_Settings_Repeater_AccountSettings_ctl00_1_Menu_MyVoiceTabMenu_1_SkipLink"></a>
<div class="tab-content">To change the address on this account please <a id="ContentPlaceHolder_Body_Settings_Repeater_AccountSettings_ctl00_1_LinkButton_CreateTicket_1" href="javascript:__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$LinkButton_CreateTicket','')">create a ticket here.</a>
</div>
</div>
I am trying to get a button with gradient background and an image. This is what I have so far:
jsfiddle/D6xKD/
If you look at the button you can see that the gradient is only working around the image and not throughout the button.
Note: This solution I fetched from other references about a button with gradient background and background image.
My question is: How to get the gradient and image working for cross browsers including ie7 and above?
HTML:
<button class="button" onclick="submit();" type="button">Text button</button>
CSS:
.button{
color: #FFFFFF;
display: inline-block;
font-family:Arial;
font-size: 10px;
font-weight: normal;
padding: 9px 36px 9px 4px;
text-decoration: none;
margin:4px auto auto;
cursor:pointer;
border:0px;
background: #3ba93d;
background-position: 66px 4px;
background-repeat:no-repeat;
background-image: url(http://goo.gl/mw5HWR); /* fallback */
background-image: url(http://goo.gl/mw5HWR), -webkit-gradient(linear, left top, left bottom, from(#3ba93d), to(#27842a)); /* Saf4+, Chrome */
background-image: url(http://goo.gl/mw5HWR), -webkit-linear-gradient(top, #3ba93d, #27842a); /* Chrome 10+, Saf5.1+ */
background-image: url(http://goo.gl/mw5HWR), -moz-linear-gradient(top, #3ba93d, #27842a); /* FF3.6+ */
background-image: url(http://goo.gl/mw5HWR), -ms-linear-gradient(top, #3ba93d, #27842a); /* IE10 */
background-image: url(http://goo.gl/mw5HWR), -o-linear-gradient(top, #3ba93d, #27842a); /* Opera 11.10+ */
background-image: url(http://goo.gl/mw5HWR), linear-gradient(top, #3ba93d, #27842a); /* W3C */
}
Thanks in advance.
could try:
<button class="button" onclick="submit();" type="button">Text button <span></span></button>
<style>
.button{
color: #FFFFFF;
font-family:Arial;
font-size: 10px;
font-weight: normal;
padding: 0;
padding-left: 20px;
height: 36px;
width: 120px;
margin:4px auto auto;
text-align: left;
cursor:pointer;
border:0px;
background: #3ba93d;
background-position: 66px 4px;
background-repeat:no-repeat;
background: #3ba93d; /* fallback */
background: -webkit-gradient(linear, left top, left bottom, from(#3ba93d), to(#27842a)); /* Saf4+, Chrome */
background: -webkit-linear-gradient(top, #3ba93d, #27842a); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(top, #3ba93d, #27842a); /* FF3.6+ */
background: -ms-linear-gradient(top, #3ba93d, #27842a); /* IE10 */
background: -o-linear-gradient(top, #3ba93d, #27842a); /* Opera 11.10+ */
background: linear-gradient(top, #3ba93d, #27842a); /* W3C */
}
.button span {
position: absolute;
top: 17px;
left: 100px;
width: 20px;
height: 24px;
background: url(http://goo.gl/mw5HWR);
}
</style>
JS Fiddle
Based on #simon-davies answer
you also can ommit the "span" element :
.button{
color: #FFFFFF;
font-family:Arial;
font-size: 10px;
font-weight: normal;
padding: 0;
padding-left: 20px;
height: 36px;
width: 120px;
margin:4px auto auto;
text-align: left;
cursor:pointer;
border:0px;
background: #3ba93d;
background-position: 66px 4px;
background-repeat:no-repeat;
background: #3ba93d; /* fallback */
background: -webkit-gradient(linear, left top, left bottom, from(#3ba93d), to(#27842a)); /* Saf4+, Chrome */
background: -webkit-linear-gradient(top, #3ba93d, #27842a); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(top, #3ba93d, #27842a); /* FF3.6+ */
background: -ms-linear-gradient(top, #3ba93d, #27842a); /* IE10 */
background: -o-linear-gradient(top, #3ba93d, #27842a); /* Opera 11.10+ */
background: linear-gradient(top, #3ba93d, #27842a); /* W3C */
}
:before {
content : "";
position: absolute;
top: 17px;
left: 100px;
width: 20px;
height: 24px;
background: url(your_image_url) no-repeat;
}
}
This style is pushing the gradient over:
background-position: 66px 4px;
If you remove it, the gradient fills the button.
http://jsfiddle.net/D6xKD/9/
If you need the apple to be in a certain position, I'd recommend expanding the canvas of your image to help in its placement.
Hi I am wondering how come my UL is 38px height yet the LI does not fit 100% height.
ul#ordermenu{
height:38px !important;
width:100% !important;
line-height:38px;
}
ul#ordermenu li
{
height:38px !important;
display: inline;
list-style-type: none;
padding-right: 100px;
color:#000;
line-height:38px;
font-size:20px;
}
ul#ordermenu li:last-child {
padding-right:-100px;
}
ul#ordermenu li.active
{
height:38px !important;
line-height:38px;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
}
My HTML code
<ul id="ordermenu">
<li class="active">Items</li>
<li>Checkout Status</li>
<li>Postage Details</li>
</ul>
The reason the li is not 38px tall is because of the display: inline on ul#ordermenu li
Try this:
#ordermenu li {
display: inline-block;
height: 38px;
}
You cannot assign a height to inline elements, as you are doing for ul#ordermenu li. Try changing the display property to 'inline-block'. This will allow you to give the list-items a specific height while still arranging them horizontally.
My Footer div doesn't show the background color..
Here is the style.css file in which all of the background is working except the footer..
[ Style.css]
.Footer {
width: 200px;
border: 1px solid blue;
padding: 5px;
font-weight: bold;
color: #ffffff;
background-color: #000000;
}
body {
background: #b3dced; /* Old browsers */
background: -moz-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* IE10+ */
background: linear-gradient(to bottom, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=0 ); /* IE6-9 */
}
.body {
padding-top: 1px;
margin-top: 2px;
width: 1200px;
height: 500px;
}
.about_this_site__title {
width: 200px;
border: 1px solid blue;
padding: 5px;
font-weight: bold;
color: #ffffff;
}
.logo {
margin-top: 10px;
margin-right: 500px;
}
#menu {
padding: 0;
margin: 0;
width: 1000px;
margin-right: auto;
margin-left: auto;
border-radius: 2px;
}
#menu ul {
margin: 0;
padding: 0;
border-radius: 3px;
}
#menu ul li {
background: #ffffff;
float: left;
position: relative;
border-radius: 2px;
list-style-type: none;
}
#menu ul li a {
font-family: Verdana;
font-size: 14px;
color: blue;
text-decoration: none;
display: block;
line-height: 30px;
width: 160px;
height: 30px;
text-align: center;
}
#menu ul ul {
position: absolute;
visibility: hidden;
top: 31px;
}
#menu ul li ul li a:hover {
color: white;
background: #b8e1fc; /* Old browsers */
background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* IE10+ */
background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */
}
#menu ul li:hover ul {
visibility: visible;
font-weight: bold;
}
#menu ul li:hover {
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
}
The text shows up but the background doesnt.
[ index.html ]
<div class="Footer">Copyright bla blah</div>
You are opening a p tag and closing with a div tag.
<p class="Footer">Copyright bla blah</p>
Also you have not defined a background color.
Use background-color instead of colorfor it in the css.
Replace
color: #ffffff;
with
background-color: #ffffff;
Sorry i am going to rip your question apart, because someone has to.
Firstly, you are opening with a <p> tag and closing with a </div> tag. This is your first mistake. Secondly, you have not declared a background-color variable at all in the CSS provided. Thirdly, you should never use a <p> tag for ANY BLOCK elements on your page. Always use a <div></div> for your block elements. It is just good practice and valid HTML coding.
In saying that, your code should look something like the following:
[ Style.css]
.Footer {
width: 200px;
border: 1px solid blue;
padding: 5px;
font-weight: bold;
color: #ffffff;
background-color: red;
}
[ index.html ]
<div class="Footer"><p>Copyright bla blah</p></div>
(the <p></p> tag above is purely up to you to have or not as it does allow for more flexibility in your design but not necessary to have.
Hope this helps for future endeavors.