1

Hoping this will be a quick/easy one, but I can't seem to find the correct search terms on-line.

Goal

I would like to create a list of icons / images, marked up with CSS into a horizontal menu. However, while I achieve this effect, any other elements on the page do not seem to accept it as a block element.

I know I'm doing something wrong (and likely a trivial something).

(applicable) HTML

<ul id="alist">
<li id="t"><a href="#t"></a></li>
<li id="q"><a href="#q"></a></li>
<li id="i"><a href="#i"></a></li>
<li id="l"><a href="#l"></a></li>
<li id="m"><a href="#m"></a></li>
<li id="p"><a href="#p"></a></li>
</ul>

<h1>T</h1>
Lorem ipsum
<h1>?</h1>
Lorem ipsum
<h1>I</h1>
Lorem ipsum
<h1>L</h1>
Lorem ipsum
<h1>M</h1>
Lorem ipsum
<h1>P</h1>
Lorem ipsum

CSS

ul#alist
{
    display:inline;
    display:block;
    list-style:none;
}

ul#alist li
{
    text-align:center;  
    float:left;
    width:53px;
    height:53px;
    margin:0px 5px 0px 5px;
}

ul#alist li a
{ 
    width:53px;
    height:53px;
    padding:0px;
    display:block;
}

#t
{
    background-image:url(images/T.png);
}

#q
{
    background-image:url(images/Q.png);
}

#i
{
    background-image:url(images/I.png);
}

#l
{
    background-image:url(images/L.png);
}

#m
{
    background-image:url(images/M.png);
}

#p
{
    background-image:url(images/P.png);
}

Current Result (Chrome)

enter image description here

2 Answers 2

2

Since you are floating the list items, you'll want to clear the next item in the HTML where you want floating to cease and desist:

h1 { clear:both; }
1
  • 1
    Makes perfect sense; great concise explanation/solution. Fixed the problem. Thanks! Dec 29, 2011 at 23:47
0

try to add something like this

#t{
background-image:url(images/t.png);
background-size:100px 100px; /*YOUR IMAGE WIDTH AND HEIGHT*/
padding-left:120px; /*YOUR IMAGE WIDTH PLUS 20px*/
background-repeat:no-repeat;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.