Support » Themes and Templates » Horizontal List help

  • Stryke11

    (@stryke11)


    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: http://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)
  • 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

    Mark (podz)

    (@podz)

    Support Maven

    #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 🙂

    Mark (podz)

    (@podz)

    Support Maven

    IE6 here on XP, I see no second line ?

    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

    Mark (podz)

    (@podz)

    Support Maven

    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.

    Anonymous

    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

    Mark (podz)

    (@podz)

    Support Maven

    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 ?
    http://binarybonsai.com/archives/2004/09/06/kubrick-v125-faq/

    Joshua Sigar

    (@alphaoide)

    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; }

    Anonymous

    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

    Stryke11

    (@stryke11)

    Thank you, all is perfect now!
    Michael

    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

    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.