Menu
this is small code for side menu of my page
<div style="display: block;" id="overlay" class="overlay">
<div id="sideMenuGroups">
<div id="sideMenuGroupHeader" class="mSideMenuSeparator">GROUPS</div>
<div id="sideMenuGroupContent" class="mSideMenuContent">
<div id="teacherGroup">As Teacher
<a onclick="groupFeeds();" href="#">Data Mining</a>
<a onclick="groupFeeds();" href="#">Data Structures</a>
<a onclick="groupFeeds();" href="#">C Language</a>
//**display anchor tag to full width of overlay**
<a onclick="groupFeeds();" href="#">Introduction to IT</a>
</div>
</div>
</div>
</div><!--overlay ends here-->
the css for the styles used is
*mSideMenuConten*t has no style defined
mSideMenuContent a- tells how each anchor tag would be visible, i have tried display:table-cell property, but it is not effective for me
overlay tells how the side menu would be
.mSideMenuContent
{
}
.mSideMenuContent a
{
display: table-cell;
height: 37px;
color: #c4ccda;
padding: 3px 0 3px 8px;
font-size: small;
}
.mSideMenuContent a:hover
{
background:#262c3a;
color: #c4ccda;
}
.mSideMenuSeparator
{
background: #434b5c;
border-top: 1px solid #242a37;
border-bottom: 1px solid #242a37;
font-family:Helvetica, sans-serif;
font-size:x-small;
color: #7a8292;
height:17px;
padding-top:4px;
padding-left: 10px;
text-shadow: 0 1px 0 rgba(0, 0, 0, .6)
}
.overlay {
z-index: 1000;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 50%;
height: 100%;
background:#31394a;;
color: #c4ccda;
display: none;
}
i want to display the anchor tag to full width of the side menu, how do i do that??
366
Using button tag inside <a> tag: This method create a button inside anchor tag. The anchor tag redirect the web page into the given location. Adding styles as button to a link: This method create a simple anchor tag link and then apply some CSS property to makes it like a button.
display: block and width: 100% is the correct way to go full width but you need to remove the left/right margin on the button as it pushes it outside the containing element. for more information on the box-sizing property, read the MDN docs.
You need to make your anchor display: block or display: inline-block; and then it will accept the width and height values.
An anchor is an inline element by default so you can't add dimensions to it unless you change its display property.
Use this:
display:inline-block;
width: 100%;
By saying inline block, you allow yourself to define a width for the element. Inline elements can't do this be default.
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
