contents misplaced when browser window resized
ks_anjanadevi - November 13, 2008 - 12:09
I am using Drupal 5.x 'foundation' theme. Everything was fine until I resized my browser window (FF2, FF3, IE6, IE7). I used Nice menus module.
When I resize all the content, images, menus misplaced unorderly. I wonder what code can I put here to fix this?
CSS:
body { color: #333333; background: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 1px auto auto 0px;font-size: 11px; line-height: normal;width:99%;border:0px solid blue;}
I have used according to the theme % for the whole site.
Thanks
Anjana
Could you post a link?
To your website?
- Arie
I am sorry I dont have the link
This is an internal project and its not hosted. My problem is almost like the drupal.org site when it is resized you can see the menus coming down, and contents shrink..the same problem I have with my site.
CSS:
body { color: #333333; background: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 1px auto auto 0px;font-size: 11px; line-height: normal;width:99%;border:0px solid blue;}
.container { clear: both;padding:0px 1px 0px 3px;width:100%;width:auto;border:0px solid blue;}
Fluid vs fixed width
It sounds like you want to make your theme use a fixed width. If you do that the page will stay the same when the browser window is resized. It will also mean that the user will have to scroll to see all of the content.
To accomplish that you will have to change the width of the outer most container (in this case the .container I think) to an absolute value: try using 750px to start with. So instead of:
.container { clear: both;padding:0px 1px 0px 3px;width: 100%;width: auto;border: 0px solid blue;}you get
.container { clear: both;padding: 0px 1px 0px 3px;width: 750px;border: none;}/* also removed the second width attribute and changed the border attribute */
Try googleing for "fixed width vs fluid" to see discussions on the pros and cons of both approaches.
- Arie