Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

display anchor tag to full width as a button in HTML?

Tags:

html

css

anchor

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??

like image 366
Akhil Jain Avatar asked Aug 06 '12 05:08

Akhil Jain


People also ask

How do I turn an anchor into a button?

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.

How do you give a full width 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.

How do I resize an anchor tag in HTML?

You need to make your anchor display: block or display: inline-block; and then it will accept the width and height values.

Can we give width to anchor tag?

An anchor is an inline element by default so you can't add dimensions to it unless you change its display property.


1 Answers

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.

like image 91
karancan Avatar answered Oct 07 '22 15:10

karancan