The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Touching buttons (No space), How can I make my buttons side by side, without any space
Seniorbfc
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 17 2017, 10:29 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Seniorbfc
post 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)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 17 2017, 12:28 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 07:24 AM