Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Unordered List Border Problems

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #29661

    Ok I am trying to do what I thought would be a simple rollover where the bottom-border for my li elements would turn black when hovered over but I cannot manage to get this to happen. I was able to change the background color but not the border color. Also is there a way to change the length of the bottom border to be the same width as the text inside the li element? I tried changing the size of that as well and no success but when I click on a link they all scale down and scoot together. It’s so weird. Anyway here is my code. I hope it’s not too bad. I attached some example pics of before and after clicked for the size change reference. I’m not really going for looks here just getting the functional side down first. Thanks a ton for any advice.

    [attachment=0]before clicked.gif[/attachment][attachment=1]after clicked.gif[/attachment]

    First the HTML

    Code:



    None

    Now the attached stylesheet

    Code:
    html, body{
    margin:0px;
    padding:0px;
    }
    .container {
    padding: 0px;
    margin: 0px auto 0px auto;
    height: auto;
    width: 800px;
    position: relative;
    }
    .header {
    margin:10px auto;
    height: 150px;
    width: 780px;
    background-color: #00FFFF;
    display: block;
    }
    .navbar {
    margin: 10px;
    width: 780px;
    background-color: #999999;
    height: 50px;
    position: relative;
    }
    .mainContent{
    width: 780px;
    height: 370px;
    margin: 10px 10px;
    background-color: #808080;
    }
    .navbar ul {
    list-style: none;
    position: absolute;
    margin: 0px 0px;
    padding: 0px;
    top: 14px;
    list-style-type: none;
    }
    .navbar ul li a:link {
    margin: 0px 10px;
    padding: 0px;
    color: #FFFFCC;
    font-weight: bold;
    text-decoration:none;
    }
    .navbar ul li a:hover{
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    text-decoration:none;
    }
    .navbar li{
    display: inline;
    border-bottom: 2px solid red;
    max-width: 125px;
    padding-left: 5px;
    padding-right: 5px;
    }

    #80009
    jamygolden
    Member

    Change your css to this and see if it helps:

    Code:
    *{
    margin:0;
    padding:0;
    }
    .container {
    margin: 0 auto;
    width: 800px;
    position: relative;
    }
    .header {
    margin:10px auto;
    height: 150px;
    width: 780px;
    background-color: #00FFFF;
    display: block;
    }
    .navbar {
    margin: 10px;
    width: 780px;
    background-color: #999999;
    height: 50px;
    position: relative;
    }
    .mainContent{
    width: 780px;
    height: 370px;
    margin: 10px;
    background-color: #808080;
    }
    .navbar ul {
    list-style: none;
    position: absolute;
    top: 14px;
    list-style-type: none;
    }
    .navbar ul li a {
    border-bottom: 2px solid red;
    margin: 0 10px;
    color: #FFFFCC;
    font-weight: bold;
    text-decoration:none;
    }
    .navbar ul li a:hover{
    border-bottom: 2px solid black;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    }
    .navbar li{
    display: inline;
    max-width: 125px;
    padding: 0 5px;
    }

    Feel free to ask if you have any other questions.

    #80008

    Thank you that did exactly it. I will go back and make comparisons now and see where I went wrong. I already noticed I had a class in the style sheet that I no longer used in the html and some of my code was repetative. Thank you for the help.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.