CSS Background width

  • Hello,
    I’m using the default template to customize a new theme and rather than using only the standard template files ie. header, sidebar, footer, I added an additional template file I called “secondrow.php” because the design of the layout has a header stacked above the content, stacked above a second row of content which is stacked above another third row (I intend to use the sidebar.php for the third row of content) and then the footer.

    This new secondrow.php template file calls into the template perfectly and seems to be working fine. The problem is that I’m having problems with styling it. In the css file there is this bit of code:

    #page {
	background-color: white;
	position: absolute;
	margin-left: -475px;
	left: 50%;
	width: 950px;
	}

    This seems to affect the 1st row of content where the loop is. It is the property that the default theme already had in the style.css file just with my changes I used the css to center the main content to align with the header and changed some details of color.

    In the secondrow.php I have a <div id="secondrow"> this is as follows:

    #secondrow {
	background-color: #003c7a;
	background-image: url(images/bkg_tworow.jpg);
	background-repeat: repeat-x;
	height: 400px;
}

    The idea is to have this area be in contrast to the main content area by a repeated gradient image that spans from the left of the browser window to the right of it. The problem is that this repeated image seems to be inheriting some quality from the #page property and it is not going all the way across. I’m not very good with css yet so thus far I’m unable to see what could be causing it (despite hours of trying). Is there something I’m overlooking or perhaps a way to force the repeated background to go all the way across with some nifty css trick? If someone could help I’d be very grateful.

    If I need to provide more information please let me know

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter rosemckay

    (@rosemckay)

    Hmmm it seems like the only solution I can find is to make the width of #secondrow <i>really</i> wide like maybe 3,000 pixels, center it and then disable the horizontal scroll bar. I don’t really want to have to do this because it will make accessibility a nightmare for users who might have a lower screen resolution or a special need.

    Any suggestions for another solution?

    Can you link to the page?

    Would be a whole lot easier to help if i can see the site in question… thanx .. ??

    Repeating the image should be simple, it’s proberly just an inheritance issue.

    Thread Starter rosemckay

    (@rosemckay)

    Here’s the template in progress link

    Hopefully this’ll help. Another problem that has cropped up is that the secondrow.php doesn’t bump down with the main content, you’ll see when you look at the page that it overlaps the sidebar info. If you have time and don’t mind maybe you could give me some pointers on this too?

    Thanks for taking the time to help!!!

    I’d lose all the huge negative margins and positioning, i’m sure you’re making the positioning harder then it needs to be…

    It’s hard to determine if the problem is the effect of one or a combination of many elements.

    The best thing i can suggest is to take a look at some CSS templates that archieve the level of positioning you want and then take a look at the CSS used to produce the result…

    Remember CSS is cascading, some definitions will cascade down onto elements inside defined elements. This is also handled slightly differently depending on the browser.

    Ideally you should only need a few floats and margins, and perhaps a container/wrapper DIV to position everything in the center with margins if required.

    I’d personally start with the template in a single HTML page, with the images and text hard-coded into that page for testing, once the page and accompanying CSS behaves as you want, then chop it up and place it into a template on WordPress testing as you go…

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS Background width’ is closed to new replies.