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>
Related
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 designing a webpage. I have two levels of navigation, the social media buttons on the first level and later a navigation bar. I am having issues getting the background colour of the navigation bar to go the complete length of the webpage, at present it starts and stops with the navigation bar. I am guessing it is an issue related to the location or my coding of the clearfix? Anyways I would appreciate your advice. My coding is below, I have attached a photo of my site so you can see what it looks like.
My Html code:
<div id="wrapper">
<header id="header" role="banner">
<div id="logo">
<img src="Images/title.png" alt="logo" width="1018" height="140">
</div>
<div id="social">
<ul>
<li>
<img src="images/twitter.png" alt="Twitter" width="32" height="32">
</li>
<li>
<a href="https://www.facebook.com/Save-NSW-Government-Disability-
Services-ADHC-709029659182219/" target="_blank"><img src="images/facebook.png" alt="Facebook" width="32" height="32"></a>
</li>
<li>
<img src="images/youtube.png" alt="Youtube" width="32" height="32">
</li>
</ul>
</div>
<div id="clearfix">
</div>
<nav id="page_nav">
<div class="menu">
<ul id="navmenu">
<li class="active">Home</li>
<li>About Us</li>
<li>Get Involved<span class="darrow">▼</span>
<ul class="submenu">
<li>Social Media</li>
<li>Union Meetings</li>
<li>Rally</li>
</ul>
</li>
<li>News<span class="darrow">▼</span>
<ul class="submenu">
<li>Shrew's News</li>
<li>Update</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact Us</l>
</ul>
</div>
<div id="clearfix">
</div>
</div>
</nav>
</header>
</div>
My Css:
* {
margin: 0px;
padding: 0px;
}
body {
font-family: sans-serif;
background-color: black;
}
#wrapper {
width: 1366px;
height: auto;
background-color: black;
margin: 0 auto;
padding: 10px;
}
#header {
width: 100%;
height: 140px;
background-color: black;
}
#logo {
float: left;
margin: 0px 0px 20px 50px;
padding-left: 100px;
}
#social {
float: right;
top: 0px;
margin: 0 auto;
}
#social ul li {
float: left;
list-style: none;
padding: 5px;
}
#clearfix:after {
display: block;
clear: both;
}
#page_nav {
background-color: #c50a13;
}
ul#navmenu {
list-style-type: none;
width: 800px;
margin: auto auto 5px auto;
}
ul.submenu {
list-style-type: none;
}
ul#navmenu li {
outline: 1px solid white;
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
color: #26b0f1;
}
ul#navmenu a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #c50a13;
border: 1px solid white;
border-radius: 5px;
color: white;
}
ul#navmenu .submenu a {
margin-top: 3px;
}
ul#navmenu li:hover > a {
background-color: white;
color: #c50a13;
}
ul#navmenu ul.submenu {
display: none;
position: absolute;
top: 26px;
left: 0px;
}
ul#navmenu li:hover .submenu {
display: block;
}
.darrow {
font-size: 14pts;
position: absolute;
top: 10px;
right: 1px;
color: dodgerblue;
}
Update:
You forgot something in your CSS clearfix.
#clearfix:after {
display: block;
clear: both;
content: ''; /* add me */
}
In addition, you have some errors in your HTML which can affect rendering in different ways in different browsers.
[1] Invalid close tag for an <li>
[2] Extra </div> before the close of your </nav>.
[3] Duplicate IDs: id="clearfix"
First, fix the duplicate IDs. In your CSS, change this:
#clearfix:after {
display: block;
clear: both;
}
To this:
.clearfix:after {
display: block;
clear: both;
}
Here is your HTML without errors.
<div id="wrapper">
<header id="header" role="banner">
<div id="logo">
<img src="Images/title.png" alt="logo" width="1018" height="140">
</div>
<div id="social">
<ul>
<li>
<img src="images/twitter.png" alt="Twitter" width="32" height="32">
</li>
<li>
<img src="images/facebook.png" alt="Facebook" width="32" height="32">
</li>
<li>
<img src="images/youtube.png" alt="Youtube" width="32" height="32">
</li>
</ul>
</div>
<div class="clearfix">
</div>
<nav id="page_nav">
<div class="menu">
<ul id="navmenu">
<li class="active">Home</li>
<li>About Us</li>
<li>
Get Involved<span class="darrow">▼</span>
<ul class="submenu">
<li>Social Media</li>
<li>Union Meetings</li>
<li>Rally</li>
</ul>
</li>
<li>
News<span class="darrow">▼</span>
<ul class="submenu">
<li>Shrew's News</li>
<li>Update</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
<div class="clearfix">
</div>
</nav>
</header>
</div>
I need to align specific items into a <li>. That <li> is the first child of a <ul> menu. I have some ideas like do many <span> and align them together or I can divide my <li> area in 3 sections and align my items the one under the others but I do not know which way is the most practical and the most semantically correct.
Here is my code:
<ul id="menuWorkshops">
<li>
<span>Easy</span>
<span>Middle</span>
<span>Difficult</span>
<span class="circle green"></span>
<span class="circle orange"></span>
<span class="circle red"></span>
</li>
<li>
<span>Hardware</span>
<ul>
<li>
<img alt="" src="img/hardware_web.png" /> Montage PC
<span class="circleMenu orange"></span>
</li>
</ul>
</li>
<li>
<span>Système</span>
<ul>
<li>
<img alt="" src="img/os_web.png" /> Installation OS
<span class="circleMenu green"></span>
</li>
</ul>
</li>
<li>
<span>Programmation</span>
<ul>
<li>
<img alt="" src="img/html_web.png" /> Développement Web
<span class="circleMenu orange"></span>
</li>
<li>
<img alt="" src="img/lego_web.png" /> Lego Mindstorm
<span class="circleMenu green"></span>
</li>
<li>
<img alt="" src="img/catch_me_web.png" /> Jeu Attrape-moi (Processing)
<span class="circleMenu red"></span>
</li>
<li>
<img alt="" src="img/tetris_web.png" /> Jeu Tetris (Small Basic)
<span class="circleMenu red"></span>
</li>
<li>
<img alt="" src="img/breakout_web.png" /> Jeu Casse-Brique (Small Basic)
<span class="circleMenu orange"></span>
</li>
<li>
<img alt="" src="img/scratch_web.png" /> Kinect to Scratch
<span class="circleMenu green"></span>
</li>
<li>
<img alt="" src="img/bird_web.png" /> Jeu Flappy Bird (Scratch)
<span class="circleMenu green"></span>
</li>
</ul>
</li>
</ul>
ul#menuWorkshops {
display: inline-block;
width: 285px;
padding-left: 0;
border: 1px solid #000;
border-bottom: 0;
list-style-type: none;
}
ul#menuWorkshops ul {
padding-left: 0;
}
ul#menuWorkshops > li > span {
display: block;
height: 35px;
border-bottom: 1px solid #000;
background-color: #4D4D4D;
color: #FAFAFA;
font-size: 18px;
text-align: center;
line-height: 35px;
}
ul#menuWorkshops > li:first-child {
height: 50px;
background-color: #E0E0E0;
color: #050505;
}
ul#menuWorkshops ul li {
height: 35px;
line-height: 35px;
padding: 5px 10px;
background-color: #007CB7;
color: #FAFAFA;
font-size: 14px;
border-bottom: 1px solid #000;
}
ul#menuWorkshops img {
vertical-align: middle;
}
ul#menuWorkshops ul li:hover {
background-color: #8BBDD9;
color: #050505;
font-weight: bold;
list-style-type: none;
}
span.circleMenu {
float: right;
width: 10px;
height: 10px;
border: 1px solid #FFF;
border-radius: 5px;
}
.green {
background-color: #008000;
}
.orange {
background-color: #FFA500;
}
.red {
background-color: #F00;
}
For you to understand my question I will join a screenshot of the result I want to reach.
my screenshot
I would treat that top section as separate from the navigation that follows, as it's not a sibling list item in any true sense. Here, I've created a nav for the entire menu with a header and a series of dl within for the ease-medium-difficult legend, followed by the ul with .submenu uls for the actual nav items. Certainly not the only way to go about this, but definitely a more semantic solution than what you started with. Obviously, if you prefer everything wrapped in a ul, you can also repurpose this CSS to that end.
body {
box-sizing: border-box;
font-family: sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
#menuWorkshops {
border: 1px solid #000;
display: inline-block;
width: 325px;
}
#menuWorkshops dl,
#menuWorkshops dt,
#menuWorkshops dd,
#menuWorkshops ul,
#menuWorkshops li {
margin: 0;
padding: 0;
}
#menuWorkshops header {
background-color: #E0E0E0;
color: #050505;
padding: 12px 10px;
}
#menuWorkshops header dl {
display: inline-block;
font-size: 14px;
width: 32%;
}
#menuWorkshops header dl,
#menuWorkshops header dt,
#menuWorkshops header dd {
margin: 0;
text-align: center;
}
#menuWorkshops header dt,
#menuWorkshops header dd {
display: block;
}
#menuWorkshops header .circle {
margin: 4px auto 0;
}
.circle {
border: 1px solid #FFF;
border-radius: 50%;
display: inline-block;
height: 20px;
width: 20px;
}
.green {
background-color: #008000;
}
.orange {
background-color: #FFA500;
}
.red {
background-color: #F00;
}
#menuWorkshops ul,
#menuWorkshops li {
display: block;
padding-left: 0;
}
#menuWorkshops li {
color: #FAFAFA;
line-height: 50px;
}
#menuWorkshops > ul > li {
background-color: #4D4D4D;
border-top: 1px solid #000;
font-size: 18px;
text-align: center;
}
#menuWorkshops .submenu li {
border-top: 1px solid #000;
}
#menuWorkshops .submenu a {
background-color: #007CB7;
color: #FAFAFA;
display: block;
font-size: 14px;
padding: 0 10px;
text-align: left;
text-decoration: none;
}
#menuWorkshops .submenu a:hover {
background-color: #8BBDD9;
color: #050505;
font-weight: bold;
list-style-type: none;
}
#menuWorkshops .submenu img {
display: inline-block;
height: 40px;
padding: 0 10px;
vertical-align: middle;
width: 40px;
}
#menuWorkshops .submenu .circle {
float: right;
margin-top: 12px;
}
<nav id="menuWorkshops">
<header>
<dl>
<dt>Facile</dt>
<dd class="circle green"></dd>
</dl>
<dl>
<dt>Moyen</dt>
<dd class="circle orange"></dd>
</dl>
<dl>
<dt>Difficile</dt>
<dd class="circle red"></dd>
</dl>
</header>
<ul>
<li>Hardware
<ul class="submenu">
<li>
<a href="#">
<img alt="" src="img/hardware_web.png" />Montage PC
<span class="circle orange"></span>
</a>
</li>
</ul>
</li>
<li>Système
<ul class="submenu">
<li>
<a href="#">
<img alt="" src="img/os_web.png" />Installation OS
<span class="circle green"></span>
</a>
</li>
</ul>
</li>
<li>Programmation
<ul class="submenu">
<li>
<a href="#">
<img alt="" src="img/html_web.png" />Développement Web
<span class="circle orange"></span>
</a>
</li>
<li>
<a href="#">
<img alt="" src="img/lego_web.png" />Lego Mindstorm
<span class="circle green"></span>
</a>
</li>
<li>
<a href="#">
<img alt="" src="img/catch_me_web.png" />Jeu Attrape-moi (Processing)
<span class="circle red"></span>
</a>
</li>
<li>
<a href="#">
<img alt="" src="img/tetris_web.png" />Jeu Tetris (Small Basic)
<span class="circle red"></span>
</a>
</li>
<li>
<a href="#">
<img alt="" src="img/breakout_web.png" />Jeu Casse-Brique (Small Basic)
<span class="circle orange"></span>
</a>
</li>
<li>
<a href="#">
<img alt="" src="img/scratch_web.png" />Kinect to Scratch
<span class="circle green"></span>
</a>
</li>
<li>
<a href="#">
<img alt="" src="img/bird_web.png" />Jeu Flappy Bird (Scratch)
<span class="circle green"></span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
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>
I want to vertically align images inside li, My code works fine in firefox but not in chrome. Can any body help me with this?
Here is the HTML:
<div class="brands container content">
<ul id="brandlogo">
<li><img src="https://images-na.ssl-images-amazon.com/images/I/12MlwaGE42L.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/12rC5bPL82L.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/220GuD5uB5L.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/12qBKSlxODL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/127dR7ho7TL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/22gR5V1VEFL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/22Sr0En0GzL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/12JRdD3GOjL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/22bm9-FDvpL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/12mGjpXipJL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/22D0pbgaokL.png" alt=""/></li>
</ul>
</div>
and CSS:
#brandlogo {
text-align: center;
padding: 0px;
margin: 30px 0px 0px;
position: relative;
list-style: outside none none;
}
#brandlogo li {
border: 1px solid #DDD;
float: none;
display: inline-block;
padding: 0px 35px;
width: auto;
margin: 10px 10px 10px 0px;
height: 150px;
line-height: 150px;
border-radius: 5px;
}
#brandlogo li a {
float: none;
width: 100%;
}
#brandlogo li a img {
vertical-align: middle;
}
http://jsbin.com/wizati/1/edit?html,css,output
Thanks in advance.
Add vertical-align: middle; to li element:
#brandlogo {
text-align: center;
padding: 0px;
margin: 30px 0px 0px;
position: relative;
list-style: outside none none;
}
#brandlogo li {
border: 1px solid #DDD;
float: none;
display: inline-block;
padding: 0px 35px;
width: auto;
margin: 10px 10px 10px 0px;
height: 150px;
line-height: 150px;
border-radius: 5px;
vertical-align: middle;/*Add vertical align middle*/
}
#brandlogo li a {
float: none;
width: 100%;
}
#brandlogo li a img {
vertical-align: middle;
}
<div class="brands container content">
<ul id="brandlogo">
<li>
<a href="http://scrub-market.hostedbywebstore.com/Alegria/b/11442638011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/12MlwaGE42L.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Cherooke/b/11442639011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/12rC5bPL82L.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Dickies/b/11442640011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/220GuD5uB5L.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Healing-Hands-Purple-Label/b/11442641011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/12qBKSlxODL.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Heart-Soul/b/11442643011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/127dR7ho7TL.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Koi/b/11442644011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/22gR5V1VEFL.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/New-Balance/b/11442645011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/22Sr0En0GzL.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Nurse-Mate/b/11442646011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/12JRdD3GOjL.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Renova/b/11442647011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/22bm9-FDvpL.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Skechers/b/11442648011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/12mGjpXipJL.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Wonderwink/b/11442649011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/22D0pbgaokL.png" alt="" />
</a>
</li>
</ul>
</div>
CSS
#brandlogo li a {
float: none;
width: 100%;
height: inherit;
display: table-cell;
vertical-align: middle;
}
My using the above CSS property we just make the a tag to act as a table cell and occupy full height of its parent and vertical-align:middle its childern
JS BIN DEMO
Add a float: left; as shown:
#brandlogo li {
border: 1px solid #DDD;
float: left;
display: inline-block;
padding: 0px 35px;
width: auto;
margin: 10px 10px 10px 0px;
height: 150px;
line-height: 150px;
border-radius: 5px;