Related
I have a header div and inside of it, I have a nav with a ul where the list items are displayed horizontally.
I want these list items to be 100% the height of the header.
I have tried putting height: 100% on the nav, the ul, li, and in the a but nothing works.
How can I make my navigation 100% the height of the header?
Here is a jsFiddle to show you what I mean.
Here's my CSS:
header {
margin-bottom: 0px;
background: rgb(76,77,74); /* Old browsers */
background: -moz-linear-gradient(top, rgba(76,77,74,1) 0%, rgba(55,56,52,1) 49%, rgba(38,39,35,1) 51%, rgba(16,17,13,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(76,77,74,1) 0%,rgba(55,56,52,1) 49%,rgba(38,39,35,1) 51%,rgba(16,17,13,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(76,77,74,1) 0%,rgba(55,56,52,1) 49%,rgba(38,39,35,1) 51%,rgba(16,17,13,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4d4a', endColorstr='#10110d',GradientType=0 ); /* IE6-9 */
padding: 15px;
overflow: auto;
border-bottom: 1px solid #646562;
box-shadow: 0px 14px 50px 0px rgba(255, 255, 255, 0.20);
}
header #branding {
float: left;
}
header #branding h1 {
font-size: 36px;
font-family: ErasBold;
color: #00d6dd;
margin: 0px;
}
header nav {
float: right;
height: 100%;
}
header nav ul {
list-style: none;
margin: 0;
height: 100%;
}
header nav ul li {
display: inline-block;
height: auto;
}
header nav ul li a {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#020000+0,000000+87,000000+100&0+0,0+88,0.5+100 */
background: -moz-linear-gradient(left, rgba(2,0,0,0) 0%, rgba(0,0,0,0) 87%, rgba(0,0,0,0) 88%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(2,0,0,0) 0%,rgba(0,0,0,0) 87%,rgba(0,0,0,0) 88%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(2,0,0,0) 0%,rgba(0,0,0,0) 87%,rgba(0,0,0,0) 88%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00020000', endColorstr='#80000000',GradientType=1 ); /* IE6-9 */
padding: 10px 25px;
color: #d4ff00;
border-left: 1px solid rgba(0, 0, 0, 0.4);
border-right: 1px solid rgba(255, 255, 255, 0.4);
text-decoration: none;
font-family: ErasBold;
height: 100%;
}
Here is my HTML:
<header>
<div id="branding">
<h1>Command Center</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Forum</li>
<li>Roster</li>
<li>Matches</li>
<li>Servers</li>
<li>Recruiting</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
Like this? I hope it can help! :)
header {
margin-bottom: 0px;
background: rgb(76,77,74); /* Old browsers */
background: -moz-linear-gradient(top, rgba(76,77,74,1) 0%, rgba(55,56,52,1) 49%, rgba(38,39,35,1) 51%, rgba(16,17,13,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(76,77,74,1) 0%,rgba(55,56,52,1) 49%,rgba(38,39,35,1) 51%,rgba(16,17,13,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(76,77,74,1) 0%,rgba(55,56,52,1) 49%,rgba(38,39,35,1) 51%,rgba(16,17,13,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4d4a', endColorstr='#10110d',GradientType=0 ); /* IE6-9 */
padding: 15px;
overflow: auto;
border-bottom: 1px solid #646562;
box-shadow: 0px 14px 50px 0px rgba(255, 255, 255, 0.20);
}
header #branding {
float: left;
width: 25%;
}
header #branding h1 {
font-size: 30px;
font-family: ErasBold;
color: #00d6dd;
margin: 0px;
}
header nav {
width: auto;
overflow: hidden;
height: 100%;
}
header nav ul {
list-style: none;
margin: 0;
height: 100%;
}
header nav ul li {
display: inline-block;
height: auto;
float: left;
}
header nav ul li a {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#020000+0,000000+87,000000+100&0+0,0+88,0.5+100 */
background: -moz-linear-gradient(left, rgba(2,0,0,0) 0%, rgba(0,0,0,0) 87%, rgba(0,0,0,0) 88%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(2,0,0,0) 0%,rgba(0,0,0,0) 87%,rgba(0,0,0,0) 88%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(2,0,0,0) 0%,rgba(0,0,0,0) 87%,rgba(0,0,0,0) 88%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00020000', endColorstr='#80000000',GradientType=1 ); /* IE6-9 */
padding: 10px 25px;
display: block;
color: #d4ff00;
border-left: 1px solid rgba(0, 0, 0, 0.4);
border-right: 1px solid rgba(255, 255, 255, 0.4);
text-decoration: none;
font-family: ErasBold;
height: 100%;
}
<header>
<div id="branding">
<h1>Command Center</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Forum</li>
<li>Roster</li>
<li>Matches</li>
<li>Servers</li>
<li>Recruiting</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
I'm trying to create a responsive button from a photoshop mockup in HTML and CSS. Here is the button mockup:
I'm struggling with how to get the arrow in the white space and to stay there through different screen sizes.
I created the color separation through a gradient, like this:
HTML
<button> All Team Members </button>
CSS
button {
/* Permalink http://colorzilla.com/gradient-editor/#990033+0,990033+50,990033+86,ffffff+86,ffffff+100 */
width: 70%;
font-size: .6em;
font-size: 3.4vw;
padding: 2%;
color: #ffffff;
outline-color: #990033;
background: rgb(153,0,51); /* Old browsers */
background: -moz-linear-gradient(left, rgba(153,0,51,1) 0%, rgba(153,0,51,1) 50%, rgba(153,0,51,1) 86%, rgba(255,255,255,1) 86%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(153,0,51,1)), color-stop(50%,rgba(153,0,51,1)), color-stop(86%,rgba(153,0,51,1)), color-stop(86%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(153,0,51,1) 0%,rgba(153,0,51,1) 50%,rgba(153,0,51,1) 86%,rgba(255,255,255,1) 86%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(153,0,51,1) 0%,rgba(153,0,51,1) 50%,rgba(153,0,51,1) 86%,rgba(255,255,255,1) 86%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(153,0,51,1) 0%,rgba(153,0,51,1) 50%,rgba(153,0,51,1) 86%,rgba(255,255,255,1) 86%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(153,0,51,1) 0%,rgba(153,0,51,1) 50%,rgba(153,0,51,1) 86%,rgba(255,255,255,1) 86%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990033', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
And it currently looks like this:
What is the best way to move forward? I wondered if I should just use screenshots of the button from the mockup, or if I should make it in CSS. How can I make the button look like this and be responsive?
Use pseudo elements :before and :after, to make the background and the arrow. Use Font Awesome etc if you need a different shape of arrow.
button {
font-size: 3vw;
padding: 2vw;
color: #ffffff;
background: #903;
border: 0;
position: relative;
padding-right: 8vw;
}
button:before {
content: '';
width: 6vw;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background: white;
border: 1px solid #903;
}
button:after {
content: '❯';
position: absolute;
right: 2vw;
color: #903;
}
<button>All Team Members</button>
jsfiddle
try this:
.btn {padding:10px 40px 10px 20px;
width:70%;
border-radius:3px;
border:2px solid inherit;
border-color: #eeeeee;
background-color:rgb(153,0,51);
background-position:center right;
background-repeat:no-repeat;
text-align:center;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990033', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
font-size: .6em
}
.white_txt {color:#ffffff!important;}
.purple_btn {border:2px solid #eeeeee;border-radius:3px;}
<div class="purple_btn btn">
<div class="white_txt">All Team Members</div>
</div>
I have 3 divs
I am using float:left to have the divs in the same line. my problem is that the div1 will have a random width. Div 3 will be always 25 pixels with margin left and right of 1. and then the middle div needs to fill up the remaining space.
What would be the best way to accomplish this and still be supported in all browsers?
Here is what I tried, but the problem is that the % width wont work because div1 will always change in width.
<div class="title-div gradient">
<div class="title-div-left">
<p>Service 1</p>
</div>
<div class="background-line"></div>
<div class="title-div-right">
<img src="ArrowUp.png" alt="▲">
</div>
</div>
</div>
.services-wrapper .expansion-wrap .title-div {
height: 3.5rem;
line-height: 3.5rem;
width: 95.6rem;
font-size: 1.7rem;
color: #FFF;
margin-left: 3.4rem;
background: #6f1505;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZmMTUwNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNDA4MDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #6f1505 0%, #340801 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6f1505), color-stop(100%, #340801));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6f1505 0%, #340801 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6f1505 0%, #340801 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #6f1505 0%, #340801 100%);
/* IE10+ */
background: linear-gradient(to bottom, #6f1505 0%, #340801 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6f1505', endColorstr='#340801',GradientType=0 );
.services-wrapper .expansion-wrap .title-div .title-div-left {
float: left;
}
.services-wrapper .expansion-wrap .title-div .title-div-left p {
margin: 0;
padding-left: 1.7rem;
padding-right: 1rem;
font-size: 2rem;
font-weight: bold;
display: inline;
}
.services-wrapper .expansion-wrap .title-div .background-line {
background-image: url("../images/Line.png");
background-repeat: no-repeat;
background-position: center;
background-position: no-repeat;
width: 50%;
height: 100%;
float: left;
}
.services-wrapper .expansion-wrap .title-div .title-div-right {
float: left;
height: 3.5rem !important;
padding-left: 1rem;
}
.services-wrapper .expansion-wrap .title-div .title-div-right img {
margin-top: 0.5rem;
}
Adding overflow: auto will make the div fill up the remaining space.
Demo: http://jsfiddle.net/aaL8gvhg/
I have the following DIV in my page:
<div id="leftNavCustom" class="leftMenu">
<div class="menu-item">
<h4>Menu</h4>
<ul>
<li id="u"><a >Why Choose Us</a></li>
<li id="u"><a >Physicians</a></li>
<li id="u"><a >Medical Specialties</a></li>
<li id="u"><a >Locations</a></li>
<li id="u"><a >Urgent Care</a></li>
<li id="u"><a >Radiology</a></li>
<li id="u"><a >Lab</a></li>
</ul>
</div>
</div>
which creates a hover over menu expander.
My CSS is as follows:
#leftNavCustom {
display: block;
z-index: 5;
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5;
margin: 0;
width: 240px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
padding: 0;
background: #00ff00;
}
.leftMenu {
position: fixed;
left: 22px;
top: 65px;
margin: 0;
padding: 0;
}
.menu-item, .menu-item2 {
background: url('../theImages/bg_80_b.png');
width: 240px;
font-family: 'nexa_boldregular';
font-size: 19px;
margin: 0;
padding: 0;
text-align: left;
}
/*Menu Header Styles*/
.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
/*Gradient*/
background: #e73827; /* Old browsers */
background: -moz-linear-gradient(top, #e73827 0%, #f02f17 29%, #f6290c 47%, #f27c32 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e73827), color-stop(29%,#f02f17), color-stop(47%,#f6290c), color-stop(100%,#f27c32)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e73827 0%,#f02f17 29%,#f6290c 47%,#f27c32 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e73827 0%,#f02f17 29%,#f6290c 47%,#f27c32 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e73827 0%,#f02f17 29%,#f6290c 47%,#f27c32 100%); /* IE10+ */
background: linear-gradient(to bottom, #e73827 0%,#f02f17 29%,#f6290c 47%,#f27c32 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e73827', endColorstr='#f27c32',GradientType=0 ); /* IE6-9 */
}
/*Menu Header Styles*/
.menu-item2 h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
/*Gradient*/
background: #036ca9; /* Old browsers */
background: -moz-linear-gradient(top, #036ca9 0%, #025c90 44%, #00466e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#036ca9), color-stop(44%,#025c90), color-stop(100%,#00466e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #036ca9 0%,#025c90 44%,#00466e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #036ca9 0%,#025c90 44%,#00466e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #036ca9 0%,#025c90 44%,#00466e 100%); /* IE10+ */
background: linear-gradient(to bottom, #036ca9 0%,#025c90 44%,#00466e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#036ca9', endColorstr='#00466e',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
background: #f27c32; /* Old browsers */
background: -moz-linear-gradient(top, #f27c32 0%, #f6290c 53%, #f02f17 71%, #e73827 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f27c32), color-stop(53%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f27c32 0%,#f6290c 53%,#f02f17 71%,#e73827 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f27c32 0%,#f6290c 53%,#f02f17 71%,#e73827 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f27c32 0%,#f6290c 53%,#f02f17 71%,#e73827 100%); /* IE10+ */
background: linear-gradient(to bottom, #f27c32 0%,#f6290c 53%,#f02f17 71%,#e73827 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f27c32', endColorstr='#e73827',GradientType=0 ); /* IE6-9 */
}
.menu-item2 h4:hover {
background: #00a3cc; /* Old browsers */
background: -moz-linear-gradient(top, #00a3cc 0%, #005a6e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a3cc), color-stop(100%,#005a6e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a3cc 0%,#005a6e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00a3cc 0%,#005a6e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a3cc 0%,#005a6e 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a3cc 0%,#005a6e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a3cc', endColorstr='#005a6e',GradientType=0 ); /* IE6-9 */
}
.menu-item h4 a, .menu-item2 h4 a {
color: white;
display: block;
text-decoration: none;
width: 240px;
}
/*ul Styles*/
.menu-item ul {
background: url('theImages/bg_80_b.png');
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover ul {
width: 240px;
height: 300px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.menu-item ul li#u a {
color: #fff;
cursor: pointer;
display: block;
height: 25px;
line-height: 25px;
text-indent: 0px;
text-decoration: none;
width: 100%;
font-family: 'nexa_boldregular';
font-size: 19px;
}
/*li Styles*/
.menu-item li#u {
border-bottom: 1px #13476F solid;
padding: 8px;
}
.menu-item li#u:hover {
background: #5196AB;
}
.menu-item li#firstOne {
display: absolute;
top: 0;
left: 0;
background-color: #FFFFFF;
text-align: center;
height: 75px;
line-height: 75px;
border-bottom: 1px solid #FF7263;
vertical-align: middle;
}
.menu-item li#firstOne img {
vertical-align: middle;
}
By default it creates a big space around the menu as shown below:
The only way the menu comes out normal like I would like:
Is to add the following style to the above css file:
* {
margin: 0;
padding: 0;
}
But that makes some of my other DIVS on the page out of place. I tried adding margin and padding to every single code in my CSS but nothing works without adding the few lines shown above.
How do i modify my existing css code to fix it?
JSFIDDLE: http://jsfiddle.net/s2z6f/
Remove the margin from the specific elements that shouldn't have it (the h4 and the ul of .menu-item). You can do this rather than using * as the selector.
.menu-item h4, .menu-item ul {
margin: 0;
}
http://jsfiddle.net/v9xp2/
Try starting off with a CSS reset.
http://meyerweb.com/eric/tools/css/reset/
This will "zero out" all properties that individual browsers introduce automatically. It's generally a good practice if you're going to be writing a lot of custom styles.
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.