I currently have a navigation bar that has several items in an unordered list which float left, as well as a dropdown button in a div that floats right. Currently the dropdown menu gets moved below the other menu items, like this:
I don't want this spacing; I want the div to be aligned with the items in the ul. How can I achieve this?
Note: I can't place the div in the ul because the ul is populated by an outside data source. Here's my current relevant css:
.overallContainer {
display: inline;
}
.menuItems {
float: left;
}
.dropdownButton {
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
And the HTML:
<div class="overallContainer">
<ul class="menuItems" id="menuItems" data-sly-list="${topnav.root.listChildren}">
<li>
${item.title}
</li>
</ul>
<div class="dropdownButton" data-sly-resource="*resource*"></div>
</div>
Place both the ul and the div inside a new div; then use float: left; or display: inline-block; on both the ul and the nested div. (Or Flexbox, if you want.). You'll want to set a width on both elements, since by default they will have 100% which means they won't nicely align with each other. You may also need to consider any default vertical margins, padding, line height on ul or div elements if you want the text to be perfectly aligned.
Related
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
That is the list that has the things in it.
nav ul li{
list-style: none;
float: left;
}
nav ul li a{
text-decoration: none;
display: block;
float: left;
padding: 5px 15px;
color: white;
}
Those are the CSS things it currently has, I can't seem to make them be centered. I've looked around for about an hour, but I'm pretty much not having any luck with my current skill in this field.
Flexbox is a good way to make things go where you want.
nav ul {
display: flex;
flex-direction: row;
justify-content: center;
}
nav li {
margin: 0 30px;
}
You want to make the <li>'s line up and sit in the center. First you need to grab their parent (the <ul>) and tell it to use Flexbox.
Flex direction can be row or column. You want them to line up in a row.
Once they're lined up, justify them in the center.
The margin on the <li> itself just keeps them from overlapping.
Using the float: css style directly moves the content to its set side. To center an element, use auto set for your margins or padding. margin-left: auto; margin-right: auto; will center an element within it's container by having the same amount of margin or padding on both sides.
a quicker way to do this is margin: y-margins auto; the first value is your margin-top and margin-bottom values, the second value is your left and right.
to center text within its container, such as a <p> tag, use text-align: center;
I'm trying to create a horizontal navigation that floats to the right. Once it floats to the right and I then float all list items to the left. The last list item breaks onto a new line.
The problems disappears when I remove any margin properties. But margin is very important to me because I've displayed the anchor tags to block in order to make the whole area clickable. I've done this for touch screen purposes.
Can anyone help me to make all the words in my ul display on one line as it all floats to the right while still using margin and padding?
https://jsfiddle.net/samuelcrockford/4a8oovjs/1/#&togetherjs=P0dq57flOy
Please see example using the js fiddle link above
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
nav {
float:right;
overflow: auto;
}
nav ul {
float:right;
list-style: none;
}
nav ul li {
float: left;
margin-left: 4%;
}
nav ul li:first-child { margin-left: 0;}
nav ul li a {
display: block;
float: left;
font-size: 1em;
padding: 0 2%;
}
Set all elements' box-sizing property to border-box:
*{
box-sizing: border-box;
}
This will include both border widths and padding sizes in the complete width of an element- fixing the problem in terms of padding.
Use px values for the margins, to fix that issue.
Add 100% width to the ul tag
nav ul {
width:100%;
}
I have a nav bar that needs to display 100% of the screen.
<body>
<div class="nav">
<div>
<img src="./logo.png">
</div>
<ul>
<li>Home</li>
<li>Browse</li>
<li>Contact</li>
</ul>
</div>
</body>
Here is the fiddle.
The nav css has width: 100%, and left and right padding of 10%. The logo floats left and ul floats right. I want the background colour of the img and the rest of the nav bar to the left in red, and the rest of the nav to the right of the img in black. I could change the background color of the img to red and the background color of the nav to black, but I cannot change the color to the left of the img.
One of the issues you have is floats. With float the elements are removed from the normal document flow, this means their parent (in this instance the nav div) will collapse, losing its background color. A common fix for this is the "clearfix", a simpler option is to float the nav container too. You also have to counter the box model which add padding on top of width.
I prefer to tackle this with inline-block instead of floats:
.nav {
padding-right: 10%;
background-color: black;
}
.nav img {
background-color: red;
width: 40px;
display: inline-block;
vertical-align: bottom;
padding-left: 10%;
}
.nav ul {
display: inline-block;
margin: 0;
vertical-align: bottom;
width: 78%;
text-align: right;
}
.nav li {
display: inline;
text-align: left;
}
.nav a {color:#FFF;}
<div class="nav">
<img src="./logo.png">
<ul>
<li>Home
</li>
<li>Browse
</li>
<li>Contact
</li>
</ul>
</div>
See this article for some pros and con's of inline block. One of which it white space between elements, this is the reason for the ul having a width of 78% instead of 80%
Try adding overflow:hidden to the .nav.
As #JonP explained, the floated items are taken out of the normal flow, and now have block formatting context. Adding the overflow, makes the parent gain context as well.
You can read about it here: developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
I'm looking for a way to make a horizontal menu in which the menu items are justified across the width, have padding, and overflow to a new line when the number of menu items exceed the container space.
HTML:
<div id='upper-menu-wrapper'>
<div id='upper-menu'>
<ul>
<li>About</li>
<li>Parenting</li>
<li>Receipes</li>
<li>Devotional</li>
<li>DIY Projects</li>
<li>Home-making</li>
<li>Pregnancy</li>
<li>Frugal Living</li>
</ul>
</div>
</div>
CSS:
#upper-menu-wrapper {
width: 100%;
}
#upper-menu {
width: 1200px;
margin: 0 auto;
overflow: auto;
}
#upper-menu > ul {
list-style-type: none;
text-align: justify;
width: 100%;
}
#upper-menu > ul > li {
display: inline-block;
padding: 1em;
text-align: center;
}
Getting the elements to justify with wrapping to next line is tricky. Using display:table and table-cell can justify elements like tables but only in one row. Because your requirement is to also keep elements justified while wrapping within a fixed width container, the table-cell won't work.
There is a hack based on :after pseudo-element which can make this possible with wrapping across rows.
Demo: http://jsfiddle.net/abhitalks/MXZ6w/3/
Apply a fixed width to the wrapping div, text-align:justify on the ul and display:inline-block on li are required.
#upper-menu-wrapper {
width: 500px; /* fixed width on wrapping container */
}
#upper-menu { } /* this div is not really needed */
#upper-menu > ul {
list-style-type: none; /* getting rid of bullets */
margin: 0px; padding: 0px; /* getting rid of default indents */
text-align: justify; /* important to justify contents */
}
#upper-menu > ul > li {
display: inline-block; /* required. float won't work. */
text-align: left; /* to properly align list items */
white-space: no-wrap; /* to prevent wrapping of list items if required */
}
#upper-menu > ul:after {
/* this is the hack without which the list items won't get justified */
content:''; display: inline-block; width: 100%; height: 0;
}
Note 1: The display: inline-block is required, however it generates html white-spaces. In order to get rid of those white-spaces, html comments can be used in the markup of list items.
Note 2: The :after pseudo element in the hack is what seems to do the trick. However, that will create an unintended space below the ul. This space seems to be there because the elements are flushed across. If not justified, then this space does not appear.
IMPORTANT: Credit: #SamGoody from his answer here.
I have a simple UL navigation menu with width of 1000px:
<ul class="menu">
<li class="first">google</li>
<li>google</li>
<li>google</li>
</ul>
So, how can I set the first element to fit the entire UL width and push the other list items on the right (all LIs should be on the same line - horisontal menu)?
I know I could float:left the first and float:right the rest, but this will reverse the order of the right - floated elements.
I need a quick, CSS only solution, working even in IE6.
Thanks in advance!
UPDATE: To clarify, the first element is a logo, the final result is like the header of 9gag.com except the logo should be on the left and all links to the right.
Logo usually should not be a part of navigation menu. It's more appropriate to mark-up it as header (H1 on home page, and H3 on rest pages).
<h3>MyBrand</h3>
<ul>
<li>Products</li>
<li>About</li>
<li>Contact</li>
</ul>
You can use then float: right for your UL list itself to align menu to the right.
See this example, i don't know your menu is dynamic, but if you have a 'width' for other's li's, is more easier
Demo: http://jsfiddle.net/e6SWD/12/
.menu {
margin-left: 84px; /* width others 2 li's */
width: 1000px
}
.menu li {
display: inline;
}
.menu li.first {
display: block;
float: left;
margin-left: -84px; /* width others 2 li's */
width: 100%
}
Now with more clarification:
http://jsfiddle.net/6DkVx/2/
ul {
width: 1000px;
position: relative;
text-align: right;
}
li {
display: inline-block;
}
.first {
position: absolute;
top: 0; left: 0;
}
Just use this CSS
.menu li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
As stated before separate the logo from the main navigation. Do something like this instead.
<div id="header>
<div id="logo">Logo here</div>
<ul><li>Rest of links here</li></ul>
</div>
The header div is the wrapping div. You could change this to <header></header> if you want to do HTML5 (this will work in all browsers even old ones).
Then set the width of the logo, you can use a link there aswell. And float the ul and logo to the left.