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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×