Moving the menu below the blog name? Wu Wei…

leoniesavvides · Member · Jan 1, 2011 at 11:40 am
Copy link

Add topic to favorites
Hi!

I’m creating a site based on the lovely Wu Wei and I was wondering if I can move the menu underneath the blog name and description so it sits just above the first post? I’m still teaching myself css so I’m not sure how I would go about it…?

Here’s my site so far:

http://leoniesavvides.wordpress.com

Thanks!

Leonie

The blog I need help with is: (visible only to logged in users)
timethief · Member · Jan 1, 2011 at 7:45 pm
Copy link
40% of those using the web are not viewing blogs on large screen monitors. Many are viewing blogs on hand-held devices, laptops & netbooks with small screens. I’ll flag this thread for you so it gets moved to the CSS Forum.
thesacredpath · Member · Jan 1, 2011 at 8:14 pm
Copy link
This should do it, but your CSS is sort of a mess. I’ve taken the liberty of fixing a couple things (width of .center-column and .menu-main) so that the content is actually IN the center-column area. Your menu was way too wide and was causing a horizontal scroll bar to appear at the bottom of the browser window. You can play with the “top” values as you see fit to get the nave and the blog title/tagline aligned like you want.
```
.center-column {
width: 70.334em;
}

#header {
position: relative;
top: -25px;
}

.menu-main {
position: relative;
top: 100px;
width: 40em;
}
```
leoniesavvides · Member · Jan 2, 2011 at 12:59 am
Copy link
Thankyou!

Yeah, I’ve only been learning css for a few days now, and mostly through trial and error. I think it’s time for me to do some tutorials! I’m going to give some of the ones listed on this site a go… are there any others you’d recommend for me that are relevant to wordpress.com?

L
thesacredpath · Member · Jan 2, 2011 at 1:07 am
Copy link
The W3C schools sites are good to keep bookmarked, and especially the reference section, http://wap.w3schools.com/css/css_reference.asp . It will give you all the details on all the different CSS stuff.

Also, if you are not using it, download Firefox and get the Firebug add-on and get to know it. It can make your CSS editing far more easy and painless since you can quickly identify selectors and also do CSS changes in real time.
thesacredpath · Member · Jan 2, 2011 at 1:07 am
Copy link
And of course, you are welcome.
leoniesavvides · Member · Jan 2, 2011 at 2:54 am
Copy link
Thanks again, that’s exactly what I needed! I’m starting to understand the language… Although I’m still not completely up on what can be changed with css and what is permanently in the html…

For example is it possible to move the text in my post-content area over so it aligns to the left of the center column, under the post info, without taking the post image/video with it? Rather like this site:

http://www.tavo.es/v2/index.html

I’d also like to move the whole page over to the left like that site as well… Is that an html thing or can I achieve it in css?

Thanks again for you help!

Leonie
thesacredpath · Member · Jan 2, 2011 at 3:07 am
Copy link
Most of that can probably be done with CSS, but it will likely require a class to be added to each image code in the post so that it is positioned to the right of the text.

If you don’t have one already, make a new blog on your existing account, a test blog, and then you can try things out on that blog using the preview function and not have to worry about mucking up your live site.
leoniesavvides · Member · Jan 5, 2011 at 1:54 am
Copy link
Wow, I can’t seem to figure it out.

I thought I could do it by shifting the post-content over to align with the post header and somehow limit the width of the post text in css whilst adding an alignment class to the image html. Does that make sense to you? If I’m on the right path I can keep trying but I’m not sure I’m going in the right direction!

Thanks so much for your help…

Leonie
thesacredpath · Member · Jan 5, 2011 at 6:08 am
Copy link
I just spent some time playing with this and it looks like it isn’t going to be easy in Wu Wei – or it is beyond me. At the very least it is incredibly messy and for videos, it would require that text to the right of a video and the video were placed in a two column, one row HTML table.

Perhaps hallluke will drop by and have a solution.
leoniesavvides · Member · Jan 5, 2011 at 10:37 am
Copy link
I’ll keep my fingers crossed!!

Thanks again :)
hallluke · Member · Jan 6, 2011 at 1:33 am
Copy link
Try this and see how far it gets you:
```
body .post-content {clear:left; width:78.334em;}
.post-content img, .post-content object {float:right;}
```
It probably won’t be perfect but it might be good enough for what you need. If you’re customising the theme so much you’re probably better off starting with a different theme entirely. Either one that is closer to how you want it to look or one that is easier to modify from the bottom up (toolbox or sandbox). Let me know how this code works out for you.
leoniesavvides · Member · Jan 9, 2011 at 1:32 am
Copy link
Thanks Hallluke.

I was thinking I should probably use Sandbox/Toolbox but I’m such a newb to css I’m not sure I would know how to set the whole thing up…Is it much harder to do it from the bottom up or am I making it harder for myself working off a pre-styled theme like Wu Wei??

That code is great. Thankyou! I’m still playing with it to see if I can shape it more..
For some strange reason when my post h1 are too long they just disappear into white… Can you help me solve this?

Also is it possible to align the post h1 with the top of the image? I’ve tried and I can see it might not be easy…

Thanks again!

L
hallluke · Member · Jan 9, 2011 at 3:54 am
Copy link
Lining up the post content with the header in this way is the tricky bit. I couldn’t find a reliable way to do it that would work no matter how many lines the header took up. A good work around is to have the header stretch the whole width of the content area:

.post-info {width:100%;}

In regards to using sandbox or toolbox: create a test blog, set it to private and then copy or import/export some of your existing blog content, download firefox and the firebug add-on, try out some CSS ideas.
leoniesavvides · Member · Jan 12, 2011 at 1:19 am
Copy link
Yeah I looove firebug now!

The headers are all visible now, which is great :) Still haven’t figured out a way to make the images align with the headers, but I spose I cant have everything!

I’ll try sandbox/toolbox out soon…

Thanks!

No items found.