Touching buttons (No space), How can I make my buttons side by side, without any space |
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> |
pandy |
Feb 17 2017, 10:29 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I was going to say add the below to remove whatever margin or padding browsers see fit to to use on UL and LI.
CODE ul,li { margin: 0; padding: 0 } But it didn't help. It seems inline blocks sort of stand on the line, like words or images, and the whitespace in the markup between the LIs show up as a space on the page. To avoid having to shove your markup for the list together on one line you could float the LIs left. And you also need to remove the margin/padding as I showed above. Actually, floating the LIs and removing the margin/padding is enough. You don't really need inline-block anymore, if you don't want that for some other reason that isn't obvious from your sample. |
Seniorbfc |
Feb 17 2017, 10:41 AM
Post
#3
|
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
#4
|
🌟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> |
Lo-Fi Version | Time is now: 23rd April 2024 - 03:46 PM |