WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > keeping header from breaking when screen res changes

Reply
  Thread Tools Display Modes
Old 17th October 11, 12:52 AM   #1
timhookoo
WLC Member
 
Join Date: Oct 2011
Posts: 4
Default keeping header from breaking when screen res changes

I'm in the process of converting my site to wordpress and I'm trying to keep the header of my site from attempting to stretch to the user's screen resolution. The site is here - www.largecarmag.com/wordpress. I'm using a modified version of the wordpress Twenty Eleven theme. I added a div for an ad widget in the top left as well as a jQuery image slideshow just below the top navigation. If the site is viewed at a screen resolution such as 800 x 600, you'll notice that the header ad, top navigation and background image break as the site attempts to fit to the screen. I'd rather that the site force the user to scroll left and right if their browser is below 1024 x 768. Is there a simple way to accomplish this?

Thanks in advance!
timhookoo is offline   Reply With Quote
Old 17th October 11, 04:44 AM   #2
FrankC
WLC Lover
 
FrankC's Avatar
 
Join Date: Oct 2011
Posts: 161
Default Re: keeping header from breaking when screen res changes

Give it an absolute width?
__________________
Frank

Please report back how suggestions worked out.
FrankC is offline   Reply With Quote
Old 17th October 11, 05:44 AM   #3
webdesigner
WLC Member
 
webdesigner's Avatar
 
Join Date: Oct 2011
Location: Bangalore, India
Posts: 10
Default Re: keeping header from breaking when screen res changes

I had checked your site.
Make the below changes to your CSS file.

Code:
#wheader {
	float:right;
	max-height:175px;

	padding:0;
	width: 400px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 0;
}
Change to:

Code:
#wheader {
	max-height:175px;
	padding:0;
	width: 400px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 600px;
}
Also in your #access style,
add
position:absolute;

and change the width from 100% to 1000px.

Hope this will help. Try it.
__________________
*-*-*-*-*-*-*-*-*
Libin (webdesigner)
Powered by:
Pixels, Colors & Codes
webdesigner is offline   Reply With Quote
Old 17th October 11, 04:25 PM   #4
timhookoo
WLC Member
 
Join Date: Oct 2011
Posts: 4
Default Re: keeping header from breaking when screen res changes

Thanks - your css mods helped! Actually I applied them to the body of the site as well to keep it from trying to conform to the screen resolution. Is there a way to also keep the background image from shifting as the screen size changes?

There's some other odd things happening as well, mainly with IE. On IE, the "content" div has a weird gray line at the very bottom (below the two magazine images and above the four ads). I can't seem to get rid of it!

If I use Adobe Browser Labs and look at the site in IE7, the upper navigation, background, and the four ads at the bottom are all broken. I'm not sure if I should be too highly concerned about IE7 though...it looks fine in IE8.
timhookoo is offline   Reply With Quote
Old 18th October 11, 05:43 AM   #5
webdesigner
WLC Member
 
webdesigner's Avatar
 
Join Date: Oct 2011
Location: Bangalore, India
Posts: 10
Default Re: keeping header from breaking when screen res changes

Quote:
Originally Posted by timhookoo View Post
Is there a way to also keep the background image from shifting as the screen size changes?
You are using a single image in the background. So it is not possible to keep the image as the screen size changes. To avoid shifting of image, you should use 2 pieces of background images. One for left side and one for right. Keep those images in separate divs and stick it to the #page.

I am checking your page in Chrome only and not aware of cross browser issues.
__________________
*-*-*-*-*-*-*-*-*
Libin (webdesigner)
Powered by:
Pixels, Colors & Codes
webdesigner is offline   Reply With Quote
Old 1st December 11, 01:58 PM   #6
timhookoo
WLC Member
 
Join Date: Oct 2011
Posts: 4
Default Re: keeping header from breaking when screen res changes

I've been working on the site and I was at a point where I thought everything was good, but then I checked the site on an iPhone. The css has some issues when viewing the site on such a small screen. You can emulate what's happening by scaling your browser window's width until you start to see some weird things happening. The main problems are with the header, footer and sidebar. The header suddenly has a large gap between the header graphic and the main content. The sidebar gets put below all the main content. And the footer links all get piled on top of one another. Seems like it should be an easy fix for all three but at the moment I'm stuck...
timhookoo is offline   Reply With Quote
Old 4th January 12, 09:29 PM   #7
timhookoo
WLC Member
 
Join Date: Oct 2011
Posts: 4
Default Re: keeping header from breaking when screen res changes

Disregard - figured it all out!
timhookoo is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:38 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.