So my html is this:
<div id="background">
<div id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
and my CSS is this:
#background {
min-widh: 960px;
}
#navigation {
min-width: 960px;
}
#navigation ul {
min-width: 960px;
}
#navigation ul li {
display: inline;
width: 100px;
height: 50px;
background-color: red;
}
Now, this does create an inline bar except no matter how much I change the width and height of
#navigation ul li
the background color (red) just stays strictly around the letters and nothing else. It seems as if the width and heights of the actual li's are not changing no matter what number I change it to. Any idea why it is doing this?
Use display:inline-block instead or display:inline.
#navigation ul li {
display: inline-block;
}
jsFiddle here
Alternatively, you can also float the elements for a similar effect:
#navigation ul li {
float:left;
}
jsFiddle here
Aside from both of the above solutions, if you wanted to use display:inline, you could just add padding as opposed to trying to set a height/width.
#navigation ul li {
display:inline;
padding:20px;
}
jsFiddle here
Related
I have following CSS code:
nav li {
display: inline-block;
text-align: center;
}
nav li a {
display: block;
width: 100%;
height: 100%;
}
nav li :hover {
background-color: var(--main-color);
color: white;
}
Which makes elements in my navbar look like this:
But there's actually 4 items, not 6. I'll add some padding in <li>:
But when I hover over the first item, I have this ugly white space from both sides of it. Margin does exactly the same thing. Let's remove margin/padding and set <li> width manually to 120px:
First two items are now formatted somehow acceptably, but items a and b take visually far too much space than necessary. What I aim for would be something like this (made in image editor):
In other words, I'd like my <li> elements to have their width adjusted to their content with extra padding, while child <a> elements still take up 100% of <li> space. Any ideas?
Edit
I've updated updated the JSFiddle that you've posted.
You need to change your a element to not have display:block (should be inline instead). Also, you don't need to specify width and height of 100%. Just make your padding: 15px for the a, and you'll have equal, well-spaced hover padding.
I adapted your code above and put it into a codepen, see here:
http://codepen.io/himmel/pen/BNJZoL
Here is how I changed your CSS:
nav li {
display: inline-block;
text-align: center;
}
nav li a {
padding-left: 15px; ** add padding to both sides
padding-right: 15px;
display: inline;
}
nav li :hover {
background-color: brown;
color: white;
}
Try using table layout
body {margin:0}
nav ul {
padding:0;
margin:0;
width: 100%;
display: table;
}
nav li {
display: table-cell;
text-align: center;
}
nav li a {
background: #fafafa;
display: block;
width: 100%;
box-sizing: border-box;
padding: 10px;/*or whatever*/
}
nav li :hover {
background-color: brown;
color: white;
}
<nav>
<ul>
<li>Item</li>
<li>Very long item</li>
<li>a</li>
<li>b</li>
</ul>
</nav>
I've been having trouble centereing a navigation bar on blogger. I seems like a very easy thing to do normally but this time its troublesome.
Take a look at the website: Center Navigation
I've tried text-align, margin:0 auto; etc etc. Nothings seems to work!
If someone could help me out that would be great, cheers
Current code:
.nav{
position: relative;
margin: auto;
list-style-type: none;
text-transform: uppercase;
text-align: center;
border-top: 1px solid #aaaaaa;
list-style:none;
text-align:center;
}
li {
display:inline-block;
}
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
Both text-align:center and margin:0 auto can logically only work if the element to be centered has a non-default width, since that is otherwise auto, which for a block element is 100%. An element that fills up its entire parent cannot be centered.
Give ul.nav a fixed width and it will center.
To use text-align:center you will need to restrict the ul as well, for example by also making it display:inline-block. See this sample.
Remove float: left; to .tabs .widget li, .tabs .widget li
Try This:
.tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
}
Instead of:
.tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
float: left;
}
add text-align:center; to the parent div
I am looking to get my everything on my menu bar vertically aligned in the center, with the a elements taking up 100% of the available height of the menubar (text would be veritcally-centered). HOWEVER, I do not wish to fix the height of my menu bar. (If I was to fix the height, I'd just use line-height for vertical alignment).
HTML:
<div id="head">
<h1>My header</h1>
<ul id="nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
CSS:
#head {
background: #ccc;
width: 100%;
}
h1 { margin: 0; }
h1, #nav, #nav li { display: inline-block; }
#nav a:hover { background: red; }
JsFiddle: http://jsfiddle.net/m3qGs/
The effect I am trying to achieve is like the menu bar from JsFiddle but without the height being fixed. I'd prefer to do this in just CSS (ie no Javascript)
Add vertical-align:middle in the following class.
h1, #nav, #nav li { display: inline-block; vertical-align:middle; }
DEMO
Add vertical-align:middle; to your inline-block elements, this will overwrite the default baseline vertical-align
Code:
h1, #nav, #nav li { display: inline-block; vertical-align:middle;}
jsfiddle demo here link
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.
I have a simple ul horizontal menu that exists within a div that is set to 10% height and 100% width. How does one center text horizontally and vertically within it?
#navlistcontainer {
position:fixed;
height:10%;
bottom:0px;
left:0px;
right:0px;
}
#navlist li {
display: inline;
list-style-type: none;
}
#navlist li a {
color:#FFF;
}
<div id="navcontainer">
<ul id="navlist">
<li>START</li>
</ul>
</div>
try this:
#navlist {
text-align: center;
display: block;
}
#navlist li {
display: inline;
}
For vertical alignment you'd need to set the line-height of navlistcontainer equal to it's height. I'm not sure it will work with height in percentage. Consider this:
#navlistcontainer {
height: 50px;
line-height: 50px;
}
Here is a jsFiddle: http://jsfiddle.net/FH9sZ/
You shouldn't define height as precentage.
http://jsfiddle.net/zzdGx/ there you go fiddle for this.