The orange scroll block goes up and down but I wanted the default position of that orange icon to be more toward the bottom of the screen below the title Odyssey. I am new to css so just needed some help for the same.
/* Home Style */
#tf-home{
background: url(../images/OdysseyTitleImage.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
color: #cfcfcf;
}
#tf-home .overlay{
background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(17%,rgba(0,0,0,0.73)), color-stop(35%,rgba(0,0,0,0.66)), color-stop(62%,rgba(0,0,0,0.55)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
height: 100%;
background-attachment: fixed;
}
.home-lead{
color: #fff;
padding: 10px 15px;
background-color: rgba(51, 51, 51, 0.9);
font-size: 21px;
}
.content{
position: relative;
padding: 15% 0 0;
}
.content-game{
position: relative;
padding: 5% 0 5%;
}
.color{
color: #ff6300;
}
a.fa.fa-angle-down {
padding: 10px 15px;
color: #fff;
border: 2px solid #b4b4b4;
border-radius: 50%;
font-size: 24px;
margin-top: 100px;
transition: all 0.5s;
}
a.fa.fa-angle-down:hover{
background: #ff6300;
color: #ffffff;
border: 2px solid #ff6300;
}
.home-heading{
font-size: 56px;
font-weight:normal;
}
and this is the html
<div id="tf-home" class="text-center">
<div class="overlay">
<div class="content">
<div>Watch the trailer</div>
</div>
</div>
</div>
I think it could just change the padding-top in this lines:
.content{
position: relative;
padding: 15% 0 0;
}
You can try something like padding: 30% 0 0;
Related
In the following code, I am creating a navigation bar. When you hover on an item in the navbar, it displays a drop down menu. Certain items on the drop down menu display a submenu when hovered. All this is working, but when the submenu displays, I am having issues with the positioning of its top property. I have tried making its' parent div position:relative, adjusting it's top: position, adjusting the display property, etc., but can't seem to locate the problem.
#nav {
width: 886px;
height: 32px;
margin: 1px auto 0 auto;
border-top: 1px solid #B1B6B9;
border-bottom: 1px solid #646E73;
background-color: #A9AFB2;
/* 50% gray */
background: -moz-linear-gradient(top, #bbbfc1 0%, #7f878b 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbbfc1), color-stop(100%, #7f878b));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbbfc1 0%, #7f878b 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbbfc1 0%, #7f878b 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbbfc1 0%, #7f878b 100%);
/* IE10+ */
background: linear-gradient(to bottom, #bbbfc1 0%, #7f878b 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#ffBBBFC1', EndColorStr='#ff7F878B');
padding: 0 40px;
}
.navone {
position: relative;
top: 0;
left: 0;
height: 32px;
float: left;
margin-bottom: -3px;
z-index: 150;
width: auto;
}
.navone a {
text-decoration: none;
float: left;
height: 16px;
color: #FFFFFF;
font-family: Jabas, Arial, Helvetica, sans-serif;
font-size: 19px;
padding: 5px 14px 11px 14px;
display: block;
border-left: 1px solid #B1B6B9;
border-right: 1px solid #737C81;
text-shadow: -1px -1px 0px rgba(84, 95, 101, .35);
}
.navone a:hover {
text-decoration: none;
background-color: #567697;
/* 75% dark blue */
background: -moz-linear-gradient(top, #567697 0%, #1e4975 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #567697), color-stop(100%, #1e4975));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #567697 0%, #1e4975 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #567697 0%, #1e4975 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #567697 0%, #1e4975 100%);
/* IE10+ */
background: linear-gradient(to bottom, #567697 0%, #1e4975 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#ff567697', EndColorStr='#ff1E4975');
}
.navone a.active {
background-color: #89A8C7;
/* 55% blue */
background: -moz-linear-gradient(top, #89a8c7 0%, #5480ad 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #89a8c7), color-stop(100%, #5480ad));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #89a8c7 0%, #5480ad 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #89a8c7 0%, #5480ad 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #89a8c7 0%, #5480ad 100%);
/* IE10+ */
background: linear-gradient(to bottom, #89a8c7 0%, #5480ad 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#ff89A8C7', EndColorStr='#ff5480AD');
}
.navone:hover .navtwo {
display: block;
}
.navtwo {
border-top: 1px solid #65809B;
display: none;
position: absolute;
top: 32px;
left: 0px;
z-index: 200;
width: 100%;
-webkit-box-shadow: 4px 4px 3px rgba(84, 95, 101, .3);
-moz-box-shadow: 4px 4px 3px rgba(84, 95, 101, .3);
box-shadow: 4px 4px 3px rgba(84, 95, 101, .3);
}
.navtwo a {
color: #3E6082;
background-color: #D8E2EC;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
width: 90%;
height: auto;
display: block;
padding: 4px 5%;
border: 1px solid #B1C5DA;
box-sizing: box-border;
border-top: 1px solid #FFFFFF;
text-shadow: none;
}
.navtwo a:hover {
color: #FFFFFF;
background-color: #3E6082;
text-decoration: none;
}
.dropdown {
position: relative;
}
.dropdown > a {
background: #C1C5C7 !important;
color: #32393D !important;
font-weight: bold;
border-top: 1px solid #E0E2E3;
border-bottom: 1px solid #A2A8AB !important;
z-index: 50;
}
.dropdown > a:after {
float: right;
content: "\25B6"
}
.dropdown:hover > a {
background: #92999D !important;
}
.dropdown-content {
display: none;
z-index: 100;
}
.dropdown-content a {
padding: 4px 8px;
width: 150px;
}
.dropdown:hover .dropdown-content {
display: block;
position: absolute;
top: 0;
left: 100%;
}
<div id="nav">
<!--begin of option-->
<div class="navone">
Option
<div class="navtwo">
<!--begin of dropdown menu-->
<div class="dropdown">
Test 1
<!--begin of submenu-->
<div class="dropdown-content">
Test Submenu
Test Long Submenu
Test Longest Submenu
</div>
</div>
<!--begin of dropdown menu-->
<div class="dropdown">
Test 2
<!--begin of submenu-->
<div class="dropdown-content">
Test
Long Test
The Longest Test
</div>
</div>
Test 3
</div>
</div>
<!--end of option-->
<div class="navone">
Longer Option Name
<div class="navtwo">
<div class="dropdown">
Test 1
<div class="dropdown-content">
Test Submenu
Test Long Submenu
Test Longest Submenu
</div>
</div>
Test 2
Test 3
</div>
</div>
</div>
or JSFiddle: https://jsfiddle.net/cshanno/1fsk6fm2/5/
WANTED MINE
----------- -----------
| NavOption | | NavOption |
----------- ----------- ---------
| Dropdown | | Dropdown | Submenu |
----------- ---------- ----------- ---------
| Dropdown >| Submenu | | Dropdown >| < The submenu is shifting
----------- ---------- ----------- to the top
Where the > shows the drop down item that contains sub menu options.
I made a small change on the .dropdown selector and now it's working:
.dropdown {
position: relative;
float: left;
clear: both;
width: 100%;
}
JSFiddle: https://jsfiddle.net/c71f6qzm/
Hope it helps!
The issue has to do with your display property of your .dropdowns.
if you set the display property to inline-block on those <div>s they should render more correctly. You may have to add width: 100% to your .dropdown CSS and reduce the white space in between each menu item by adding font-size: 0 to .navtwo css, but it works:
Also, Ignacio's float solution, does pretty much the same thing.
Display: block for those <div>s is the problem. floating or displaying as inline is your best solution
#nav {
width: 886px;
height: 32px;
margin: 1px auto 0 auto;
border-top: 1px solid #B1B6B9;
border-bottom: 1px solid #646E73;
background-color: #A9AFB2;
/* 50% gray */
background: -moz-linear-gradient(top, #bbbfc1 0%, #7f878b 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbbfc1), color-stop(100%, #7f878b));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbbfc1 0%, #7f878b 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbbfc1 0%, #7f878b 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbbfc1 0%, #7f878b 100%);
/* IE10+ */
background: linear-gradient(to bottom, #bbbfc1 0%, #7f878b 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#ffBBBFC1', EndColorStr='#ff7F878B');
padding: 0 40px;
}
.navone {
position: relative;
top: 0;
left: 0;
height: 32px;
float: left;
margin-bottom: -3px;
z-index: 150;
width: auto;
}
.navone a {
text-decoration: none;
float: left;
height: 16px;
color: #FFFFFF;
font-family: Jabas, Arial, Helvetica, sans-serif;
font-size: 19px;
padding: 5px 14px 11px 14px;
display: block;
border-left: 1px solid #B1B6B9;
border-right: 1px solid #737C81;
text-shadow: -1px -1px 0px rgba(84, 95, 101, .35);
}
.navone a:hover {
text-decoration: none;
background-color: #567697;
/* 75% dark blue */
background: -moz-linear-gradient(top, #567697 0%, #1e4975 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #567697), color-stop(100%, #1e4975));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #567697 0%, #1e4975 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #567697 0%, #1e4975 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #567697 0%, #1e4975 100%);
/* IE10+ */
background: linear-gradient(to bottom, #567697 0%, #1e4975 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#ff567697', EndColorStr='#ff1E4975');
}
.navone a.active {
background-color: #89A8C7;
/* 55% blue */
background: -moz-linear-gradient(top, #89a8c7 0%, #5480ad 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #89a8c7), color-stop(100%, #5480ad));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #89a8c7 0%, #5480ad 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #89a8c7 0%, #5480ad 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #89a8c7 0%, #5480ad 100%);
/* IE10+ */
background: linear-gradient(to bottom, #89a8c7 0%, #5480ad 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#ff89A8C7', EndColorStr='#ff5480AD');
}
.navone:hover .navtwo {
display: block;
}
.navtwo {
border-top: 1px solid #65809B;
display: none;
position: absolute;
top: 32px;
left: 0px;
z-index: 200;
width: 100%;
font-size: 0;
-webkit-box-shadow: 4px 4px 3px rgba(84, 95, 101, .3);
-moz-box-shadow: 4px 4px 3px rgba(84, 95, 101, .3);
box-shadow: 4px 4px 3px rgba(84, 95, 101, .3);
}
.navtwo a {
color: #3E6082;
background-color: #D8E2EC;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
width: 90%;
height: auto;
display: block;
padding: 4px 5%;
border: 1px solid #B1C5DA;
box-sizing: box-border;
border-top: 1px solid #FFFFFF;
text-shadow: none;
}
.navtwo a:hover {
color: #FFFFFF;
background-color: #3E6082;
text-decoration: none;
}
.dropdown {
position: relative;
display: inline-block;
width:100%;
}
.dropdown > a {
background: #C1C5C7 !important;
color: #32393D !important;
font-weight: bold;
border-top: 1px solid #E0E2E3;
border-bottom: 1px solid #A2A8AB !important;
z-index: 50;
}
.dropdown > a:after {
float: right;
content: "\25B6"
}
.dropdown:hover > a {
background: #92999D !important;
}
.dropdown-content {
display: none;
z-index: 100;
}
.dropdown-content a {
padding: 4px 8px;
width: 150px;
}
.dropdown:hover .dropdown-content {
display: block;
position: absolute;
top: 0;
left: 100%;
}
<div id="nav">
<!--begin of option-->
<div class="navone">
Option
<div class="navtwo">
<!--begin of dropdown menu-->
<div class="dropdown">
Test 1
<!--begin of submenu-->
<div class="dropdown-content">
Test Submenu
Test Long Submenu
Test Longest Submenu
</div>
</div>
<!--begin of dropdown menu-->
<div class="dropdown">
Test 2
<!--begin of submenu-->
<div class="dropdown-content">
Test
Long Test
The Longest Test
</div>
</div>
Test 3
</div>
</div>
<!--end of option-->
<div class="navone">
Longer Option Name
<div class="navtwo">
<div class="dropdown">
Test 1
<div class="dropdown-content">
Test Submenu
Test Long Submenu
Test Longest Submenu
</div>
</div>
Test 2
Test 3
</div>
</div>
</div>
or JSfiddle
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;
}
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.
I'm not sure what's going on here, but I'm trying to get it so the "Welcome to blabla" is on the right side of my thead. But it seems to glitch out?
screenshot: http://i.imgur.com/mCGCE8B.png
CSS Code:
body {
background-image: url('images/bg.png');
background-repeat: repeat;
padding: 0px;
margin: 0 0;
}
.content {
max-width: 1200px;
height: 800px;
margin: 0px auto;
background: #B9B9B9;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
box-shadow: 0px 5px 5px #000;
}
#navBack {
max-width: 1200px;
height: 30px;
background: rgb(30,87,153);
background: rgb(69,72,77);
background: rgb(246,248,249);
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
margin: 0px auto;
border-bottom: solid #424242;
}
#navBack ul {
list-style-type: none;
height: 80px;
max-width: 1200px;
margin: auto;
}
#navBack li {
list-style-type: none;
height: 80px;
width: 100px;
margin: 0;
text-align: center;
float: left;
}
#navBack ul a {
background-image: url(images/nav_sep.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 0px;
padding-left: 0px;
display: block;
line-height: 30px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #000;
}
#navBack ul a:hover {
color: #fff;
}
.copyright {
max-width: 1200px;
height: 30px;
background: rgb(246,248,249);
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
margin: 0px auto;
border-top: solid #424242;
text-align: center;
line-height: 30px;
box-shadow: 0px 3px 3px #000;
}
.copyright a {
color: green;
}
#theadTitle {
max-width: 1200px;
height: 30px;
background: rgb(246,248,249);
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
border-bottom: solid #424242;
}
#thead {
max-width: 1200px;
height: 400px;
background-color: #CBCBCB;
margin: 20px 20px;
box-shadow: 0px 0px 3px #000;
}
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Noszscape - Home</title>
<LINK href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="content">
<div id="navBack">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Play Now</li>
<li>Download</li>
<li>Vote</li>
<li>Donate</li>
</ul>
</div>
<div id="thead" style="width: 75%">
<div id="theadTitle" > Welcome to Naszscape! </div>
</div>
</div>
<div class="copyright">
<span style="font-style:italic"><strong>All rights reserved ©</span> <span style="color: skyblue">317 Delta Coder</span> <span style="font-style:italic">2014</strong></span>
</div>
</body>
</html>
You have an inline style of width: 75% which is pushing the text off the side.
I would remove that and the max-width: 1200px; and add text-align: right; to the #theadTitle element.
See this fiddle.
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.