Background Image advice

[dawg9]

Can someone advise me on how i might get my "center content" to have a different background color/image and leave the two outer halves the way they already are? I tried wrapping the content in a div wrapper and setting a different bg image but since i have the body tag with an image already in place I think this supersedes any subsequent changes.
My site:
http://www.betagammachapter.com/otherChapters.shtml

Before you say it Ryan Fait I already know this sight doesn't work in Safari. Thanks.

[BGarner]

Try this...

Code: Select all

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1em;
  color: #000000;
  margin: 0px;
  padding: 0px;
  background: url(../photoshop/backgrounds/goldGradient.jpg);
}

div#wrapper {
  background: url(../"url of your background") repeat-y;
  width: 700px;
  margin: auto;
}

Hope this helps!

[Ryan Fait]

Haha, I so wanted to say it, too. I'll even forego the snappy comeback this time around.

[dawg9]

Originally Posted by BGarner

Try this...

Code: Select all

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1em;
  color: #000000;
  margin: 0px;
  padding: 0px;
  background: url(../photoshop/backgrounds/goldGradient.jpg);
}

div#wrapper {
  background: url(../"url of your background") repeat-y;
  width: 700px;
  margin: auto;
}

Hope this helps!

That did the trick for me. Thank BGarner
And thanks to you Ryan for cutting me some slack. BTW, I don't have access to a safari browser. Is there some other way I can test the functionality in safari?

[moojoo]

http://browsershots.org/

[Ryan Fait]

Well, to be honest, if you used a more standard way of making websites (i.e., the proper way), you wouldn't have this problem. I don't see why you are so opposed to using this code:

Code: Select all

.nav ul {
    background: url(solid-purple-gradient.gif) repeat-x 0 0;
}
.nav li {
    padding: 0 10px;
    background: url(divider.gif) no-repeat 100% 0;
}

It handles resizes and won't get mucked up on text resizes.

[dawg9]

Originally Posted by Ryan Fait

Well, to be honest, if you used a more standard way of making websites (i.e., the proper way), you wouldn't have this problem. I don't see why you are so opposed to using this code:

Code: Select all

.nav ul {
    background: url(solid-purple-gradient.gif) repeat-x 0 0;
}
.nav li {
    padding: 0 10px;
    background: url(divider.gif) no-repeat 100% 0;
}

It handles resizes and won't get mucked up on text resizes.

I'm not as opposed to it as I was before. It was more or less your tone that set me off. I have plans to revisit the menu in a little while. Just so I understand you, Are you recommending I do away with the menu dividers that I currently have? Also, extracting the purple gradient bar from the menu. Right now the bar and the dividers are integrated into the entire image. I think I understand where you're coming from. Maybe I have gotten a better understanding of css in the past month or so. I'll give this a try.

[dawg9]

Ryan: I'm struggling a bit with your suggestions. Things still go out of whack when I change the font size.

http://www.betagammachapter.com/welcome.shtml

Sorry about the format below but I didn't see the option tag to post code

Code: Select all

/* Header */
div#headerMenu
{
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0 auto;
}

div#headerMenu ul
{
    position: absolute;
    list-style-image: none;
    list-style-type: none;
    padding: 0em;
    width: 100%;
    margin: 0em;
    bottom: .3em;
    white-space: nowrap;
    background-image: url(../photoshop/menus/purpleGlassMenuBar.gif);
    background-repeat: repeat-x;
    background-position: 0px 0px;
    height: 2.5em;
}

div#headerMenu ul.level1 li
{
    position: relative;
    float: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    white-space: nowrap;
    color: #FFFFFF;
    font-weight: bold;
    background-image: url(../photoshop/menus/menuDivider.gif);
    padding: 0 5px;
    background-repeat: no-repeat;
    background-position: 100% 0px;
}

[Ryan Fait]

That's right! I apologize if I came off harsh last time; it wasn't my intention. Basically, the background of the ul will be a solid gradient with no dividers in it. Then, you add a divider background to each of the <li>'s. Using that method, font differences between browsers and text resizes will affect the dividers as well as the text.

[Ryan Fait]

I'm going to clean this up a little bit for you. Try using this code. Mostly, I converted it shorthand, but I added a few things that should make it sit a little more nicely in the <ul>. Try altering the padding in the <li> if it still doesn't look right.

Code: Select all

#headerMenu ul {
    position: absolute;
    bottom: .3em;
    list-style: none;
    width: 100%;
    height: 2.5em;
    margin: 0;
    padding: 0;
    background: url(../photoshop/menus/purpleGlassMenuBar.gif) repeat-x 0 0;
    white-space: nowrap;
}

#headerMenu ul.level1 li {
    position: relative;
    margin: 0;
    padding: 0 13px 0 10px;
    color: #fff;
    font: bold 1em/2.5em verdana, arial, helvetica, sans-serif;
    float: left;
    white-space: nowrap;
    background: url(../photoshop/menus/menuDivider.gif) no-repeat 100% 50%;
}

And to get the code option, just type [code) and [/code) using this ] instead of ).

[dawg9]

Thanks for the assistance. I have been working on this quite a bit but I have yet to achieve the desired result. I think I may need to create a class "divider" and modularize the level1 ul because I don't want a divider after the "contact" li.

Also, the dividers are appearing in the level2 submenu items as well. I think I can fix all that by singling out the li's.

It appears to be working with different resolutions but it's still erratic when you change the font size. I'll keep hammering away at this. This new method (the right way) has helped me understand menu work a lot better. Thanks!!!

http://www.betagammachapter.com/welcome.shtml

Code: Select all

div#headerMenu ul.level1
{
    font-size: .75em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    position: absolute;
    width: 700px;
    background-image: url(../photoshop/menus/purpleGlassMenuBar.gif);
    background-repeat: repeat-x;
    background-position: 0 0;
    top: 12em;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
}

div#headerMenu ul.level1 li
{
    position: relative;
    margin: 0;
    color: #fff;
    float: left;
    white-space: nowrap;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 1em;
    line-height: 2.0em;
    font-weight: bold;
    padding: 0 14px 0 10px;
    background: url(../photoshop/menus/menuDivider.gif) no-repeat 100% 50%;
}

[moojoo]

Stupid IntarWeb Screenie...

[Ryan Fait]

Code: Select all

.nav li li, .last {
    background: none;
}

Code: Select all

<li class="last"><a href="contact.html">Contact us</a></li>