Home/ Questions/Q 6676401
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T03:59:01+00:00

i created a style called topbar using css. The code are as follows: .topbar:hover

  • 0

i created a style called “topbar” using css.

The code are as follows:

.topbar:hover ul{ display: inline;}

.topbar {
    float: left;
    margin-left: 20px; 
    margin-right: 20px;
    font-family:"Georgia";
}
.topbar ul {
    display: none;
    top:30px;
    position: absolute; border-style:solid;
border-width:1px; background-color:white;}     
}


.clear {
    clear: both;
}

then i went to create a ul “grid” and allows mouse hover enlarge of images

    ul.grid, ul.grid > li {
    margin: 0;
    padding: 0;
}
ul.grid {

}
ul.grid > li {

    float: left;
    list-style-type: none;
    text-align: center;
    font-family:"Georgia", serif;
    padding-top:50px;
    padding-bottom:25px;
    padding-right:25px;
    padding-left:0px;

}
ul img:hover {     width: 200px;     height: 250px; }

my html code:

    <body>
<div class="topbar">
    <p>Title</p>

    <ul>
        <li><a href="C:\Users\chan0554\Desktop\AZ.html">A-Z</a></li>
        <li><a href="C:\Users\chan0554\Desktop\ZA.html">Z-A</a></li>
    </ul>
</div>

<div class="topbar">
    <p>Genre</p>

    <ul>
        <li><a href="C:\Users\chan0554\Desktop\action.html">Action</a></li>
        <li><a href="C:\Users\chan0554\Desktop\comedy.html">Comedy</a></li>
        <li><a href="C:\Users\chan0554\Desktop\animation.html">Animation</a></li>
        <li><a href="C:\Users\chan0554\Desktop\horror.html">Horror</a></li>
        <li><a href="C:\Users\chan0554\Desktop\drama.html">Drama</a></li>
    </ul>
</div>
    <div class="clear"></div>

<br />
<div id="videos">
<ul class="grid">
    <li>
        <p class="image"><a href="C:\Users\chan0554\Desktop\thor.html"><img src="http://3.bp.blogspot.com/-AGAaic1-yrM/TcWmj77lHzI/AAAAAAAAAkQ/K6zzSk1WgUY/s1600/thor-movie-poster-1.jpg" alt="Thor" width="175" height="200" /></a></p>
        <p class="name"><a href="C:\Users\chan0554\Desktop\thor.html">Thor</a></p>
        <p class="genre"><a href="C:\Users\chan0554\Desktop\thor.html">Action</a></p>
        <p class="format"><a href="C:\Users\chan0554\Desktop\thor.html">DVD</a></p>
        <p class="year"><a href="C:\Users\chan0554\Desktop\thor.html">2011</a></p>
    </li>
    <li>
        <p class="image"><a href="C:\Users\chan0554\Desktop\hangover.html"><img src="http://www.galacool.com/wp-content/uploads/2010/02/hangover2.jpg" alt="Hangover" width="175" height="200" /></a></p>
        <p class="name"><a href="C:\Users\chan0554\Desktop\hangover.html">Hangover</a></p>
        <p class="genre"><a href="C:\Users\chan0554\Desktop\hangover.html">Comedy</a></p>
        <p class="format"><a href="C:\Users\chan0554\Desktop\hangover.html">DVD</a></p>
        <p class="year"><a href="C:\Users\chan0554\Desktop\hangover.html">2009</a></p>
    </li>
</ul>
</div>
</body>

Why do i have a left unwanted space beside my “thor” movie image?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The left space must be the indentation of the List where you are putting them. Ideally, to remove this left-indentation, you should set both padding and margins to “0” for the “UL”.

    This small piece of code works perfectly in this context:

    CSS 

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


HTML

<div id="navcontainer">
<ul>
<li><a href="#">Milk</a>
   <ul>
   <li><a href="#">Goat</a></li>
   <li><a href="#">Cow</a></li>
   </ul>
</li>
<li><a href="#">Eggs</a>
   <ul>
   <li><a href="#">Free-range</a></li>
   <li><a href="#">Other</a></li>
   </ul>
</li>
</ul>
</div>
    • 0