I have seen many questions on this topic but I can't seem to figure out what I am doing wrong still. I want to make the menu centered inside of the "menu" div so that it will always be center no matter the screen size/browser.
Here is what I have for my HTML and CSS:
.site-navigation {
display: block;
font-family: 'Georgia';
font-size: 18px;
font-weight: bold;
position:relative;
margin-left:auto;
margin-right: auto;
}
.site-navigation ul {
background: #202020;
list-style: none;
margin: auto;
padding-left: 0;
}
.site-navigation li {
color: #d29500;
background: #202020;
display: block;
float: left;
margin: 0 2px 0 0;
padding: 12px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
.site-navigation li a {
color: #d29500;
text-decoration: none;
display: block;
}
.site-navigation li:hover {
#include transition(background, 0.2s);
background: #000000;
cursor: pointer;
}
.site-navigation ul li ul {
background: #000000;
visibility: hidden;
float: left;
min-width: 150px;
position: absolute;
transition: visibility 0.65s ease-in;
margin-top:12px;
left: 0;
z-index: 999;
}
.site-navigation ul li:hover > ul,
.site-navigation ul li ul:hover {
visibility: visible;
}
.site-navigation ul li ul li {
clear: both;
padding: 5px 0 5px 18px;
width: 100%;
}
.site-navigation ul li ul li:hover {
background: #000000;
}
<div id= "menu">
<div class="site-navigation" >
<ul class="menu">
<li class="menu-item">Home</li>
<li class="menu-item">About Us
<ul class="dropdown">
<li class="menu-item sub-menu">Location</li>
<li class="menu-item sub-menu">Contact</li>
</ul>
</li>
<li class="menu-item">Schedule</li>
<li class="menu-item">Roster</li>
<li class="menu-item">Alumni Corner</li>
<li class="menu-item">Gallery</li>
<li class="menu-item">Support</li>
</ul>
</div>
</div>
Any help would be appreciated!
Simply add
#menu
{
display: flex;
}
and it should solve your problem (make sure this is supported on all browsers you need, though)
If you want to center an element with margin: 0 auto, it needs to have a set width. You can make it responsive by using percentages.
You can use flexbox as proposed by Jesse, but I would simply go with the good old display: inline-block; property. If you want to support IE10, you cannot use flexbox (see http://caniuse.com/#feat=flexbox)
Remove background: #202020; and add text-align: center; to .menu
Remove float: left; and change display: block to display: inline-block in .menu-item
The margin between the .menu-items is now larger because of the space character, which is induced by the inline-block property.
Remove float:left rule from your .site-navigatioin li selector, and set display property of li to inline-block: http://prntscr.com/8rqehz
Notice IE7 doesn't support inline-block property.
Related
I'm hitting a wall with my relatively basic knowledge of CSS. I've put together a menu with the intention of centering it within its div. For whatever reason, all attempts at centering it with CSS (margin 0 & set width for the menu's ID) have failed, so I've resigned to changing the width of the div to just barely fit all of the menu options and centered that on the page.
However, this has caused it to be displayed incorrectly in a couple browsers (mainly Safari).
Heres the CSS:
#primary_nav_wrap {
display: block;
}
#primary_nav_wrap ul {
list-style: none;
text-align: center;
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul a {
display: block;
margin: 0 auto;
color: #8a7e70;
text-decoration: none;
font-size: 13.9pt;
padding: 0 10px;
letter-spacing: 2px;
font-family: Engravers;
}
#primary_nav_wrap ul li {
display: inline;
position: relative;
float: left;
padding: 0
}
#primary_nav_wrap ul ul {
display: none;
width: 204px;
position: absolute;
top: 100%;
left: 50%;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(0, 0, 0, 0.92);
margin-left: -100px
}
#primary_nav_wrap ul ul li {
float: none;
width: 204px
}
#primary_nav_wrap ul ul a {
font-family: Eavesregular;
font-size: 12pt;
letter-spacing: .5px !important;
line-height: 120%;
padding: 5px 5px
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover>ul {
display: block
}
a:hover,
a:active,
li:hover,
li:active,
ul:hover,
ul:active {
color: #bfb3a0 !important;
}
and my HTML
<div id="primary_nav_wrap">
<ul>
<li><span style="color:#fffdf2;">philosophy</span></li>
<li>collection
<ul>
<li>Shades of Black</li>
<li>L' Amour du Sauvage</li>
<li>Dark Phoenix</li>
<li>Buy the Collections</li>
</ul>
</li>
<li>fashionshow
<ul>
<li>Phoenix New York<br />Grand Central Station</li>
</ul>
</li>
<li>press
</li>
<li>blog</li>
<li><a class="lastcontact" href="/wild/contact">contact</a></li>
</ul>
</div>
and here's the website:
https://christianpersi.co/wild/
Thank you for any and all help!
Have a look at using flex to position your elements.
By default flex will render your items in a row, you can set justify-content: center; to align everything centre with a margin for spacing. You can have center on the parent of the menu, and inside the ul for the menu justify-content: space-between; to space them evenly, but as #Bhargav pointed out, your issue is probably down the number of characters you have in your menu breaking the layout with a limited width to sit in.
My page header has a misaligned <li> element. Here is a screenshot:
Basicly I want to say "center both elements vertically, one to the left and the other to the right".
I'm able to align a <li> element
horizontally with style="float:right"
vertically with style="vertical-align:middle".
...But not at the same time. Based on a similar question, I was expecting this to work:
style="float:right; vertical-align:middle"
It doesn't.
I also found some ways to align an entire list, but those were not applicable to aligning an individual element of a list.
Here is the relevant html-thymeleaf code:
<div th:fragment="header">
<nav>
<ul class="navcontainer">
<li class="navtitle"><h2>Personal Expense Tracker</h2></li>
<li class="navlogout" th:inline="text" style="float:right">[[(${user != null ? 'Logout ' + user : ''})]]</li>
</ul>
</nav>
</div>
Here is the relevant css code:
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
overflow: hidden;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav > ul > li > a:hover {
background-color: #111;
}
With the code you added..
Using flexbox, you can do this:
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;/* added */
align-items: center;/* added */
justify-content: space-between;/* added */
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav > ul > li > a:hover {
background-color: #111;
}
<div th:fragment="header">
<nav>
<ul class="navcontainer">
<li class="navtitle"><h2>Personal Expense Tracker</h2></li>
<li class="navlogout" th:inline="text" >Log out</li>
</ul>
</nav>
</div>
the question is a little vague. If you could give me a visual of your problem / what you're looking for as a result I could probably help more.
Anyways here is the classic way to horizontally and vertically align an element to its parent.
Best of luck!
.container {
position: relative;
display: block;
margin: 0 auto;
width: 50%;
max-width: 1000px;
height: 100px;
background: grey;
}
.element {
position: absolute;
display: block;
width: 50%;
height: 50px;
background: red;
top: 50%;
margin-top: -25px;
left: 50%;
margin-left: -25%;
}
<ul class="container">
<li class="element"></li>
</ul>
You should give height or line-height to the element (or in some case parent element has no height) so vertical-align:middle will not work because there is no height.
First give height to the element which you want to set vertically middle if it does not work give height to the parent element.
I have been trying to center this dropdown navigation, but I just cant get it right. Does anyone here have an idea about why I can't do it? I have a feeling it has something to do with the floating of the first li elements, but I am not sure.
JSFiddle: https://jsfiddle.net/21e7p8Lx/
ul#dropdown {
list-style: none;
}
ul#dropdown li {
float: left;
background: darkgrey;
}
ul#dropdown li a {
display: inline-block;
padding: 20px 40px;
color: black;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
ul#dropdown li:hover {
background: grey;
}
ul#dropdown > li:not(:last-child) {
border-right: 1px solid white;
}
ul#dropdown li ul {
list-style: none;
display: none;
position: absolute;
margin-top: 0px;
}
ul#dropdown li:hover ul {
display: block;
}
ul#dropdown li ul li {
float: none;
border: none;
border-top: 1px solid white;
}
<nav>
<ul id="dropdown">
<li>Test1</li>
<li>Test2</li>
<li>
Test3
<ul>
<li>DropdownTest1</li>
<li>DropdownTest2</li>
<li>DropdownTest3</li>
</ul>
</li>
<li>Test4</li>
<li>
Test5
<ul>
<li>DropdownTest1</li>
<li>DropdownTeasdadst2</li>
<li>DropdownTest3</li>
</ul>
</li>
</ul>
</nav>
Add this CSS:
ul#dropdown {
position: relative;
left: 50%;
transform: translateX(-50%);
display: inline-block; //cause #dropdown to "shrink-to-fit"
}
The first three styles are based on a popular method for vertical centering, found at http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/. In this case, I've changed so we can horizontally center.
The last style is needed, because block elements take up 100% by default, but inline-block elements will shrink-to-fit their contents.
Updated Fiddle
I'm trying to justify variable number of li elements, to fill the width of a ul block with equal spacing between them. It would be important to have minimal distance between the elements.
I tried various solutions from StackOverflow answers, for example https://stackoverflow.com/a/10020586/3897243, but none of them worked out for me.
HTML:
<ul class="clearfix">
<li>Covenantal
</li>
<li>Inyoite
</li>
<li>Myopical
</li>
<li>Funiculate
</li>
<li>Uncompromisingness
</li>
</ul>
CSS:
li {
float: left;
list-style: none;
font-size: 20px;
line-height: 1.5;
display: inline-block;
}
ul::after {
width: 100%;
display: inline-block;
content: ".";
visibility: hidden
}
li {
display: inline-block
}
https://jsfiddle.net/r1mw5j9h/
Using display:table; width:100%; on your wrapping <ul> and display:table-cell; text-align:center; on the <li> will ensure that all elements will fit side by side using the minimum available width and will split the available padding evenly when there is more space to give.
See your updated fiddle here: https://jsfiddle.net/r1mw5j9h/2/
if you want space between each elements then try setting
li {
float: left;
list-style: none;
background-color: #aaa;
font-size: 20px;
line-height: 1.5;
padding:5px; // try adding padding
}
padding property will give you space between elements.
is that what you want?
ul, li {
padding: 0;
margin: 0;
}
ul {
background-color: #888;
text-align: center;
}
ul > li {
display: inline-block;
vertical-align: middle;
list-style: none;
background-color: #aaa;
font-size: 20px;
line-height: 1.5;
}
ul > li a{
display: block;
color: #fff;
text-decoration: none;
padding: 0 15px;
border: 1px solid #000;
}
<ul>
<li>Covenantal
<li>Inyoite
<li>Unpollutable
<li>Bibliopolical
<li>Vibrato
<li>Myopical
<li>Funiculate
<li>Indesignate
<li>Uncompromisingness
</ul>
I have this menu:
#navbar {
text-align: center;
margin: auto;
padding: 0;
height: 1em;
}
#navbar li {
list-style: none;
float:left; }
#navbar li a:hover{
background-color: #CCC;
}
#navbar li a {
border: 1px solid #000;
display: block;
margin-right: 18px;
margin-left: 18px;
padding: 3px 8px;
background-color: #FFF;
color: #000;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #FFF;
border-bottom: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color: #CCC; }
<ul id="navbar">
<li>Start</li>
<li>Vad?</li>
<li>Kom igång!</li>
<li>Läringsartikler<ul>
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
<li>Läringsfilmer<ul>
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
</ul>
as you can see in navbar { i tried to use text-align: center or margin:auto but it still wont center the whole menu..
why?
when i change the navbar li to float center instead of float left then it make the whole menu stupid big
You need to specify a width on your navbar ul.
#navbar {
text-align: center;
margin: auto;
padding: 0;
height: 1em;
width: 400px;
}
There is NO center value for 'float' style attribute
-- Oops dint see that comment
As mentioned, there is no Float:center. In order to center using margin-left and margin-right auto, you either need to set a width (as mentioned above) or change it to display:block.
If you don't want to set a width or can't, there's a CSS hack called Shrink Wrapping that is easy to setup.