This is my html for this particular section:
<nav id="TopNav">
<ul id="Menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
I have given nav an id of TopNav and the ul an id of Menu. I'm trying to have my li items be listed horizontally.
This is my CSS for the section above:
#TopNav {
font-family: ubuntu-medium;
font-weight: normal;
font-size: 15px;
color: #414141;
}
li {
border: 0px;
padding: 0px 10px;
display: inline;
}
Now if I change the li to reference the id "Menu" in my css it doesn't apply the inline display style, however if I leave it at li, it will display it. What if I potentially add another li to my html that I don't want the li styling from the css to apply to that which is why I gave the current one an ID. Is there's a reason this is happening? How do I fix it or what is a good workaround for it?
Be as explicit as you can be when writing your selectors.
In this case, you could identify the correct li elements by ensuring that they are the ones that are in Topnav AND in that particular list.
#TopNav {
font-family: ubuntu-medium;
font-weight: normal;
font-size: 15px;
color: #414141;
}
#TopNav #Menu li {
border: 0px;
padding: 0px 10px;
display: inline;
}
<nav id="TopNav">
<ul id="Menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
There are several things you can select on, not just element types and class names. see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors for more details.
I'm trying to have a vertical navigation list on a site but my text isn't centered within the div. Multiple posts on here have suggested to make the list display:table and the items display:table-cell
this solves the problem but I have to change the display from block, which forces each list item to be a new line ( what I want ).
How can I solve this while keeping everything nice, centered, and on a new line?
should note: It may be firefox but I'm even using a css reset. The issue acts the same with or without the reset. puu .sh /kcrhs/bb728e4711 .png
#nav {
background-color: #801918;
font-family: arial, sans-serif;
Font-weight: bold;
font-size: 25px;
color: white;
display: block;
margin: 0 auto;
}
#nav ul li {
transition: .5s;
padding-bottom: 45px;
margin: auto;
text-align: center;
}
#nav ul li:hover {
color: yellow;
}
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Resume</li>
</ul>
</div>
All I had to do was adjust my padding so that it was even between padding-top and padding-bottom.
I have placed one div inside of another, but it keeps appearing below the div it is nested inside. What I want is to get the login div to appear inside the navdiv but push it over to the right of the page.
I can get it over there by adding position absolute, (which I'm also unsure about) but it then behaves in ways I don't want when I resize the page.
Please try to explain what is happening here as simply as possible. Thanks!
http://jsfiddle.net/viggie/5we2wxug/
#navdiv {
display: block;
background-color: blue;
height: 20px;
margin-bottom: 7px;
}
ul {
text-align: center;
}
#navdiv li {
background-color: red;
display :inline;
font-size: 1.3em;
padding-left: 25px;
padding-right: 25px;
vertical-align: middle;
margin-left:35px;
margin-right:35px;
margin-bottom:4px;
}
#navdiv li a:visited {
color: yellow;
}
#navdiv li:hover {
background-color: green;
}
#login {
padding-right: 10px;
padding-left: 10px;
background-color: yellow;
top: 0;
right: 0;
}
#login li {
verticle-align: middle;
}
HTML
<div id="navdiv">
<ul>
<li>Home</li>
<li>Members</li>
<li>Articles</li>
<li>Videos</li>
<li>Join</li>
</ul>
<div id="login">
<ul>
<li>Log out</li>
<li>Log in</li>
</ul>
</div>
</div>
While your #login div is technically inside of #navdiv, #navdiv has a height set which is stopping the background from extending to cover the #login as well - The #login is inside it structurally, but visually it's overflowing the #navdiv area.
So, to stop that bit, simply remove the height from #navdiv.
To align the login to the right, I'd recommend making the #login ul an inline-block that's simply aligned right. You lose the absolute andfloat issues, and it's easy to make responsive.
#login {
text-align: right;
}
#login ul {
padding-right: 10px;
padding-left: 10px;
background-color: yellow;
display: inline-block;
}
Note, I also put the background color on the ul since it's more accurate to the #login area - probably you'll want to modify the styling some yet anyways.
http://jsfiddle.net/daCrosby/5we2wxug/1/
Put this code in your css
.left_part { float:left;width:72%;}
.right_part { float:right;width:28%;}
.right_part ul { padding-left:0px;}
and add this in body part
<div id="navdiv">
<div class="left_part">
<ul>
<li>Home</li>
<li>Members</li>
<li>Articles</li>
<li>Videos</li>
<li>Join</li>
</ul>
</div>
<div class="right_part">
<ul>
<li>Log out</li>
<li>Log in</li>
</ul>
</div>
</div>
i just gave you normal idea and now i hope you can manage your own css with this way...hope it helps..
Updated
according to you...just use Float in ul and in login div as login div will not go with ul until you are not using float left or right properties..they have their own css and you have to use float for this...there can be more option but float will help you in your case if you don't want more div..
So I've center aligned the text "Jonathon Smith Photography". Directly below it in a different DIV, I've center aligned an inline list (my navbar) containing "Portfolio Contact Bio". However they appear to be centered at different points? The "Jon smith photography" text has no other properties to it. The list items in the navbar (not the navbar div itself) have a background color as well as padding above/below/left/right of it. However, when I disable the color/padding properties, the texts still appear to be centered at different points. Now I'm guessing the list's centerpoint that is off since it's a little more complex than the plain text. How do I get them to align properly?
HTML:
<div id="title">Johnathon Smith Photography</div>
<div id="navbar">
<ul>
<li>Portfolio</li>
<li>Contact</li>
<li>Bio</li>
</ul>
</div>
CSS:
#title {
text-align: center;
}
#navbar ul li {
background-color: #00225A;
display: inline;
list-style-type: none;
color: #fff;
padding-top: 0.2em;
padding-right: 1em;
padding-bottom: 0.2em;
padding-left: 1em;
}
#navbar {
text-align: center;
}
Add this:
#navbar ul {
padding-left: 0;
}
The ul has a padding in the left by default.
So what I need help with, is how do I remove the newline after a <li> and or <ul>
This is my css:
#ranks li {
background: url(/img.png) no-repeat top left;
}
#ranks .sprite-admin{ background-position: 0 0; width: 157px; height: 44px; }
#ranks .sprite-banned{ background-position: -207px 0; width: 157px; height: 44px; }
and this is the html:
<ul id="ranks"><li class="sprite-admin"></li></ul>
It all works well while only one of the <ul id ="etc"> is there, but if there are multiple, it will make a new line and 'stack' them.. is it possible to make them not stack, and just go left to right?
Thanks
EDIT:
Demo : /removed/
You have a few options:
#ranks li {
float: left;
}
This will float all of your list items to the left, without wrapping, until horizontal screen space is no longer available. Alternatively,
#ranks li {
display: inline-block;
}
Which will also put your elements side-by-side, but handle them as bock level elements. If you don't care about block-level styling, you could go with straight inline-display:
#ranks li {
display: inline;
}
Which will treat the list items like any other inline element (such as <span> or <a>).
There are some other inherent styles that exist on list items, as well as their list parent, that you may need to do away with. Be sure to check out margin, and padding.
Demo: http://jsbin.com/iconud/edit#html,live
Look Out Ahead!
You may find that there is an unsightly gap between your list items when they're positioned side-by-side. This is a common problem with inline-lists. One solution is to remove the newline space between closing and opening list item tags:
<ul id="ranks"><li>
Index</li><li>
Contact</li><li>
Portfolio</li>
</ul>
Or have them all inline, a little less discernible:
<ul id="ranks">
<li>Index</li><li>Contact</li><li>Portfolio</li>
</ul>
This is a little tough on the eyes. With HTML, since closing tags aren't always required, you can also leave off the closing tag (though this makes me a bit nervous):
<ul id="ranks">
<li>Index
<li>Contact
<li>Portfolio
</ul>
Multiple Lists Inline Too!
From some of the OP's comments, it appears they might be trying to get not only list items inline, but lists themselves. If that's the case, apply the same aforementioned rules to the lists themselves:
#ranks,
#specs {
margin: 0;
padding: 0;
display: inline-block;
}
#ranks li,
#specs li {
display: inline-block;
border: 1px solid #CCC;
padding: 5px 10px;
}
Here were have identified two sets of rules using selectors that search for id's, and then tags. You could simplify this by apply a common class to the lists, or by basing the selectors off of a common parent element. Next is the markup:
<ul id="ranks">
<li>Index</li>
<li>Contact</li>
<li>Portfolio</li>
</ul>
<ul id="specs">
<li>Foo</li>
<li>Bar</li>
</ul>
This results in both lists, and their items, being displayed in a horizontal fashion.
Demo: http://jsbin.com/iconud/2/edit
with some css
<style type="text/css">
#ranks li { display:block; float:left; }
</style>
updated as comments: with display:block
ul li{ display:inline;} do the trick?
<li> by default is display:block;
if you give it display:inline; or diplay:inline-block; that should remove the linebreak
This is a basic example of horizontal UL's
HTML
<ul id="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
<span class="clearFloats">
CSS
.item {
float: left;
}
.clearFloats {
clear: both;
}
JSFiddle Example: http://jsfiddle.net/peterf/DEUBf/
Another option is to set font-size: 0 in the ul, then restore the desired font-size in the li tags. I prefer this as it's contained within the ul tag, doesn't need further hacks like clear:both, and explains better what the styling is meant to do (hide anything not inside a list item).
ul {
list-style-type: none;
font-size: 0;
}
li {
display: inline-block; /* Or inline, as you like */
font-size: 16px;
}