I am new to learning HTML and CSS. I am attempting to recreate some of the design interfaces of a certain site, but have run into a problem. The navigation menu, though in the header, appears below it for some reason. I have attempted multiple combinations of fixes but they do not end up working and I am too much of a novice to completely understand why it may be doing such a thing. I have uploaded my site and left the directories open to explore. The code is very small, so it should be somewhat easier to point out my mistake.
http://razorcloud.cz.cc/
HTML:
<body class="body">
<header class="header">
<img style="padding-left: 20px" src="images/versace-logo.bmp" width="230" height="120" />
<div class="bottom-header">
<div class="navigation-bar">
<ul>
<li>
Home
<div class="dropdown-container dropdown-shadow">
<div class="dropdown-column">
<p>This is a simple test to determine how dynamic and fluid the dropdown-container is.</p>
</div>
</div>
</li>
</ul>
<ul>
<li>
Video
</li>
</ul>
</div>
</div>
<!--<div class="header-alert">
This website is still under development!
</div>-->
</header>
CSS:
.body
{
margin: auto;
width: 95%;
clear: both;
}
.body a
{
color: inherit;
}
.header
{
background-color: black;
color: white;
display: block;
font-family: "GillSansStdRegular";
margin-bottom: 20px;
position: relative;
}
.bottom-header
{
display: block;
position: relative;
padding: 0 20px;
}
.navigation-bar
{
color: white;
display: inline-block;
font-size: 12px;
float: right;
text-transform: uppercase;
}
.navigation-bar > ul
{
border: transparent 1px solid;
border-bottom: 0;
float: left;
height: 34px;
list-style: none;
margin-left: 5px;
}
.navigation-bar > ul a
{
display: block;
line-height: 16px;
margin-right: 23px;
padding: 0px 2px 0px 2px;
text-decoration: none;
}
.navigation-bar > ul:active a
{
background-color: white;
}
.navigation-bar > ul:hover a
{
color: black;
height: 31px;
background: white;
}
.navigation-bar > ul:hover .dropdown-container
{
display: block;
}
.dropdown-column
{
}
.dropdown-container
{
color: black;
display: none;
position: absolute;
z-index: 99;
left: 0;
width: 100%;
border-color: black;
border-top: 2px;
border-top-style: solid;
}
.dropdown-shadow
{
margin-top: 0;
background: url("../images/backgrounds/submenu-bg.png");
-webkit-box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
-moz-box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
}
.dropdown-shadow:after
{
display: block;
clear: both;
}
.header-alert
{
background-color: white;
border-bottom: 2px solid black;
color: black;
font-family: "GillSansStdLightRegular";
font-size: 110%;
text-align: center;
text-transform: uppercase;
width: 100%;
}
You need to float your elements. Inside the header the<img/> should be set to float:left and the navigation container (.navigation-bar) needs to be set to float:right. And you'll need to add a clearfix after the floats:
FIDDLE
Related
I have been working on fixing this but cannot figure out what I am missing. I would like for drop down list to show right below its parent. The list shows but all go to far left and forces the remaining nav items to drop down to another line. i have included a snippet for what is currently looks like and an image of what I want it to look like. Also, I have been trying to figure out how to add down fa fa-caret to nav items with drop down list. Please help!
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
overflow: hidden;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
/*float: left; may need to be removed to show borders*/
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
}
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
font-size: 20px;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
/*float: left;*/
}
.list {
display: none;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background: #B6B6B6;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
display: block;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
BECOME AN ELK
</div>
</li>
<form action="#">
<input type="text" placeholder="Search.." name="search">
</form>
</ul>
</div>
You can achieve this by first making the div.list element into an absolute positioned. The 'display:block' property was pushing all the other content down to the next row because the block element was taking up space.
As you see now the list is no longer pushing the content down but now it is not aligned to the correct nav item. We are also going to add a left:0 so that the div.list is to the left of the parent property.
Now the parent property needs a position of relative so that the left:0 on the child element is being positioned relative to the parent element.
.dropdown:hover .list {
display: block;
position: absolute;
left: 0;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
position: relative;
}
The problem with your CSS code is, you missed to add position: relative and position: absolute to the .dropdown and .list selectors, which is compulsory to create dropdown. Try this code.
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
/*float: left; may need to be removed to show borders*/
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
}
.navbar a:active {
background-color: #000000;
}
.navbar li:hover > a {
background-color: #ddd;
color: black;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
position: relative;
/*float: left;*/
}
.list {
display: none;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
left: 0;
top: 100%;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background-color: #B6B6B6;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
display: block;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
--> Please update following code in your existing file
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
position: relative;
}
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
}
.list {
opacity: 0;
visibility: hidden;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
top: 20px;
left: 0;
transition: 0.3s ease-in-out;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background: #dddddd;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
opacity: 1;
visibility: visible;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
BECOME AN ELK
</div>
</li>
<form action="#">
<input type="text" placeholder="Search.." name="search">
</form>
</ul>
</div>
I am using HTML lists for dropdown menus in my navbar. The problem I have come across is that when the browser window is small, the dropdown goes off-screen to the left.
I am wondering on the best way to simply center it and stretch the content across 100% at a small screensize.
The problem is the notifications menu (hover over the little envelope).
I've put up some code I ripped from the site which gives you an idea: http://codepen.io/anon/pen/eBeYXd
Hover over the far-right item and the menu will appear, make the browser the size of a mobile screen and see the dropdown move off to the left being cut off.
Code below:
<div class="navigation-main">
<div class="container group">
<ul class="header-navbar">
<!-- notes test -->
<li class="dropdown pull-right alerts-box">
<img src="/templates/default/images/comments/envelope.png" alt=""/> <span class="badge badge-important">1</span> <b class="caret"></b>
<ul class="dropdown-menu">
<li><strong>liamdawe</strong> replied to "test a test test a test test a test test a test te…"</li>
<li class="divider"></li><li>Clear all</li>
<li class="divider"></li>
<li>See all</li>
</ul>
</li>
<!-- notes test -->
</ul>
</div>
</div>
CSS code:
*, *:before, *:after {
box-sizing: inherit;
}
.navigation-main {
position: fixed;
top: 0;
width: 100%;
height: 49px;
z-index: 10001;
background-color: #222;
}
.header-navbar {
list-style: none;
padding: 0;
margin: 0;
}
.header-navbar>li {
float: left;
}
.header-navbar>.pull-right {
float: right;
}
.header-navbar>li>a {
display: block;
color: #999;
padding: 14px;
}
.header-navbar>.active>a {
color: #FFF;
background-color: #000;
}
.header-navbar>li>a:hover {
color: #FFF;
text-decoration: none;
}
.header-navbar>.header-brand>a {
line-height: 0;
padding: 9px 14px;
margin-left: -14px;
}
.header-search {
padding: 9px 0;
}
.header-search .search-field {
width: auto;
background-color: #333;
border: 1px solid #5c5c5c;
outline: none;
line-height: 19px;
height: 30px;
color: #fff;
margin: 0;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.header .dropdown-menu {
border-top-width: 1px;
}
.header .dropdown:hover .caret {
border-top-color: #FFF;
}
.header-avatar {
padding: 9px 0 9px 14px;
}
.dropdown {
position: relative;
}
.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
border-top: 4px solid #999;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: ""
}
.dropdown-menu {
position: absolute;
top: 49px;
left: 0;
z-index: 999;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 0;
list-style: none;
text-align: left;
background-color: #222;
border: 1px solid #000;
box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
display: none;
}
.dropdown-menu li {padding: 0 15px 2px;}
.dropdown-menu .divider {
*width: 100%;
height: 1px;
padding: 0px;
margin: 9px 0;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #383838;
}
.dropdown-menu a {
display: block;
clear: both;
line-height: 26px;
color: #999;
white-space: nowrap;
padding: 2px;
}
.dropdown-menu li>a:hover, .dropdown-menu li>a:focus {
text-decoration: none;
color: #fff;
}
.pull-right .dropdown-menu {
right: 0;
left: auto;
}
.pull-right {
float: right;
}
.nav-avatar {
vertical-align: middle;
background-color: #333;
}
play with min-width: or max-width: and probably allow your text to wrap
something like this
.dropdown-menu a {
display: block;
clear: both;
line-height: 26px;
color: #999;
min-width: 200px;
white-space: wrap;
padding: 2px;
}
This question was posted a few years ago By Sally but she solved it herself and her solution is not working for me.
I have gone through practically all of the relevant sticky footer pages on this site and a bunch from other places but I cannot find anything answering this question. I am sure it has to do with my layout but I have tried every way I have researched and can think of and this is the closest I could get to a sticky footer I am happy with.
Here is the HTML I am working with.
<body>
<div id="container">
<header class="main-header">
<img src="logo3.png" alt="logo" />
<ul class="main-nav">
<li><a id="home" href="index.html">Home</a>
</li>
</ul>
<ul class="second-nav">
<li><a id="about" href="About.html">About Us</a>
</li>
<li><a id="portfolio" href="Portfolio.html">Portfolio</a>
</li>
<li>Sports Complex
</li>
<li>Contact Us
</li>
</ul>
</header>
<body class="body">
<div class="frameT">
<div class="frameTC">
<div class="thumb" id="thumbs">
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">_______</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<span class="stretch"></span>
</div>
</div>
</div>
</body>
<footer class="footer">
<div class="quote">
<h6>""</h6>
<p> - </p>
</div>
</footer>
</div>
</body>
and the CSS
/*header*/
.main-header {
display: inline-block;
position: relative;
margin: 1%;
width: 98%;
top: 0;
left: 0;
min-width: 904px;
z-index: 10;
border: 0px solid #2675a9;
border-top: none;
border-radius: 0 0 0 0;
background-color: #606060;
background-color: rgb(29, 67, 129);
-webkit-box-shadow:0 1px 5px black;
-moz-box-shadow:0 1px 5px black;
box-shadow:0 1px 5px black;
}
.main-header:after {
content: " ";
display: table;
clear: both;
}
.main-header li {
display: inline;
}
.main-header img {
position: relative;
float: left;
top: 5.5px;
left: 5.5px;
width: 60px;
height: 60px;
}
.main-nav {
float: left;
margin: 12.5px 0 12.5px 5px;
padding: 0;
}
.main-nav a {
text-shadow: 0.06em 0.08em #2666b1;
letter-spacing: 4px;
color: #ebebeb;
font-family: StonyIsland;
display: block;
font-size: 2.5em;
padding: 0px 10px;
text-decoration: none;
margin: 0px;
font-weight: 300;
}
.logo {
height: 50px;
width: 50px;
top: 0;
left: 0;
padding: 10.5px;
margin: 0;
}
.second-nav {
float: right;
border-radius: 4px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 0;
margin-right: 0;
border: none;
padding: 9.5px;
}
.second-nav > li {
float: left;
border: solid 1px #ebebeb;
border-bottom: none;
border-top: none;
border-right: none;
}
.second-nav li:first-child {
border-left: none;
}
.second-nav li:second-child {
border-left: none;
}
.second-nav a {
color: #ebebeb;
display: block;
font-family: Capsuula;
font-size: 1.13em;
padding: 10px 30px;
text-decoration: none;
}
a:hover{
text-shadow: none;
color: rgb(237, 12, 12);
}
/*body*/
html {
position: relative;
height: 100%;
overflow-x: hidden;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 1.5em;
}
#wrap {
min-height: 100%;
}
#main {
padding-bottom: 60px;
}
body {
height: 100%;
margin: 0 0 60px;
background-color: rgb(255, 255, 255);
}
/*body location*/
#thumbs {
width: auto;
margin: 0;
text-align: center;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4em;
margin-top: 12%;
}
#thumbs img {
width: 300px;
height: 300px;
background-color: grey;
border-radius: 60px;
box-shadow: 0 1px 20px black;
}
.caption {
display: block;
}
/*footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
background-color: rgba(255, 255, 255) transparent;
background-color: rgba(255, 255, 255, 0.5);
}
.footer .quote {
float: right;
color: rgb(56, 56, 56);
}
.footer h6 {
font-size: 15px;
font-family: Capsuula;
margin: 0;
padding: 7px;
}
.footer p {
font-size: 21px;
font-family: Capsuula;
float: right;
margin: 0;
padding;
5px;
padding-right: 12px;
}
Here is my JSfiddle
In my normal full screen the three 300px x 300px squares fit in a line and everything is well and good but when the window size is reduced (like the one in my fiddle) the squares turn into two lines and are pushed off the screen. The footer stays in place at the bottom of the screen until you scroll then it just stays put and does not follow the bottom of the page.
I would like the footer to either get pushed to the bottom of the screen when the squares get forced into two lines.
-or-
Stay at the bottom of the screen and scroll with the user.
Any help would be very much appreciate!
I removed the excess body and turned it into a div. I ended the container before the footer and added a push div, equal in height to the footer. Seems to work now. Check out the fiddle
/*header*/
.main-header {
display: inline-block;
position: relative;
margin: 1%;
width: 98%;
top: 0;
left: 0;
min-width: 904px;
z-index: 10;
border: 0px solid #2675a9;
border-top: none;
border-radius: 0 0 0 0;
background-color: #606060;
background-color: rgb(29, 67, 129);
-webkit-box-shadow:0 1px 5px black;
-moz-box-shadow:0 1px 5px black;
box-shadow:0 1px 5px black;
}
.main-header:after {
content:" ";
display: table;
clear: both;
}
.main-header li {
display: inline;
}
.main-header img {
position: relative;
float: left;
top: 5.5px;
left: 5.5px;
width: 60px;
height: 60px;
}
.main-nav {
float: left;
margin: 12.5px 0 12.5px 5px;
padding: 0;
}
.main-nav a {
text-shadow: 0.06em 0.08em #2666b1;
letter-spacing: 4px;
color: #ebebeb;
font-family: StonyIsland;
display: block;
font-size: 2.5em;
padding: 0px 10px;
text-decoration: none;
margin: 0px;
font-weight: 300;
}
.logo {
height: 50px;
width: 50px;
top: 0;
left: 0;
padding: 10.5px;
margin: 0;
}
.second-nav {
float: right;
border-radius: 4px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 0;
margin-right: 0;
border: none;
padding: 9.5px;
}
.second-nav > li {
float: left;
border: solid 1px #ebebeb;
border-bottom: none;
border-top: none;
border-right: none;
}
.second-nav li:first-child {
border-left: none;
}
.second-nav li:second-child {
border-left: none;
}
.second-nav a {
color: #ebebeb;
display: block;
font-family: Capsuula;
font-size: 1.13em;
padding: 10px 30px;
text-decoration: none;
}
a:hover {
text-shadow: none;
color: rgb(237, 12, 12);
}
/*body*/
html {
position: relative;
height: 100%;
overflow-x: hidden;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 1.5em;
}
#wrap {
min-height: 100%;
}
#main {
padding-bottom: 60px;
}
body {
height: 100%;
margin: 0 0 60px;
background-color: rgb(255, 255, 255);
}
/*body location*/
#thumbs {
width: auto;
margin: 0;
text-align: center;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4em;
margin-top: 12%;
}
#thumbs img {
width: 300px;
height: 300px;
background-color: grey;
border-radius: 60px;
box-shadow: 0 1px 20px black;
}
.caption {
display: block;
}
/*footer*/
.push{height:60px;}
footer {
position: relative;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
background-color: rgba(255, 255, 255) transparent;
background-color: rgba(255, 255, 255, 0.5);
}
footer .quote {
float: right;
color: rgb(56, 56, 56);
}
footer h6 {
font-size: 15px;
font-family: Capsuula;
margin: 0;
padding: 7px;
}
footer p {
font-size: 21px;
font-family: Capsuula;
float: right;
margin: 0;
padding;
5px;
padding-right: 12px;
}
<body>
<div id="container">
<header class="main-header"> <img src="logo3.png" alt="logo" />
<ul class="main-nav">
<li><a id="home" href="index.html">Home</a>
</li>
</ul>
<ul class="second-nav">
<li><a id="about" href="About.html">About Us</a>
</li>
<li><a id="portfolio" href="Portfolio.html">Portfolio</a>
</li>
<li>Sports Complex
</li>
<li>Contact Us
</li>
</ul>
</header>
<div class="body">
<div class="frameT">
<div class="frameTC">
<div class="thumb" id="thumbs"> <a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">_______</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<span class="stretch"></span>
</div>
</div>
</div>
</div>
</div>
<div class="push"></div>
<footer class="footer">
<div class="quote">
<h6>"Hello"</h6>
<p>-</p>
</div>
</footer>
</body>
I have a slight problem with my code trying to get on the navbar, each section to have an equal amount of space and not have space according to how many characters they have in the title. For example, MAP should have as much as ABOUT.
Here is what it looks like now:
.wrap {
width: 90%;
background-image: url(images/navbarbackground.png);
background-repeat: no-repeat;
margin: auto;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
padding: 0px;
font-family: minecrafter;
}
.wrap:after {
content: " ";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.wrap ul {
display: table;
width: 95%;
}
.wrap li {
display: table-cell;
vertical-align: middle;
}
.wrap li a {
text-decoration: none;
background-color: #EEEEEE;
color: #666666;
padding: 6px 0 6px 0;
border: 1px solid #CCC;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
display: block;
text-align: center;
}
.wrap h2 {
margin-top: 10px;
margin-bottom: 10px;
text-transform: uppercase;
color: #ffffff;
width: 6em;
text-align: center;
line-height: 1.0;
letter-spacing: .04em;
display: in line-block;
vertical-align: middle;
float: left;
}
.wrap h2 span {
display: block;
letter-spacing: .17em;
}
.navwrap {
margin-top: 0px;
overflow: hidden;
padding-top: 16px;
padding-bottom: 0px;
margin-bottom: 10px;
}
<div class="wrap">
<h2 class="minecrafter">Miners <span>Union</span></h2>
<div class="navwrap">
<ul class="nav">
<li>Home
</li>
<li>Forums
</li>
<li>Donate
</li>
<li>Apply
</li>
<li>Map
</li>
</ul>
</div>
</div>
You could try this: fiddle
.wrap ul {
width:100%;
padding: 0;
}
.wrap li {
display:inline-block;
float: left;
width: 20%;
vertical-align:middle;
}
You just need
.wrap ul {
table-layout:fixed; /* this */
}
.wrap {
width: 90%;
background-image: url(images/navbarbackground.png);
background-repeat: no-repeat;
margin: auto;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
padding: 0px;
font-family: minecrafter;
}
.wrap:after {
content: " ";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.wrap ul {
display: table;
width: 80%; /* adjusted for demo only */
table-layout:fixed;
}
.wrap li {
display: table-cell;
vertical-align: middle;
}
.wrap li a {
text-decoration: none;
background-color: #EEEEEE;
color: #666666;
padding: 6px 0 6px 0;
border: 1px solid #CCC;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
display: block;
text-align: center;
}
.wrap h2 {
margin-top: 10px;
margin-bottom: 10px;
text-transform: uppercase;
color: #ffffff;
width: 6em;
text-align: center;
line-height: 1.0;
letter-spacing: .04em;
display: in line-block;
vertical-align: middle;
float: left;
}
.wrap h2 span {
display: block;
letter-spacing: .17em;
}
.navwrap {
margin-top: 0px;
overflow: hidden;
padding-top: 16px;
padding-bottom: 0px;
margin-bottom: 10px;
}
<div class="wrap">
<h2 class="minecrafter">Miners <span>Union</span></h2>
<div class="navwrap">
<ul class="nav">
<li>Home
</li>
<li>Forums
</li>
<li>Donate
</li>
<li>Apply
</li>
<li>Map
</li>
</ul>
</div>
</div>
Or look this way
.nav{
list-style: none;
}
.nav li{
display: inline-block;
min-width: 100px;
}
.nav li a{
text-decoration: none;
background-color: #EEEEEE;
color: #666666;
padding: 6px;
border: 1px solid #CCC;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
display: block;
text-align: center;
}
My navigation consists of many elements (including CSS hack triangles). Because of this, I have no idea how to add an in-set style border to it.
Basically, this is what I have: http://i.imgur.com/XVfLLtI.png
And this is what I want (Designed in Photoshop): http://i.imgur.com/tDjRXLo.png
HTML:
<div class="nav">
<div class="navbody">
<div class="navheader">
<a href="index.html" title="Home Page" style="text-decoration: none;color:inherit;"><img class="logo" src="images/logo.png">
<h1 class="GBHS" >GBHS</h1>
<h1 class="Athletics">ATHLETICS</h1></a>
</div>
<ul class="nav-menu">
<li>House Points</li>
<li>Results Entry</li>
<li>Participation Entry</li>
<li>Sign In / Sign Up</li>
</ul>
<img class="runico" src="images/run.png">
</div>
<div class="triangles"><div class="triangle1"></div><div class="triangle2"></div></div>
</div>
CSS:
.nav {
width: 282px;
float: left;
}
.navbody {
background-color: #afa094;
box-shadow: 0px 0px 40px 2px #202020;
text-align: center;
}
.navheader {
height: 130px;
}
.logo {
width: 70px;
float: left;
padding: 5px 0px 0px 22px;
}
.nav h1 {
margin: 0;
font-family: 'Open Sans', sans-serif;
text-align: left;
line-height: 26px;
}
.GBHS{color: #2f8168; padding-top: 10px;}.Athletics{color: #0b3d68;}
.nav-menu {
width: 192px;
margin: 0 auto;
font-size: 20px;
padding: 0;
}
.nav-menu li {
list-style: none;
border-bottom: 2px solid #fff;
}
.nav-menu li:last-child {
border-bottom: none;
}
.nav-menu li a {
padding: 10px 0;
display: block;
color: #102b42;
text-decoration: none;
}
.nav-menu li a:hover {
background-color: rgba(0, 0, 0, .05);
}
.runico {
width: 150px;
margin: 30px 0 30px 0;
}
.triangle1 {
display: inline-block;
border-right: 141px solid transparent;
border-left: 0px solid transparent;
border-top: 141px solid #afa094;
}
.triangle2 {
display: inline-block;
border-left: 141px solid transparent;
border-right: 0px solid transparent;
border-top: 141px solid #afa094;
}
FIDDLE: http://jsfiddle.net/JDzcP/ Don't worry about the images not being there, they still take up the space.
ALSO while I have the expertise of the stackoverflow community, how can I add a box shadow to the triangles?