Jump to content
Sign in to follow this  
MurderItachi

CSS Buttons: width and height tags don't work

Recommended Posts

Hello Guys,

I'm working on a website for my aunt, due to the new privacy law, she needs to update the page with a new Button in the menu. I lost the programm which I created the old .png buttons, so I can't create the new one in the same style. I want to replace the old buttons with new ones, written in css. The only problem is the size of the buttons, they keep scaling with the writting in the button, but I want them all the same size. I attached the code of the css and html, can you help me? I know, the website is written in an old style, her former programmer did all the writting and I overtook the project a while ago.

CSS.css

Schwarzwaldverein Ortsgruppe Achern.html

Share this post


Link to post
Share on other sites

Add "display:block" to the .button class. Remove all width, height, min-width and min-height properties from the .button class. Remove the <br> elements from between the list items.

Share this post


Link to post
Share on other sites

You have a syntax error in your CSS. Your lines must be separated by a semi-colon. I suggest you move all CSS to the external file and remove the <style> tags from the document.

I've attached a working solution.

CSS.css

SchwarzwaldvereinOrtsgruppeAchern.html

Share this post


Link to post
Share on other sites

The best option to give equal width to your buttons is to give the width itself in pixel value with text-align center property. You can add little padding on each side for vertical spacing.

.your-button{

      width: 100px;

     text-align: center;

     padding: 5px 10px;

}

You can also add hover effects to make them look more appealing.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...