Jump to content
Sign in to follow this  
turn3tv

Remove width from feature

Recommended Posts

turn3tv

What I'm trying to do and have accomplished is to display my feature essentially as the background for the header on my frontpage taking up 100% of the screen (the feature images are 2560px wide). Pretty much exactly like http://www.fxnetworks.com/ but centered. I have it looking exactly how I want except for the fact that when you resize the browser window, the features don't remain centered, they stay stuck to the left side of the window. I'm pretty sure the reason for this is that the cycle and feature_# are getting html styles coming from somewhere which are setting the width which isn't allowing me to keep it centered.

<div id="cycle" style="position: relative; [b]width: 1227px;[/b] height: 335px;">
	<div id="feature_26" class="fcontainer text-right fix" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0; [b]width: 1227px;[/b] height: 335px;">

What I'm wondering is if there is a way to stop the width from being sent to those styles (I'm going to be the one handling the images and they will all be the same width). When I turn off those widths in firebug, everything works exactly how I want. Is this possible or should I just be resigned to the fact that site will look like crap when somebody resizes the browser window?

Share this post


Link to post
Share on other sites
timlinson

Hey Charlie, can you post your custom css you've used so far? And just to make sure, that fxnneworks site is yours? or an example for comparison?

Share this post


Link to post
Share on other sites
turn3tv

fxnetworks.com isn't mine, the front page is just an example of the look I'm going for.

	#feature_slider{
			width: 100%;
			position: absolute;
			top: 0px;
			left: 50%;
			margin-left: -50%;
			z-index:0;
		}
	
		#feature-area .fcontainer{
			width: 100%;
		}
	
	.feature-wrap {width: 100%;}

I think that's everything that's applicable.

Share this post


Link to post
Share on other sites
kastelic

I'm positive this can be fixed, either with CSS or a few lines of jQuery, but I would need to see the live site to give you any code.

Share this post


Link to post
Share on other sites
catrina

You might want to try this CSS to overwrite the style that's there:

#cycle {width: YOURWIDTHHEREpx;}
	#feature_26 {width: YOURWIDTHHEREpx;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×