I would like to know the better way to arrange the list items for the below menu.
As If I mention the list items as Item1,tem2,Item3 and so on as the Item is a small word it occupies less space and all are looking fine in the width as shown below:
But if I take the name as "Features", Support","How it works?" then it is not arranging them properly as it shows me lot of space n between each list item.
So is there any better way to get rid of this such as expanded menu by it's width or something like that
This is my css for the menu:
.menu
{
background-image: url('../images/header.png');
background-repeat: no-repeat;
}
ul.menu {
display:block;
margin:0;
padding:0;
height:60px;
text-align:right;
}
ul.menu li {
display:inline-block;
width:50px;
height:30px;
margin-right:10px;
}
ul.menu li:first-child {
float:left;
margin-left:10px;
}
ul.menu li a
{
text-decoration: none;
padding: 15px 0;
width: 50%;
color: #eee;
float: left;
text-align: center;
font-weight: bold;
font-style: normal;
font-family: Verdana;
}
This is my markup:
<div class="menu">
<ul class="menu">
<li>Home</li>
<li>Features</li>
<li>Support</li>
<li>Blog</li>
<li>How it work's</li>
</ul>
</div>
Actually according to Derek answer If I changed my width to 100px then it shows me this way
width:50px; is your problem.
You can remove it and:
manually set each item OR
create a function to measure the width of it's contents and adjust accordingly OR
leave them with no defined width
<li style="width: 60px;">Blog</li>
<li style="width: 130px;">How it work's</li>
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 am new to this and need a little help.
Just designing a random website for some practice and I can't seem to get my topmenu on my header to move up. I've changed padding's & margins in a few places and can't seem to get it to work. Wonder if I'm missing something or if there is a better way to organize my CSS. Any help would be greatly appreciated. Thanks :)
#main {
margin-left: auto;
margin-right: auto;
width: 800px;
}
body {
margin:0;
}
#topbar {
background-color: black;
height: 80px;
width: 100%;
margin-top: 0;
margin-bottom:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#text {
display:block;
color: White;
float:right;
padding-right: 820px;
padding-top: 10px;
font-size:20px;
}
#topmenu {
display:block;
list-style:none;
padding:0 400px 0px 0px;
float: right;
}
#topmenu li {
display: inline;
}
#topmenu a {
position:relative;
padding:0 4px 0 4px;
font-size: 13px;
text-decoration:none;
}
#topmenu a, #topmenu a:visited, #topmenu a:active {
color:white;
}
I want the menu to move up ever so slightly.
<div id="topbar" >
<div id="text"><strong>My Template Website</strong></div>
<div id="topmenu">
<ul>
<li><a href=""/>Home</li>
<li><a href=""/>About Us</li>
<li><a href=""/>Services</li>
<li><a href=""/>Product</li>
<li><a href=""/>Contact Us</li>
</ul>
I assume you already reduced the margin-bottom of the headline and the margin-top of your topmenu to 0 and now you need a way of bringing the topmenu up a bit more without absolute positioning. What you might not know is, that it is allowed to use a negative margin on the menu to bring it up:
#topmenu {
/* ... your other styles */
margin-top: -15px;
}
Before applying this you shoud check the margin of your ul which probably has a margin by the browsers default stylesheet:
You can check this by yourself when debugging the page in the web console (all popular browsers have one; e.g. in Firefox you have to press F12).
I don't know what the rest of your site looks like and if the surrounding div#topmenu is really required. But if not, you could remove it and give the id to the ul, then remove the margin-top from your new #topmenu. The advantage of this is that you don't have to manage two different elements, which possibly was the reason for your confusion in this example.
<div id="topbar" >
<div id="text"><strong>My Template Website</strong></div> <!-- <h1> instead for semantic reasons? -->
<ul id="topmenu">
<li><a href=""/>Home</li>
<li><a href=""/>About Us</li>
<li><a href=""/>Services</li>
<li><a href=""/>Product</li>
<li><a href=""/>Contact Us</li>
</ul>
</div>
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 want to target a specific element and whatever properties I set on the logo overrides the other listed items. For example, I have a border style that is solid and it runs through all the listed items of #nav. I just want to make the image link logo an exception to this. The logo is located right in the middle between portfolio and projects. How do I do this?
<!--NAVIGATION-->
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li id="logo"><img src="assets/img/jp-logo.png" /></li>
<li>Projects</li>
<li>Contact</li>
<li>Class List</li> <!--change URL later-->
</ul>
#nav{
list-style-type: none; /*gets rid of bullets*/
padding: 0;
border-color: #FFB405;
border-style: solid;
border-width: 1px 0;
text-align:center;
}
#nav li{
display: inline; /*display list horizontally*/
}
#nav a{
display: inline-block; /*don't break onto new lines and follow padding accordingly*/
padding:10px;
}
I assume the problem is more about removing the border from the logo than targeting the element since it has an id, thus targeting is as easy as #logo.
The first thing you need to do in order to exclude the logo from the border is apply the property to the list-items instead of the container <ul> then you just override the style in a following rule:
#nav li{
display: inline-block; /*display list horizontally*/
border-color: #FFB405;
border-style: solid;
border-width: 1px 0;
}
#nav #logo{
border: 0;
}
Finally, if you go and apply this styles you'll notice a gap in between your list items, this is caused by the display:inline-block property and the whitespace in the HTML markup, you can check this answer for multiple ways to properly handle that.
Here's a complete demo of the solution in jsFidlle
You can do
#nav > #logo a
This matches with an element with id logo, tag <a> and children of element with id nav
Or even
#logo a
is enough.
Check this Fiddle
Give border-top and border-bottom to you li and target your #logo with border:none; this will solve your problem.
And for the gap you can see in between li elements this can be solved by setting the parent elements font-size:0; and then define the font-size:npx to your li element.
HTML
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li id="logo"><img src="http://placehold.it/50x50/" /></li>
<li>Projects</li>
<li>Contact</li>
<li>Class List</li> <!--change URL later-->
</ul>
CSS
ul#nav {
margin:0;
list-style-type: none;
/*gets rid of bullets*/
padding: 0;
text-align:center;
font-size: 0;
}
#nav li {
margin:0;
display: inline;
/*display list horizontally*/
}
#nav a {
display: inline-block;
/*don't break onto new lines and follow padding accordingly*/
padding:10px;
border-top:1px solid #FFB405;
border-bottom:1px solid #FFB405;
margin:0;
font-size: 16px;
}
ul#nav li#logo a {
border-top:none;
border-bottom:none;
}
I'm trying to make a menu, but I'm having trouble centering the text to the middle.
<div id="menucontainer">
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li> |
<li>#Html.ActionLink("About", "About", "Home")</li> |
<li>#Html.ActionLink("Projects", "Projects", "Home")</li> |
<li>#Html.ActionLink("Forum", "Forum", "Home")</li>
</ul>
</div>
#menu
{
background-image: url("../Content/img/bg-menu.png");
height:50px;
padding-left:30px;
padding-right:25px;
text-align:center;
border-radius:20px;
background-repeat:repeat;
display:block;
list-style: none;
margin-left:55%;
position:absolute;
color:#aa4dc6;
}
#menu li
{
display:inline;
padding:5px 10px 9px 10px;
}
#menu a
{
text-decoration:none;
color:#606060;
text-decoration:none;
text-transform:capitalize;
font-size:19px;
font-weight:bold;
font-family: 'Open Sans', sans-serif;
}
give it the same line-height as the element's height and the text should be properly aligned
There are a few solutions to this problem.
Here's a jsFiddle that demonstrates all of the solutions below.
First, you can try setting the display property to table-cell for the list items in the menu, and then you can use vertical-align:middle to center the text.
The solution would probably work well, because instead of floating the list items, you can use CSS to make them behave like table cells.
ul#menu {
display: table-row;
}
ul#menu li {
display: table-cell;
vertical-align: middle;
}
Second, you can set the line-height property to the height of the list item. Be careful with this one though, because if the text wraps it will break the layout:
ul#menu li {
height: 30px;
line-height: 30px;
}
Lastly, instead of setting a fixed height, you can use padding to set the height of the list items. Assuming you use the same padding for the top and bottom, the text should be aligned in the center:
ul#menu li {
padding: 15px 5px 15px 5px;
}