I have a slightly complicated menu to code from PSD document and integrate into Wordpress.
This is how it looks:
The result of my work is this:
http://slavisaperisic.com/FlexE/meni_setap.html
Now, when I write function wp_list_pages(); I get the default markup:
<ul>
<li class="page_item"></li>
<li class="page_item"></li>
<li class="page_item"></li>
</ul>
But the markup I created (that gives me the appropriately styled dynamic menu) looks like this:
<div id="menu">
<div id="menu-left"></div>
<div id="main-menu">
<ul>
<li class="active first">
<div class="left_li"></div>
Exploring
<div class="right_li"></div>
</li>
<li class="second">
<div class="left_li"></div>
Using
<div class="right_li"></div>
</li>
<li class="third">
<div class="left_li"></div>
Downloading
<div class="right_li"></div>
</li>
</ul>
</div>
<div id="menu-right"></div>
</div>
I styled it so that it follows the length of the word in the menu item. Obviously, I can't use the wp_list_pages() function because the structure it gives me is different than the one I need.
Do you have some ideas? Maybe point me to somewhere where I can learn to code it differently or explain it to me?
Try this on for size. I've tested it in Chrome and Firefox.
Mark-up:
<ul>
<li class="page_item active"><a>Exploring</a></li>
<li class="page_item"><a>Using</a></li>
<li class="page_item"><a>Downloading</a></li>
</ul>
CSS:
ul, li { margin: 0; padding: 0; list-style: none; }
ul {
float: left;
background-color: #EEE;
border: 2px solid #DDD;
height: 46px;
position: relative;
border-radius: 12px 12px 0 0;
}
ul:after {
display: block;
content: "";
position: absolute;
right: -45px;
top: 3px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #DDD transparent;
border-color: rgba(255,255,255,0) rgba(255,255,255,0) #DDD rgba(255,255,255,0);
border-width: 0 45px 45px 0;
}
li {
float: left;
height: 26px;
font-size: 1.2em;
padding: 10px 10px 10px 40px;
background-color: #EEE;
border-radius: 10px 10px 0 0;
position: relative;
}
li:after {
display: block;
z-index: 1;
position: absolute;
right: -40px;
top: 4px;
width: 0;
height: 0;
content: "";
border-style: solid;
border-color: transparent transparent #EEE transparent;
border-color: rgba(255,255,255,0) rgba(255,255,255,0) #EEE rgba(255,255,255,0);
border-width: 0 42px 42px 0;
}
li a {cursor: pointer;}
li a, li.active a:hover {color: #999;}
li a:hover, li.active a {color: white;}
li.active {background-color: lightblue;}
li.active:after {border-bottom-color: lightblue;}
You can see it in action here:
http://static.robinwinslow.co.uk/menustyling.html
I can't test in IE on this Ubuntu machine, but I think:
IE9 should be fine
IE8 should show triangles but not border radii
IE7 won't show triangles or border radii
Is that a good enough solution?
You can use wp_nav_menu to create custom menus. Details can be http://codex.wordpress.org/Function_Reference/wp_nav_menu
Using this you can create markup similar to:
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item">
<a href="http://sewsoon.co.uk/">
<strong>Home</strong>
<span>Start Over</span>
</a>
</li>
However, you may want to look into using pseudo elements before: and after: to keep the markup more semantic. Depending upon if you're including javascript libraries or not you could use http://selectivizr.com/ to patch ie support.
Related
It shows two events at same time:
jQuery Code:
$('[data-trigger="dropdown"]').on('mouseenter', function(){
var submenu=$(this).parent().find('.submenu');
submenu.addClass('active');
}
HTML:
<ul class="profile-menu">
<li>
<a class="profile-menu-trigger" data-trigger="dropdown" href="#">Logged in as User</a>
</li>
<ul class="profile-submenu submenu ">
<li>Login</li>
<li> Logout</li>
<li>Options</li>
<li>Circus</li>
</ul>
</ul>
CSS:
.submenu{
list-style: none;
padding: 0px;
border: 1px solid #aaa;
background: #fff;
margin-top: 30px;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
width: 250px;
position: absolute;
right: 20px;
display: none;
}
.submenu.active{ display: block; }
This program should show the menu on top right corner when touch on "User Logged in" but it can't.
I'm working on a progressive web application, where the user can create code blocks that can expand horizontally (depending on the size of the content), and also, i have a fixed top app bar, but, when the page content overflow the page in the x axis, the top app bar options are pushed to the invisible side of canvas
Live web app: https://ide.code101.com.br
/* Prevent user from clicking on page elements before loading */
html {pointer-events: none}
a,
a:hover,
a:focus {text-decoration: none}
#editArea, #codeOutput {padding: 10px}
#editArea, .sortable {
list-style-type: none;
font-size: 18px;
}
#editArea *:not(.material-icons) {clear: both}
/* FIX SIZE ISSUES WITH MDC TEXTFIELD ON DIALOG (OUTLINED) */
.mdc-dialog .mdc-text-field {width: 100%}
.mdc-dialog .mdc-text-field--outlined::before,
.mdc-dialog .mdc-text-field--outlined::after {
width: 0 !important;
height: 0 !important;
}
/* ############################## */
.mdc-top-app-bar, .mdc-drawer, .mdc-dialog {user-select: none}
.mdc-top-app-bar--fixed-adjust {height: 100vh}
.list {min-height: 44.5px}
.codeide-logo {font-family: "Press Start 2P"}
.scrollDiv {
position: fixed;
width: 100%;
padding: 20px;
bottom: 0;
z-index: -1;
}
/* BLOCKS COLOR HIGHLIGHT (MONOKAI)
#272822 - BLACK
#F92672 - RED
#66D9EF - BLUE
#A6E22E - GREEN
#FD971F - ORANGE
-----------------------------*/
.commandBlock {
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
padding: 8px 16px !important;
margin-bottom: 16px !important;
border-radius: 4px;
float: left !important;
}
.code {display: none}
.drag {
float: left !important;
margin-right: 16px !important;
}
.close {
float: right !important;
margin-left: 16px !important;
}
.editable {
white-space: nowrap;
background-color: #FD971F;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
padding: 4px 8px !important;
border-radius: 4px;
}
.cmd_alert {background-color: #66D9EF}
.cmd_if, .cmd_else, .cmd_for {background-color: #A6E22E}
.cmd_comment {background-color: #BDC3C7}
/* ########## CODE BLOCKS ########## */
body.dragging, body.dragging * {cursor: move !important}
.dragged {
opacity: 0.5;
overflow: hidden;
}
ul.list {
padding-left: 0;
margin: 0 0 9px 0;
min-height: 10px;
}
ul.list li {
color: white;
display: block;
margin: 5px 0;
padding: 5px;
user-select: none;
box-sizing: content-box;
}
ul.list li.placeholder {
position: relative;
margin: 0;
padding: 0;
border-color: red;
border-style: dotted;
z-index: 2000;
}
ul.list li.placeholder:before {
position: absolute;
content: "";
width: 0;
height: 0;
margin-top: -8px;
left: -8px;
top: -1px;
border: 8px solid transparent;
border-left-color: red;
border-right: none;
z-index: 2000;
}
<!-- TOP APP BAR -->
<header class="mdc-top-app-bar mdc-top-app-bar--fixed w3-card">
<div class="mdc-top-app-bar__row">
<!-- CONTENT AT LEFT -->
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<!-- DRAWER BUTTON -->
<a id="drawerBtn" onclick="drawer.open = true" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<!-- APP TITLE -->
<span class="mdc-top-app-bar__title codeide-logo">codeIDE</span>
</section>
<!-- CONTENT AT RIGHT -->
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<!-- CHANGE VIEW MODE -->
<button class="mdc-icon-button material-icons" id="btnChangeView" onclick="changeViewMode()">code</button>
<!-- SIDE MENU -->
<div class="mdc-menu-surface--anchor">
<a onclick="menu.open = !menu.open" class="material-icons mdc-top-app-bar__action-item" aria-label="Opções" alt="Opções">more_vert</a>
<div class="mdc-menu mdc-menu-surface" tabindex="-1">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
<!-- EXPORT FILE -->
<li onclick="exportFile($('#editArea').html())" class="mdc-list-item" role="menuitem">
<i class="mdc-list-item__graphic material-icons">save</i>
<span class="mdc-list-item__text">Exportar arquivo</span>
</li>
<!-- IMPORT FILE -->
<li onclick="importFile()" class="mdc-list-item" role="menuitem">
<i class="mdc-list-item__graphic material-icons">folder_open</i>
<span class="mdc-list-item__text">Importar arquivo</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<!-- NIGHT MODE -->
<li id="nightModeBtn" onclick="nightMode('trigger')" class="mdc-list-item" role="menuitem">
<i class="mdc-list-item__graphic material-icons">brightness_2</i>
<span class="mdc-list-item__text">Modo noturno</span>
</li>
<!-- ABOUT -->
<li onclick="displayAboutDialog()" class="mdc-list-item" role="menuitem">
<i class="mdc-list-item__graphic material-icons">info</i>
<span class="mdc-list-item__text">Sobre</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<!-- CODE101 -->
<li onclick="location.href='https://code101.com.br'" class="mdc-list-item" role="menuitem">
<i class="mdc-list-item__graphic material-icons">launch</i>
<span class="mdc-list-item__text">Visitar o code101</span>
</li>
</ul>
</div>
</div>
</section>
</div>
</header>
I Solved it!
by removing the overflow: scroll css property from the body, and passed it to the code blocks list element (#list)
Wont $('.headername').css('width',$(window).width()); not work? Considering you're only requiring your header in a viewable window space, since its floating
this is my home page image
this my menu-bar that i cant able to click on it
2:
This my menu-bar CSS code which i am using
ul.semiopaquemenu{ /* main menu UL */
text-align:center;
font: bold 14px Georgia;
width: 100%;
background-color:#99CCFF;
padding: 11px 0 8px 0; /* padding of the 4 sides of the menu */
margin: 0;
text-align: center;
<%--position:absolute;
height: 20px;
top: 114px;
left: 2px;
--%> }
ul.semiopaquemenu li{
display: inline;
overflow:visible;
}
ul.semiopaquemenu li a{
color:Black;
padding: 6px 8px 6px 8px; /* padding of the 4 sides of each menu link */
margin-right: 15px; /* spacing between each menu link */
text-decoration: none;
}
ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{
color: black;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgyIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xNiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* IE9+ SVG equivalent of linear gradients */
background: -moz-linear-gradient(top, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%); /* fade from white (0.82 opacty) to 0.16 opacity */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffffff', endColorstr='#29ffffff',GradientType=0 );
-moz-box-shadow: 0 0 2px #595959; /* CSS3 box shadows */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
overflow:visible;
padding-top: 10px; /* large padding to get menu item to protrude upwards */
padding-bottom: 10px; /* large padding to get menu item to protrude downwards */
}
ul.semiopaquemenu li {
position: relative;
background-color:Transparent;
}
/*sub menu*/
ul.semiopaquemenu li ul.sub-menu {
display:none;
position: absolute;
LEFT:-39PX;
top:25px;
background-color:#99CCFF;
width:150px;
padding:0px;
margin:0px;
list-style:none;
overflow:visible;
background-position: right center;
background-repeat: no-repeat;
padding-right: 0px;
<%-- border-left: 2px solid #4b6c9e;
border-right: 2px solid #4b6c9e;
border-bottom: 2px solid #4b6c9e;--%>
text-decoration:italic;
text-transform:uppercase;
}
ul.semiopaquemenu li ul a
{
border-bottom: 2px dotted #F7F7F7;
padding: 10px;
margin:0px;
display: block;
overflow:visible;
}
ul.semiopaquemenu li:hover ul.sub-menu {
display: block;
overflow: visible;
}
This is my Html Code
<tr>
<td align="center">
<ul class="semiopaquemenu">
<li>
</li>
<li><asp:LinkButton ID="lbhome" runat="server" onclick="lbhome_Click">Home</asp:LinkButton>
<li><asp:LinkButton ID="lbFAQ" runat="server">Board</asp:LinkButton>
<ul class="sub-menu">
<li>
Mumbai Board
</li>
<li>
Kokan Board
</li>
<li>
Pune Board
</li>
</ul>
</li>
<li><asp:LinkButton ID="lbservice" runat ="server" onclick="lbservice_Click" >Service Search</asp:LinkButton></li>
<li><asp:LinkButton ID="lbqs" runat ="server" onclick="lbqs_Click">Quick Search</asp:LinkButton></li>
<li><asp:LinkButton ID="lbcr" runat ="server" onclick="lbcr_Click">CallRegister</asp:LinkButton></li>
<li><asp:LinkButton ID="lbcom" runat ="server" onclick="lbcom_Click">Complaint</asp:LinkButton></li>
<li><asp:LinkButton ID="lbrpt" runat ="server" onclick="lbrpt_Click">Report</asp:LinkButton></li>
<li><asp:LinkButton ID="lblog" runat ="server" onclick="lblog_Click">Logout</asp:LinkButton></li>
</li>
</ul>
</td> </tr>
when i click on another page i cant able to click on sub menu bar.
please help me for this.
try this
.semiopaquemenu {
text-align:center;
font: bold 14px Georgia;
width: 100%;
background-color:#99CCFF;
padding: 11px 0 8px 0;
margin: 0;
text-align: center;
height: 20px;
top: 114px;
left: 2px;
z-index:99999 ; /* using Z-INDEX */
position:relative;
HTML
<ul class="semiopaquemenu">
<li></li>
<li> Home
<li>Board
<ul class="sub-menu">
<li> Mumbai Board
</li>
<li> Kokan Board
</li>
<li> Pune Board
</li>
</ul>
</li>
<li> Service Search
</li>
<li> Quick Search
</li>
<li> CallRegister
</li>
<li>
Complaint
</li>
<li>
Report
</li>
<li>
Logout
</li>
</li>
</ul>
Live Demo
Output:
Edit:
change this CSS
ul.semiopaquemenu {
/* main menu UL */
text-align:center;
font: bold 14px Georgia;
width: 100%;
background-color:#99CCFF;
padding: 11px 0 8px 0;
/* padding of the 4 sides of the menu */
margin: 0;
text-align: center;
height: 20px;
top: 114px;
left: 2px;
z-index:600px
position:relative;
}
Working fiddle
Live Demo
I want to add a top border to my navbar buttons when the mouse is hovered over them and then back to its original state when mouse is off the elements.
However my code does not seem to be working, I am using a function to do this in JavaScript as follows:
<script type = "text/javascript">
function border(element){
element.style.borderTop ='3px solid';
element.style.borderColor = '#d22b2b';
}
</script>
and the HTML:
<ul align="center">
<li onmouseover="border(this)">Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
With the above code nothing is happening at all when I hover the mouse over the first li element.
I updated your code and managed to get it working. Here is the jfiddle for it: http://jsfiddle.net/A2gkU/2/
The problem was that you had too much padding above/below the links, so even if there was a border showing up above, it got hidden by the padding.
HTML Codes:
<div id="navbar">
<ul align="center">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
CSS codes:
#navbar{
background-color: #fff;
overflow:hidden;
-moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.6);
box-shadow: 0px 1px 4px rgba(0,0,0,0.6);
padding:5px;
}
#navbar ul {list-style:none;
text-align: center;
margin: 5px;
font-family: Segoe UI;
font-size: 17px;
font-weight: bold;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration:none;
color:#302E2E;
padding-left: 15px;
background-color: #fff;
}
#navbar ul li a:hover { color: #F56; border-top: 3px solid #d22b2b;}
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
When you hover on it a box opens.Now here comes the problem,i want the position of the box to be fixed at one place so whenever you hover on the menu the box remains at the same place.I hope you guys understood me and one more thing when somebody opens my webpage i want the first list item of the menu to be selected by default.
Here is my CSS:
#cssmenu ul{
list-style: none;
margin: 0;
padding: 0;
vertical-align: baseline;
line-height: 1;
}
#cssmenu ul {
display: block;
position: absolute;
width: 150px;
top: 500px;
left: 900px;
}
#cssmenu ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 150px;
}
#cssmenu ul li a {
display: block;
position: relative;
margin: 0;
border-top: 1px dotted #fff;
border-bottom: 1px dotted #d9d9d9;
padding: 11px 20px;
width: 150px;
font-family: Helvetica, Arial, sans-serif;
color: #3dafea;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
font-size: 13px;
font-weight: 300;
background: #eaeaea;
}
#cssmenu ul li a:hover, #cssmenu ul li:hover a {
color: #fff;
background: #54cdf1;
background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);
background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3);
background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
border-color: transparent;
}
#cssmenu ul .has-sub a::after {
content: '';
position: absolute;
top: 16px;
right: 10px;
width: 0px;
height: 0px;
border: 4px solid transparent;
border-left: 4px solid #3dafea;
}
#cssmenu ul .has-sub a::before {
content: '';
position: absolute;
top: 17px;
right: 10px;
width: 0px;
height: 0px;
border: 4px solid transparent;
border-left: 4px solid #fff;
}
#cssmenu ul li a:hover::after, #cssmenu ul li:hover a::after {
border-left: 4px solid #fff;
}
#cssmenu ul li a:hover::before, #cssmenu ul li:hover a::before {
border-left: 4px solid rgba(0, 0, 0, .25);
}
#cssmenu ul ul {
position: absolute;
left: 190px;
top: -9999px;
padding-left: 5px;
opacity: 0;
-webkit-transition: opacity .3s ease-in;
-moz-transition: opacity .3s ease-in;
-o-transition: opacity .3s ease-in;
-ms-transition: opacity .3s ease-in;
}
#cssmenu ul li:hover ul {
top: 0px;
opacity: 1;
}
div.box {
background: yellow;
width: 200px;
height: 200px;
position: absolute;
}
And here is the HTML:
<div id='cssmenu'>
<ul>
<li class='has-sub'><a href='index.html'>Darksider II</a>
<ul>
<li class='has-sub'>
<div class="box"><img src='1.jpg' width='100' height='100'></div>
</ul>
</li>
<li class='has-sub'><a href='#'>FIFA 13</a>
<ul>
<li class='has-sub'><div class='box'><img src='1.jpg' width='100' height='100'>
</ul>
</li>
<li class='has-sub'><a href='#'>Hitman Absolution</a>
<ul>
<li><div class='box'><img src='1.jpg' width='100' height='100'></li>
</ul>
</li>
<li class='has-sub'><a href='#'>Hitman Blood money</a>
<ul>
<li><div class='box'><img src='1.jpg' width='100' height='100'></div>
</ul>
</li>
<li class='has-sub'><a href='#'>Darksiders</a>
<ul>
<li><div class='box'><img src='1.jpg' width='100' height='100'></div></li>
</ul>
</li>
</ul>
</div>
Any answer in any Language will be really appericiated and thanks in advance
This can be achieved by assigning "inline-style" to your individual "box" elements, other than the first one. I gave them a -ve top-margin.
<div id='cssmenu'>
<ul>
<li class='has-sub'><a href='index.html'>Darksider II</a>
<ul>
<li class='has-sub'>
<div class="box"><img src='1.jpg' width='100' height='100'></div>
</ul>
</li>
<li class='has-sub'><a href='#'>FIFA 13</a>
<ul>
<li class='has-sub'><div class='box' style="margin-top: -38px"><img src='1.jpg' width='100' height='100'>
</ul>
</li>
<li class='has-sub'><a href='#'>Hitman Absolution</a>
<ul>
<li><div class='box' style="margin-top: -74px"><img src='1.jpg' width='100' height='100'></li>
</ul>
</li>
<li class='has-sub'><a href='#'>Hitman Blood money</a>
<ul>
<li><div class='box' style="margin-top: -112px"><img src='1.jpg' width='100' height='100'></div>
</ul>
</li>
<li class='has-sub'><a href='#'>Darksiders</a>
<ul>
<li>
<div class='box' style="margin-top: -148px"><img src='1.jpg' width='100' height='100'></div></li>
</ul>
</li>
</ul>
</div>
Here is the working demo.
In this brick remove "position: relative" and it'll work like I believe you want it to. In my opinion your code seems to be really rough, some of your li tags don't have end tags while some do for example. I also think a lot of what you're trying to do can be achieved easier and cleaner with JavaScript and jQuery.
#cssmenu ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 150px;
}