body and menu positioning with CSS
-
is it possible to position the body in a blog lower and to a certain side using CSS?
the blog in question is http://plus1strong.wordpress.com
what I am trying to do is position the transparent part with the text to be a lower and more towards the left because I have a bg image I want to use as both a bg and header. I’m also looking to move the top menu to the left side as well, if that’s possible through css? any help would be greatly appreciated.
The blog I need help with is: (visible only to logged in users)
-
Incorporating a header image into a background is troublesome as the content area will shift up and down in relationship to the background image set in “body,” depending on whether you are logged in or logged out, by the height of the top grey admin bar.
I would suggest separating the background image from the header image and putting them in separate elements.
-
thanks thesacredpath, you’ve been extremely helpful.
I went a head and changed the theme of the blog to something a little more to what I thought I needed. it’s worked out good so far, but still some minor things I gotta try to fix. maybe you can help? I’m trying to make the dark gray part to be transparent but I couldn’t, I think I might be able to figure that out but I just gotta find the thread where you showed someone else how to change the opacity on a background like that. I also I want to see if a custom navigation menu can be added through CSS since the theme doesn’t support it, but I can see how that would not be possible. Also looking to break the side menu away from the header, since they’re combined, so it can have it’s own background and the text can be more visible. So many things that need to be fixed. Any suggestions/help would be appreciated.
-
Are you talking about a background with opacity for the content and sidebar area together?
On the navigation, the custom menu widget can be moved up into the header area and styled to look like a normal top navigation menu. It won’t support dropdown menus though and you can’t do submenus once it is moved up there, everything will have to be top level.
-
yes, I am talking about a background with opacity for the content and sidebar area.
would the custom menu have to be moved through CSS or could it be done by widgets options? I only saw an option for the sidebar
-
Here is my suggestion since this will work in all browsers, and also will get around the problems with the CSS Tidy program that wordpress uses to check syntax and for disallowed code in custom CSS. Create a 10px x 10px PNG image with transparency and with a color and opacity of your choosing set in it. Then upload that image and use it as a background image like this. And get rid of the “opacity” declaration in #content.
#page background: url("URL OF IMAGE") repeat scroll 0 0 transparent; margin-top: 200px; padding-right: 20px; } #content { background-color: transparent; } #header { display: none; } #sidebar { width: 170px; }If you go with a black background image with opacity/transparency, you are going to have to change the color of all the text so that it works with the background. If you go with something like a white with 60 or 70%, then you would not have to change the color of all the text. Your choice of course based on what you want to see.
The custom menu widget would be moved, styled and hammered into the proper shape in the CSS. Take a look at the above. One problem though is that #page is the top most parent element which means the custom menu widget would need to be relocated within that element so that it will shift up and down with the rest of the content depending on whether you are logged in (admin bar at top) or logged out (no admin bar). Of course, the relocated custom menu widget and content will shift up and down relative to the background image as well (logged in vs. logged out).
Create the image and try the above and then view the site both logged in and logged out to see the differences in how it looks.
There is another way to do this background thing whe
-
thanks again thesacredpath! I the look I pretty much want. I’m a bit confused by how you mean the custom menu widget could be hammered into place through the CSS, I would like to hear a little more about how this could be possible. I will also continue to look through the forum to see if there is any other thread explaining something similar. You’ve been a big help.
-
Your site takes absolutely forever to load on my slower wireless internet connection, and the main reason is your 2.2MB background image. I’ve copied that image out, optimized it and turned it into a JPG and got it down to 344k in file size, which is much better but still over twice the size it should be. It will help immensely though if you use it instead in “body”. You can download it here.
-
You know, with the header text and such being in the body selector as it is, I don’t think this can be done cleanly because of the shift that happens between logged in and logged out.
This was what I was thinking of. You can see the menu widget is no longer in the sidebar. I have moved it up and restyled it at the top above the header text.
As I said though, I’m not sure I can do this cleanly so that it stays set in relation to the background image.
-
thanks for the background tip. my bad, I uploaded the gif file instead of the jpg file. I like your idea of the menu widget being moved up. I would like to try incorporate that if it’s possible. Will it be possible to add other tabs though if that is incorporated in to the site? Appreciate the help.
Also, is there a way to make the background a little more mobile device friendly? I’ve noticed that when viewing the site through a mobile device, the sides tend to be cut off.
-
thank you thesacredpath, I have no big rush at the time, you’ve been a big help and I can wait. My main goal was to get a layout read so workouts can be posted for our gym memebers to view. Again, thank you for you help and I look forward to seeing what you come up with.
-
With this theme, I can’t see a way to do this cleanly and have the menu move in relationship to the content, either vertically or horizontally. Neat is a really old theme and simply doesn’t have the richness in elements and CSS selectors that will allow this to be done, at least not with your background design.
I’m afraid that your menu is probably stuck at the top of your sidebar. You can certainly style it differently so that it stands out more. Perhaps make the font for the pages larger. If you want to do something like that, let me know.
-
That’s fine, thanks again. I’m open to styling it better, I’ll look in to that. Just for future reference, any suggestion on what kind of theme would be good for what I’m trying to go for?
-
You are welcome.
No suggestion right off hand, but one of the newer ones. You can sort by latest releases at http://theme.wordpress.com/themes/ . I would suggest finding one that already has top navigation and then working with it. Find something that has the features you want and hopefully one that does not have a lot of image elements in the design already.
If you had a good bit of CSS experience, I would suggest something like toolbox which is basically a wide open, blank canvas. I’ve not yet messed around with it,
-
I was looking at comet and I think that might suit me a little better. I will look into that and customizing it on a seperate blog until I can make the transfer. Would you agree?
- The topic ‘body and menu positioning with CSS’ is closed to new replies.
WordPress.com Forums 