 Touching buttons (No space), How can I make my buttons side by side, without any space |
| Seniorbfc |
 Feb 17 2017, 08:10 AM
Post
#1
|
|
Newbie  Group: Members Posts: 17 Joined: 16-January 17 Member No.: 26,267  |
I have added buttons to my banner with a left and right border on each button. However, there is a space between my buttons which I do not want. How can I remove this? The top code is my CSS, bottom HTML, Thanks
CODE #div2{ background: rgba(38,38,38,0.9); height: 94px; width: 100%; line-height: 90px; z-index: 10px; position: fixed; } #div2 ul{ float: center; position: relative; line-height: 50px; } #div2 ul li{ list-style-type: none; display: inline-block; border-left: solid #ff0000; border-right: solid #ff0000; } #div2 ul li a{ padding: 22px; text-decoration: none; color: #ffffff; display: block; } #div2 ul li:hover{ background: rgba(255,0,0,0.65); transition: all 0.40s; } CODE <!DOCTYPE html> <html> <head> <title>Joshua Senior's Website</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="banner"> <div id="div2"> <div id="nav_wrapper"> <ul> <li><A HREF="Index.html" class="active">About</A></li> <li><A HREF="About.html">Resume</A></li> <li><A HREF="Contact.html">Contact</A></li> </ul> </li> </div> </div> </div> <div id="content"> <p>Content</p> </div> </body> </html> |
  |
 
|
  |
Replies
| Seniorbfc |
Feb 17 2017, 10:41 AM
Post
#2
|
|
Newbie Group: Members Posts: 17 Joined: 16-January 17 Member No.: 26,267 |
I don't know if this is what you meant, but I changed the code to this, which removed the gap but now the buttons are aligned to the left (I want them in the center, changing the float to center put them in a column not row). Also the About and resume have a double line, how can I change that to single? Thanks
CODE #div2 ul li{ list-style-type: none; margin: 0; padding: 0; float: left; border-left: solid #ff0000; border-right: solid #ff0000; } This post has been edited by Seniorbfc: Feb 17 2017, 10:41 AM Attached thumbnail(s) 
|
|
|
|
| pandy |
Feb 17 2017, 12:28 PM
Post
#3
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Well, they were left aligned with the first CSS you posted too. And there is no such thing as float: center. I see now you use it for UL too. Flaot can only be left and right.
If you want them centered I would actually shove all three LIs together on one line in the markup, no space or linebreak between them. Ditch the float: left. Keep the inline-block and the line to remove margin/padding. Add text-align: center to the rule for UL. It isn't easy to center a block that has no specific width. But if the LIs are inline, they can be centered the same way as other inline content, with text-align: center used for the parent block. CODE #div2 ul{ text-align: center; position: relative; line-height: 50px; } #div2 ul li{ list-style-type: none; display: inline-block; border-left: solid #ff0000; border-right: solid #ff0000; } HTML <ul> <li><A HREF="Index.html" class="active">About</A></li><li><A HREF="About.html">Resume</A></li><li><A HREF="Contact.html">Contact</A></li> </ul> |
|
|
|
Posts in this topic
Seniorbfc Touching buttons (No space) Feb 17 2017, 08:10 AM
pandy I was going to say add the below to remove whateve... Feb 17 2017, 10:29 AM
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 16th April 2024 - 11:13 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC