Navigation menu doesn't align to the right. Please help!
** HTML code: **
<nav id="main">
<ul>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
** CSS code (not working): **
nav#main li {
float: left;
text-decoration: none;
text-align: center;
}
I tried this, but it didn't work:
nav#main {
float: right;
}
Try setting a width to your nav item or setting it's display property to inline block. It's a block level element so by default it takes all the horizontal space that there's available. So if it's 100% wide you can't see where it's aligned/floated.
nav#main {
display: inline-block;
}
or
nav#main {
width: 50% /*for example*/
}
try this you don't need any float ,it works
nav#main ul li {
text-align: right;
text-decoration: none;
display:inline-block;
}
#main{
text-align: right;
}
<nav id="main">
<ul>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
Related
I have a nav / menu bar with a max-width of 900px. Inside the nav bar is five links:
<nav>
<ul>
<li>Workshops</li>
<li>Production workshop</li>
<li>About us</li>
<li>News</li>
<li>Contact us</li>
</ul>
</nav>
I would normally make the five links 20% width, to fill the width of the nav bar and be fluid.
However, because the link text has very different lengths "Production workshops" compared to "News", I want the widths of the links/tabs to be based on the text. I've added left and right padding to the links. But now this is not fluid (it breaks below 900px width) and I can't accurately get the links to fill the width of the nav bar.
Is there a way for the links to fill the width of the nav bar, have a flexible width and for the widths of the links/tabs to be different (based on the width of the text)?
A link to JS Fiddle:
https://jsfiddle.net/j0g53wnu/
<nav>
<ul>
<li>Workshops</li>
<li>Production workshop</li>
<li>About us</li>
<li>News</li>
<li>Contact us</li>
</ul>
</nav>
nav {
background-color:brown;
max-width:900px;
}
nav ul {
font-size:21px;
line-height:60px;
overflow:auto;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
nav a:link { color:rgb(255,255,230); background-color:rgb(0,0,0); border-right:1px solid rgb(255,255,230); display:block; padding:0 38px; }
nav a:visited { color:rgb(255,255,230); background-color:rgb(0,0,0); border-right:1px solid rgb(255,255,230); display:block; padding:0 38px; }
nav a:hover { color:rgb(51,153,51); background-color:rgb(0,0,0); border-right:1px solid rgb(255,255,230); display:block; padding:0 38px; }
nav a:active { color:rgb(51,153,51); background-color:rgb(0,0,0); border-right:1px solid rgb(255,255,230); display:block; padding:0 38px; }
You can make it fuild with CSS Grid in many different ways, one quick easy approach would be like this:
ul {
list-style-type: none;
display: grid;
grid-template: ". . . . .";
}
li {
background-color: grey;
text-align: center;
}
Here you can check a working version based on your same example:
https://jsfiddle.net/j0g53wnu/4/
Change the result area to see how it fixes the width.
Hope this help :)
Have you considered flexbox?
Just changed a little, including flex-grow (to allow for the different sizes of the items.)
nav ul {
font-size:21px;
line-height:60px;
overflow:auto;
text-align: center;
display: inline-block;
margin: 0;
padding: 0;
display:flex;
box-sizing:border-box;
}
nav ul li {
flex-grow:2;
text-align: center;
list-style: none;
}
1) add this code to Cascade style sheet file
.display-flex {
display:flex;
}
.fill {
fill:1 1 auto!important
}
2) add class display-flex to UL tag
<ul class="display-flex"></ul>
3) add class fill to each Li tag
<li class="fill"></li>
If you need another solve,
You can come with me via email
I made some changes to add an extra link to my nav but it was not inline as below you can see "Credit" was push to next line. I try make changes to position or display in css but still nothing happens.
#nav {
list-style: none;
}
#nav ul {
margin: 0;
padding: 0;
width: 0;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
display: block;
width: 280px;
height: 50px;
}
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Browse CD</li>
<li> Search</li>
<li> Order</li>
<li>Credit</li>
</ul>
</nav>
I think this is because of the width.
In your case,each li element is a block of width 280px.
280*4 =1120px -total width of the li elements excluding 'Credits'.
Most users now surf with a browser set to 1024 x 768 or larger.However,if its below this,the 'Credits' would go to the next line.
This would be the case with you too!
So try decreasing the total width and always try keeping it to a max of 1000 or below that.
Hi I did a few things here:
Use box-sizing to ignore any padding around the elements so they will always fit
Use 20% width now that you have 5 items in your nav list instead of 4 (25%)
Use margin:0 and padding:0 on li so they don't add any extra space
* {
-moz-box-sizing:border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#nav
{
list-style: none;
margin: 0;
padding: 0;
}
#nav li
{
font-size: 24px;
width: 20%;
float: left;
margin:0;
padding: 0;
}
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Browse CD</li>
<li>Search</li>
<li>Order</li>
<li>Credit</li>
</ul>
</nav>
Most answers suggest changing the width of the li tags and whatnot, while this will work for a while there will still be a point where the lis either overlap or are forced onto a new line. I suggest adding a media query and changing the style when the user's screen is too small:
#nav {
list-style: none;
display:flex; /*New: allows us to use flex:1;*/
margin: 0;
padding: 0;
}
#nav li {
font-size: 24px; /*NB: Try using a different unit: pt, em, rem, etc...*/
flex:1; /*All items are the same size*/
height: 50px;
}
#media (max-width: 700px) {
#nav{display:initial;}
}
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Browse CD</li>
<li> Search</li>
<li> Order</li>
<li>Credit</li>
</ul>
</nav>
I have tried creating a div, deleting the div, trying to get the ul displayed as inline, everything, but my unordered list is still not displaying as inline. What am I missing?
p {
font-family: orbitron;
}
h1 {
color: black;
text-align: center;
font-family: orbitron;
}
ul {
dispaly: inline;
}
<nav>
<ul id="navigation_bar">
<li class="About">About Game</li>
<li>Screenshots</li>
<li>About creator</li>
<li>Forums</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
Not the ul should be inline, the lis in the ul should be. Change your selector like this:
ul li {
display: inline;
}
or this:
ul > li {
display: inline;
}
Also, you’ve got a typo: dispaly should be display.
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..
I'm trying to make a navigation menu for responsive website. I came to a point where I have my main menu fluid but not sure how to get drop-down menu from it .
Here is my html code:
<body>
<div id="nav">
<ul>
<li>Home</li>
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
<li>Clothes</li>
<li>Recipe</li>
<li>Contact</li>
</ul>
</div><!-- ends nav -->
</body>
Here's my CSS:
#nav {
display: table;
table-layout: fixed;
width: 100%;
}
#nav ul {
display: table-row;
margin: 0;
padding: 0;
}
#nav ul li {
list-style: none;
display: table-cell;
text-align: center;
}
#nav ul li a {
display: block;
}
I tried adding these lines of code to my CSS but didn't work as well:
#nav ul li:hover ul {
display: block;
}
Please help me out.
Thanks
The list structure in the question is incorrect
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
Should be
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
</li>
The sub <ul> is wrapped in the parent <li> node.
Second, add the code below to make it drop down:
#nav li {position:relative;}
#nav li ul{display:none;position:absolute;left:0;top:100%;}
Then add more CSS code to make it beautiful.