Horizontal List help

  • Hello! I am new to WordPress and am trying to teach myself CSS as I go by viewing the source of blogs I like and, um, stealing the good stuff ?? I am using Firefox and do not know how it looks in IE. I am also using Kubrick.
    Anyway, I have two formatting questions for my blog, located at: https://host256.ipowerweb.com/~cruzcont/blog/index.php
    One, the black line that runs through my horizontal list, just underneath the header graphic, as you can see, goes out too far. I played around with the CSS as far as colors go, but I don’t know how to “shrink” the width of the line. The CSS is as follows:
    #navcontainer
    {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    border-top: 1px solid #000000;
    z-index: 1;
    }
    #navcontainer ul
    {
    list-style-type: none;
    text-align: center;
    margin-top: -8px;
    padding: 0;
    position: relative;
    z-index: 2;
    }
    #navcontainer li
    {
    display: inline;
    text-align: center;
    margin: 0 5px;
    }
    #navcontainer li a
    {
    padding: 1px 7px;
    color: #000000;
    background-color: #999966;
    border: 1px solid #000000;
    text-decoration: none;
    }
    #navcontainer li a:hover
    {
    color: #000;
    background-color: #CCCC99;
    border: 1px solid #000000;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
    }
    #navcontainer li a#current
    {
    color: #000;
    border: 1px solid #000000;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
    }
    And second, is there a way I can move down the right menu a centimeter or two? I would like there to be a small vertical space between the bottom of my header graphic and the menu, which is a darker color than the rest of my page.
    I appreciate any help that can be spared. Thanks!
    Michael Cruz

Viewing 12 replies - 1 through 12 (of 12 total)
  • Thread Starter stryke11

    (@stryke11)

    I just looked at in in IE, and that’s even worse. Appearantly, the horizontal black line though my list repeats itself for no appearant reason a bit lower on the page, right through the sample post! That is obviously something that detracts from the overall beauty of the page :). Any help removing this issue would be greatly appreciated, as well.
    Michael

    #navcontainer
    {
    margin-left: 20px; <——–change that value and the one below.
    margin-right: 20px;
    margin-bottom: 40px;
    border-top: 1px solid #999;
    z-index: 1;
    }
    I’ve answered this one before ??

    IE6 here on XP, I see no second line ?

    Thread Starter stryke11

    (@stryke11)

    Thanks Podz! As far as the second line goes, I still see it on IE 6 with XP, it is right above the text “Posted in General | 1 comment” and continues through the page where it is also right above the “Categories” header. It is identical in length, color, and thickness to the line through the list above. If I scroll over the General link or the 1 comment link, it will dissappear, but only the leftmost 2/3rds of it. And it will reappear if I scroll over any of my list buttons.
    I’m also still trying to find out if you can move the menu panel (with Categories, Links, etc..) down a bit from the header.
    Thanks again,
    Michael

    I just say the line when I opened IE, but a refresh makes it go away… I’d say it was the peekaboo bug, but Kubrick doesn’t have this at all.
    After that initial glimpse, I can’t make it come back.
    For the menu, one fix might be to just put some
    tags just inside the sidebar div ? Not an elegant solution, but it should work.

    Sorry, me again (Stryke11), I am at work and don’t have my password ??
    Thanks again Podz, and before I completely try your patience I just have two more questions.
    1. The list is a bit off center…it is closer to the right. Any way to fix that?
    2. The footer isn’t alligned correctly with the body. Is there is code way I can scooch it over, or do I need to photoshop a new one?
    Thanks!!!!
    Michael

    The list.. I just measured, and if anything there is only a pixel in it with FF, but around 34px in IE.
    The footer problem has been noted here before, but I don’t recall the fix … have you had a look at the FAQ ?
    https://binarybonsai.com/archives/2004/09/06/kubrick-v125-faq/

    For list
    1. Go to your wp-layout.css
    2. Make the following addition
    #navcontainer ul {
    ....
    margin-left: 0;
    ....
    }

    For footer
    1. Go to your index.php
    2. Replace #header in style section with this one
    #header { margin: 0; padding: 1px; height: 198px; width: 758px; }

    Thank you both!! Now I wish I could leave work to go home and make those changes! ??
    Alright, it’s coming together. One thing that isn’t fatal or anything but bugs me a little is the amount of vertical open space between the random quote javascript thingy I have (right under the header image, on the left) and the beginning of the first post (Hello World!) and the search box. I have looked at the code and there are no <br>’s anywhere or anything like that. I know Kubric pages that don’t have my horizontal list and my random quote javascript don’t have this problem, so I know it is somehwhere in that code. If that is just the price I pay to have these two neat additions, I don’t mind, but if someone does have an idea as to how I could tighten it vertically I’d appreciate it. Go to cruzcontroller.com/blog/ to check it out. It’s too much code to paste here, but if you view source the problem area (I suspect) is between the <body> tag and the <div id=”content” class=”narrowcolumn”> tag.
    Thanks again!
    Michael

    Thread Starter stryke11

    (@stryke11)

    Thank you, all is perfect now!
    Michael

    Thread Starter stryke11

    (@stryke11)

    Aw man! Just when you think everything is ok, my comments page is a mess. I never checked it before now. I edited the comments files according to advice I saw on this forum, but then after noticing the chaos I re-uploaded the originals, and still it’s a mess. Any ideas? I guss the thread should be renamed: Stryke11 needs all kinds of help :P.
    Michael

    Thread Starter stryke11

    (@stryke11)

    Thanks alpha, you gave me enough info to figure it out myself, which was probably better for me in the long run! ??
    The actual graphic kubrickwide.jpg was the problem. For some reason, it had the black line in it. I changed that, and all was well. I need the if statement because the comment page looks just as bad with the right side menu graphic, which the kubrickbg.jpg file had. Thanks again alpha!
    Michael

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Horizontal List help’ is closed to new replies.