Like that image I need to maintain the bottom box of the vertical scroll bar...
here is the code I used...
div {
border:1px solid black;
width:400px;
height:110px;
overflow-x:scroll;
overflow-y:scroll;
}
<div>
<ul>
<li>Item 1</li>
<li>Item</li>
<li>Item</li>
<li>New Item</li>
<li>New Item</li>
</ul>
</div>
<button id="append">Add Item</button>
function appendItem(){
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("New Item"));
ul.appendChild(li);
}
div {
border:1px solid black;
height:110px;
width:300px;
overflow:auto;
}
<div>
<ul id='list'>
<li>Item 1</li>
<li>Item</li>
<li>Item</li>
<li>New Item</li>
<li>New Item</li>
</ul>
</div>
<button onclick='appendItem()'>Add Item</button>
Related
For a filetree that is dynamically generated, I set the width to 360px and a scroll on the x.
I know, the syntax is not correct, (nested ul should be in li ) but I am still wondering why the hhhhh in code below is not at the right side of the |- but under it. And the iiiii and further also...
.tree {
width: 360px;
overflow-x: scroll;
}
.li-tree {
list-style: none;
}
<div class="tree">
<ul class="ul-tree">
<li class="li-tree">|-<span>aaaaa</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>bbbbb</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>ccccc</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>ddddd</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>eeeee</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>fffff</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>ggggg</span></li>
<ul class="ul-tree">
<li class="li-tree">|-<span>hhhhh</span></li>
<ul class="ul-tree">
<li class="li-tree">|<span>iiiii</span></li>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</div>
You can see in the fiddle that hhhhh is not right of the |- anymore, but under it: https://jsfiddle.net/a9fudsb6/5/
Its because of your width there is no space for your tree.
If you change it e.g. to
width = 400;
it appears inside.
If you want to keep your width, add the following:
.tree {
width: 360px;
overflow-x: scroll;
white-space:nowrap; // that one here
}
I'm trying to create the layout shown in the image. With the help of a partial answer, the last problem seems to be "items in a column". The block is in position, however the list of items does not start from the top. And removing margin-top from the ul doesn't help. I think it is affected by the paragraph with "title" "user".
See the latest results in the fiddle https://jsfiddle.net/L0rzj4t8/2 for this HTML content.
So, how can I achieve the layout in the image?
<div id="banner" style="background:grey">
<div id="left_block" style="float:left;width:140px">
<ul style="list-style:none">
<li><img border="0" alt="a logo" style="height:60px;width:60px"></li>
<li>A logo</li>
<li><input id="find" type="text" size="12"></li>
</ul>
</div>
<div id="center_block" style="margin-left:150px;width:400px;">
<p id="center_top">
<span style="float:left">A Title</span>
<span style="float:right">user name</span>
</p>
<ul id="center_bottom" style="list-style:none; float:left; width:100%">
<li class="option">Option 1<li>
<li class="option">Option 2<li>
<li class="option">Option 3<li>
<li class="option">Option 4<li>
<li class="option">Option 5<li>
</ul>
</div>
<div id="rigth_block" style="margin-left:550px;width:150px;">
<ul id="items" style="list-style:none;padding-top:0px">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
</div>
Using display table property you can achieve this structure. Please find the below code and the demo link.
Note : your center bottom LI is not closed proper.
CSS
#banner{
background:#696969;
display: table;
margin: 0 auto;
border-spacing: 10px;
border-collapse: separate;
}
#left_block{
width:140px;
display: table-cell;
vertical-align: top;
border: 2px solid #000;
padding: 10px;
}
#left_block ul{
padding: 0;
margin: 0;
}
#center_block{
width:400px;
display: table-cell;
vertical-align: top;
border: 2px solid #000;
padding: 10px;
}
#rigth_block{
width:150px;
display: table-cell;
vertical-align: top;
border: 2px solid #000;
padding: 10px;
}
#center_bottom{
list-style:none;
width:100%;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
}
.option {
display:inline;
padding-left:4px;
padding-right:4px;
}
.clear{
clear:both;
}
#items{
list-style:none;
padding: 0;
margin: 0;
}
HTML
<div id="banner">
<div id="left_block">
<ul style="list-style:none">
<li><img border="0" alt="a logo" style="height:60px;width:60px"></li>
<li>A logo</li>
<li><input id="find" type="text" size="12"></li>
</ul>
</div>
<div id="center_block">
<p id="center_top">
<span style="float:left">A Title</span>
<span style="float:right">user name</span>
</p>
<ul id="center_bottom">
<li class="option">Option 1</li>
<li class="option">Option 2</li>
<li class="option">Option 3</li>
<li class="option">Option 4</li>
<li class="option">Option 5</li>
</ul>
</div>
<div id="rigth_block">
<ul id="items">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
</div>
DEMO
(updated the jsfiddle link to a recent version.koriander)
you can increase #center_bottom width by percentage or px
I added a horizational menu in a header of WordPress within a <nav id="hoz-menu"> I have no idea which CSS statement make the menu exceed the block. It is supposed the CSS of the menu is responsive.
Demo can be found from http://jsfiddle.net/yckelvin/nqx2a1ao/
Here is the screen capture of the Chrome debug http://screencloud.net/v/Ernf
Below is HTML code of the menu
<nav id="hoz-menu">
<ul id="hoz-menu" class="topmenu">
<li class="topfirst"><span>Item 1</span>
<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
</ul></li>
<li class="topmenu"><span>Item 2</span>
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
<li>Item 2.4</li>
<li>Item 2.5</li>
</ul></li>
<li class="topmenu">Item 3</li>
<li class="topmenu">Item 4</li>
<li class="topmenu">Item 5</li>
<li class="topmenu">Item 6</li>
<li class="toplast">Item 7</li>
</ul>
</nav>
the width of <nav id="hoz-menu"> is 420px and CSS is
{
display: block;
}
CSS of <ul id="hoz-menu" class="topmenu">
#hoz-menu ul#hoz-menu, ul#hoz-menu ul {
margin: 0;
list-style: none;
padding: 0;
background-color: #dedede;
border-width: 1px;
border-style: solid;
border-color: #5f5f5f;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
<div id="header">
</div>
<div id="nav_cont">
<ul id="nav">
<li id="main_btn"><a class="mainlink" href="#">Parent 01</a></li>
<li id="communities_btn"><a class="mainlink" href="#" class="selected">Parent 02</a>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
</ul>
<div class="clear"></div>
</li>
<li id="occupancy_btn"><a class="mainlink" href="#">Parent 03</a>
<ul>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
</ul>
<div class="clear"></div>
</li>
<li id="resources_btn"><a class="mainlink" href="#">Parent 04</a></li>
<li id="about_btn"><a class="mainlink" href="#">Parent 04</a></li>
<li id="newsletter_btn"><a class="mainlink" href="#">Parent 04</a></li>
<li id="contact_btn"><a class="mainlink" href="#">Parent 04</a></li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
</div>
#header{
border: 0px solid;
width:1024px;
margin: 0 auto;
}
#content{
border: 1px solid;
width:1024px;
height:400px;
margin: 0 auto;
}
#nav_cont{
position: absolute;
top:20px;
border:1px solid;
width:1024px;
left:50%;
margin-left:-512px;
}
I'll try to explain the best I can. I have a header div tag that holds the logo. Next, I have the nav_cont that is a menu with hidden drop down menus. Lastly, the rest of the content is in the content div tags.
I've aligned the menu to appear to the user that it is level and within by centering it using absolute, thus not pushing content down when the dropdowns appear.
However when I shrink the browser the nav_cont continues to move off screen even though header and content have stopped. If I use relative or just margin: 0 auto; it minimizes fine, but again my problem is that it pushes the content down when the dropdowns are shown.
I hope im making sense. Thanks.
Try setting position:absolute to inner dropdowns, so when you show them does not push content down
Hello newbie question, I'll just wanted to hover the li.about on the ul.second.. Can someone help me on this one..
<ul id="nav" class="clear">
<li id="home"></li>
<li id="about"></li>
<ul class="second">
<li><a href="www.yahoo.com">1st Link</li>
<li><a href="www.google.com">2nd Link</li>
<li><a href="www.google.com">2nd Link</li>
</ul>
<li id="gallery"></li>
<li id="before-after"></li>
<li id="loft"></li>
<li id="case"></li>
<li id="testimonials"></li>
<li id="faqs"></li>
<li id="contact"></li>
</ul>
css codes
#navigation ul#nav li#about:hover ul.second
{
background:#CCC;
padding:1px;
margin:1px;
height:200px;
color:black;
z-index:1000;
width:200px;
}
If its a drop down menu you're trying to do, then make use of the display: none; and display: block css properties.