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 */
Related
I already tried "width: 100%;" but the dropdown element then gets the same width as the whole page. I'm working with floats so maybe that needs a different approach?
I swear I've looked at similar questions but none of the solutions there worked for me. Can anyone see what I'm doing wrong? You can find the jsfiddle with all of the code here. I currently "solved" the problem with a fixed width.
Here is the HTML for the navi:
<nav role="navigation" class="navi">
<ul class="nav-elements">
<li>Home</li>
<li>Ongoing Stories
<ul>
<li>Sublink</li>
<li>Another Sublink with a long text</li>
</ul>
</li>
<li>Sleeping Stories
<ul>
<li>Sublink</li>
<li>Another Sublink</li>
</ul>
</li>
<li>News</li>
<li>About/FAQ</li>
</ul>
</nav>
And the CSS:
.navi {
float: left;
margin-bottom: 0.5em;
}
.navi ul {
padding-left: 0; /* Navi aligned left */
margin: 0;
}
.navi li {
background: #808080;
float: left;
padding: 0.2em 0.8em 0.2em 0.8em;
border: 1px solid black;
margin: 0 0.4em 0.4em 0;
list-style: none;
font-size: 1.2em;
border-radius: 10px;
}
/* nav-elements for dropdown-menus */
.nav-elements ul {
margin-top: 0.2em;
padding: 7px 10px 0 0;
}
.nav-elements li ul {
position: absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
z-index: 1000;
width: 9.25em;
margin-left: -0.85em; /* to counter the padding in .navi li */
}
.nav-elements li:focus,
.nav-elements li:hover { /* main navi gets shadow while dropdown is active */
text-shadow: 0 0 7px rgba(255,255,255,.5); /* kind of a glow effect */
}
.nav-elements li:focus ul, /* show the submenu when user focues (e.g. via tab) the parent li [doesn't work?]*/
.nav-elements li:hover ul { /* show the submenu when user hovers over the parent li */
left:auto; /* Bring back on-screen when needed */
text-shadow: none; /* dropdown doesn't inherit shadow from main-navi*/
}
.nav-elements ul li {
float: none;
font-size: .9em;
}
According to your issue that you don't want to use fixed width then please check my Updted fiddle
I have used width:100% so it will change according to parent ul. What you need is to change width:100% and position:relative or parent li(.navi li) and then i removed margin-right as it was extra and you got the result.
Updated
As i have used position:relative so width:100 is taking width inside the border so you are missing 2px gap so just for workaround i have used width:101%. Please check my updated fiddle.
let me know if its what you need. Thank you :)
your second ul element can just be wide as the li element around it. try this:
#subMenuFoo {
display: none;
}
#foo:hover ~ #subMenuFoo {
display: block;
}
<div class="nav-elements">
foo
<div id="subMenuFoo">
bar
</div>
</div>
--
please mind the gap
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 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%;
}
I'm trying to center a horizontal list of image links, though it seems that the left of the images are being centered. As you can see, the center of the list of images (which are all the same size) is slightly to the right of the text.
HTML:
<div id='nav'>
<ul>
<li>
<a href=''><img src='images/login.png' /></a>
</li>
<li>
<a href=''><img src='images/add.png' /></a>
</li>
<li>
<a href=''><img src='images/forum.png' /></a>
</li>
</ul>
</div>
Css:
#nav {
text-align: center;
}
#nav ul {
list-style: none;
margin: 20px auto;
}
#nav li {
display: inline-block;
margin: 0px 30px;
}
What can I do to completely center it?
Working Demo : http://jsfiddle.net/3d6TS/
The <ul> tag by default adds padding. You need to set padding:0 manually to <ul> tag.
#nav ul {
list-style: none;
margin: 20px auto;
padding:0;
}
#nav { text-align: center; }
#nav ul { list-style: none; }
#nav ul li { display: inline; }
the solution is the display:inline on the li
A good solution would be to maintain the margin-left and make sure the first child has a left margin of 0. This causes both the first and last children to have no margins on the edges it meets with the parent. This is good as :first-child doesn't catastrophically break styles in >=ie7 where as :last-child is unsupported in <=ie8 making the reverse of this infeasible for the time being.
#nav ul li {
display: inline-block;
margin-left:30px;
}
#nav ul li:first-child {
margin-left:0;
}
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.