Help - Search - Members - Calendar
Full Version: Touching buttons (No space)
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Seniorbfc
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
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
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;
}
pandy
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>
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.