CODEWITHSUNDEEP
htmlcss
jan777
jan777

Reputation: 39

Padding or margin issue?

I really like how http://designmodo.com/ has simulated 3D borders on their navigation, so I'm trying to recreate that in my site. However, on my site, border-right and border-left in the nav are not touching each other, but instead separated by a small space. How can I fix this?

Thank you for your time.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/1140.css">

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>

</head>
<body>
    <div class="head">
        <!-- Logo goes here -->
        <div class="container12">
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Departments</a></li>
                <li><a href="#">Library</a></li>
                <li><a href="#">More</a></li>
            </ul>
        </nav>
        </div>
    </div>
    <div class="headFix"></div>
    <div class="info">

    </div>
    <footer>
        <div class="container12">

        </div>
    </footer>
</body>
</html>

CSS:

.head { /* preffered color is blackish:#2E3234 or  blue:#245789*/
    display: block;
    clear: none;
    background-color: #446CB3;
    height: 75px;
    width: 100%;
    position: fixed;
    z-index: 2;
    margin: 0;
    padding: 0;
}

nav {
    float: right;
    font-size: 16px;
    display: block;
    padding: 0;
    margin: 0;
}
nav a:link, nav a:visited {
    border-left: 1px solid #587BBA;
    border-right: 1px solid #3D61A1;
    text-decoration: none;
    color: #E4EBF0;
    display: inline-block;
    height: 23px;
    padding: 26px 15px;
    text-align: center;
    letter-spacing: 1px;
    -o-transition: .2s ease-in-out; 
    -moz-transition:.2s ease-in-out;
    -webkit-transition:.2s ease-in-out;
    transition: .2s ease-in-out; 
}
nav a:hover, nav a:active {
    background-color: #fff;
    color: #446CB3;
}
nav li {
    display: inline;
}
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

Example Fiddle

Upvotes: 2

Views: 109

Answers (2)

Kelderic
Kelderic

Reputation: 6687

What's Going On

When you use display:inline-block, you tell an element to behave like a block element in terms of it's design, and like an inline element in terms of placement. The spacing between the elements falls under the placement, or the inline part of this.

There is an odd quirk with CSS and inline-block elements, where upon if you have linebreaks between elements in the HTML code file, you will see a space between them in the results. You have a couple ways to address this.

Method 1 - Remove the linebreaks in HTML File

Leave your CSS as it is, and change the HTML file. Makes for ugly HTML though.

Original HTML:

<li><a href="#">Home</a></li>
<li><a href="#">Departments</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">More</a></li>

New HTML:

<li><a href="#">Home</a></li><li><a href="#">Departments</a></li><li><a href="#">Library</a></li><li><a href="#">More</a></li>

Example Fiddle

Result

enter image description here

Method 2 - Use Float Instead of Inline-Block

You can keep your HTML structure as it is, and use float:left to make things line up horizontally.

Original CSS:

nav li {
    display:inline-block;
}

New CSS:

nav li {
    float:left;
}

Example Fiddle

Result

enter image description here

Borders On Outside

If you've noticed, both methods don't have a double border on the outside. We can add this by giving the containing ul borders that are opposite colors as the lis have. However, if we use Method 2, we'll have to set that ul to display:inline-block to bring the borders down.

Use this WITH (IN ADDITION TO) Method 2 or 1.

Original CSS:

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

New CSS:

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-left: 1px solid #3D61A1;
    border-right: 1px solid #587BBA;
    display:inline-block;
}

Example Fiddle

Result

enter image description here

Upvotes: 2

Nick
Nick

Reputation: 1570

CSS:

nav li {
  float: left;
}

JSFIDDLE

Upvotes: 1

Related Questions