Background image left and right of centered div

[AdRock]

I have all of my content in a wrapper div which postions center of the screen so it will always be in the center no matter what screen resolution a user has.

I have noticed that becuase I have a high screen resolution that there is a lot of empty space to the left and right of all the content.

I have tried changing the body colour with my stylesheet but the wrapper div is affected by the body colour.

I only noticed this becuase I am thinking about having a repeated image to the left and right space to give it a pillar effect. I want to break up the page so it doesn't look so white.

Is there something wrong with my css that is taking on the body color

Code: Select all

 
#wrapper {
   margin: 0 auto;
   width: 775px;
   text-align: left;
   position: relative;
   background-color: #FFFFFF;
}

And how would I add a repeating image on the left and right sides?

[spinal007]

make an image that is 770px wide and use background-repeat:repeat-y;

It would be easier to help if you posted an URL...

[Rob]

actually.... I would make an image around 2000px wide, with a 775px hole in the middle.

On either side of this hole, just add your design you want to repeat.

Then set this as a centered background on the body element. The hole should align perfectly to your content, leaving a left and right repeated background.

[AdRock]

here is the url

http://www.project-sw.co.uk/jack/

and even for my old one

http://www.project-sw.co.uk

Thanks peeps

[ukgeoff]

If you view your new site in Firefox, you will see that the navgation block titles are out of alignment.

[AdRock]

Yeah I know

It's something i got to sort out

I noticed firefox interprets some css differently than IE like the em

[ukgeoff]

Because Firefox, Opera and others are far more standards compliant than IE, you should get in the habit of getting your sites working perfectly in Firefox first and then tweak as required for IE.

[AdRock]

I have started to make the site cross browser compliant but have come across a problem.

I have made a div inside a div which now makes the blue bar appear aligned with the little image aligned correctly.

I need some text such as Navigation, Membership etc but if i use <h3> or <p> to add the text I noticed that the text is not inline with the image but pushed down slightly

How can I align the text next to the image?

Code: Select all

 
.news {
   width: 190px;
   margin-left: 5px;
   margin-right: 5px;
   margin-top:5px;
   background-color: #E4EFFF; /*#EDF0F6*/
   border: 1px solid #FFFFFF;
}
.heading {
   width: 190px;
   height: 25px;
   background-color: #5797F1;
}
h3.head {
   color: #FFFFFF;
}

Code: Select all

 
This is just the test code
<div class="news"><div class="heading"><img src="images/users.jpg" vspace="3" hspace="3">Membership</div></div>

[ukgeoff]

What's this supposed to be doing?

Code: Select all

<div id="nav"></div>

An 'id' is supposed to be unique on a page. I know you know this so why do you have two:

Code: Select all

<ul id='menu'>...

Look at your menu. The font is different on the second item. Presumably to indicate something, but it's neither active or a sub-menu or a sub-list.

ANd why do you have another menu on the right as a selection box? This just adds confusion for the end user.

Your code has a mix of lower and upper case tags.

Your menu is over-structured. Your menu block titles can also be an <li>, just a special one with an image and text.

I've said this to you before but I guess you didn't take it on board. You need to go and do a lot of reading and working through some good books and/or online tutorials.

[Ryan Fait]

It would be a good idea to leave a hole in the background 2 pixels smaller than the centered DIV. If the browser width in pixels is an odd number, the background will be off by a pixel leaving a blank vertical line on either side of the content DIV.

[AdRock]

Originally Posted by ukgeoff

What's this supposed to be doing?

Code: Select all

<div id="nav"></div>

An 'id' is supposed to be unique on a page. I know you know this so why do you have two:

Code: Select all

<ul id='menu'>...

The nav div used to be in my stylesheet for the navigation on a previous site. Now i use it for the blue bar underneath the title banner image instead of using a blue bar image. Using a div saves on download time for the user.

As for the ul id="menu" that is for a Javascript expanding menu where one on the nav links can expand vertically so show related links. It currently does work properly in Firefox and I know why. I just need to find a solution. Have a look in IE and you will see

[ukgeoff]

Originally Posted by AdRock

The nav div used to be in my stylesheet for the navigation on a previous site. Now i use it for the blue bar underneath the title banner image instead of using a blue bar image. Using a div saves on download time for the user.

As for the ul id="menu" that is for a Javascript expanding menu where one on the nav links can expand vertically so show related links. It currently does work properly in Firefox and I know why. I just need to find a solution. Have a look in IE and you will see

With regard to your first comment, if that's the case, then your <div id=nav> should wrap around <div id='adam'> and not be just stuck on its own.

As far as your second comment goes, you are completely missing the point. The rules are that you can only have an 'id' occur once on a page. It is supposed to be UNIQUE. What ever you think you are doing with the navigation <ul>'s, you shouldn't have two with the same id.