I want to increase the line separator height between li tags.
I have tried using height:100% but it is not working.
Am I following the right approach. Can anyone help?
CODE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
li {
display:inline;
list-style-type:none;
padding-left:1em;
margin-left:1em;
border-left:1px solid #ccc;
}
li:first-child {
border-left:none
}
</style>
</head>
<body>
<table cellspacing="0px;" style="border-top-width:0.1px;
border-top-style:solid;border-top-color:#ccc; border-bottom-color:#ccc;
border-bottom-style:solid; border-bottom-width:0.1px;">
<tr>
<td><ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
</ul></td>
</tr>
</table>
</body>
The problem is that you have set the li elements to display:inline;. inline elements can't take height. Instead, use either display:inline-block; or float:left; and display:block;
li {
...
display:block;
float:left;
height:50px;
...
}
use the margin or padding:
CSS:
li {
padding-top: 15px;
}
With CSS line-height:
li {
line-height: /*set height of li here */;
}
Text will be centered vertically. My preference, because it is effective for all inline and block elements, though one option among several.
Related
I'm trying to style a popup-menu that shows a submenu on hover, popping out to the right of the hovered item.
My main items are split into two columns using column-count, and this is where the misery begins.
In Firefox, everything behaves as expected: the submenu pops out where the hovered item is. In Chrome, the submenu pops up relative to the leftmost column.
The four cases (hovered items 3 and 9, Firefox and Chrome) are shown in the attached screen. Try the demo both in Firefox and Chrome to see what I mean.
Is there a neat solution for this? I tried column-span, but that doesn't work. I cannot make the item's li relative because I want the popup to fill the complete height.
ul.first {
border:1px solid #888;
position:relative;
display:inline-block;
margin:5px;
padding:0;
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
column-rule:1px solid #888;
-moz-column-rule:1px solid #888;
-webkit-column-rule:1px solid #888;
background-color:#eee;
}
ul.first li {
list-style:none;
display:block;
width:200px;
background-color:#eee;
margin:2px;
padding:5px;
}
ul.first li:hover {
background-color:#ddd;
}
ul.first > li.hassub > ul {
display:none;
position:absolute;
margin-left:100px;
top:0;
bottom:0;
background-color:#ddd;
padding:0 5px;
}
ul.first > li.hassub:hover > ul {
display:inline-block;
}
ul.first > li.hassub > ul > li {
background-color:#ddd;
}
ul.first > li.hassub > ul > li:hover {
background-color:#eeffee;
}
<ul class="first">
<li>Item 1</li>
<li>Item 2</li>
<li class="hassub">Item 3
<ul>
<li>Subitem 3-1</li>
<li>Subitem 3-2</li>
<li>Subitem 3-3</li>
<li>Subitem 3-4</li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li class="hassub">Item 9
<ul>
<li>Subitem 9-1</li>
<li>Subitem 9-2</li>
<li>Subitem 9-3</li>
<li>Subitem 9-4</li>
</ul>
</li>
<li>Item 10</li>
</ul>
http://jsfiddle.net/cfckw5jz/6/
There are many solutions:
Solution 1: A quick solution is to Give the sub-menu inside the right column different class (hassub2), and give it different margin-left
.hassup2{
left: 390px;
}
Solution 2: A smarter solution is to give all sub-menus inside li's above 5 a different margin, this can be achieved by using nth-child:
ul.first > li:nth-child(n+5) > ul{
left: 390px;
}
n + 5 = any element above 5 (in that case all li's above 5)
Solution 3: You can also separate it into 2 UL's and float them left (or use display: inline-block), and assign position relative to the UL's to be the reference point for the sub-menu:
li{ list-style: none; }
ul.left,
ul.right{
float: left;
width: 200px;
position: relative;
}
.right li,
.left li{
float: left;
width: 100%;
background-color: #eee;
margin: 2px;
padding: 5px;
}
.right li ul,
.left li ul{
display: none;
position: absolute;
left: 200px;
top:0;
height:100%;
}
.right li ul li,
.left li ul li{
width: 100%;
padding: 5px;
margin: 2px;
}
.right li:hover ul,
.left li:hover ul{
display: block;
}
Tip: use Left instead of margin-left for a consistent design, using left will always make the element 200px away from left side, it will not depend or get effected on any element placed before it, like what margins behave.
Tip: Absolute positioned element will look for the first father with a defined position and make it its reference point. So to make an absolute div refer to the direct father div, the father must be given position (relative, fixed, or absolute).
Today I realized that this issue was fixed in the latest Chrome release 55 and now Chrome behaves as the other modern browsers.
So, no need to make modifications to css nor html. Yay!
I have a list of links that are displayed inline. I want the last li to be positioned centered of the inline list above it. How can I do this with css?
The reason for this is, when the web page is used in mobile it can't fit the entire list, so I want to move it below.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Last Item</li>
</ul>
You can do this by setting text-align:center to both the ul and li element:
ul{
list-style:none;
height:100%;
width:100%;
padding:0;
text-align:center;
}
ul li{
text-align:center;
display:inline-block;
width:75px;
height:20px;
background:silver;
border:1px solid black;
padding:10px;
}
IN ADDITION: Make sure that the ul has a width of 100% and the padding of the ul is set to zero. Also, the li must have a display of inline-block.
Check out the fiddle:
http://jsfiddle.net/rmj7q78t/
This css will do the trick:
ul li {
display: inline-block;
}
ul li:last-child {
display: block;
text-align: center;
}
I am trying to create a webpage which is made up of a header and bellow the header a list of items. I want the list of items to be vertically scrollable. I also would like the webpage to take up the entire window but not be bigger. Currently my problem is the list of items is not scrollable and instead extends far below the bottom of the window and this is causing the window to be scrollable. What should the CSS properties be on the html, body, header and list items?
doctype html
html
head
link(href="css/style.css" rel="stylesheet")
body
div#wrapper
h1 Interactive Contact Directory
div(class="tools")
|Search:
br
input(type="text" id="searchBox")
select(name="searchBy" id="searchBy")
option(value='firstname') First Name
option(value='lastname') Last Name
option(value='email') Email
br
br
div(id="listingHolder")
ul(id="listing")
div(id="listingView")
Bellow is the current style sheet I have
html{
height: 100%;
}
body {
background:#121212;
margin:0px;
padding:0px;
font-family:"Open Sans", sans-serif;
height: 100%;
}
#wrapper {
max-height: 100%;
}
h1 {
margin:0px;
color:#fff;
padding:20px;
text-align:center;
font-weight:100;
}
.tools {
text-align:center;
color:#fff;
}
#searchBox {
padding:7px;
border:none;
border-radius:5px;
font-size:1.2em;
}
a.filter {
display:inline-block;
padding:5px 10px;
margin:5px;
background:#0472C0;
color:#fff;
text-decoration:none;
border-radius:3px;
}
a.filter:hover {
background:#0B9DE0;
color:#fff;
}
ul#listing {
list-style:none;
padding:0px;
margin:0px;
background:#fff;
width:100%;
}
ul#listing li {
list-style:none;
border-bottom:1px solid #eee;
display:block;
}
ul#listing li .list-header {
padding:10px;
cursor:pointer;
display:block;
}
ul#listing li .list-header:hover {
background:#7893AB;
color:#fff;
}
ul#listing li .list-header.active {
background:#447BAB;
color:#fff;
}
ul#listing li .details {
display:none;
background:#efefef;
padding:20px;
font-size:0.9em;
}
#listingHolder{
width: 50%;
overflow: scroll;
}
As per your question vertical listing have a scrollbar effect.
CSS / HTML :
nav ul{height:200px; width:18%;}
nav ul{overflow:hidden; overflow-y:scroll;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header>header area</header>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
<li>Link 11</li>
<li>Link 13</li>
<li>Link 13</li>
</ul>
</nav>
<footer>footer area</footer>
</body>
</html>
Another solution would be as below where the list is placed under a drop-down button.
<button class="btn dropdown-toggle btn-primary btn-sm" data-toggle="dropdown"
>Markets<span class="caret"></span></button>
<ul class="dropdown-menu", style="height:40%; overflow:hidden; overflow-y:scroll;">
{{ form.markets }}
</ul>
So I've got some simple code here:
<div id="nav">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
CSS-
ul
{
list-style-type:none;
width:700px;
height:44px;
padding:0;
}
li
{
float:left;
margin:0;
padding:0;
width:80px;
height:auto;
}
a
{
height:40px;
text-decoration:none;
border:2px solid black;
background:blue;
}
-#nav
{
width:786px;
height:66px;
border:2px solid black;
background:#C4BD97;
margin:5px;
}
This code should force my a tags to align themselves horizontally and give them a definite height/width. They align perfectly, but their height and width WILL NOT change no matter what I do. Never ran into this problem before, is my HTML broken? Thanks.
display: inline elements do not respect height. Change them to display: inline-block (or perhaps block) or use line-height to alter the height.
http://jsfiddle.net/kHkyh/
Try setting the height and/or width on the anchor tags in the li. That is, push out the li using the anchor tags. You can do this in a decently uniform way using padding to make sure the entire area of the anchor is clickable. Also, this approach works back to I believe ie6(not sure about ie5, have not tested it). Following is roughly what I'm talking about:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body, #menu, #menu li
{
position: relative;
display: block;
padding:0px;
margin: 0px;
}
#menu
{
list-style-type:none;
width:100%;
}
#menu a
{
position:relative;
display:block;
float:left;
width:25%;
padding:10px 0px 10px 0px;
text-align:center;
}
</style>
</head>
<body>
<ul id="menu">
<li>One item</li>
<li>Another item</li>
<li>hola</li>
<li>Hi</li>
</ul>
</body>
</html>
Morning again...,
Sorry to bother everyone but I need more help... I haven't done any real coding in ages so here goes...
I'm trying to make a horizontal navigation menu, here's my html
<nav>
<ul id="navmenu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<ul>
<nav>
now I have the following CSS
/* menu */
ul#navmenu{
border-top:1px solid #FFF;
background:#e60000;
list-style: none;
margin: 0;
padding: 0;
padding-left:30px;
}
ul#navmenu li{
display:inline;
}
ul#navmenu li a{
color:#fff;
text-decoration:none;
/*
padding-left:15px;
padding-right:15px;
*/
padding:15px 15px 15px 15px;
}
ul#navmenu li a.selected{
color:#e60000;
text-decoration:none;
/*
padding-left:15px;
padding-right:15px;
*/
padding:15px 15px 15px 15px;
background:#fff;
}
I want the links to sit in the center of the Li and look something like this:
However the containing UL doesn't seem to contain the LIs, they bleed out of the container. I've played around with overflow and line heights but nothing seems to work... here's a worst case scenario...
does any one have any ideas?
give display:block to your <a> because <a> in an inline element so, inline element not take vertical margin, vertical padding, width & height
Check this http://jsfiddle.net/T8eNe/2/
but first close your UL & NAV
For starters, I would close the <ul> and <nav> tags correctly, then check to make sure that the parent containers are floated left.
Give inline-block to your anchor
ul li a { display: inline-block; }