So, on this site, when you make your window to something small, like 1200px, the col-left gets dropped beneath the left sidebar which it really shouldn't happen.
http://www.moko.com.php5-21.websitet...m/?page_id=113

Can some kind soul here take a look and perhaps steer me in the right direction on how I might be able to fix this??

Many thanks. Anything would be greatly appreciated.

Actually, that's exactly what it should do. You've set fixed widths on the sidebar and the left column. If you shrink the browser (or if your screen resolution isn't that wide to begin with) both elements won't fit next to each other, so one have to hop down underneath the other one.

A solution here really depends on how you want to handle things.I guess you could add overflow:hidden;, or overflow:scroll;, and force the browser to show them next to each other evan if they wont be fully visible then. I've never used overflow much myself though, so I can't help you there.

Or you could remove the left margin from the sidebar and then wrap the sidebar and the left column in a wrapper div, which you would then center on the screen. That would mean that the content is still centered, but the sidebar would be 200px smaller in width, which means you can shrink the browser window another 200px without the left column moving under the sidebar. But of course, if you shrink it enough it will still move underneath the sidebar.

This is normal behaviour and a common issue and the reason why you have to take into account that some users may not have as big screen resolution as you do. Of course, you can't please everyone. I'm sure some people are still sitting around with 800x600 or maybe evan smaller and if we all were to comply with these users all websites would still be 600px wide today. You will just have to accept that some users will not be able to view your webiste as intended.

Yeah, thought the same about putting it all in one div, got me on the right track, thanks.

so, one last thing (i hope) that I'm also stumped on...

on the home page at the bottom of this post, I need to have the menu be able to contract and stay centered when you make your browser window smaller...

To illustrate what I mean, when you visit this page where I have it working, the menu contracts / centers always when you have a small window open viewing the site.
http://www.moko.com.php5-21.websitet...om/?page_id=54

I need to have the same functionality on the home page though... when you visit this page and have a small window you'll see that it always stays put for some reason... set margins to auto and removed any padding so I really can't figure this one out..
http://www.moko.com.php5-21.websitetestlink.com/

Lil help?

Really not sure why that is...

It's because you've set a fixed width of 1400px to #header_color. Remove the fixed width. That will also make the background (the white transparent area) too short, but that's because you've put the background in the #header_color, wheras you've put the same background in the #banner element on the first page.

After that, you just have to center the #header_color, i.e. by setting display:inline-block; and margin:0 auto;, although I havn't tested that. Try it out, I'm too tired to look deeper into it right now (it's night where I live) and I'm going to bed

hmm tried a few things out but it wasn't working... will reassess in the AM. Thanks so much for your reply. Have a good weekend.

Originally Posted by Reckoner

hmm tried a few things out but it wasn't working... will reassess in the AM. Thanks so much for your reply. Have a good weekend.

What wasn't working? By just stating that something doesn't work you make it very hard for people to actually help you. It's usually better to overclarify (is that evan a word? ) than to make people guess, just for future reference

Sorry, what I meant was that I tried to do a few things including the suggestion you have.


I removed the fixed width of the header_color, and it makes it too short as you thought it would. So then I put header as margin-right and margin-left: auto... which should center stuff correctly, but it doesn't actually do anything.

The closest I can get is by removing the fixed width from home_background, removing the fixed width from header_color, and putting margin-right and left as auto in header, but the background doesn't go all the way across as it should. It needs to have the transparent background thing going all the way across the width of the page.

The thing is that the transparent background color used is not actually in #banner - that is for the background image (slider in this case)

so from here I am not sure what to do.

Thanks so much for checking this out, really appreciate it!

I noticed that on the correct site, the #header is inside the #header_color, whereas on the faulty site the #header_color is inside the #header. You could try revering their order.

Which ever order you decide on, the outer one should be displayed as a block and have the transparent white background, and the inner one should be displayed as inner-block and have left and right margins set to auto.

thanks a lot, yeah that was much easier than I thought. Just had to change the containing one to display: block, then remove the fixed widths and set the inner one to display: inline and it works now.

Have a good weekend, hope all is well in sweden!

Glad to have helped

ok- getting sooo close.

So that background looks correct / awesome in firefox, but in chrome it's not coming through correctly.

http://www.moko.com.php5-21.websitetestlink.com/

Any possible ideas why that might be? Sorry for keep posting here, but my mind is fried at this point... I think it might have something to do with the display: inline being used?

Why have you commented away this piece of code? It's in the #header_color definition.

 /*background-color: #ffffff;
   filter:alpha(opacity=60);
   opacity:0.6;*/

hmm. Not sure really, I've removed that part of code from the css. Not making a difference though.

I didn't mean for you to remove it, you've already done that by commenting it. I meant you should restore it. That is, take away the commenting (/* and */) so the code is active again. That did the trick for me in Chrome.

Thanks but now I remembered why I didn't use that method, when you do that, the opactity makes ALL contents of the div transparent including the text and stuff, which can not happen.

Any other ideas? Anything would be greatly appreciated.

Bumpage?

Seriously just need to find a way to fix this in chrome then this site is basically done.

Ok, I think I've managed to solve it. The order of #header and #header_color is still reversed compared to the first link you posted in this thread, but I guess that is the way it's suppose to be then. So...

The menu is in a container with class menu-moko-container. I need you to add a clearing div inside this container, just after the menu, as in

<div class="menu-moko-container">
   <ul id="menu-moko" class="menu">
      <li id="menu-item-49" ...>MokoVibe</li>
      ...
   </ul>
   <div style="clear:both;"></div> <!-- THIS LINE IS NEW -->
</div>

And in the .page-id-18 #header definition:

change display from inline to block
remove the height:75px;
add the background: transparent url(images/header_bg.png);
change the horizontal margins from auto to 0 (doesn't matter for screen resolutions less than 1400px, but for those who have bigger, you don't want to center the #header container, only the inner #header_color)

In the #header definition (not .page-id-18 #header):

remove the height: 75px;

And finally, remove the transparent background from all the other elements. Otherwise there's gonna be several layers of semi-transparent white areas, adding up to a non-transparent white area.


EDIT: This may or may not screw up your other pages. If it does, it's because you have reversed the order of the #header and #header_color. If so, change places of them and I'll have to take another look...

I think you might find this helpful:
http://www.alistapart.com/articles/r...ve-web-design/

Figured this out... took a few tries using a few different techniques but somehow got things to work in chrome and firefox the way they should.


THANK YOU SO MUCH FOR THE ASSISTANCE!