For some reason, I can't prevent the UL and it's LI's from wrapping.
I want the UL's width to be exactly the width of the LI's on one line (without wrapping) and if the UL becomes wider than the nav-div (800px), I want a scrollbar within the nav so I can scroll the LI.
I tried pretty much anything with display, whitespace, width's and height, but I can only get it to work if I give the UL a certain width. This, however, is not an options, since the page is generated and can contain 1-20 LI's.
Does anyone know how to make a scrollbar come up without setting the UL's width?
HTML:
<div id="nav">
<ul id="navbuttons">
<li>Some text</li>
<li>Some text</li>
...
</ul>
</div>
CSS:
div#nav
{
height: 100px;
width: 800px;
margin-left: auto;
margin-right: auto;
}
div#nav ul li
{
margin-right: 15px;
float: left;
font-size: 12px;
list-style-type: none;
}
try this
ul {
white-space:nowrap;
}
li {
display:inline;
}
You can use display: inline-block; white-space: nowrap; for the wrapper and display: inline or display: inline-block for the children.
So, it would look like this: http://jsfiddle.net/kizu/98cFj/
.navbuttons {
display: inline-block;
overflow: auto;
overflow-y: hidden;
max-width: 100%;
margin: 0 0 1em;
white-space: nowrap;
background: #AAA;
}
.navbuttons LI {
display: inline-block;
vertical-align: top;
}
And, if you'll need to support IE add this hack in conditional comments to enable inline-blocks in it:
.navbuttons,
.navbuttons LI {
display: inline;
zoom: 1;
}
Caveat: Untested
Would you not just want to set a width for the li item
div#nav ul li {
margin-right: 15px;
float: left;
font-size: 12px;
list-style-type: none;
width: 100px;
}
And then set the width to a fixed width and overflow on the UL to scroll?
div#nav ul {
width: 800px;
overflow: scroll;
}
This would cause you UL to scroll when your li's went past say 8, is that what you're after?
By setting the width on the <ul> to inherit you can use the overflow property to set the overflow behavior of the element. With the value scroll, all of the element's contents will scroll (in both x and y directions) if the height and the width of the contents overflow that of the box:
div#nav ul
{
overflow: scroll;
width: inherit;
height: inherit;
}
Add the following rule:
div#nav ul {
overflow-x: hidden;
overflow-y: scroll;
white-space: nowrap;
}
Related
IE11 is wrapping the rightmost of my four nav items to the next line, when all four together are supposed to fit on one line and have a combined width of 320px. How can I stop this?
HTML
<body>
<div id="nav">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</body>
CSS
html, body, div, span, nav {
margin:0;
padding:0;
border:0;
width: 100%;
box-sizing: border-box;
}
nav{
display: block;
}
#nav ul {
text-align: justify;
width: 320px;
}
#nav ul:after {
margin-left: 100%;
content: "";
}
#nav ul li {
display: inline;
}
#nav a:link {
border-bottom: 0;
}
#nav a:hover {
color: #f00;
}
The markup and code work fine in Firefox 50. I have read this question but it is not clear how the answer might be applied to my problem.
https://jsfiddle.net/rrjh4g2L/
If you set fixed width for #nav ul and you know that you always will have only 4 items in the menu, just set width: 25%; for li elements and use float: left;
ul { width: 320px; overflow: hidden; } /* or use clearfix hack if you want */
li { width: 25%; float: left; }
It should render correctly across all browsers.
I've been fooling around with HTML/CSS recently, and I'm trying to vertically align the text in an li so that it is in the center. I've seen this question (or some variation of it) asked a bunch of times, so I apologize in advance for asking a question I'm sure you're tired of seeing, but I can't get any of the suggested solutions to work. I'm also trying to avoid setting a specific height/line-height for the li, since I'd like this to adjust to the size of the screen.
Here's the HTML:
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Experience</li>
<li>Contact</li>
</ul>
Here's the CSS:
#nav {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
list-style: none;
padding: 0;
margin: 0;
}
#nav li {
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
}
#nav li a {
display: block;
height: 100%;
}
#nav li a:hover {
background: #ccc;
}
I also have this fiddle set up in case you'd like to mess around with it and see if you can get it working. Thanks!
You can just make the line-height of #nav li 25% of the viewport height like so
#nav li {
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
line-height: 25vh; /* this is the only thing you need to add */
}
It's very simple and short and will work with any changes to the text (like font-size etc) or the list. It doesn't matter how many items you add or remove from the list or what changes you make to the height of the #nav or its list items.
See the first working revision of your jsFiddle ;)
Set display: table; on your li
and
display: table-cell;
vertical-align: middle;
on your a
final styles:
#nav li {
display: table;
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
}
#nav li a {
display: table-cell;
height: 100%;
vertical-align: middle;
}
Rev 6 of your fiddle
Try these changes in your css
#nav li {
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
display: table; /* added */
}
#nav li a {
display: table-cell; /* changes from block to table-cell */
vertical-align: middle; /* added */
height: 100%;
}
See the working example here http://jsfiddle.net/t6ryfqzk/7/
Try making your li an inline-block if you want them next to eachother, or as block if you want them underneath eachother. Make sure you give the li elements a fixed width, and set their text-align as centered.
I have a header which is the parent of the nav and logo. I have set the parent to overflow:hidden so I was able to add margin-top to the nav to get it to sit at the bottom. However it clips the logo div as well. I was trying follow this question...Overriding overflow: hidden
so tried to set the logo to overflow:visible but that hasn't worked either. I am not sure of any other solution other than the logo not being in the parent container.
Here is my code
CSS:
.container {
width: 960px;
margin:0 auto;
background-color: blue;
}
header {
height: 100px;
background-color: #001D5D;
position: relative;
overflow: hidden;
}
#logo {
height:100px;
width:100px;
z-index:10;
top:0px;
position: absolute;
overflow: visible;
}
nav {
background-color:#1CCEAE;
margin-top:63px;
}
nav ul {
width:100%;
line-height: 37px;
text-align:right;
background-color:#1CCEAE;
}
ul li {
display: inline-block;
margin-right: 20px;
}
ul li a {
text-decoration: none;
font-size: 1em;
color:white;
}
Here is a fiddle
http://jsfiddle.net/XS3Zs/
remove width:100% to ul or reset padding to 0 to ul.
<ul> doesn't really need width:100%; since it is a block element, it will use all width avalaible., width set to 100% may be too much. Borders, margin and padding will not be estimated.
The UL element has by default padding-left:40px; so if you set that to 0 it will be fine.
I updated your [FIDDLE]
I've set this up here: http://jsfiddle.net/9F6CF/
Basically, I have a list with anchors inside the LIs. The UL has a defined width and an automatic overflow, so if the text in the anchors extends wider than the width of the UL, it will scroll horizontally.
Every element is set to have a block level display, however the anchors only extend to the defined width of the UL as opposed to (what I would like to happen) extending to contain the bounds of its text. Thus, I lose any background or border style that I would have applied to the LIs or anchors in the overflow area.
Is there a way I can get the anchors to wrap around the full width of their children without setting an explicit width on all the anchors?
Markup
<ul class="menu">
<li>0000000436274637264378234</li>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
CSS
.menu {
display: block;
width: 180px;
overflow: auto;
background-color: #eee;
margin: 0px;
padding: 0px;
}
.menu li {
display: block;
background-color: #fff;
border-top: 1px solid #ccc;
margin: 0px;
padding: 0px;
}
.menu li a {
display: block;
padding: 5px;
}
.menu li {
clear: left;
float: left;
}
.menu li a {
display: inline-block;
/* display: block; */
}
Updated fiddle
I am trying to build a simple horizontal list, where each list item is a div and I want them all to sit next to one another. When I try to use the code below though, the divs end up on separate lines. Here's what I've got:
HTML:
<ul id="navlist">
<li><div>...</div></li>
<li><div>...</div></li>
<li><div>...</div></li>
</ul>
CSS:
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
I have tried to give my divs a max width and a width but that doesn't work either. Basically, they show up without bullet points on separate lines.
Some help on fixing this would be very appreciated, thanks!!
#navlist li { display:inline }
#navlist div { display:inline }
Making the <li> inline while leaving the <div> as block is your problem.
Alternatively, you may want inline-block for the <li> if you are going to be controlling sizes or margins.
You may also be interested in this demo: http://phrogz.net/JS/ul2menu/purecss_testsuite.html
I'm not sure why you have <div> inside your <li>, but I presume you have your reasons.
CSS
* {
margin: 0;
padding: 0;
}
ul {
background: #48D;
height: 35px;
line-height: 25px;
width: 300px;
}
li {
float: left;
list-style-type: none;
margin: 5px 0 0 5px;
}
li div {
background: #6AF;
padding: 0 5px;
}
HTML
<ul>
<li><div>Text</div></li>
<li><div>Text</div></li>
<li><div>Text</div></li>
</ul>
Each div inside the list items is displayed as a block by default. Display them inline as well and it should work.
#navlist div, #navlist li
{
display: inline;
}
#navlist li
{
list-style-type: none;
padding-right: 20px;
}
Try float: left; on the list items, perhaps something like that:
#navlist li
{
float: left;
list-style-type: none;
padding-right: 20px;
}
Also, make sure to specify a height to the ul because the elements will go out of the flow, meaning that the ul won't have any height. You can also use a clearfix to fix this behavior:
.clear:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear
{
display: inline-block;
}
html[xmlns] .clear
{
display: block;
}
* html .clear
{
height: 1%;
}
You just add class="clear" to the <ul>. Google clearfix css for more infos :)