I have a list of urls in ul element and I want the list in one row. I've tried this way to place them in the center of the page but they are not exactly in the center.
This is the HTML code
<ul id="links">
<li class="inner-li"> about
</li>
<li class="inner-li"> projects
</li>
<li class="inner-li"> photoblog
</li>
<li class="inner-li"> music
</li>
</ul>
and this is the style that I've tried
.inner-li {
font-size: 1.25em;
float: left;
margin-left: 1em;
list-style-type: none;
}
#media screen and (min-width: 21em) {
#links {
width: 21em;
margin: 0 auto;
}
}
and you can see it in JsFiddle.
Add display:table and padding:0 to #links like:
#media screen and (min-width: 21em) {
#links {
display:table;
margin: 0 auto;
padding: 0;
}
}
Also add
#links > li:first-child{
margin:0;
}
cause first li element no need to has margin-left
fiddle
It's not centered because you've applied margin-left for the <li>'s.
.inner-li {
font-size: 1.25em;
float: left;
margin-left: 1em; /* this */
list-style-type: none;
}
Which will push the first <li> 1em away from the center.
You can achieve the same layout, centered by changing it to padding: 0 .5em instead.
Demo
add this code your css file :
you should definition your menu width and other necessary codes.
#links {
min-width: 100%;
}
Related
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>
In first image was taken from IE, its having full width for every content, but if u see in second image last menu content, not taking full width. how to solve this in both browser
HTML:
<div class="menu-section clearfix">
<div class="menu-element clearfix">
<ul>
<li class="active">Home</li>
<li>about us</li>
<li>administration</li>
<li>academics</li>
<li>research</li>
<li>activities</li>
<li>examination</li>
<li>facilites</li>
<li>contact us</li>
</ul>
</div>
</div>
CSS:
.menu-section {
background-color:#900000;
height: 56px;
}
.menu-element {
background-color: #400;
height: 50px;
}
.menu-element li {
float:left;
}
.menu-element li:hover {
background-color:#900000;
}
.menu-element li.active {
background-color:#900000;
}
.menu-element li a {
color:#fff;
text-transform:uppercase;
display: block;
padding: 18px 21px;
text-decoration:none;
font-weight: bold;
}
You need to add style to the ul as well:
.menu-element > ul {
list-style: none;
margin: 0; padding: 0;
}
Maintaining consistency across browsers is bit difficult, but you could ensure same rendering by two methods.
Specify a valid doctype on your html to ensure standards mode, and
Specify a box-sizing typically border-box in your stylesheet.
-
* {
box-sizing: border-box;
}
If you want to justify the menu options across the width, then you will have to make a few adjustments and a hack.
Apply a fixed width to the wrapping div, text-align:justify on the ul and display:inline-block on li are required.
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.
.menu-element {
width: 100%; /* fixed width required on wrapping container */
}
.menu-element > 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 */
}
.menu-element 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 */
}
.menu-element > ul:after {
/* this is the hack without which the list items won't get justified */
content:''; display: inline-block; width: 100%; height: 0;
}
Demo: http://jsfiddle.net/abhitalks/mv7qnfLe/4/
Full Screen Demo: http://jsfiddle.net/abhitalks/mv7qnfLe/4/embedded/result/
.
Try this:-
.menu-element ul {
padding: 0;
}
Try This
Give some width to ul element and add this style rule in your css:
.menu-element ul {
clear: both;
list-style:none;
margin: 0 auto;
text-align: center;
width: 92%;
}
I hope it works for you.
Please, give me some help in the following:
HTML code:
<div id="medium_ribbon">
<ul class="up_rectangles">
<li id="first_up"> </li>
<li id="second_up"> </li>
<li id="third_up"> </li>
<li id="fourth_up"> </li>
</ul>
</div>
Next, CSS code:
#medium_ribbon {
text-align:center;
background-color:#172236;
padding-top:20px;
}
.up_rectangles{
list-style: none;
margin-bottom: 0px;
}
.up_rectangles li {
line-height: 200px;
width: 265px;
background-color: #C8CACF;
display: inline-block;
margin-right:15px;
}
.up_rectangles>li:last-child {
margin-right:0;
}
Finally, the result:
The picture is a bit aligned to the right and I cannot discover the reason no matter how much I've tried.
Thank you
Your browser's default stylesheet automatically puts padding on .up_rectangles.
Simply reset if by applying this CSS rule:
.up_rectangles{
padding: 0;
}
Then it will work as expected: http://jsfiddle.net/R8pL3/
by default <ul> have some padding and margin.
So add the margin:0 and padding:0 in `.up_rectangles' class.
so the code will be like.
.up_rectangles
{
list-style-type: none;
margin: 0;
padding:0
}
Add padding-left:0 to your .up_rectangles class. The browser, be default, adds padding to ul elements. By adding padding-left:0 to the ul you'll fix this.
.up_rectangles{
list-style: none;
margin-bottom: 0px;
padding-left:0;
}
Here's the working demo.
I'm trying to make a menubar for my website with home, about, and contact links. They are aligned on the right side of the page. For some reason, when I reload the page, sometimes contact seems to return to the next line. I don't have to change anything for this to happen.
Here is the relevant css:
ul#menubar {
display: inline-block;
list-style-type: none;
font-family: "Cantarell";
float: right;
margin-right: 5%;
margin-top: 0;
margin-bottom: 0;
}
li.menubar_item {
display: inline-block;
padding-right: 5%;
}
li.menubar_item a {
color: #D2F2FE;
text-decoration: none;
}
div.menubar_div {
height: 150px;
padding-right: 5%;
}
And the HTML:
<ul id="menubar">
<li class="menubar_item">
<div class="menubar_div">Home</div>
</li>
<li class="menubar_item">
<div class="menubar_div">About</div>
</li>
<li class="menubar_item">
<div class="menubar_div">Contact</div>
</li>
</ul>
It's your padding-right: 5% that ruins it. Since you haven't set a width for the ul#menubar, it's automatically set to 100%. The problem is that the width expands with the padding, causing it to be a total of 115% (100 + 5x3).
You can add this to your ul#menubar:
width: 85%;
text-align: right;
Try adding this line in your CSS :
ul#menubar {
white-space:nowrap;
}
The property white-space:nowrap force the li elements to be side by side
Here is my HTML:
<ul class="links">
<li>
Home
</li>
<li>
Google
</li>
</ul>
CSS:
ul.links {
list-style: none outside none;
margin: 0;
padding: 0;
}
.links li {
float: left;
margin: 8px 4px -2px;
}
When viewing this in IE6 the list items are 100% in width, where as I need them to be as wide as the text they contain plus the padding.
Any ideas?
.links li {
display:inline;
}
.
When you float an element you must apply a width attribute.
width:100px; /* or whatever */