Can anyone help with this CSS problem. I need NavDropDown to get wider when any NavLevel2 text gets longer than 200px. There should be no text wrap in the list items and NavLevel1 should always be 200px wide.
<div id="Nav">
<ul>
<li class="NavLevel1" style="width: 200px; border: 1px solid Black;"><a><span>Level 1.1</span></a>
<ul id="NavDropDown" style="border: 1px solid Black;">
<li class="NavLevel2"><a><span>Level 2.1.1 test to see if this will push the width out a little</span></a></li>
<li class="NavLevel2"><a><span>Level 2.1.2</span></a></li>
<li class="NavLevel2"><a><span>Level 2.1.3</span></a></li>
</ul>
</li>
</ul>
</div>
change the width style to min-width.
I posted to hastily, just found my solution.
<div id="Nav">
<ul>
<li class="NavLevel1" style="width: 200px; border: 1px solid Black;"><a><span>Level 1.1</span></a>
<ul id="NavDropDown" style="border: 1px solid Black; position:absolute;">
<li class="NavLevel2" style="white-space: nowrap;"><a><span>Level 2.1.1 test to see if this will push the width out a little</span></a></li>
<li class="NavLevel2"><a><span>Level 2.1.2</span></a></li>
<li class="NavLevel2"><a><span>Level 2.1.3</span></a></li>
</ul>
</li>
</ul>
</div>
Related
I am trying to indent the text from an inline block on safari. It only indents in chrome.
I have tried using margin left. This works in chrome but in safari i have to adjust the margin-left to another number for them to look the same.
I tried the text-indent and the inline-block is not wrapping properly now.
html
<nav>
<ul>
<li><a href="#" >Home</a></li>
<li type="checkbox" class="sub">
<input type="checkbox" />
<a href="#" >Profile</a>
<!-- Begin-->
<ul class="submenu">
<li >
<a target = "box">Profiles</a>
</li>
</ul>
</li>
<!-- end-->
<li class="sub">
<input type="checkbox" />
<a href="#" >Logs</a>
<!-- Begin-->
<ul class="submenu">
<li >
<a target = "box" >View Logs</a>
</li>
<li >
<a target = "box" >Testing a long test</a>
</li>
</ul>
</li>
</li>
</ul>
</nav>
CSS in chrome
nav .submenu a {
*zoom: 1;
*display: inline;
display: inline-block;
max-width: 122px;
margin-left: 55px;
padding: 3px 1px 3px 0px;
}
CSS in safari
nav .submenu a {
*zoom: 1;
*display: inline;
display: inline-block;
max-width: 122px;
margin-left: 65px;
padding: 3px 1px 3px 0px;
}
I tried putting important on the variables to see anything overrides it too and that didn't help them look the same.
I also tried
text-indent: 50px;
Make a table with no content and put it ahead of your text.
<table>
<tbody>
<tr>
<td width="65px"> <!--this is the indent, don't forget to style it so it becomes invisible.--></td>
</tr>
</tbody>
</table>
I have a solution for my problem, but it doesn't seem right. I want to know what's going on.
Nested list item's background colour doesn't extend to the bottom even though there's no margin on it (see the gap below the blue background in the screen shots). The paragraph inside does have a margin. But I've tried to reproduce this outside of my app (which uses Bootstrap) and I can't. In Firebug I tried turning off all CSS except that which was necessary to show the problem (i.e., the background-color and border -- see 2nd image), but it makes no difference. Seen in Chrome and Firefox.
The fix is either adding bottom padding or overflow-y:auto; to the inner list item. But why? Has anyone encountered something like this?
I can't post all the code here, but the HTML at least is something like this:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<ul class="dropdown-menu notification-list">
<li class="notification-new">
<div class="text-muted">01/13/2015</div>
<p>Check out the new features coming to the 2015.1 release here!</p>
</li>
<li class="notification-new">
<div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div>
<p>Upcoming server maintenance scheduled for 11:00pm PST.</p>
</li>
[Update] Here is a simplified, non-Bootstrap version. Why no gaps in this one?
ul {
width: 300px;
border: 1px solid red;
float: left;
}
li.sub {
border: 1px solid green;
background-color: yellow;
padding: 8px 8px 0;
}
p { margin:10px; /* no gaps with or without this */ }
<ul>
<li><p>item 1</p>
<ul>
<li class="sub">
<div>
something
</div>
<p>
stuff
</p>
</li>
<li class="sub">
<div>
something
</div>
<p>
stuff
</p>
</li>
</ul>
</li>
<li>thing
<ul>
<li class="sub">
nuther
</li>
</ul>
</li>
</ul>
The spacing is occurring because of the margins in the p elements inside the lis, specifically the bottom margin.
This behavior is defined as 'collapsing margins'. More info here: http://www.w3.org/TR/CSS2/box.html#collapsing-margins
You can see this by setting them to 0.
.notification-new p{
margin:0;
}
Live example: http://www.bootply.com/wlfIl3RziC
Full code below:
.notification-new {
background-color:red;
}
.notification-new p{
margin:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<ul class="dropdown-menu notification-list">
<li class="notification-new">
<div class="text-muted">01/13/2015</div>
<p>Check out the new features coming to the 2015.1 release here!</p>
</li>
<li class="notification-new">
<div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div>
<p>Upcoming server maintenance scheduled for 11:00pm PST.</p>
</li>
</ul>
</li>
</ul>
This works fine until I introduce the <br> tag and another line of content. The inline <li> tags end up stacking.
<ul style="list-style:none;">
<li style="display:inline;border:1px solid red;">
C
<br>A
</li>
<li style="display:inline;border:1px solid red;">
B
<br>D
</li>
<li style="display:inline;border:1px solid red;">
A
<br>E
</li>
</ul>
If you want all the list items on one line, and rest on a second line, you could try floating them with :
li {
float: left;
}
JSFiddle here
trying to get each trapezium to have text centered in them - but not sure how to!
http://jsfiddle.net/fYkq4/
HTML structure follows:
<ul id="menu">
<ul><div class="fade-div" id="trapezium1"> HOME </div></ul>
<ul><div class="fade-div" id="trapezium2"> HOME </div></ul>
<ul><div class="fade-div" id="trapezium3"> HOME </div></ul>
<ul><div class="fade-div" id="trapezium4"> HOME </div></ul>
<ul></ul>
</ul>
I use the CSS border fidgeting technique to get the trapeziums, however as the shapes get inverted I have to change between using border-bottom: 80px solid blue; and border-top: 80px solid blue; - i.e. if I use top the text is below the trap, if i use bottom the text is inside (but really below) the trap.
How can I make it so all the HOME's are consistently inside each trapezium?
Do I need to move the text out of the div and make the divs float? Or put the text into another div and make it float?
You could do it like this fiddle:
http://jsfiddle.net/xonium/PqXbu/
Where the important part is the blocker
<div id="menu">
<ul>
<li class="fade-div" id="trapezium1"> HOME1 </li>
<li class="fade-div" id="trapezium2"> HOME2 </li>
<li class="fade-div" id="trapezium3"> HOME3
<div class="blocker"></div>
</li>
<li class="fade-div" id="trapezium4"> HOME4
<div class="blocker"></div>
</li>
</ul>
</div>
which acts as just like your upper two trapezium, just inverse colors.
.blocker {
background-color: blue;
height: 0;
width:0;
right:0;
border-bottom: 80px solid red;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
float: right;
}
You can set your line-height equal to the height of the item you want it centered in.
So:
ul div {line-height:80px;}
I have a flyout menu that (of course) looks great in FF/Chrome, but in IE, it's choking. I have a complete example up on JS Fiddle: http://jsfiddle.net/JXw3S/4/
If you hover over the second 2 menu items, there should be a flyout menu there. However, in IE, it seems as though its getting cut off by the borders of the #primaryMenu container.
In case JSFiddle is unavailable, here is my code:
HTML
<menu id="primaryMenu">
<ul>
<li class="active"><span>FMS</span><div class="arrow"><div></div></div>
<ul>
<li>Project Accounts</li>
<li>Non-Project Accounts</li>
<li>DocID Log</li>
<li>Gift Card Tracking</li>
<li>PO/Account Reference</li>
<li>Speedkey Reference</li>
</ul>
</li>
<li><span>Personel</span><div class="arrow"><div></div></div>
<ul>
<li>Payroll
<ul>
<li>Report</li>
<li>Analysis</li>
</ul>
</li>
<li>Manage</li>
<li>PI/Project Effort</li>
</ul>
</li>
<li><span>Facilities</span><div class="arrow"><div></div></div>
<ul>
<li>Manage</li>
</ul>
</li>
</ul>
<span>Collapse Menu</span>
</menu>
CSS:
#primaryMenu{display:block;position:fixed;left:0px;top:132px;z-index:90;padding:40px 0 0;margin:0;width:200px}
#primaryMenu ul{padding:0;margin:0;list-style-type:none}
#primaryMenu li{padding:0;margin:0;position:relative}
#primaryMenu a{font-size:0.95em}
#primaryMenu>ul{border-bottom:1px solid #aaa;position:relative}
#primaryMenu>ul>li{border-bottom:1px solid #fff;border-top:1px solid #aaa}
#primaryMenu>ul>li>a{color:#333;text-shadow:-1px 1px 0 #fff;display:block;height:32px}
#primaryMenu>ul>li.active>a{display:block}
#primaryMenu>ul>li>a>span{display:block;padding:5px 10px 5px 30px;line-height:normal;background:url(../img/cog.png) no-repeat 10px 9px;color:#666;text-shadow:-1px 1px 0 #fff}
#primaryMenu>ul>li.hovered>a>span{color:#fff;text-shadow:-1px 1px 0 #666}
#primaryMenu>ul>li.active>a>span{color:#fff;text-shadow:-1px 1px 0 #666}
#primaryMenu>ul>li>.arrow{top:-1000em}
#primaryMenu>ul>li.active>.arrow,
#primaryMenu>ul>li.hovered>a+.arrow{position:absolute;right:1px;top:0px;z-index:5}
#primaryMenu>ul>li.active>.arrow>div,
#primaryMenu>ul>li.hovered>a+.arrow>div{position: absolute;top: 0px;left: 0px;width: 14px;height: 32px;-webkit-border-top-right-radius: 20px;-webkit-border-bottom-right-radius: 20px;-moz-border-radius-topright: 20px;-moz-border-radius-bottomright: 20px;border-top-right-radius: 20px;border-bottom-right-radius: 20px}
#primaryMenu>ul>li>ul{display:none}
#primaryMenu>ul>li>ul>li>a,
#primaryMenu>ul>li>ul>li>ul>li>a{display:block;font-size:0.9em;padding:1px 10px;color:#444}
#primaryMenu>ul>li>ul>li>a:hover{color: #06e;}
#primaryMenu>ul>li.active>ul{display:block}
#primaryMenu>ul>li.hovered{}
#primaryMenu>ul>li.hovered>ul{display:block; position:absolute;width:140px;background:#fff;top:-1px;right:-141px;border-right:1px solid #aaa;border-bottom:1px solid #aaa;border-top:1px solid #aaa;z-index:1}
#primaryMenu>ul>li.hovered>ul>li>a{padding-left:20px}
#primaryMenu>ul>li.hovered>ul>li>a:hover,
#primaryMenu>ul>li>ul>li>ul>li>a:hover{background:#f0f6fd}
#primaryMenu>ul>li>ul>li>ul>li>a{padding-left:40px;font-size:0.8em;font-style:italic}
And the bit of JS that adds a hovered class
$('#primaryMenu>ul>li').hover(function(){
if($(this).hasClass('active')){}else
{
$(this).addClass('hovered')
}
},
function(){
$(this).removeClass('hovered')
});
#primarymenu has a z-index value set, which is causing the problem in IE9.
http://jsfiddle.net/JXw3S/5/