CODEWITHSUNDEEP
htmlcss
deme72
deme72

Reputation: 1153

Html ghost space

Code is here: https://jsfiddle.net/9ddmppdu (note images have been changed to duane)

I am trying to make text show up when hovering but this ghost space keeps showing up above all of the buttons. I have looked through the code and see no indicators of this problem.

.primary {
    background-color: #4AF;
    color: white;
}
.secondary {
    background-color: #0C0 color: black;
}
nav {
    background-color: #AA8;
    border: 1px solid #CC3;
    border-radius: 0;
    height: 100px;
    width: 100% - 18px;
    padding: 9px;
    text-align: center;
}

body {
    width: 100%;
    min-height: 616px;
    margin: 10px 0px 0px -1px;
}

html {
    background-color: #159;
    /* Old browsers */
    background: -webkit-linear-gradient(#CDF, #8BF, #07F);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#CDF, #8BF, #07F);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#CDF, #8BF, #07F);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(#CDF, #6BF, #07F);
    /* Standard syntax */
}

.navblock {
    height: 100px;
    display: inline-block;
    text-align: center;
}

.navimg {
    height: 100px;
    border-radius: 5px;
    margin: 0px 5px;
}

.navlink {
    position: relative;
    top: -100px;
    display: none;
}

.navblock:hover .navlink {
    display: block;
}
<body>
    <nav>
        <div class="navblock">	<a href="index.html">
			<img class = "navimg" src = "http://whereduaneat.org/duane.gif">
		<p>
		<div class = "navlink">
			Home
		</div>
		</a>

        </div>
        <div class="navblock">
            <img class="navimg" src="http://whereduaneat.org/duane.gif">
            <p>
                <div class="navlink">About Us</div>
        </div>
        <div class="navblock">
            <img class="navimg" src="http://whereduaneat.org/duane.gif">
            <p>
                <div class="navlink">About Us</div>
        </div>
        <div class="navblock">
            <img class="navimg" src="http://whereduaneat.org/duane.gif">
            <p>
                <div class="navlink">About Us</div>
        </div>
        <div class="navblock">
            <img class="navimg" src="http://whereduaneat.org/duane.gif">
            <p>
                <div class="navlink">About Us</div>
        </div>
        <div class="navblock">
            <img class="navimg" src="http://whereduaneat.org/duane.gif">
            <p>
                <div class="navlink">About Us</div>
        </div>
        <div class="navblock">
            <img class="navimg" src="http://whereduaneat.org/duane.gif">
            <p>
                <div class="navlink">About Us</div>
        </div>
    </nav>
    <header></header>
    <main></main>
    <footer></footer>
</body>

Upvotes: 1

Views: 1151

Answers (2)

Arbel
Arbel

Reputation: 30999

It's very simple.

All you need is correct positioning.

Demo: http://jsfiddle.net/9ddmppdu/5/

Relevant CSS:

.navblock {
    position: relative;
    height: 100px;
    display: inline-block;
    text-align: center;
}
.navlink {
    position: absolute;
    top: 40px;
    display: none;
    text-align: center;
    width: 100%;
    display: none;
}
.navblock:hover .navlink {
    display: block;
}

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115046

You just need to add vertical-align:top. The default alignment for inline-block elements is baseline so top or middlewill be your best options.

.navblock {
    height: 100px;
    display: inline-block;
    text-align: center;
    vertical-align: top;
}

JSfiddle Demo

I should point out that you have some unclosed p tags in there that you might want to correct...also p cannot contain divs.

Upvotes: 2

Related Questions