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>
Related
Why is the dropdown ul in 'Menu Item 2' not being aligned absolutely to the top of its parent li element?
With the dropdown ul CSS set as:
position:absolute;
top:0;
left:0;
I would expect it to be covering from the top left of the parent element, i.e. covering it completely.
Some confusing symptoms:
I want the parent menu to be clickable AND have a dropdown in some cases. So where there is a dropdown, the parent menu <li> has an <a> that is padded to increase the clickable area. This also increases the containing <li>, since the li:hover shows the same padded area. This works as desired.
However, when the dropdown is shown and aligned to <li>, <li> seems to be in the position before it was expanded by <a>. When I check in a browser (Chrome and Firefox) the <li> element is not actually filling the same space as the <a> and so the dropdown appears some amount below the where I want it.
I understand that I can use top:SOME_NEGATIVE_OFFSET in the absolutely positioned dropdown but this feels hacky and I'd like to understand what's going on?
It's my first post, please go easy on me :)
<!DOCTYPE html>
<html>
<head>
<title>DropDownTest</title>
<style>
ul{
list-style:none;
margin:0;
padding:0;
}
li{
display:block;
position:relative;
}
li>a{
padding:1rem;
background-color:grey;
}
li>a:hover{
background-color:lightgray;
}
.mainbar>li{
float:left;
}
li.hasDrop:hover>ul{
display:block;
}
.dropContent{
display:none;
position:absolute;
top:0; /*not working as expected*/
left:0;
margin:0;/*thought this might have helped but no*/
padding:0;
z-index:1;
list-style:none;
min-width:100%;
}
.dropContent>li>a{
display:block;
}
</style>
</head>
<body>
<div>
<ul class="mainbar">
<li>Menu Item 1</li>
<li class="hasDrop">
Menu Item 2
<ul class="dropContent">
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li>Menu Item 3</li>
</ul>
</div>
</body>
</html>
It happens beacuse your a element is getting padding as inline element.
Modify this rule:
li>a {
padding: 1rem;
background-color: grey;
display: block; /* this*/
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: block;
position: relative;
}
li>a {
padding: 1rem;
background-color: grey;
display: block; /* this*/
}
li>a:hover {
background-color: lightgray;
}
.mainbar>li {
float: left;
}
li.hasDrop:hover>ul {
display: block;
}
.dropContent {
display: none;
position: absolute;
top: 0;
/*not working as expected*/
left: 0;
margin: 0;
/*thought this might have helped but no*/
padding: 0;
z-index: 1;
list-style: none;
min-width: 100%;
}
.dropContent>li>a {
display: block;
}
<div>
<ul class="mainbar">
<li>Menu Item 1</li>
<li class="hasDrop">
Menu Item 2
<ul class="dropContent">
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li>Menu Item 3</li>
</ul>
</div>
I using a mobile menu for my website which is dropping down from the top to the bottom. Is their a way to get it open from the left, like the sidebar does? I'm not that familiar with css animation and I tried transform: rotate(90deg); but without any effects.
The mobile menu is visible here https://www.amaoni.de
it can be easily done by using ul,li tags
ul,li{
list-style:none;
padding:0px;
margin:0px;
}
#yourMenu{
border:1px solid #000;
height:200px;
width:30%;
}
#yourMenu>li{
width:100%;
padding:5px;
background-color:blue;
box-sizing:border-box;
color:#fff;
}
#yourMenu>li:hover{
cursor:pointer;
background-color:red;
}
<ul id="yourMenu">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
I have a fairly basic question.
I have a page with a ul with 7 lis, spanning 100% of the page. I want to make the last three lis float to the right, and I want the very last one to be a different color. I am trying not to recode this more than necessary.
Here is the code, how shall I apply the css? Make another ul, (but would it stay in line with the other) or apply to the li directly? can I make a special class of li to let those last three be positioned in a different place?
<html>
<head>
<style>
ul {
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a {
width:6em;
text-decoration:none;
color:white;
}
</style>
</head>
<body>
<ul>
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
<li>Link five</li>
<li>Link six</li>
<li>Link seven</li>
</ul>
</body>
</html>
You could use :nth-child() for this. css-tricks.com/how-nth-child-works
li:nth-child(5),
li:nth-child(6),
li:nth-child(7) {
text-align: right;
}
li:nth-child(7) a {
color: red;
}
example:
http://jsfiddle.net/skeurentjes/3RR8D/
You can use this code without adding another list or classes.
li:nth-child(4) ~ li {text-align: right;} /* or float? */
li:last-child a {color: green;}
Try something like this
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
<li><a class="float" href="#">Link five</a></li>
<li><a class="float" href="#">Link six</a></li>
<li><a class="float" id="last" href="#">Link seven</a></li>
css
.float{
float:right;
}
#last{
color:red;
}
you need this
li:nth-child(6) {
text-align: right;
}
li:nth-child(7) a {
color: red;
}
You can use this code:
(the rule would applies regardless of how many "li" will be)
li:nth-last-child(1), li:nth-last-child(2), li:nth-last-child(3) {
text-align: right;
}
li:last-child{
color: red;
}
I want to display a content"--" after every list items but when i use li:after then the content comes below the list items and when i use a:after then the content correctly comes after the list items. However i want the content"--" to be associated with the <li> and not the <a> because when i will be using a:hover then there will be some problem. Here is the code. Can anyone help?
HTML
<ul class="group">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
CSS*
.group:after {
content: "";
display: table;
clear: both;
}
ul {
list-style:none;
background:gray;
}
li {
float:left;
padding-left:30px;
}
a {
text-decoration:none;
display:block;
padding:10px;
color:white;
font-weight:bold;
}
li:after{ content:'--'; }
The problem here is the element :after is rendered after the a tag, since you have this into the a tag:
a {
display:block;
}
The :after content is in the next level pushed by the a block tag. Change this and you see the change:
a {
display:inline-block;
}
The demo http://jsfiddle.net/6YuQ8/3/
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.