Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Align menu tabs side by side in Imbalance

  1. thepatternedplate
    Member

    Hi,

    I have just bought the Custom Upgrade for my Imbalance 2 themed blog (http://thepatternedpress.wordpress.com) and have been tinkering with it for a day or two and slowly getting there with much help from this forum. I have never touched HTML or CSS so I have a few questions!! Please bear with me!

    One thing I can't quite figure out is how to align my menu so that the page titles are side by side, in one horizontal line, as opposed to being stacked, one above the other, like it is right now.

    Two, once that's done, I would like to align the search widget to the menu bar

    Three (and the last one...for now!). At the footer, I would like to realign the credit so that all three footer areas are more or less equally aligned horizontally. Right now, there is a big ol' empty space on the left with one line of the credit, and the other two footer area widgets are bunched to the right. If I could space all three footer areas evenly, it would tighten the look.

    I would be grateful for any help. You guys do a stellar job here!

    Thanks

    The blog I need help with is thepatternedplate.wordpress.com.

  2. thesacredpath
    Staff

    http://thepatternedpress.wordpress.com/ does not exist. Did you mean http://thepatternedplate.wordpress.com/ ?

    Give this a try. I'm not sure what will happen if you add additional submenu items or if you add sub-submenu items.

    .menu ul li {
float: left;
padding-right: 20px;
}

#header-left {
width: 700px !important;
}

.menu ul ul {
left: 0;
position: absolute;
top: 0;
width: auto;
}

  3. thesacredpath
    Staff

    On the search, do you want to lift the menu up or bring the search down?

  4. thepatternedplate
    Member

    DOH! You'd think by now I'd get my own url right!!!

    Oh! You are a star!!! That worked a treat :-) Thanks so much.

    I would like to bring the menu up a wee bit so as to be in line with the search widget.

  5. thesacredpath
    Staff

    This will do it. (The 2px puts the text about centered vertically in the height of the search box, but you can play with that.)

    .menu ul {
margin-top: 2px;
}

  6. thepatternedplate
    Member

    PERFECT!!!!!

    Now any more magic for the footer??

  7. thesacredpath
    Staff

    What you are seeing is actually the way the theme footer area is designed. Take a look at the demo: http://imbalance2demo.wordpress.com/ .

    This moves the footer down right above the stats smiley, but I'm unsure of what to do with the two sidebar widget areas. In general, there is nothing that you are going to put into them that is going to take up half the width of the area. You can float the one left, but then you have a big white gap in between them.

    #footer {
position: relative;
}

#site-info {
bottom: 10px;
float: none;
position: absolute;
text-align: center;
width: 100%;
}

  8. thesacredpath
    Staff

    You know, what about floating the two sidebars to the left and right and then putting an image of some sort in between them?

  9. thepatternedplate
    Member

    Oooh I like the sound of that idea! I tried the code you gave me and yeah that doesn't look right....

  10. thesacredpath
    Staff

    With the above code, you can then float the left sidebar/footer bar to the left with this.

    #footer-left {
float: left;
}

    You would have around 500px of width between the sidebars.

    Also on the width for #site-info, make it 960px instead of 100%.

  11. thepatternedplate
    Member

    Ok, that looks grand! Only thing is, how do I get an image in there??

  12. thepatternedplate
    Member

    Oh doh! that probably the image widget!!! I didn't notice that until now, when i needed it!

  13. thepatternedplate
    Member

    Right, how do I get it to get into the middle space??

  14. thesacredpath
    Staff

    Instead of an image widget, let's just add it as a "background" to #footer. Add this line to #footer in your custom CSS.

    background: url("http://thepatternedplate.files.wordpress.com/2011/11/welscake-fi-e1323342739605.jpg") no-repeat scroll center 36px transparent;

  15. thepatternedplate
    Member

    Worked! Done! Thankyou very very much thesacredpath! I am much obliged to you! Much thanks :-D

  16. thesacredpath
    Staff

    You are welcome, and your site looks great. I get hungry every time I look at it.

  17. designsimply
    Staff

    Me too. It looks great! And I love the heading image.

  18. thepatternedplate
    Member

    Aww! Now thats a bonus, thankyou very much! If it weren't for all the support documentation and the forum here, it would be a very different story...so cheers to both of you and the rest of the team :-)

  19. thepatternedplate
    Member

    You do realise that now I know of the magic you create, I will be bombarding the forum with questions, yes?? X-D

  20. designsimply
    Staff

    That comment made me think: CSS is magic.
    I like that. :)

  21. thepatternedplate
    Member

    Heck yeah! I was so frustrated with the limitations of staying within the constraints of a free theme ( I had 2011 before Imbalance2 came out) and it was good for getting started and getting to grips. But I was always on the lookout for *exactly* this and now that I can customise it....it is magic! Love it!

  22. designsimply
    Staff

    That's so good to hear!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags