First of all, I've looked at all of the suggested links. I'm new to CSS and don't know how to incorporate it into this.
I want to have the h1 header that says "Basics" align with the tab that says "Site Basics." They already sort of do, but they are not directly aligned with each other.
Here is the HTML:
<!DOCTYPE html>
<html>
<header>
<title>Site Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</header>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Site Title</h3>
</div>
</div>
</div>
<div class="container">
<div class="support_container">
<div id="left_nav" class="h_navbar">
<h1 class="h1_title">Basics</h1>
</div>
<div id="right_nav" class="h_navbar">
<ul id="">
<li class="h_tab" id="tab_basics">Site Basics</li>
<li class="h_tab" id="tab_comparison">Comparision</li>
<li class="h_tab" id="tab_whats_new">What's New</li>
<li class="h_tab" id="tab_faq">FAQ</li>
<li class="h_tab" id="tab_issues">Known Issues</li>
<li class="h_tab" id="tab_bug">Report a Bug</li>
<li class="h_tab" id="tab_email">Email Us<li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Custom CSS:
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/** Container **/
.support_container
{
background-color:white;
padding:30px;
margin:0 auto;
border-radius:7px;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none; /* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #333;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 30px;
}
/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #fff; /* IE8 proofing */
color: rgba(255,255,255,.75);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: #fff;
border-bottom-color: #fff;
}
#media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
}
.h_p {
color:black;
text-shadow:none;
}
#nav_href{
color:black;
text-shadow:none;
}
.h_tab {
display:block;
border-top: 1px solid #eee;
padding: 11px 25px 9px 0;
text-decoration:none;
}
.h1_title {
color:black;
text-shadow:none;
}
#right_nav {
margin: 30px -30px 30px 0;
width:190px;
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}
/*
* Footer
*/
.mastfoot {
color: #999; /* IE8 proofing */
color: rgba(255,255,255,.5);
}
/*
* Affix and center
*/
#media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}
#media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
}
Here you go: http://jsbin.com/vugekikana/3/edit
I just had to modify the body css not to be text-align:center and added this:
#left_nav{ display:inline-block; margin-top:10px; }
#right_nav{ display:inline-block; vertical-align:top; }
Assuming you want them aligned to the left then remove text-align:center; from your body and add padding:0; to the ul element of the nav in your stylesheet.
Alternatively if you want the nav in the center then add display: inline; to nav_href so use:
#nav_href {
display: inline;
}
Related
Here is my code below. I have this extra space in my navbar, not sure why it's there. I want only 3 boxes. Maybe, I am making this code more difficult than it should be my mistake. (I am just learning HTML ...)
/* Navigation bar */
.nav {
width: 510px;
margin: auto;
list-style: none;
}
.nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
/*border: : 1px solid blue;*/
/* This is the color of the nav bar */
background-color: grey;
background: linear-gradient( #c7c7c7, #edeae2);
}
.nav li {
margin: 0px;
float: left;
}
.nav a {
display: block;
/* The text color */
color: black;
/* Sets the text to be centered in the box*/
text-align: center;
/* The width */
width: 130px;
/* How the text is positioned in the columns*/
padding: 20px 10px 20px 10px;
/* The font size*/
font-size: 25px;
/* This removes the underline remove the text */
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: orange;
}
.active {
background-color: darkorange;
}
<!-- The navigation bar is created here -->
<div class="nav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Games</li>
<li>Contact Us</li>
</ul>
</div>
You should update this css part, if you need a width please assign.
.nav ul {
display:table;
}
.nav {
width: 510px;
margin: auto;
list-style: none;
}
.nav ul {
list-style-type: none;
display:table;
margin: 0px;
padding: 0px;
overflow: hidden;
/*border: : 1px solid blue;*/
/* This is the color of the nav bar */
background-color: grey;
background: linear-gradient( #c7c7c7, #edeae2);
}
.nav li {
margin: 0px;
float: left;
}
.nav a {
display: block;
/* The text color */
color: black;
/* Sets the text to be centered in the box*/
text-align: center;
/* The width */
/* width: 130px; */
/* How the text is positioned in the columns*/
padding: 20px 10px 20px 10px;
/* The font size*/
font-size: 25px;
/* This removes the underline remove the text */
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: orange;
}
.active {
background-color: darkorange;
}
<div class="nav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Games</li>
<li>Contact Us</li>
</ul>
</div>
.nav a here ((130px + 20px)*3) Is not equal to 510px. try to assign the correct measurements
The following code will work
.nav {
width: 510px;/*Remove this line*/
...
display: table;/*<<<<<<<<Assign the required width*/
}
or
.nav ul {
...
display: table;/*<<<<<<<<Assign the required width*/
}
You can use Flexbox here. And for boxes you can use calc() here.
Stack Snippet
.nav {
width: 510px;
margin: auto;
list-style: none;
}
.nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: grey;
background: linear-gradient( #c7c7c7, #edeae2);
display: flex;
}
.nav li {
flex: 0 0 calc(100%/3);
}
.nav a {
display: block;
color: black;
text-align: center;
padding: 20px 10px 20px 10px;
font-size: 25px;
text-decoration: none;
box-sizing: border-box;
}
.nav li a:hover:not(.active) {
background-color: orange;
}
.active {
background-color: darkorange;
}
<div class="nav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Games</li>
<li>Contact Us</li>
</ul>
</div>
You should add display: table on the .nav class!
This should be your final code:
/* Navigation bar */
.nav {
/*width: 510px;*/
margin: auto;
list-style: none;
display: table;
}
.nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
/*border: : 1px solid blue;*/
/* This is the color of the nav bar */
background-color: grey;
background: linear-gradient( #c7c7c7, #edeae2);
}
.nav li {
margin: 0px;
float: left;
}
.nav a {
display: block;
/* The text color */
color: black;
/* Sets the text to be centered in the box*/
text-align: center;
/* The width */
width: 130px;
/* How the text is positioned in the columns*/
padding: 20px 10px 20px 10px;
/* The font size*/
font-size: 25px;
/* This removes the underline remove the text */
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: orange;
}
.active {
background-color: darkorange;
}
<!-- The navigation bar is created here -->
<div class="nav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Games</li>
<li>Contact Us</li>
</ul>
</div>
Set your .nav width to 450px, which is the sum of your li elements
/* Navigation bar */
.nav {
width: 450px;
margin: auto;
list-style: none;
}
.nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
/*border: : 1px solid blue;*/
/* This is the color of the nav bar */
background-color: grey;
background: linear-gradient( #c7c7c7, #edeae2);
}
.nav li {
margin: 0px;
float: left;
}
.nav a {
display: block;
/* The text color */
color: black;
/* Sets the text to be centered in the box*/
text-align: center;
/* The width */
width: 130px;
/* How the text is positioned in the columns*/
padding: 20px 10px 20px 10px;
/* The font size*/
font-size: 25px;
/* This removes the underline remove the text */
text-decoration: none;
}
.nav li a:hover:not(.active) {
background-color: orange;
}
.active {
background-color: darkorange;
}
<!-- The navigation bar is created here -->
<div class="nav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Games</li>
<li>Contact Us</li>
</ul>
</div>
I'm writing a homepage and I need a dropbox menu, so I found a demo for dropbox menu from Googling. But the codes did not work properly even if I applied the demo. Its layout is quite ridiculous.
The #menubar is parallel with #site_content but I intended to place #memubar that contains dropbox menu vertically followed by #site_content. Please refer below source code for detail.
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body {
font: normal .80em trebuchet ms, sans-serif;
background: #EEE;
color: #5D5D5D;
}
#site_content h1 {
font: normal 140%'century gothic', arial, sans-serif;
}
a,
a:hover {
outline: none;
text-decoration: underline;
color: #000000;
}
a:hover {
text-decoration: none;
color: #747474;
}
.left {
float: left;
width: auto;
margin-right: 10px;
}
.right {
float: right;
width: auto;
margin-left: 10px;
}
.center {
display: block;
text-align: center;
margin: 20px auto;
}
blockquote {
margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;
}
ul li {
float: left;
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a {
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul.dropdown {
min-width: 100%;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
#main,
#logo,
#menubar,
#site_content,
#footer {
margin-left: auto;
margin-right: auto;
}
#main {
padding-bottom: 20px;
}
#header {
background: transparent;
height: 170px;
}
#menubar {
height: 24px;
width: 900px;
}
#site_content {
width: 858px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 10px 20px 20px 20px;
background: #fcfcfa;
border: 15px solid #FFF;
}
#site_content h1 a {
text-decoration: none;
}
#site_content.article {
font-size: 100%
}
.sidebar {
float: right;
width: 190px;
padding: 0 15px 20px 15px;
}
.sidebar ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
.sidebar li {
list-style: none;
padding: 0 0 7px 0;
}
.sidebar li a,
.sidebar li a:hover {
padding: 0 0 0 25px;
display: block;
background: transparent url(link.png) no-repeat left center;
}
.sidebar li a.selected {
color: #444;
text-decoration: none;
}
.dropdown {
position: relative;
/** Make it fit tightly around it's children */
display: inline-block;
}
.dropdown .dropdown-menu {
position: absolute;
/**
* Set the top of the dropdown menu to be positioned 100%
* from the top of the container, and aligned to the left.
*/
top: 100%;
left: 0;
/** Allow no empty space between this and .dropdown */
margin: 0;
list-style: none;
/** Remove list bullets */
width: 100%;
/** Set the width to 100% of it's parent */
padding: 0;
}
/**
* Apply these styles to .dropdown-menu when user hovers
* over .dropdown
*/
.dropdown:hover .dropdown-menu {
/** Show dropdown menu */
display: block;
}
<!DOCTYPE HTML>
<html>
<head>
<title>main</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="style/style.css?ver=1" />
</head>
<body>
<div id="main">
<div id="header">
<div id="logo">
<h1><span class="logo_colour">Homepage</span></h1>
<h2>Test</h2>
</div>
<div id="menubar">
<ul id="menu">
<li class="selected">Menu1
</li>
<li> Menu2▾
<ul class="dropdown">
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</li>
<li>Memu3
</li>
<li>Menu4
</li>
</ul>
</div>
</div>
<div id="site_content">
<h1>Welcome to Homepage<br/> We welcome you. <br/><br/><br/></h1>
</div>
<div id="footer">
<section align="left" class="visitor bg_white">
<b>Address:</b> Address
<br />
<b>Phone:</b> Phone
<br/>
<b>Email:</b> test#test.com
<br/>
<br/>
</section>
<p class="day">Copyright © 2016 CAS Lab. All rights reserved.</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/common.js?ver=1"></script>
</body>
</html>
If you want nav and content side-by-side, the easiest option is to utilize flexbox. I also removed the 900px width you had set on the menu and cleaned up the dropdown positioning.
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body {
font: normal .80em trebuchet ms, sans-serif;
background: #EEE;
color: #5D5D5D;
}
#site_content h1 {
font: normal 140%'century gothic', arial, sans-serif;
}
a,
a:hover {
outline: none;
text-decoration: underline;
color: #000000;
}
a:hover {
text-decoration: none;
color: #747474;
}
.left {
float: left;
width: auto;
margin-right: 10px;
}
.right {
float: right;
width: auto;
margin-left: 10px;
}
.center {
display: block;
text-align: center;
margin: 20px auto;
}
blockquote {
margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;
}
ul li {
position: relative;
line-height: 21px;
text-align: left;
}
ul li a {
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul.dropdown {
min-width: 100%;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
right: -125px;
top: 0;
}
ul li:hover ul.dropdown {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
#main,
#logo,
#menubar,
#site_content,
#footer {
margin-left: auto;
margin-right: auto;
}
#main {
padding-bottom: 20px;
display: flex;
flex-direction: row;
}
#header {
background: transparent;
}
#menubar {
height: 24px;
}
#site_content {
width: 858px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 10px 20px 20px 20px;
background: #fcfcfa;
border: 15px solid #FFF;
}
#site_content h1 a {
text-decoration: none;
}
#site_content.article {
font-size: 100%
}
.sidebar {
float: right;
width: 190px;
padding: 0 15px 20px 15px;
}
.sidebar ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
.sidebar li {
list-style: none;
padding: 0 0 7px 0;
}
.sidebar li a,
.sidebar li a:hover {
padding: 0 0 0 25px;
display: block;
background: transparent url(link.png) no-repeat left center;
}
.sidebar li a.selected {
color: #444;
text-decoration: none;
}
.dropdown {
position: relative;
/** Make it fit tightly around it's children */
display: inline-block;
}
.dropdown .dropdown-menu {
position: absolute;
/**
* Set the top of the dropdown menu to be positioned 100%
* from the top of the container, and aligned to the left.
*/
top: 100%;
left: 0;
/** Allow no empty space between this and .dropdown */
margin: 0;
list-style: none;
/** Remove list bullets */
width: 100%;
/** Set the width to 100% of it's parent */
padding: 0;
}
/**
* Apply these styles to .dropdown-menu when user hovers
* over .dropdown
*/
.dropdown:hover .dropdown-menu {
/** Show dropdown menu */
display: block;
}
<!DOCTYPE HTML>
<html>
<head>
<title>main</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="style/style.css?ver=1" />
</head>
<body>
<div id="main">
<div id="header">
<div id="logo">
<h1><span class="logo_colour">Homepage</span></h1>
<h2>Test</h2>
</div>
<div id="menubar">
<ul id="menu">
<li class="selected">Menu1
</li>
<li> Menu2▾
<ul class="dropdown">
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</li>
<li>Memu3
</li>
<li>Menu4
</li>
</ul>
</div>
</div>
<div id="site_content">
<h1>Welcome to Homepage<br/> We welcome you. <br/><br/><br/></h1>
</div>
<div id="footer">
<section align="left" class="visitor bg_white">
<b>Address:</b> Address
<br />
<b>Phone:</b> Phone
<br/>
<b>Email:</b> test#test.com
<br/>
<br/>
</section>
<p class="day">Copyright © 2016 CAS Lab. All rights reserved.</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/common.js?ver=1"></script>
</body>
</html>
This question already has answers here:
Dropdown list alignment issue (HTML/CSS)
(3 answers)
Closed 7 years ago.
I've asked a question like this before, but received no answers. This is important, as it is an integral part of my website.
I am trying to create a dropdown menu. The 'Team' and 'News' links (when you hover over them) are the issue. I want the links beneath them to be in line with their parent.
I've tried to resolve the issue with padding, but have gotten nowhere.
Please help.
http://codepen.io/DocRow10/pen/hjIkq
<body>
<div id="container">
<div id="banner" class="clearfix">
<img id="crest" src="images/cecc-logo.png" />
<h1>Test Website</h1>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>About</li>
<li>News
<ul>
<li>Social Events</li>
</ul>
</li>
<li>Team
<ul>
<li>Players</li>
<li>Fixtures/Results</li>
<li>Statistics</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Menu
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>
body {
background-color: rgb(200, 220, 255);
/* #455868 */
}
#container {
height: 1000px;
margin-left: auto;
margin-right: auto;
}
#banner {
width: 100%;
text-align: center;
}
#crest {
height: 150px;
width: 180px;
display: inline-block;
}
#banner h1 {
display: inline-block;
}
/* Bat Colour rgb(38, 124, 196); */
#media only screen and (min-width : 480px) {
#banner h1 {
font-size: 30px;
display: inline-block;
}
}
#media only screen and (min-width : 768px) {
#banner h1 {
font-size: 36px;
display: inline-block;
}
}
#media only screen and (min-width : 980px) {
#banner h1 {
font-size: 47px;
display: inline-block;
}
}
nav {
height: 40px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: rgb(238, 0, 0);
font-size: 13pt;
font-family: neris;
border-bottom: 2px solid #283744;
}
nav > ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav > ul > li {
display: inline;
float: left;
}
nav ul a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul ul li {
display: block;
}
main {
width: 90%;
height: 200px;
margin-right: auto;
margin-left: auto;
background-color: rgb(38, 124, 196);
}
footer {
width: 90%;
height: 50px;
margin-right: auto;
margin-left: auto;
background-color: rgb(0, 0, 0);
}
If I understood correctly, this should help:
ul ul {
padding: 0;
}
I think it will helps you,
HTML
<body>
<div id="container">
<div id="banner" class="clearfix">
<img id="crest" src="images/cecc-logo.png" />
<h1>Test Website</h1>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>About</li>
<li>News
<ul>
<li>Social Events</li>
</ul>
</li>
<li>Team
<ul>
<li>Players</li>
<li>Fixtures/Results</li>
<li>Statistics</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Menu
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>
css
body {
background-color: rgb(200, 220, 255);
/* #455868 */
}
#container {
height: 1000px;
margin-left: auto;
margin-right: auto;
}
#banner {
width: 100%;
text-align: center;
}
#crest {
height: 150px;
width: 180px;
display: inline-block;
}
#banner h1 {
display: inline-block;
}
/* Bat Colour rgb(38, 124, 196); */
#media only screen and (min-width: 480px) {
#banner h1 {
font-size: 30px;
display: inline-block;
}
}
#media only screen and (min-width: 768px) {
#banner h1 {
font-size: 36px;
display: inline-block;
}
}
#media only screen and (min-width: 980px) {
#banner h1 {
font-size: 47px;
display: inline-block;
}
}
nav {
height: 40px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: rgb(238, 0, 0);
font-size: 13pt;
font-family: neris;
border-bottom: 2px solid #283744;
}
nav > ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav > ul > li {
display: inline;
float: left;
}
nav > ul > li > ul {
padding: 0;
}
nav > ul > li > ul li a {
border: 0;
text-align: left;
width: 100%;
}
nav ul a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover,
nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul ul li {
display: block;
}
main {
width: 90%;
height: 200px;
margin-right: auto;
margin-left: auto;
background-color: rgb(38, 124, 196);
}
footer {
width: 90%;
height: 50px;
margin-right: auto;
margin-left: auto;
background-color: rgb(0, 0, 0);
}
You're missing
nav ul ul li { padding: 0; }
While trying out flexboxgrid out of the box for the first time in my chrome v46 1366 resolution a sample menu I created appears to be stacked vertically rather than horizontally as a flex layout should be. When you tryout the code in a jsfiddle however, it appears to be okay. I believe it has something to do with the container width? How should i fix it?
Here's the fiddle:
HTML:
<div class="container">
<div class="row center-xs middle-xs">
<div class="col-sm-2 col-xs-4">
<h1>My Logo</h1>
</div>
<div class="col-sm-8 col-sm-offset-2 col-xs-12">
<nav>
<ul class="row">
<li class="col-xs">Home
</li>
<li class="col-xs">About
</li>
<li class="col-xs">Menu
</li>
<li class="col-xs">News
</li>
<li class="col-xs">Photo
</li>
</ul>
</nav>
</div>
</div>
<!--end of .row-->
<h2>A flexible menu based on the
Flexbox Grid framework.
</h2>
<p class="p">Demo by George Martsoukos. See article.</p>
</div>
CSS:
body {
/* display: flex;*/
/* flex-direction: column;*/
background: #4c493e;
color: white;
padding-top: 10px;
}
h1, ul, li {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
.p {
text-align: center;
color: white;
padding-top: 150px;
font-size: .9em;
}
.p a {
color: white;
text-decoration: underline;
}
/* LOGO STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 {
margin-left: 5px;
padding: 10px;
font-size: 24px;
background: #ffee91;
}
h1 a {
display: block;
}
/* MENU STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
div.row {
min-height: 80px;
padding-left: 20px;
padding-right: 20px;
margin: 0;
}
.col-xs {
padding: 0;
border-right: solid 1px #444;
}
nav {
margin-right: 5px;
}
ul a {
display: block;
padding: 15px 0;
text-transform: uppercase;
background: #fff0a0;
transition: background .3s ease;
}
ul a:before {
font-family: FontAwesome;
padding-right: 5px;
font-size: 22px;
display: inline-block;
}
ul li:nth-child(1) a:before {
content:'\f015';
}
ul li:nth-child(2) a:before {
content:'\f0eb';
}
ul li:nth-child(3) a:before {
content:'\f115';
}
ul li:nth-child(4) a:before {
content:'\f1ea';
}
ul li:nth-child(5) a:before {
content:'\f03e';
}
ul a:hover {
background: white;
}
/* SECOND LINE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h2 {
text-align: center;
padding: 5px;
}
h2 a {
padding: 5px;
border-bottom: 2px solid #FEB41C;
transition: all .3s ease;
color: white;
}
h2 a:hover {
background: #FEB41C;
color: black;
}
/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media screen and (max-width: 876px) {
nav {
margin: 0 5px;
}
div.row {
height: auto;
}
h1 {
font-size: 18px;
}
h1, ul {
margin: 20px 0;
}
ul a {
font-size: 0;
}
ul a:before {
padding: 0 5px;
font-size: 32px;
}
}
#media screen and (max-width: 500px) {
ul a:before {
font-size: 22px;
}
}
#media screen and (min-width: 1600px) {
.col-sm-offset-2 {
margin-left: 16.666%;
}
}
#media screen and (min-width: 1600px) {
.col-sm-offset-2 {
margin-left: 16.666%;
}
}
Here's the image from my browser:
You are missing the flexboxgrid stylesheet link in your primary document, but not the fiddle demo.
Add this to your HTML doc in the <head> section:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/flexboxgrid/6.3.0/flexboxgrid.min.css">
It's already in the fiddle (see "External Resources").
I have two div's that I am trying to put space between <div id="menu"> and <div class="Content">.
Here is a screenshot of what it currently looks like and as you can see the image is right up against the bottom of the navigation menu.
I have added margins to both of them, but so far nothing that I do has worked. No amount of pixels has given any space between my navigation and the page content.
I have a margin-bottom on the <div class="Logo"> and that worked to put space below it so I just can't seem to figure out what I cant put space below the navigation and/or above the content.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>EGLT Home</title>
<link rel="stylesheet" type="text/css" href="site.css" />
<script language="javascript" type="text/javascript" src="responsivemenu.js"></script>
</head>
<body>
<div class="box-effect">
<div class="Header">
<div class="Logo">
<img src="images/EverClearLogo.png" width="306px" height="125px" alt="Company Logo" />
</div>
<div class="Contact-Info">
<img src="images/icon_Email.png" width="50px" height="50px" alt="Email Ever Clear" />
<img src="images/icon_Facebook.png" width="50px" height="50px" alt="Ever Clear Facebook Page" />
<img src="images/icon_Phone.png" width="50px" height="50px" alt="Go To Contact Us Page" />
</div>
<div id="menu" class="nav">
<ul>
<li><span class="icon"><i aria-hidden="true" class="icon-home"></i><span></span>Home</span></li>
<li><span class="icon"><i aria-hidden="true" class="icon-newspaper"></i><span></span>About Us</span></li>
<li><span class="icon"><i aria-hidden="true" class="icon-hammer"></i><span></span>Services</span></li>
<li><span class="icon"><i aria-hidden="true" class="icon-image"></i><span></span>Gallery</span></li>
<li><span class="icon"><i aria-hidden="true" class="icon-phone"></i><span></span>Contact Us</span></li>
</ul>
</div>
</div>
<div class="Content">
<div class="Home-Left">
<img src="images/EverClearEdited.jpg" width="547px" height="315px" alt="Ever Clear Grading Landscaping Trucking" />
</div>
<div class="Home-Right">
</div>
</div>
<div class="Footer">
<div class="Copyright">
© Copyright: Jason Milam - 2015
</div>
</div>
</div>
</body>
</html>
CSS:
/* SHARED STYLES */
body {
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
background-image: url("images/RedHexagons.jpg");
}
.Header {
height: 125px;
width: 100%;
position: relative;
margin-bottom: 20px;
}
.Footer {
float: left;
clear: left;
}
.box-effect {
margin-left: auto;
margin-right: auto;
margin-top: 25px;
margin-bottom: 25px;
width: 90%;
padding: 25px;
background-color:#FFF;
background: rgba(255,255,255,0.85);
border-radius: 15px;
overflow: hidden;
}
.Logo {
width: 306px;
margin-bottom: 20px;
}
.Contact-Info {
font-size: 20px;
display: block;
position: absolute;
right: 0;
top: 0;
}
.Copyright {
margin-top: 10px;
}
/* HOME PAGE STYLES */
.Content {
margin-top: 30px;
}
.Home-Left {
width: 50%;
float: left;
}
.Home-Right {
width: 50%;
}
/* NAVIGATION MENU */
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?8n7hjk');
src:url('fonts/icomoon.eot?#iefix8n7hjk') format('embedded-opentype'),
url('fonts/icomoon.woff?8n7hjk') format('woff'),
url('fonts/icomoon.ttf?8n7hjk') format('truetype'),
url('fonts/icomoon.svg?8n7hjk#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.svg?8n7hjk#icomoon') format('svg');
}
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#menu {
display: block;
margin-bottom: 20px;
}
.icon-home:before {
content: "\e900";
}
.icon-newspaper:before {
content: "\e904";
}
.icon-image:before {
content: "\e90d";
}
.icon-phone:before {
content: "\e942";
}
.icon-hammer:before {
content: "\e996";
}
.icon-menu:before {
content: "\e9bd";
}
/* Global CSS for all screen sizes */
.nav {
display: block;
margin-bottom:30px;
}
.nav ul {
max-width: 1200px;
margin: auto;
padding: 0;
list-style: none;
font-size: 1em;
font-weight: 300;
}
.nav li span {
display: block;
}
.nav a {
display: block;
color: rgba(249, 249, 249, .9);
text-decoration: none;
transition: color .5s, background .5s, height .5s;
}
.nav i{
/* Make the font smoother for Chrome */
transform: translate3d(0, 0, 0);
}
/* Remove the blue Webkit background when element is tapped */
a, button {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* Hover effect for nav menu */
.no-touch .nav ul:hover a {
color: rgba(0, 0, 0, .5);
}
.no-touch .nav ul:hover a:hover {
color: rgba(0, 0, 0, 0.99);
}
.nav li:nth-child(6n+1) {
background: #000000;
}
.nav li:nth-child(6n+2) {
background: #000000;
}
.nav li:nth-child(6n+3) {
background: #000000;
}
.nav li:nth-child(6n+4) {
background: #000000;
}
.nav li:nth-child(6n+5) {
background: #000000;
}
.no-touch .nav li:nth-child(6n+1) a:hover,
.no-touch .nav li:nth-child(6n+1) a:active,
.no-touch .nav li:nth-child(6n+1) a:focus {
border-bottom: 4px solid #E36220;
}
.no-touch .nav li:nth-child(6n+2) a:hover,
.no-touch .nav li:nth-child(6n+2) a:active,
.no-touch .nav li:nth-child(6n+2) a:focus {
border-bottom: 4px solid #E36220;
}
.no-touch .nav li:nth-child(6n+3) a:hover,
.no-touch .nav li:nth-child(6n+3) a:active,
.no-touch .nav li:nth-child(6n+3) a:focus {
border-bottom: 4px solid #E36220;
}
.no-touch .nav li:nth-child(6n+4) a:hover,
.no-touch .nav li:nth-child(6n+4) a:active,
.no-touch .nav li:nth-child(6n+4) a:focus {
border-bottom: 4px solid #E36220;
}
.no-touch .nav li:nth-child(6n+5) a:hover,
.no-touch .nav li:nth-child(6n+5) a:active,
.no-touch .nav li:nth-child(6n+5) a:focus {
border-bottom: 4px solid #E36220;
}
/* Place the icon */
.icon {
padding-top: 1.4em;
}
.icon + span {
margin-top: 2.1em;
transition: margin .5s;
}
/* Animating the height of the element*/
.nav a {
height: 7em;
}
/* Making the text follow the height animation */
.no-touch .nav a:hover .icon + span {
margin-top: 3.2em;
transition: margin .5s;
}
/* Positioning the icons and preparing for the animation*/
.nav i {
position: relative;
display: inline-block;
margin: auto;
padding:0.4em;
border-radius: 50%;
font-size: 1.8em;
box-shadow: 0 0 0 0.8em transparent;
background: rgba(255,255,255,0.1);
transform: translate3d(0, 0, 0);
transition: box-shadow .6s ease-in-out;
}
/* Styling the toggle menu link and hiding it */
.nav .navtoogle{
display: none;
width: 100%;
padding: 0.5em 0.5em 0.8em;
font-family: 'Lato',Calibri,Arial,sans-serif;
font-weight: normal;
text-align: left;
color: rgb(7, 16, 15);
font-size: 1.2em;
background: none;
border: none;
border-bottom: 4px solid rgb(221, 221, 221);
cursor: pointer;
}
.navtoogle i{
z-index:-1;
}
.icon-menu {
position: relative;
top: 3px;
line-height: 0;
font-size: 1.6em;
}
/* RESPONSIVE STYLES */
#media (min-width: 800px) {
/* Transforms the list into a horizontal navigation */
.nav li {
float: left;
width: 16.66666666666667%;
text-align: center;
transition: border .5s;
}
.nav a {
display: block;
width: auto;
}
}
/* The "tablet" and "mobile" version */
#media (max-width: 799.9px) {
/* Instead of adding a border, we transition the background color */
.no-touch .nav ul a:hover,
.no-touch .nav ul a:active,
.no-touch .nav ul a:focus {
background: #000000;
}
.nav ul li {
transition: background 0.5s;
}
}
/* CSS for a 2x3 columns version */
#media (min-width: 520px) and (max-width: 799px) {
/* Creating the 2 column layout using floating elements once again */
.nav li {
display: block;
float: left;
width: 50%;
height: 90px;
}
/* Adding some padding to make the elements look nicer */
.nav a {
padding-left: 1em;
}
/* Displaying the icons on the left, and the text on the right side using inline-block */
.nav li span,
.nav li span.icon {
display: inline-block;
}
.nav li span.icon {
width: 50%;
}
.nav li .icon + span {
font-size: 1em;
}
.icon + span {
position: relative;
/*top: -0.2em*/
}
/* Adapting the animation for smaller screens*/
.nav li i {
display: inline-block;
padding: 8% 9%;
border: 4px solid transparent;
border-radius: 50%;
font-size: 1.5em;
background: rgba(255,255,255,0.1);
transition: border .5s;
}
/* Transition effect on the border color */
.no-touch .nav li:hover i,
.no-touch .nav li:active i,
.no-touch .nav li:focus i {
border: 4px solid rgba(255,255,255,0.1);
}
}
/* Adapting the font size and width for smaller screns*/
#media (min-width: 32.5em) and (max-width: 38.688em) {
.nav li span.icon {
width: 50%;
}
.nav li .icon + span {
font-size: 0.9em;
}
}
#media (max-width: 32.438em) {
/* Unhiding the styled menu link */
.nav .navtoogle{
margin: auto;
display: block;
}
/* Animating the height of the navigation when the button is clicked */
/* If JavaScript is disabled, the menu stays open */
.no-js .nav ul {
max-height: 30em;
overflow: hidden;
}
/* When JavaScript is enabled, we hide the menu */
.js .nav ul {
max-height: 0em;
overflow: hidden;
}
/* Displaying the menu when the user has clicked on the button */
.js .nav .active + ul {
max-height: 30em;
overflow: hidden;
transition: max-height .4s;
}
/* Adapting the layout of the menu for smaller screens */
.nav li span {
display: inline-block;
height: 100%;
}
.nav a {
padding: 0.5em;
}
.icon + span {
margin-left: auto;
font-size: 0.8em;
}
.nav li {
border-left: 8px solid #E36220;
}
/* make the nav bigger on touch screens */
.touch .nav a {
padding: 0.8em;
}
}
The reason the margin-bottom is working as applied to .menu is two-fold. First, there is a height on .Header that is smaller than the content it contains. Second, your floating all of the li elements left, thus .menu really has no height. If you remove the height from .Header, and remove float:left from the li elements, and instead use display:inline-block on them, the margin works.
Then your li elements will need to be fixed a bit so there's not space in between them.
your .nav li is floated, add a clear:both div after your menu and it should solve the problem