Problem:
I cannot display the icon that is located inside of the <li>
What am I missing?
Thanks!
LI.filtered A {
position: relative;
padding: 1px 20px 1px 4px;
background: #F0F0FF url("https://cdn0.iconfinder.com/data/icons/gcons-2/24/laptop1-16.png") no-repeat scroll right -52px;
font-weight: 400;
color: #FFF;
}
#result-filters UL {
display: inline;
list-style: outside none none;
margin: 0px;
padding: 0px;
font-size: 12px;
font-family: arial,helvetica,sans-serif;
}
#body-right UL,
#body-right OL {
margin: 10px 0px 0px;
}
.leftmenu LI.filtered,
#result-filters LI.filtered {
padding-left: 0px;
background: transparent none repeat scroll 0% 0%;
}
#result-filters UL LI {
margin: 0px 8px 0px 0px;
float: left;
}
<div id="result-filters">
<ul>
<li class="filtered">
<a href="">
Test1
</a>
</li>
<li class="filtered">
<a href="">
Test2
</a>
</li>
<li class="filtered">
<a href="">
Test2
</a>
</li>
<li class="filtered">
<a href="">
Test2
</a>
</li>
<li class="filtered">
<a href="">
Test2
</a>
</li>
</ul>
</div>
It's Because of the background position -52px
Set it to 0
OR
Remove it
li.filtered a {
position: relative;
padding: 1px 20px 1px 4px;
background: #08C url("https://cdn0.iconfinder.com/data/icons/gcons-2/24/laptop1-16.png") no-repeat scroll right;
font-weight: 400;
color: #FFF;
}
#result-filters ul{
display: inline;
list-style: outside none none;
margin: 0px;
padding: 0px;
font-size: 12px;
font-family: arial,helvetica,sans-serif;
}
#body-right ul,
#body-right ol{
margin: 10px 0px 0px;
}
.leftmenu li.filtered,
#result-filters LI.filtered {
padding-left: 0px;
background: transparent none repeat scroll 0% 0%;
}
#result-filters ul li{
margin: 0px 8px 0px 0px;
float: left;
}
<div id="result-filters">
<ul>
<li class="filtered">
<a href="">
Test1
</a>
</li>
<li class="filtered">
<a href="">
Test2
</a>
</li>
<li class="filtered">
<a href="">
Test2
</a>
</li>
<li class="filtered">
<a href="">
Test2
</a>
</li>
<li class="filtered">
<a href="">
Test2
</a>
</li>
</ul>
</div>
Related
I am getting a problem when hovering on a link. the unordered list .shownav is not displaying. I am not sure if have declared the correct selector in my CSS. please help.
.shownav {
display: none;
position: fixed;
padding: 20px;
border: 2px solid #FFB600;
background: #1a1a1a;
right: 20px;
top: 45px;
min-width: 20%;
border-radius: 20px 0 15px 10px;
z-index: 99999;
}
.shownav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
.promainlink:hover {
text-decoration: none;
color: #FFB600;
}
.promainlink:hover .shownav {
display: block;
}
<div class="mainnav">
<ul class="mainul">
<li>
<span class="promainimg"><img src = "./images/profilepic.jpg" alt=""
style="border-radius:17px;height=26px;width:26px"></span>
<a class="promainlink" href=""> User <i class= "glyphicon glyphicon-
triangle-bottom"></i></a>
</li>
<ul class="shownav">
<li><a class="navlinks" href="">View my Profile</a></li>
<li><a class="navlinks" href="">Account Settings</a></li>
<li><a class="navlinks" href="">Sign Out</a></li>
</ul>
</ul>
</div>
Can anyone tells me whats wrong with my CSS? any help will be appreciated.
This has been solved. thanks for all your help. I very much appreciate it.
i have solved the problem on the issue of the ul not displaying by just rearranging the html itself. i simply just put the unordered list .shownav inside the anchor tag. i guess i have to go back to basics and understand the css selectors reference in w3school.
here is how it looks.
<div class="mainnav">
<ul class="mainul">
<li>
<span class="promainimg"><img src = "./images/profilepic.jpg" alt=""
style="border-radius:17px;height=26px;width:26px"></span>
<a class ="promainlink" href=""> Waduhek <i class= "glyphicon glyphicon-triangle-
bottom"></i>
<ul class="shownav">
<li><a class = "navlinks" href = "">View my Profile</a></li>
<li><a class = "navlinks" href = "">Account Settings</a></li>
<li><a class = "navlinks" href = "">Sign Out</a></li>
</ul>
</a>
</li>
</ul>
</div>
.shownav{
display:none;
position: fixed;
padding: 20px;
border: 2px solid #FFB600;
background:#1a1a1a;
right: 20px;
top: 45px;
min-width: 20%;
border-radius: 20px 0 15px 10px;
z-index:99999;
}
.promainlink:hover + .shownav{display:block;}
You should try this
.mainul > li:hover + ul.shownav { display:block; }
You should learn about CSS Selector
https://www.w3schools.com/cssref/css_selectors.asp
.shownav {
display: none;
position: fixed;
padding: 20px;
border: 2px solid #FFB600;
background: #1a1a1a;
right: 20px;
top: 45px;
min-width: 20%;
border-radius: 20px 0 15px 10px;
z-index: 99999;
}
.shownav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
.promainlink:hover {
text-decoration: none;
color: #FFB600;
}
.promainlink:hover + .shownav {
display: block;
}
<div class="mainnav">
<ul class="mainul">
<li>
<span class="promainimg"><img src = "./images/profilepic.jpg" alt=""
style="border-radius:17px;height=26px;width:26px"></span>
<a class="promainlink" href=""> User <i class= "glyphicon glyphicon-
triangle-bottom"></i></a>
<ul class="shownav">
<li><a class="navlinks" href="">View my Profile</a></li>
<li><a class="navlinks" href="">Account Settings</a></li>
<li><a class="navlinks" href="">Sign Out</a></li>
</ul>
</li>
</ul>
</div>
This is my current menu:
And here what I want:
First submenu is inline, and the child is dropdown.
I'm trying to change the ul li a display to inline-block but seems like it not working at all. How I suppose to do to make the submenu hover inline, and the child of the submenu dropdown?
Thank you so much.
#info {
top: 8%;
color: #fff;
height: auto;
font-family: arial;
left: 0px;
position: absolute;
width: 72px;
z-index: 40;
border-radius: 4px;
background: dimgrey;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: inline;
}
nav ul li {
position:relative;
width:70px;
}
nav ul li:hover {
background: #4b4b4b;
}
nav ul li:hover a {
color: #fff;
}
nav ul li:hover button{
color: #fff;
}
nav ul li a {
display: block;
padding: 12px 20px;
color: #757575;
text-decoration: none;
}
nav ul li button{
display: block;
padding: 12px 25px;
color: #757575;
text-decoration: none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top:0;
left:100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 12px 25px;
color: #fff;
}
nav ul ul li button{
padding: 12px 25px;
color: #fff;
height: 50px; width: 100px; margin-bottom: 2px; font-size: 18px;
}
nav ul ul li a:hover {
background: #4b4b4b;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
.menu-container {padding: 19px 0; width: 70px; float: left;}
.clear {clear: both;}
ul{list-style:none;
border:0;outline:none;margin:0;padding:0;}
/* Vertical Mega Menu Styles */
.mega-menu{
font: bold 13px Arial, sans-serif;
line-height: 16px;
background: #333;
border-left: 1px solid #1B1B1B;
position: relative; /* Required */
}
.mega-menu li a {
display: block;
color: #fff;
padding: 12px 20px 12px 20px;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
border-top: 1px solid #555;
border-bottom: 1px solid #222;
border-right: 1px solid #1B1B1B;
}
.mega-menu li button {
display: block;
color: #fff;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
border-top: 1px solid #555;
border-bottom: 1px solid #222;
border-right: 1px solid #1B1B1B;
}
.mega-menu li a:hover, .mega-menu li.mega-hover a {
background: #4b4b4b;
color: #fff;
border-right: 1px solid #4b4b4b;
}
<div id="info">
<!--
<li><button id="FreehandPolyline">Freehand Polyline</button></li>
<li><button id="Triangle">Triangle</button></li>
<li><button id="Extent">Rectangle</button></li>
<li><button id="Circle">Circle</button></li>
<li><button id="Ellipse">Ellipse</button></li>
<li><button id="Polygon">Polygon</button></li>
<li><button id="FreehandPolygon">Freehand Polygon</button></li> -->
<!-- <div id="menu_plotting" >Menu plotting</div> -->
<nav class="menu-container clear">
<ul id="mega-1" class="mega-menu">
<li>
<a title="Plotting Toolbar"><img src="assets/icon/pencil.png" width="30" height="30"></a>
<ul>
<li><a title="Arrows"><img src="assets/icon/arrow.png" width="30" height="30"></a>
<ul>
<li>
<a title="Straight Arrow" onClick="urlicon('arrow','')" style="cursor: pointer;">
<img src="assets/icon/arrow0.png" width="30" height="30"></a>
<!-- <a id="a" class="btn btn-info" onclick="arrow_('arrow')" style="cursor: pointer;">
<img src="icon/arrow.png" width="30" height="30"></a> -->
</li>
<li>
<a title="Down Arrow" onClick="urlicon('arrow_l','')" style="cursor: pointer;">
<img src="assets/icon/bawah.png" width="30" height="30"></a>
</li>
<li>
<a title="Up Arrow" onClick="urlicon('arrow_a','')" style="cursor: pointer;"> <img src="assets/icon/atas.png" width="30" height="30"></a>
</li>
</ul>
</li>
<li><a title="Polyline"><img src="assets/icon/polyline-48.png" width="30" height="30"></a>
<ul>
<li><a title="Polyline" id="Polyline" onClick="urlicon('polyline','')"><img src="assets/icon/polyline.png" width="30" height="30">
</a>
</li>
<li><a title="Freehand Polyline" id="FreehandPolyline"><img src="assets/icon/freepolyline.png" width="30" height="30"></a></li>
</ul>
</li>
<li><a title="Polygon"><img src="assets/icon/polygon.png" width="30" height="30"></a>
<ul>
<li><a title="Polygon" id="Polygon" onClick="urlicon('polygon','')">
<img src="assets/icon/polygon.png" width="30" height="30">
</a>
</li>
<li><a title="Triangle" id="Triangle"><img src="assets/icon/triangle.png" width="30" height="30"></a></li>
<li><a title="Rectangle" id="Extent"><img src="assets/icon/rectangle.png" width="30" height="30"></a></li>
<li><a title="Circle" id="Circle"><img src="assets/icon/circle.png" width="30" height="30"></a></li>
<li><a title="Ellipse" id="Ellipse"><img src="assets/icon/ellips.png" width="30" height="30"></a></li>
<li><a title="Freehand Polygon" id="FreehandPolygon"><img src="assets/icon/freepolygon.png" width="30" height="30"></a></li>
</ul>
</li>
<li>
<a title="Text" onClick="select_text()"> <img src="assets/icon/font.png" alt="Text" width="30" height="30"> </a>
</li>
</ul>
</li>
<li><a title="Radar"><img src="assets/icon/radar.png" width="30" height="30"></a></li>
<li><a title="Manuver"><img src="assets/icon/airplane.png" width="30" height="30"></a></li>
<!-- ASOPS -->
<?php } if ($list['asisten']==1 || $list['asisten']==6) {?>
<li>
<a title="Obstacle" onClick="select_obst()"><img src="assets/icon/obstacle.png" width="30" height="30"></a>
</li>
<li>
<a title="Strength" onClick="select_kekuatan()"><img src="assets/icon/streng.png" width="30" height="30"></a>
</li>
<li>
<a title="Unit" onClick="select_unit()"><img src="assets/icon/icons8-Org Unit-48.png" width="30" height="30"></a>
</li>
<li>
<a title="Situation" onClick="select_situasi()"><img src="assets/icon/warning.png" width="30" height="30"></a>
</li>
<?php if($list['asisten']==6 && $_SESSION['menu_'] == "menu"){ ?>
<script type="text/javascript">
document.getElementById("info3").style.display = "block";
</script>
<?php
}
}
} ?>
</ul>
</nav>
<div style="font-size: 13px; margin-left: -20px;" id="nm_scen"><?php echo $_SESSION['scen1']; ?></div>
</div>
You are almost there. You need to specify a fixed width to the inner UL because by default it will have 100% of the width of its relative positioned ancestor, and that width is not enough to have more than one item per line in the second menu level.
nav>ul>li>ul {
width: 291px
}
Hope this helps.
#info {
top: 8%;
color: #fff;
height: auto;
font-family: arial;
left: 0px;
position: absolute;
width: 72px;
z-index: 40;
border-radius: 4px;
background: dimgrey;
}
nav ul ul {
display: none;
}
nav ul li:hover>ul {
display: block;
}
nav ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: inline;
}
nav ul li {
position: relative;
width: 70px;
}
nav ul li:hover {
background: #4b4b4b;
}
nav ul li:hover a {
color: #fff;
}
nav ul li:hover button {
color: #fff;
}
nav ul li a {
display: block;
padding: 12px 20px;
color: #757575;
text-decoration: none;
}
nav ul li button {
display: block;
padding: 12px 25px;
color: #757575;
text-decoration: none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 0;
left: 100%;
}
nav ul ul li {
float: none;
position: relative;
display: inline-block;
}
nav ul ul li a {
padding: 12px 25px;
color: #fff;
}
nav ul ul li button {
padding: 12px 25px;
color: #fff;
height: 50px;
width: 100px;
margin-bottom: 2px;
font-size: 18px;
}
nav ul ul li a:hover {
background: #4b4b4b;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
nav>ul>li>ul>li>ul {
top: 100%;
left: 0;
}
nav>ul>li>ul {
width: 291px
}
.menu-container {
padding: 19px 0;
width: 70px;
float: left;
}
.clear {
clear: both;
}
ul {
list-style: none;
border: 0;
outline: none;
margin: 0;
padding: 0;
}
/* Vertical Mega Menu Styles */
.mega-menu {
font: bold 13px Arial, sans-serif;
line-height: 16px;
background: #333;
border-left: 1px solid #1B1B1B;
position: relative;
/* Required */
}
.mega-menu li a {
display: block;
color: #fff;
padding: 12px 20px 12px 20px;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
border-top: 1px solid #555;
border-bottom: 1px solid #222;
border-right: 1px solid #1B1B1B;
}
.mega-menu li button {
display: block;
color: #fff;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
border-top: 1px solid #555;
border-bottom: 1px solid #222;
border-right: 1px solid #1B1B1B;
}
.mega-menu li a:hover,
.mega-menu li.mega-hover a {
background: #4b4b4b;
color: #fff;
border-right: 1px solid #4b4b4b;
}
<div id="info">
<!--
<li><button id="FreehandPolyline">Freehand Polyline</button></li>
<li><button id="Triangle">Triangle</button></li>
<li><button id="Extent">Rectangle</button></li>
<li><button id="Circle">Circle</button></li>
<li><button id="Ellipse">Ellipse</button></li>
<li><button id="Polygon">Polygon</button></li>
<li><button id="FreehandPolygon">Freehand Polygon</button></li> -->
<!-- <div id="menu_plotting" >Menu plotting</div> -->
<nav class="menu-container clear">
<ul id="mega-1" class="mega-menu">
<li>
<a title="Plotting Toolbar"><img src="assets/icon/pencil.png" width="30" height="30"></a>
<ul>
<li>
<a title="Arrows"><img src="assets/icon/arrow.png" width="30" height="30"></a>
<ul>
<li>
<a title="Straight Arrow" onClick="urlicon('arrow','')" style="cursor: pointer;">
<img src="assets/icon/arrow0.png" width="30" height="30"></a>
<!-- <a id="a" class="btn btn-info" onclick="arrow_('arrow')" style="cursor: pointer;">
<img src="icon/arrow.png" width="30" height="30"></a> -->
</li>
<li>
<a title="Down Arrow" onClick="urlicon('arrow_l','')" style="cursor: pointer;">
<img src="assets/icon/bawah.png" width="30" height="30"></a>
</li>
<li>
<a title="Up Arrow" onClick="urlicon('arrow_a','')" style="cursor: pointer;"> <img src="assets/icon/atas.png" width="30" height="30"></a>
</li>
</ul>
</li>
<li>
<a title="Polyline"><img src="assets/icon/polyline-48.png" width="30" height="30"></a>
<ul>
<li>
<a title="Polyline" id="Polyline" onClick="urlicon('polyline','')"><img src="assets/icon/polyline.png" width="30" height="30">
</a>
</li>
<li>
<a title="Freehand Polyline" id="FreehandPolyline"><img src="assets/icon/freepolyline.png" width="30" height="30"></a>
</li>
</ul>
</li>
<li>
<a title="Polygon"><img src="assets/icon/polygon.png" width="30" height="30"></a>
<ul>
<li>
<a title="Polygon" id="Polygon" onClick="urlicon('polygon','')">
<img src="assets/icon/polygon.png" width="30" height="30">
</a>
</li>
<li>
<a title="Triangle" id="Triangle"><img src="assets/icon/triangle.png" width="30" height="30"></a>
</li>
<li>
<a title="Rectangle" id="Extent"><img src="assets/icon/rectangle.png" width="30" height="30"></a>
</li>
<li>
<a title="Circle" id="Circle"><img src="assets/icon/circle.png" width="30" height="30"></a>
</li>
<li>
<a title="Ellipse" id="Ellipse"><img src="assets/icon/ellips.png" width="30" height="30"></a>
</li>
<li>
<a title="Freehand Polygon" id="FreehandPolygon"><img src="assets/icon/freepolygon.png" width="30" height="30"></a>
</li>
</ul>
</li>
<li>
<a title="Text" onClick="select_text()"> <img src="assets/icon/font.png" alt="Text" width="30" height="30"> </a>
</li>
</ul>
</li>
<li>
<a title="Radar"><img src="assets/icon/radar.png" width="30" height="30"></a>
</li>
<li>
<a title="Manuver"><img src="assets/icon/airplane.png" width="30" height="30"></a>
</li>
<!-- ASOPS -->
<?php } if ($list['asisten']==1 || $list['asisten']==6) {?>
<li>
<a title="Obstacle" onClick="select_obst()"><img src="assets/icon/obstacle.png" width="30" height="30"></a>
</li>
<li>
<a title="Strength" onClick="select_kekuatan()"><img src="assets/icon/streng.png" width="30" height="30"></a>
</li>
<li>
<a title="Unit" onClick="select_unit()"><img src="assets/icon/icons8-Org Unit-48.png" width="30" height="30"></a>
</li>
<li>
<a title="Situation" onClick="select_situasi()"><img src="assets/icon/warning.png" width="30" height="30"></a>
</li>
<?php if($list['asisten']==6 && $_SESSION['menu_'] == "menu"){ ?>
<script type="text/javascript">
document.getElementById("info3").style.display = "block";
</script>
<?php
}
}
} ?>
</ul>
</nav>
<div style="font-size: 13px; margin-left: -20px;" id="nm_scen">
<?php echo $_SESSION['scen1']; ?>
</div>
</div>
I am trying to extend a button to cover the entire length of my right div using CSS. Any helpLinkCol div. It's not happening. I have searched online but found no results that will help me out. Any help is appreciated.
body{
background-color: ;
}
.mainMenuRow{
display: table;
width:100%;
position: relative;
}
.iconMenuCol{
display: table-cell;
width: 85%;
background-color: lightblue;
}
.helpLinkCol{
display: table-cell;
background-color: lightgrey;
text-align:left;
text-indent:2.55em;
}
.icon_Menu li a{
text-decoration: none;
}
.icon_Menu li a:visited{
text-decoration: none;
}
.icon_Menu li a img {
vertical-align: middle;
padding: 0 0 0 0;
width: 80px;
height: 80px;
}
.icon_Menu li {
font-size: 2em;
padding:1em 0em 0.5em .5em;
margin-bottom:0.2em;
text-indent:0em;
list-style: none;
font-weight: bold;
text-decoration: none;
}
.icon_Menu li a span {
padding: 0 0 0 4em;
}
.helpfulLinks li{
list-style: none;
font-size: 1.2em;
font-weight: ;
margin: 0;
}
.helpfulLinks li a{
text-decoration: none;
}
.helpfulLinks .but_nav span {
display: block;
min-width:100%;
padding: 10px 20px;
background: #4479BA;
color: #FFF;
margin: 0 0px;
border: 1px solid lightgrey;
}
.helpfulLinks{
padding-left: 0px;
width: 242px;
margin: 0
}
.helpfulLinks .but_nav :hover{
color: lightblue;
}
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<div class="mainMenuRow">
<div class="iconMenuCol">
<ul class="icon_Menu">
<li><a href="#" target="_self" title="Directory Listing -Search and Notify Recipients or Groups">
<IMG SRC="home.png"><span>Directory Search for Recipients or Groups</span></a>
</li>
<li><a href="#" target="_self" title="Schedule Listing - Oncall Notification/Escalation">
<IMG SRC="home.png" border="0" width="64" height="64"><span>Oncall Schedule Listing</span></a>
</li>
<li><a href="#" target="_self" title="MIR3 Search Reports">
<IMG SRC="home.png" border="0" width="64" height="64"><span>Search Reports</span></a>
</li>
<li><a href="#">
<IMG SRC="home.png" border="0" width="64" height="64"><span>Windows Server Update Schedules</span></a>
</li>
<li><a href="#" target="_self" title="Oracle Databases">
<IMG SRC="home.png" border="0" width="64" height="64"><span>Database Listing<span></a>
</li>
<li><a href="#" target="_self" title="MQ Series Alert Listing">
<IMG SRC="home.png" border="0" width="64" height="64"><span>MQ Series Listing<span></a>
</li>
<li><a href="#" target="_self" title="Paging Vendors and Codes">
<IMG SRC="home.png" border="0" width="64" height="64"><span>Carrier List</span></a>
</li>
</ul>
</div>
<div class="helpLinkCol">
<ul class="helpfulLinks" >
<li class="subHeader_nav">
<strong>Helpful Links</strong>
<li class="but_nav">
<a class="helpLink" href="#"><span>Tech Service Desk</span></a>
</li>
<li class="but_nav">
<a class="helpLink" href="#><span>Tech OneStop</span></a>
</li>
<li class="but_nav">
<a class="helpLink" href="#"><span>Tech Web</span></a>
</li>
<li class="but_nav">
<a class="helpLink" href="#"><span>Tech Profile</span></a>
</li>
<li class="but_nav">
<a class="helpLink" href="#"><span>Help</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
You have this style:
.helpfulLinks .but_nav span{
min-width: 100%;
padding: 10px 20px;
}
And the default value of box-sizing is content-box so your div has a width of 100% + 40px(from padding)
And you set a fixed width here:
.helpfulLinks {
width: 242px;
}
To fix it add the style box-sizing: border-box; and change the fixed width to min-width
like this :
*{
box-sizing: border-box;
}
body {
background-color: #fff;
}
.mainMenuRow {
display: table;
width:100%;
position: relative;
}
.iconMenuCol {
display: table-cell;
width: 85%;
background-color: lightblue;
}
.helpLinkCol {
display: table-cell;
background-color: lightgrey;
text-align:left;
text-indent:2.55em;
}
.icon_Menu li a {
text-decoration: none;
}
.icon_Menu li a:visited {
text-decoration: none;
}
.icon_Menu li a img {
vertical-align: middle;
padding: 0 0 0 0;
width: 80px;
height: 80px;
}
.icon_Menu li {
font-size: 2em;
padding:1em 0em 0.5em .5em;
margin-bottom:0.2em;
text-indent:0em;
list-style: none;
font-weight: bold;
text-decoration: none;
}
.icon_Menu li a span {
padding: 0 0 0 4em;
}
.helpfulLinks li {
list-style: none;
font-size: 1.2em;
font-weight:;
margin: 0;
}
.helpfulLinks li a {
text-decoration: none;
display: block;
}
.helpfulLinks .but_nav span {
display: block;
min-width:100%;
padding: 10px 20px;
background: #4479BA;
color: #FFF;
margin: 0 0px;
border: 1px solid lightgrey;
}
.helpfulLinks {
padding-left: 0px;
min-width: 242px;
margin: 0
}
.helpfulLinks .but_nav :hover {
color: lightblue;
}
<div class="mainMenuRow">
<div class="iconMenuCol">
<ul class="icon_Menu">
<li><a href="#" target="_self" title="Directory Listing -Search and Notify Recipients or Groups">
<IMG SRC="home.png"><span>Directory Search for Recipients or Groups</span></a>
</li>
<li><a href="#" target="_self" title="Schedule Listing - Oncall Notification/Escalation">
<IMG SRC="home.png" border="0" width="64" height="64"><span>Oncall Schedule Listing</span></a>
</li>
<li><a href="#" target="_self" title="MIR3 Search Reports">
<IMG SRC="home.png" border="0" width="64" height="64"><span>Search Reports</span></a>
</li>
<li><a href="#">
<IMG SRC="home.png" border="0" width="64" height="64"><span>Windows Server Update Schedules</span></a>
</li>
<li><a href="#" target="_self" title="Oracle Databases">
<IMG SRC="home.png" border="0" width="64" height="64"><span>Database Listing<span></a>
</li>
<li><a href="#" target="_self" title="MQ Series Alert Listing">
<IMG SRC="home.png" border="0" width="64" height="64"><span>MQ Series Listing<span></a>
</li>
<li><a href="#" target="_self" title="Paging Vendors and Codes">
<IMG SRC="home.png" border="0" width="64" height="64"><span>Carrier List</span></a>
</li>
</ul>
</div>
<div class="helpLinkCol">
<ul class="helpfulLinks">
<li class="subHeader_nav"> <strong>Helpful Links</strong>
<li class="but_nav"> <a class="helpLink" href="#"><span>Tech Service Desk</span></a>
</li>
<li class="but_nav">
<a class="helpLink" href="#><span>Tech OneStop</span></a>
</li>
<li class=" but_nav ">
<a class="helpLink " href="# "><span>Tech Web</span></a>
</li>
<li class="but_nav ">
<a class="helpLink " href="# "><span>Tech Profile</span></a>
</li>
<li class="but_nav ">
<a class="helpLink " href="# "><span>Help</span></a>
</li>
</ul>
</div>
</div>
Right now your helpLinkCol has been auto adjusted because the display: table-cell, if you want that it always has a width of 242px move the width from .helpfulLinks to .helpLinkCol and set table-layout: fixed to .mainMenuRow like this:
*{
box-sizing: border-box;
}
body {
background-color: #fff;
}
.mainMenuRow {
display: table;
width:100%;
position: relative;
table-layout: fixed; /*added*/
}
.iconMenuCol {
display: table-cell;
width: 85%;
background-color: lightblue;
}
.helpLinkCol {
display: table-cell;
background-color: lightgrey;
text-align:left;
text-indent:2.55em;
width: 242px; /*added*/
}
.icon_Menu li a {
text-decoration: none;
}
.icon_Menu li a:visited {
text-decoration: none;
}
.icon_Menu li a img {
vertical-align: middle;
padding: 0 0 0 0;
width: 80px;
height: 80px;
}
.icon_Menu li {
font-size: 2em;
padding:1em 0em 0.5em .5em;
margin-bottom:0.2em;
text-indent:0em;
list-style: none;
font-weight: bold;
text-decoration: none;
}
.icon_Menu li a span {
padding: 0 0 0 4em;
}
.helpfulLinks li {
list-style: none;
font-size: 1.2em;
font-weight:;
margin: 0;
}
.helpfulLinks li a {
text-decoration: none;
display: block;
}
.helpfulLinks .but_nav span {
display: block;
min-width:100%;
padding: 10px 20px;
background: #4479BA;
color: #FFF;
margin: 0 0px;
border: 1px solid lightgrey;
}
.helpfulLinks {
padding-left: 0px;
margin: 0
}
.helpfulLinks .but_nav :hover {
color: lightblue;
}
<div class="mainMenuRow">
<div class="iconMenuCol">
<ul class="icon_Menu">
<li><a href="#" target="_self" title="Directory Listing -Search and Notify Recipients or Groups">
<IMG SRC="home.png"><span>Directory Search for Recipients or Groups</span></a>
</li>
<li><a href="#" target="_self" title="Schedule Listing - Oncall Notification/Escalation">
<IMG SRC="home.png" border="0" width="64" height="64"><span>Oncall Schedule Listing</span></a>
</li>
<li><a href="#" target="_self" title="MIR3 Search Reports">
<IMG SRC="home.png" border="0" width="64" height="64"><span>Search Reports</span></a>
</li>
<li><a href="#">
<IMG SRC="home.png" border="0" width="64" height="64"><span>Windows Server Update Schedules</span></a>
</li>
<li><a href="#" target="_self" title="Oracle Databases">
<IMG SRC="home.png" border="0" width="64" height="64"><span>Database Listing<span></a>
</li>
<li><a href="#" target="_self" title="MQ Series Alert Listing">
<IMG SRC="home.png" border="0" width="64" height="64"><span>MQ Series Listing<span></a>
</li>
<li><a href="#" target="_self" title="Paging Vendors and Codes">
<IMG SRC="home.png" border="0" width="64" height="64"><span>Carrier List</span></a>
</li>
</ul>
</div>
<div class="helpLinkCol">
<ul class="helpfulLinks">
<li class="subHeader_nav"> <strong>Helpful Links</strong>
<li class="but_nav"> <a class="helpLink" href="#"><span>Tech Service Desk</span></a>
</li>
<li class="but_nav">
<a class="helpLink" href="#><span>Tech OneStop</span></a>
</li>
<li class=" but_nav ">
<a class="helpLink " href="# "><span>Tech Web</span></a>
</li>
<li class="but_nav ">
<a class="helpLink " href="# "><span>Tech Profile</span></a>
</li>
<li class="but_nav ">
<a class="helpLink " href="# "><span>Help</span></a>
</li>
</ul>
</div>
</div>
I have whitespace between two html sections that I would like to get rid of. Here is a picture of it:
I removed any whitespace in my html code between /div and div, as suggested by answers from my searches, but it didn't seem to fix the problem.
HTML Code:
<!--website main heading layout-->
<div id="heading">
<h1> Beat Your Pace <h1/>
<h2> The music search tool to boost your running performance! </h2>
</div><div id="topbar">
<!--topbar/menu layout-->
<div id="topbar_wrapper">
<ul id="mainmenu">
<li>Home</li><li>
Search</li><li>
Sort By ▼
<ul id="sortmenu">
<li><a href='#'>Song</a>
<ul class="sortsubmenu">
<li><a href='#'>A to Z</a></li><li>
<a href='#'>Z to A</a></li>
</ul>
</li><li>
<a href='#'>Artist</a>
<ul class="sortsubmenu">
<li><a href='#'>A to Z</a></li><li>
<a href='#'>Z to A</a></li>
</ul>
</li><li>
<a href='#'>Album</a>
<ul class="sortsubmenu">
<li><a href='#'>A to Z</a></li><li>
<a href='#'>Z to A</a></li>
</ul>
</li><li>
<a href='#'>Genre</a>
<ul class="sortsubmenu">
<li><a href='#'>A to Z</a></li><li>
<a href='#'>Z to A</a></li>
</ul>
</li><li>
<a href='#'>BPM</a>
<ul class="sortsubmenu">
<li><a href='#'>Slowest to Fastest</a></li><li>
<a href='#'>Fastest to Slowest</a></li>
</ul>
</li><li>
<a href='#'>Release Date</a>
<ul class="sortsubmenu">
<li><a href='#'>Newest to Oldest</a></li><li>
<a href='#'>Oldest to Newest</a></li>
</ul>
</li>
</ul>
</li><li>
Add Song</li><li>
Contact Us</li>
</ul>
</div>
</div>
body and heading CSS Code:
html, body {
margin: 0px;
padding: 0px;
font-family: Arial;
font-size: 18px;
}
#heading {
background: url("http://cdn4.techlila.com/wp- content/uploads/2011/01/header2.jpg");
background-position: left;
color: black;
text-shadow: -1px 0 #F8F8FF, 0 1px #F8F8FF, 1px 0 #F8F8FF, 0 -1px #F8F8FF;
}
Menu CSS Code:
#topbar {
background-color: #222;
}
#topbar_wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#mainmenu {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}
#mainmenu > li {
display: inline-block;
width: 200px;
}
#mainmenu li:hover {
background-color: #333;
}
#mainmenu li a{
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#mainmenu li:hover > ul {
display: block;
}
#sortmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#sortmenu > li {
display: block;
position: relative;
}
#sortmenu li a:hover {
color: #699;
}
#sortmenu li: hover ul {
display: inline-block;
}
.sortsubmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
top: 0;
left: 100%;
width: auto;
}
.sortsubmenu li{
display: inline;
white-space: nowrap;
}
.sortsubmenu li a:hover {
color: #DB7093;
}
Remove the default on the <h2> element:
#heading h2 {
margin:0;
}
I have a drop down menu that cuts of whenever it is selected like the image shown below:
There should be a longer list than just 'watch in flash' but it seems to cut off, why is this?
HTML:
<div id="top_bar">
<div id="top_inner">
<div id="logo"> <img src="images/logo.gif" alt="Ed Osborne" width="225" height="115" class="logo"></div>
<div class="nav">
<ul class = "menu" >
<li> <a href = "#" > Home </a> </li>
<li><a href = "#" > Tutorials </a>
<ul class = "submenu" >
<li> <a href = "#" > CSS </a> </li>
<li> Javascript </li>
<li> <a href = "#" > jQuery </a> </li>
<li> HTML </li>
<li> <a href = "#" > PHP </a> </li>
</ul>
</li>
<li><a href = "#" > Code </a>
<ul class = "submenu" >
<li> <a href = "#" > Watch in Flash </a> </li>
<li> <a href = "#" > Date with JS </a> </li>
<li> <a href = "#" > XML AS </a> </li>
<li> <a href = "#" > RSS and PHP </a> </li>
<li> <a href = "#" > ASP to Excel </a> </li>
<li> <a href = "#" > PHP to Excel </a > </li>
</ul>
</li>
<li> <a href = "#" > About Us </a> </li>
<li> <a href = "#" > Privacy </a> </li>
<li> <a href = "#" > RSS </a> </li>
<li> <a href = "#" > Contact </a> </li>
</ul>
</div>
</div>
<div></div>
</body>
</html>
CSS:
#top_bar {
width: 100%;
height: 145px;
background: #000000;
overflow: hidden;
}
#top_inner {
text-align: center;
margin: 0 auto;
width: 1000px;
height: 144px;
}
#logo {
float: left;
padding-top: 20px;
padding-right: 82px;
}
body {
margin: 0; padding: 0;
font: 12px normal Arial, Helvetica, sans-serif;
background: #FFF url(../images/body_bg.gif) repeat-x;
}
.nav {
margin: 0 auto;
position: relative;
padding-top: 85px;
}
ul.menu {
list-style: none;
padding: 0 15px;
margin: 0;
float: left;
background: #222;
font-size: 1.2em;
background: url(../images/topnav_bg.gif) repeat-x;
}
ul.menu li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative;
}
ul.menu li a{
padding: 10px 15px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.menu li a:hover{
background: url(../images/topnav_hover.gif) no-repeat center top;
}
ul.menu li span {
width: 17px;
height: 35px;
float: left;
background: url(../images/subnav_btn.gif) no-repeat center top;
}
ul.menu li span.subhover {background-position: center bottom; cursor: pointer;}
ul.menu li ul.submenu {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.menu li ul.submenu li{
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
ul.menu li ul.submenu li a {
float: left;
width: 145px;
background: #333 url(../images/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
ul.menu li ul.submenu li a:hover {
background: #222 url(../images/dropdown_linkbg.gif) no-repeat 10px center;
}
Can anybody work out this problem?
Thanks
Add
ul.menu li:hover ul { display:block; }
and remove from
#top_bar { overflow: hidden; }
jsfiddle