I am trying to create a dynamic unordered list that is built for 3 list items however there maybe either one or two items in that list. My problem is that when there are one or two items in UL my contents get shifted up. How can I avoid this ?
HTML:
<html><head>
<title>Dashboard</title>
</head>
<body>
<div id="wrapper">
<div id="colDow">
<div id="colLef">
<ul id="days">
<div id="colRig">
<ul class="format" id="schedule1">
<li> Event 3</li>
<li>test this space</li>
<li>fit everthing and beyond</li>
</ul>
<ul class="format" id="schedule2">
<li> Event 3</li>
<li>test this space</li>
<li>fit everthing and beyond</li>
</ul>
<ul class="format" id="schedule3">
<li> Event 3</li>
<li>test this space</li>
<li>fit everthing and beyond</li>
</ul>
</div><!-- Bottom Right Time -->
</div>
</div>
CSS:
body {
padding:0;
margin:0;
background-color:#000;
font-size:100%;
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:100%;
height:100%;
max-width:2560px;
max-height:1440px;
}
#colDow {
width:55.46%;
/* 710/1280 */
float:left;
height:88.75%;
/* 710/800 */
}
#colLef {
width:35.21%;
/* 250/710 */
float:left;
height:100%;
}
#days {
list-style-type:none;
padding-left:0px;
}
#days li {
font-size:2.25em;
color:#fff;
font-family:'Lato',sans-serif;
font-weight:lighter;
margin:0 0 168px;
background:#575757;
display:block;
text-align:center;
height:40px;
margin-top:6px;
margin-bottom: 168px;
}
#colRig {
/* background:#fff; */
width:63.09%;
float:right;
height:100%;
}
.format {
/* background:red; */
margin-top: 46px;
padding-bottom: 6px;
}
.format li {
color:#fff;
font-family:'Lato',sans-serif;
font-weight:lighter;
font-size:1.5em;
/* font-size: 1.846em; */
height: 52px;
}
If you remove the first occurrence of "Event3" items get shifted up
markup
<div class="event-listing">
<ul>
<li>
<a>List 1</a>
<ul>
<li>
<a>Event 3
</a>
</li>
<li>
<a>test this space
</a>
</li>
<li>
<a>fit everything and beyond
</a>
</li>
</ul>
</li>
<li>
<a>List 2</a>
<ul>
<li>
<a>Event 3
</a>
</li>
<li>
<a>test this space
</a>
</li>
<li>
<a>fit everything and beyond
</a>
</li>
</ul>
</li>
<li>
<a>List 3</a>
<ul>
<li>
<a>Event 3
</a>
</li>
<li>
<a>test this space
</a>
</li>
<li>
<a>fit everything and beyond
</a>
</li>
</ul>
</li>
</u>
</div>
css
.event-listing ul li {
list-style: none;
}
This is what i understood from your menu. Let me know if im wrong
.event-listing ul {
min-height: 100px //set a minimum height
}
Set a minimum height so your list areas won't get shifted up. Sorry code not in tags. I'm mobile right now.
Related
I have a navpar made by css but when show the navbar sub menu it pushes the content underneath down
This is a link to codepen with full code
https://codepen.io/muhamedhashem/pen/GqNQaE
image
html
<!DOCTYPE html>
<html>
<head>
<title> </title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="nav">
<ul>
<li>One</li>
<li>
<a href="#">
Two
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>Two #1</li>
<li>Two #2</li>
<li>Two #3</li>
</ul>
</li>
<li>
<a href="#">
Three
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>Three #1</li>
<li>Three #2</li>
<li>Three #3</li>
</ul>
</li>
<li>
<a href="#">
Four
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
<li>#4</li>
</ul>
</li>
<li>
<a href="#">
Five
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>Five #1</li>
<li>Five #2</li>
<li>Five #3</li>
</ul>
</li>
</ul>
</div>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
</body>
</html>
css
.nav {
width:900px;
margin: 0 auto}
ul{
margin: 0;
padding: 0;
list-style-type:none;
text-align:center;}
ul li{
float:left;
width:180px;}
li ul{ display:none;}
li:hover ul{
display:block;}
ul li a{
display:block;
padding: 5px 15px 5px 15px;
background:#69F;
color:#ffffff;
border-top: 1px solid #FFF;
margin-left:1px;}
ul li a:hover{
background:#F80;
color:#fff}
h1 {
clear:both;
}
This is because the navbar itself is growing in height. If you want the navbar to overlap the content, look into z-index and absolute display.
li:hover ul{
position:absolute;
z-index: 10; //can be any number higher than the content's z-index.
width: 180px; //This controls the size of the dropdowns container
display:block;
}
Your sub-menu needs to be set to position absolute and your parent LI needs to be set to position relative. You should set visibility to hidden and then show it for :hover. This method will not push down content.
Also, you need to make sure that you set a width to the ul li ul <--- submenu.
I am trying to recreate the Windows 8 application menu ( the new "start menu" )
My goal is to have square divs with a descriptive text next to it, the column splits itself up when it reaches a certain point ( something I have yet to determine but Iv'e come quite far with this )
In other words: I am trying to make a column that goes down and splits itself into 3 columns automatically and beginnen at the left side again after it has reached the end of the wrapper width.
as you can see in my JFIDDLE Iv'e made something that comes quite close.
http://jsfiddle.net/Qq98X/
Stil I can't seem to find the correct solution for this.
Mainly because i cannot use NTH-CHILD etc properties because it is meant to work on IE7
<html>
<head>
<style>
.mp-submenu {
margin-bottom: 1px;
position:relative;
}
.mp-submenu ul{
max-width:500px;
max-height:300px;
list-style:none;
}
.mp-submenu ul li{
float:left;
}
#triple li { width:30.333%; }
.mp-submenu-square-dg,
.mp-submenu-square {
float:left;
margin: 5px 0 5px 0;
padding:5px;
width:50px;
height:50px;
background-color: #8D8D8D;
}
.mp-submenu-square-dg:hover,
.mp-submenu-square:hover {
background-color: #F17B0A;
}
.mp-submenu-square-dg {
background-color: #696969;
}
.mp-submenu-headletter {
margin: 5px 0 5px 0;
font: normal 27px arial;
text-align: left;
vertical-align:bottom;
width:50px;
height:50px;
color: black;
display:inline-block;
background-color:none;
float:left;
}
.mp-submenu-headletter-desc {
padding-top:35px;
font: normal 12px arial;
}
</style>
</head>
<body>
<article class="mp-submenu">
<ul id="triple">
<li>
<div class="mp-submenu-headletter">A</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">2</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">3</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">4</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">5</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-headletter">B</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">2</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">3</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-headletter">C</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">2</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">3</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
</ul>
</article>
</body>
Add this:
#triple li:nth-child(3n+1) {clear:both}
This will cause every third item beginning from the first to clear the float and start a new row.
I currently have a side menu. I'd like it if the user hovers over the Manage Contracts button the sub menu then appears. I've created two ul's - the primary menu and a sub menu ul. The reason being because I don't want the sub menu inheriting the styles from the primary menu if that makes sense? However at the moment I can't get the the menu to appear when the mouse is over the Manage Contract button. Any ideas?
the html:
<div id="navbar-side">
<div id="profile-image">
</div>
<div id="menu-search">
<input type="text" name="search" id="search" placeholder="Search..." />
</div>
<ul id="side-menu">
<li>Dashboard</li>
<li>Manage Contracts</li>
<li>Manage Duplicates</li>
<li>PPM Manager</li>
<li>Service User Search</li>
<li>My Subscriptions</li>
<li>Help Centre</li>
</ul>
<ul id="contracts-menu">
<li>General</li>
<li>Settings</li>
<li>Communication</li>
<li>Contract Details</li>
<li>Retail Setup</li>
</ul>
</div>
the css:
#side-menu
{
width:100%;
position:relative;
}
#side-menu li
{
display:block;
border-bottom:solid 1px black;
}
#side-menu a
{
display:block;
border-top:solid 1px white;
padding:18px 0;
}
#side-menu a:hover
{
background-color:Silver;
}
#contracts-menu
{
display:none;
width:200px;
height:300px;
background-color:Aqua;
margin-left:228px;
position:absolute;
top:87px;
}
#contracts-menu li
{
display:block;
}
#contracts-menu a
{
display:block;
}
a#contracts:hover + #navbar-side ul#contracts-menu
{
display:block;
}
That's because a#contracts and div#navbar-side are not siblings!
You can't use + and/or ~ selectors on non-sibling elements.
On the other hand, there's no parent selector in CSS (yet).
You could use JavaScript to achieve this or change your markup structure, as follows:
<li>Manage Contracts
<ul id="contracts-menu">
<li>General</li>
<li>Settings</li>
<li>Communication</li>
<li>Contract Details</li>
<li>Retail Setup</li>
</ul>
</li>
CSS:
a#contracts:hover + ul#contracts-menu {
display:block;
}
JSBin Demo.
Update
But in this case, There's no need to set id attriute on each link/item.
You could nest the sub-menus in each list item and display them as follows:
#side-menu li:hover > ul { /* Select the ul children inside each list-item */
display:block;
}
JSBin Demo #2
If you don't want to use javascript, you could put the ul#contracts-menu inside the list-item that contains the #contracts anchor:
<div id="navbar-side">
<div id="profile-image">
</div>
<div id="menu-search">
<input type="text" name="search" id="search" placeholder="Search..." />
</div>
<ul id="side-menu">
<li>Dashboard</li>
<li id="contracts">
Manage Contracts
<ul id="contracts-menu">
<li>General</li>
<li>Settings</li>
<li>Communication</li>
<li>Contract Details</li>
<li>Retail Setup</li>
</ul>
</li>
<li>Manage Duplicates</li>
<li>PPM Manager</li>
<li>Service User Search</li>
<li>My Subscriptions</li>
<li>Help Centre</li>
</ul>
</div>
Add the id to the list item (instead of the anchor) and then add:
#side-menu li.contracts:hover #contracts-menu { display:block; }
See: http://jsfiddle.net/FmR3f/
this is my html code:-
<div id="load">
<ul>
<li>Activities
<div>
<ul>
<li>Physical1
<div>
<ul>
<li>Cricket
<div>
<ul>
<li>One Day</li>
</ul>
</li>
</ul>
</li>
<li>Test1
<div>
<ul>
<li>Test At Abc</li>
</ul>
</li>
<li>Test2
<div>
<ul>
<li>Test At Xyz</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
this is my css:-
li{
color:red;
border-left:1px solid green;
}
li{
list-style:none;
}
ul > li > div > ul {
display: none; // hide all submenus
}
li:hover > div > ul {
display: block; // show sub menu when parent li is hovered
}
now i want to something this type of my list:-
i think using proper position css style its done.
or with float i think its possible.
any kind help well come...
thanks...
I have a problem with my menu. I only want four menu items to appear at any time, meaning that if there’s an overflow, it’ll be clipped, and the user will have to scroll down.
I tried setting overflow-y, hoping to see it get clipped, but instead, a horizontal scroll bar appears.
HTML
<link rel="stylesheet" href='http://donysukardi.com/ltw/css/blueprint/screen.css' type="text/css" media="screen, projection" />
<link rel="stylesheet" href='http://donysukardi.com/ltw/css/blueprint/print.css' type="text/css" media="print" />
<div class="container">
<div id="menu">
<ul>
<li>profile
<ul>
<li>overview</li>
<li>partners
<ul>
<li>Lim Hong Lian</li>
<li>Teo Su Seam</li>
<li>Marina Baracs</li>
</ul>
</li>
<li>associates
<ul>
<li>Jocelyn Yang Liwan</li>
<li>Tsai Ming Ming</li>
</ul>
</li>
<li>team</li>
</ul>
</li>
<li>projects
<ul>
<li>featured projects
<ul>
<li>HELLO</li>
</ul>
</li>
<li>project list
<ul>
<li>current
<ul>
<li>all</li>
<li>urban</li>
<li>resort</li>
<li>spa</li>
<li>restaurant</li>
<li>others</li>
</ul>
</li>
<li>completed</li>
</ul>
</li>
</ul>
</li>
<li>publications
<ul>
<li>books</li>
<li>magazines</li>
</ul>
</li>
<li>contacts
<ul>
<li>Singapore</li>
<li>Milan</li>
<li>Beijing</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
#menu ul
{
list-style-type:none;
position:absolute;
padding: 5px 0px;
margin:0px;
width:100px;
}
#menu
{
position:relative;
border-top-color:#afafaf;
border-top-style:solid;
border-top-width: thin;
font-size: 11px;
margin-top:5px;
height:80px;
}
#menu ul ul
{
display:none;
position:absolute;
padding:5px 0px;
left:150px;
top:0px;
height:80px;
}
Javascript (jQuery)
$(document).ready(function(){
$('#menu ul li a').click(function(){
if(!$(this).hasClass('current'))
{
var relatives = $(this).parent().siblings();
relatives.find('ul').css('left',150).hide();
relatives.find('.current').removeClass('current');
$(this).siblings().animate({'left':'-=20', 'opacity':'toggle'},'slow');
$(this).addClass('current');
if($(this).attr("href") != "#"){
var url = $(this).attr("href").split('#!')[1];
$('#content').slideUp('slow', function(){$(this).load(url, function(){$(this).slideDown('slow')});})
window.location = base_url+url;
}
}
$(this).parent().siblings().find('.black').removeClass('black');
$(this).addClass('black');
return false;
});
})
Demo on JS Fiddle.
Here is a screenshot: I only want “all”, “urban”, “resort”, and “spa” to appear initially.
Not sure you can limit the number of elements, but you can set the height and set the overflow to auto, so if it's higher then specified width there will be a scrollbar.
<ul class="inner-ul">
<li>all</li>
<li>urban</li>
<li>resort</li>
<li>spa</li>
<li>restaurant</li>
<li>others</li>
</ul>
.inner-ul {
height:50px;
overflow-y: auto;
}
Hard to tell from the question and fiddle (and I can't see the image) but I think you need
overflow-x: auto;
Here's a good resource for overflow: http://www.brunildo.org/test/Overflowxy2.html
Change height to 70px and add "overflow:auto;" to your menu css statement