I am trying to center nav tag within the main-container div, but it seems to have a bit too much space on the right. I tried margin: 0 auto method as well as display: inline/inline-block and text-align on the child element - but it does not work.
body {
background: #000;
}
.main-container {
margin: 0 auto;
width: 90%;
overflow: hidden;
background: #fff;
}
.main-container nav {
width: 100%;
display: block;
margin: 10px 0;
}
.main-container nav ul {
list-style-type: none;
}
.main-container nav ul li {
width: 48%;
display: block;
float: left;
height: 300px;
margin: auto auto 10px 10px;
}
.main-container nav ul li.one {
background: url('http://media.npr.org/images/picture-show-flickr-promo.jpg');
background-size: cover;
overflow: hidden;
}
a {
display: block;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
}
a span {
position: relative;
top: 40%;
font-size: 2em;
z-index: 1000;
}
<div class="main-container">
<nav>
<ul>
<li class="fruits"><span> One </span></li>
<li class="vegetables"><span> Two </span></li>
<li class="carbohydrates"><span> Three </span></li>
<li class="proteins"><span> Four </span></li>
<li class="junk-food"><span> Five </span></li>
<li class="health-tips"><span> Six </span></li>
</ul>
</nav>
</div>
Hi now used to this
.main-container nav ul{padding:0;}
or used to always css reset
Demo
The problem:
ul element has padding and margin by default. You have to set those property to 0.
Jsfiddle
.main-container nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
Related
I'm very new to coding and am working on a fictitious website for a restaurant. I can't seem to figure out how to remove the gap between my drop down menu and top navigation bar under the menu section. Ideally I would like the pink drop down box to be directly under the black nav bar. Any suggestions on what I have done wrong? I've played around with margins and padding everywhere. Even did a margin 0 and padding 0 at the start of my CSS page to see if that wold have an effect, it didn't.
Attached is my code for HMTL and CSS
body {
background-color: #41393d;
}
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: black;
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: black;
}
.logo_container {
height: 100%;
display: table;
float: left;
}
.logo {
height: 100%;
display: table-cell;
vertical-align: middle;
} /* Navigation */
.navigation {
float: right;
height: 100%;
} .navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 0px 20px;
position: relative;
}
a:hover {
color: #8a8c8f !important;
} .navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#BE1E2D;
font-family: athelas,
serif; font-style:normal;
text-decoration: none;
} .sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: #d4a18d;
} .navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
<!DOCTYPE html>
TOWN_Restaurant` <header>
<div class="header">
<div class="header_content">
<div class="logo_container">
<img alt="TOWN logo" id="image" class="logo" src="images/town_logo.png">
</div>`
<ul class="navigation">
<li>Home</li>
<li>Our Story</li>
<li>Menu
<div class="sub_menu1">
<ul>
<li>Cuisine</li>
<li>Beverages</li>
</ul>
</div>
</li>
<li>Contact</li>
<li>Reservations</li>
</ul>
</div>
</div>
</header>
The problem is that your nav <ul> has a margin of 16px for top and bottom while the height is 100% of the parent's height which is 50px so the total height of the <ul> is:
50px (parent's height) + 16px (margin-top) + 16px (margin-bottom) = 82px
and this is making it get out of the header which has a fixed height of 50px.
To get this fixed, you have to
1st: set your nav <ul>'s margin to 0 and use padding-top on the <li>s instead with their box-sizing value set to border box so that padding doesn't affect the height of the <li>s.
2nd: set the top of your "sub_menu1" to 100% (which is 50px in this case [the parent's height]) and this will get the the dropdown menu right beneath your navigation.
and here it is working:
body {
background-color: #41393d;
}
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: black;
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: black;
}
.logo_container {
height: 100%;
display: table;
float: left;
}
.logo {
height: 100%;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
}
a:hover {
color: #8a8c8f !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color: #BE1E2D;
font-family: athelas, serif;
font-style: normal;
text-decoration: none;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: #d4a18d;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
TOWN_Restaurant`
<header>
<div class="header">
<div class="header_content">
<div class="logo_container">
<img alt="TOWN logo" id="image" class="logo" src="images/town_logo.png">
</div>`
<ul class="navigation">
<li>Home</li>
<li>Our Story</li>
<li>Menu
<div class="sub_menu1">
<ul>
<li>Cuisine</li>
<li>Beverages</li>
</ul>
</div>
</li>
<li>Contact</li>
<li>Reservations</li>
</ul>
</div>
</div>
</header>
I have been working to make a multi-level dropdown navbar, and when the dropdown finally started working, the rest of the navigation broke.
I'm trying to get a navbar with a width of 100% of the body, and then a container that is 80% of the body
#nav {
width: 100%;
background-color: red;
}
.container {
width: 80%;
}
However, after getting the dropdown to work, the background color of the nav (red) is no longer showing, and the grey area of the dropdown lists only spans across a much smaller area.
How can I get the dropdown/navigation lists to sit within the container (80% of body) while keeping the span all the way across the 100% width of the body? Note, the colors don't matter so much right now, just getting the right distance setup.
Here is a CodePen
And the snippet
#nav {
width: 100%;
background-color: red;
}
.container {
width: 80%;
}
.third-level-menu {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li {
height: auto;
background: #999999;
}
.third-level-menu > li:hover {
background: #cccccc;
}
.second-level-menu {
z-index: 2;
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li {
position: relative;
height: 30px;
background: #999999;
}
.second-level-menu > li:hover {
background: #cccccc;
}
.top-level-menu {
list-style: none;
padding: 0;
margin: 0;
z-index: 2;
float: left;
line-height: normal;
text-align: center;
height: auto;
}
.top-level-menu > li {
display: inline-block;
position: relative;
float: left;
height: 30px;
width: 100px;
background: #999999;
}
.top-level-menu > li:hover {
background: #cccccc;
}
.top-level-menu li:hover > ul {
display: inline;
}
.top-level-menu a {
font: bold 14px Arial, Helvetica, sans-serif;
color: #ffffff;
text-decoration: none;
padding: 0 0 0 10px;
display: block;
line-height: 30px;
}
.top-level-menu a:hover {
color: #000000;
}
<nav id="nav">
<div class="container">
<ul class="top-level-menu">
<li>About</li>
<li>Services</li>
<li>
Offices
<ul class="second-level-menu">
<li>Chicago</li>
<li>Los Angeles</li>
<li>
New York
<ul class="third-level-menu">
<li>Information</li>
<li>Book a Meeting</li>
<li>Testimonials</li>
<li>Jobs</li>
</ul>
</li>
<li>Seattle</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</nav>
Change your CSS to look like this:
#nav{
position: absolute;
top: 0px;
left: 0px; // setting left and right to 0px will make the container take up the entire page
right: 0px;
background-color: red;
}
Also, if you want your elements in the navbar centred, add the following lines of code to your current stylesheet.
.container{
margin: 0 auto; // center the container
}
.top-level-menu{
width: 100%; // make the width of the menu 100% of the container
}
.top-level-menu li{
width: 25%; // make the width of each li element 25% of the container (100% / 4 li = 25%)
}
you need to clear float
.clearfix::after {
content: "";
clear: both;
display: table;
}
add clearfix class to top-level-menu
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How do I center floated elements?
(12 answers)
How do I center list items inside a UL element?
(14 answers)
How to horizontally align ul to center of div?
(5 answers)
Closed 4 years ago.
I create a fiddle here: http://jsfiddle.net/WayDf/27/
How can I get the four white boxes which is contained within a ul to be horizontally centered within the red bar? I've tried many things to footer #social ul I just cannot figure it out. I have ready through the many posts on this topic and have tried many things which have been suggested before, none which I can get to work on my particular issue. What am I missing?
footer {
width: 100%;
position: relative;
background-color: #C5C5C5;
display: block;
overflow: hidden;
}
footer section#footer-content {
max-width: 1440px;
min-height: 50px;
margin: 30px auto;
padding: 0 .694444%;
/* 10px / 1440px */
position: relative;
display: block;
overflow: hidden;
}
footer #social {
height: 30px;
margin: 0 auto;
background-color: red;
width: 600px;
position: relative;
}
footer #social ul {
list-style: none;
width: 100%;
margin: 0 50%;
}
footer #social li {
float: left;
margin: 0 .3em;
position: relative;
display: block;
width: 30px;
height: 30px;
overflow: hidden;
}
footer #social a {
text-decoration: none;
color: #CC7D29;
background: #ffffff;
display: block;
text-align: center;
height: 30px;
}
<footer>
<section id="footer-content">
<div id="social">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</section>
</footer>
Remove the margin on the <ul> and replace that with text-align:center; and padding:0;. The on the list items, remove the float and padding, and change the display to inline-block.
footer {
width: 100%;
position: relative;
background-color: #C5C5C5;
display: block;
overflow: hidden;
}
footer section#footer-content {
max-width: 1440px;
min-height: 50px;
margin: 30px auto;
padding: 0 .694444%;
/* 10px / 1440px */
position: relative;
display: block;
overflow: hidden;
}
footer #social {
height: 30px;
margin: 0 auto;
background-color: red;
width: 600px;
position: relative;
}
footer #social ul {
list-style: none;
width: 100%;
xmargin: 0 50%;
text-align:center;
padding:0;
}
footer #social li {
xfloat: left;
margin: 0 .3em;
position: relative;
display: inline-block;
width: 30px;
height: 30px;
overflow: hidden;
}
footer #social a {
text-decoration: none;
color: #CC7D29;
background: #ffffff;
display: block;
text-align: center;
height: 30px;
}
<footer>
<section id="footer-content">
<div id="social">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</section>
</footer>
Okay so I'm in the process of learning flexbox but I cannot understand why my navigation title is above the links.
HTML:
<style>
#import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
.box {
display: flex;
}
.item {
width: 100px;
height: 100px;
background-color: red;
margin: auto;
color: #fff;
}
nav {
font-family: "Oswald", sans-serif;
display: flex;
min-width: 100%;
background-color: #181818;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
max-width: 960px
}
nav a {
display: block;
padding: 1rem;
text-decoration: none;
color: #fff;
font-weight: 400;
transition: all 0.3s ease-in-out;
}
nav a:hover {
color: #343434;
}
.title {
margin: 0 35px 0 10px;
color: #1BC;
}
</style>
<nav>
<div class="container">
<a class="title">Architect</a>
<ul>
<li>Getting Started</li>
<li>Examples</li>
<li>Blog</li>
<li>Forum</li>
</ul>
</div>
</nav>
Container CSS:
.container{
width: 100%;
margin: 0 auto:
max-width: 1200px;
}
Code Pen Link: http://codepen.io/ZoidCraft/pen/XKMewy
I would like the title "Architect" to be align to the left of the links.
You set <a class="title">Architect</a> to display: block; in your css. Block level elements will take up their own line. display: flex; elements will also take up their own line.
To fix your problem you could first remove that display: block; from your nav a style. Then change your nav ul from display: flex; to display: inline-flex;. Now you just need to add some padding back to your nav since everything is display inline now, so add padding: 1em 0; to your nav
Here is an updated CodePen of what I am talking about.
I am trying to make the top menu vertically center without assigning value like margin-top: 50px; because some of my friends say this is not the ideal approach.
/* Nav Section */
.nav {
width: 100%;
padding: 0;
margin: 0;
}
.nav-contain {
width: 1100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.logo {
z-index: 10;
display: inline-block;
background: #2980B9;
padding: 65px 50px 35px 45px;
font-size: 36px;
line-height: 42px;
color: #fff;
text-align: center;
}
.logo a {
color: #FFFFFF;
text-decoration: none;
}
#medical {
display: block;
text-transform: uppercase;
}
.menu {
padding: 0;
margin: 0;
float: right;
display: table-cell;
position: relative;
}
.menu a {
text-decoration: none;
color: #505050;
font-weight: bold;
}
.menu ul {
padding: 0;
margin: 0;
float: left;
top: 50%;
}
.menu ul ul {
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
display: block;
margin-left: 45px;
}
.menu ul ul {
position: absolute;
left: -999px;
}
.menu ul li:hover ul {
left: auto;
}
.menu ul li ul li {
margin-left: 0;
float: none;
margin-top: 15px;
}
<div class="nav">
<div class="nav-contain">
<div class="logo">
<span id="medical">Medical</span><span id="company"> Company</span>
</div>
<!-- Logo -->
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul class="dropdown">
<li>Sample</li>
<li>Sample</li>
</ul>
</li>
<li>Gallery</li>
<li>Prices</li>
<li>Contact</li>
</ul>
</div>
<!-- Menu -->
</div>
<!-- Nav Contain -->
</div>
<!-- Nav -->
Remove float:right on .menu, and set both .logo and .menu to this:
.logo, .menu {
display: inline-block;
vertical-align: middle;
}
If you need .menu to stay on far right side, also add this:
.nav-contain {
text-align: justify;
}
.nav-contain:after{
content: '';
display: inline-block;
width: 100%;
}
How it works:
Set text-align: justify; will line up the two inner inline blocks to the left and right edges of the container.
Create an invisible 100% width element by using :after or :before pseudo-element stretching the box to occupy the entire space of the container. Otherwise inline element occupies only the space bounded by the tags that define the inline element.
One easy way to center here is to use Flexbox:
.nav-contain {
/* what is already there */
display: flex;
align-items: center;
}
Beware of browser support (check caniuse.com to see if the compatibility level is acceptable to you).
This is superior to the margin-top solution as it ensures that you won't have to manually change that 50px each time the size of the image or anything else in the navbar changes.
Try:
.menu > ul > li {
min-height:50px;
display: table;
}
.menu > ul > li > a {
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/rawat/4h05rq2s/
Since your navbar remains the same height the whole time, I suggest you give the .nav-contain the following code:
.nav-contain {
width: 1100px;
margin: 0 auto;
line-height: 184px;
padding: 0;
overflow: hidden;
}
Note the line-height.
This will, once you smaller the available width of your device, result in a probably not so nice looking huge navigation bar. For this, I suggest media queries.