Horiztonal Navigations

PicoDeath · #1 Jul 28th, 2007, 21:29


ul.icons {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

ul.icons li {
    width: 86px;
    height: 86px;
    margin-left: 4px;
    background-image: url(images/itembg.png); 
}

ul.icons :hover
{
    margin-top: 8px;
}

I'm missing something i think, it seems to display vertically instead of horizontally. What did i miss out? Thanks.

Lchad · #2 Jul 28th, 2007, 21:38

add

display: inline;

Code: Select all

ul.icons li {
    width: 86px;
    height: 86px;
    margin-left: 4px;
    background-image: url(images/itembg.png); 
}

PicoDeath · #3 Jul 28th, 2007, 21:42

Ah, it's now destroyed my idea.

http://www.leoncalder.com/port/
http://www.leoncalder.com/port/style.css

Should look like this;

Now what's gone terribly wrong?

Lchad · #4 Jul 29th, 2007, 00:30

That pictures so small I can't see what it's supposed to look like.

However, there is only a small snippet of code in your html so I doubt it's going to look like that????!!!!

'

This works...
html

Code: Select all

<div id="container">
    <ul class="icons">
        <li><a href="#" title="">HOME</a></li>
        <li><a href="#" title="">PORTOLIO</a></li>
        <li><a href="#" title="">TESTIMONIALS</a></li>
        <li><a href="#" title="">ABOUT ME</a></li>
        <li><a href="#" title="">CONTACT</a></li>
    </ul>
</div>

css which is yours

Code: Select all

body {

    font-family: Arial, Geneva, Verdana, helvetica, sans-serif;

    font-size: 10px;

    margin: 0px 0px 0px 0px;

    color: #000000;

    background-color: #302d2d;

}



a:link {

    text-decoration: none;

    color: #ffffff;

}



a:visited {

    text-decoration: none;

    color: #ffffff;

}



a:active {

    text-decoration: none;

    color: #ffffff;

}



a:hover {

    text-decoration: none;

    color: #ffffff;

}



#container{

    width: 700px;

    margin: auto;

    margin-top: 20px;

}



ul.icons {

    margin: 0px;

    padding: 0px;

    list-style-type: none;

}



ul.icons li {

    width: 68px;

    height: 68px;

    padding: 9px;

    margin-left: 4px;

    background-image: url(images/itembg.png); 

    display: inline;

}



ul.icons :hover

{

    width: 68px;

    height: 68px;

}

PicoDeath · #5 Jul 29th, 2007, 00:41

It all messed up adding the inline.

I've reverted it back slightly, it works here just not when i add display: inline;

Lchad · #6 Jul 29th, 2007, 13:06

Here you go!!
This works in FF2 and IE7. Didn't test in IE6

Html is the same.
Change CSS to this

Code: Select all

body {

    font-family: Arial, Geneva, Verdana, helvetica, sans-serif;

    font-size: 10px;

    margin: 0px 0px 0px 0px;

    color: #000000;

    background-color: #302d2d;

}



a:link {

    text-decoration: none;

    color: #ffffff;

}



a:visited {

    text-decoration: none;

    color: #ffffff;

}



a:active {

    text-decoration: none;

    color: #ffffff;

}



a:hover {

    text-decoration: none;

    color: #ffffff;

}



#container{

    width: 700px;

    margin: auto;

    margin-top: 20px;

}



ul.icons {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}



ul.icons li {
    background: url(images/itembg.png);
    width: 68px;
    height: 68px;
    padding: 9px;
    margin-left: 4px;
    display: inline;
    float: left;
}



ul.icons :hover

{
    width: 68px;
    height: 68px;
    
}

PS .png files are not supported in IE6 so you will need a hack or if you could change it to a .gif you'll be all set!

PicoDeath · #7 Jul 29th, 2007, 14:07

Ahhhhh, this forum support has gotten a lot better

Thanks so much!

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Horiztonal Navigations