Align menu tabs side by side in Imbalance

thepatternedplate · Member · Dec 8, 2011 at 7:28 am
Copy link

Add topic to favorites
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: (visible only to logged in users)
thesacredpath · Staff · Dec 8, 2011 at 8:26 am
Copy link
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;
}
```
thesacredpath · Staff · Dec 8, 2011 at 8:27 am
Copy link
On the search, do you want to lift the menu up or bring the search down?
thepatternedplate · Member · Dec 8, 2011 at 8:38 am
Copy link
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.
thesacredpath · Staff · Dec 8, 2011 at 8:48 am
Copy link
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;
}
```
thepatternedplate · Member · Dec 8, 2011 at 8:53 am
Copy link
PERFECT!!!!!

Now any more magic for the footer??
thesacredpath · Staff · Dec 8, 2011 at 9:17 am
Copy link
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%;
}
```
thesacredpath · Staff · Dec 8, 2011 at 10:03 am
Copy link
You know, what about floating the two sidebars to the left and right and then putting an image of some sort in between them?
thepatternedplate · Member · Dec 8, 2011 at 10:42 am
Copy link
Oooh I like the sound of that idea! I tried the code you gave me and yeah that doesn’t look right….
thesacredpath · Staff · Dec 8, 2011 at 11:00 am
Copy link
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%.
thepatternedplate · Member · Dec 8, 2011 at 11:10 am
Copy link
Ok, that looks grand! Only thing is, how do I get an image in there??
thepatternedplate · Member · Dec 8, 2011 at 11:11 am
Copy link
Oh doh! that probably the image widget!!! I didn’t notice that until now, when i needed it!
thepatternedplate · Member · Dec 8, 2011 at 11:16 am
Copy link
Right, how do I get it to get into the middle space??
thesacredpath · Staff · Dec 8, 2011 at 5:57 pm
Copy link
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;
thepatternedplate · Member · Dec 8, 2011 at 6:07 pm
Copy link
Worked! Done! Thankyou very very much thesacredpath! I am much obliged to you! Much thanks :-D
thesacredpath · Staff · Dec 8, 2011 at 6:11 pm
Copy link
You are welcome, and your site looks great. I get hungry every time I look at it.
designsimply · Member · Dec 8, 2011 at 6:17 pm
Copy link
Me too. It looks great! And I love the header image.
thepatternedplate · Member · Dec 8, 2011 at 6:21 pm
Copy link
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 :-)
thepatternedplate · Member · Dec 8, 2011 at 6:22 pm
Copy link
You do realise that now I know of the magic you create, I will be bombarding the forum with questions, yes?? X-D
designsimply · Member · Dec 8, 2011 at 6:33 pm
Copy link
That comment made me think: CSS is magic.
I like that. :)

No items found.