...

View Full Version : Is there a way to have text move together with centered bg-img?



hyperballad400
05-14-2010, 03:12 AM
Hi there!
I'm a beginner with CSS, but I'm moving along nicely (I like to think :).
I've created a website for a friend's legal practice and need a little help. Here's the site:
http://aftergoodesq.com/
I'm working on a pretty small monitor, and my problem seems to be that on larger monitors, the text and nav all move off the centered background image and onto the grey background color.
My question is: is there a way to have the text and nav move with the background image (without making them all into an image, and without centering the text and nav)?
I have other questions about the site, but this one is the most pressing.
Thanks very much for your help!

Mr Travis L
05-14-2010, 03:30 AM
Could you give me the CSS code to the Left and Right grey sides, the background image, and the part that is overlapping?

hyperballad400
05-14-2010, 03:38 AM
sure. forgive me if this includes stuff you don't need, but most of the elements on the site are involved in the question. thank you!!!


body
{
background-image: url(images/main-bg.jpg);
background-position: top center;
background-repeat: no-repeat;
background-color: grey;
}

#content
{
height: em;
margin: 0;
overflow: hidden;
float: left;
padding: 2em 30em 20em 13em;
}

#logo
{
padding: 20px 0 0 175px
}

.rule
{
border-top: 2px solid #99ccff;
width: 42em;
margin-left: 11em;
}

#navlinks
{
font-family:century gothic !important;
font-size: small;
margin-left: 10em;
padding:0 0 1.1em;
white-space:nowrap;
list-style-type:none;
}

#navlinks li
{
display:inline;
}

#navlinks li a
{
padding:0 0 0 4em;
color:#666;
text-decoration:none;
float:left;
}

#navlinks li a:hover
{
color:#99ccff;
}


p
{
font-size: 0.85em;
color: grey;
font-family: georgia;
min-width: 450px;
text-align: center;
}

Mr Travis L
05-14-2010, 03:47 AM
What part is the part that is overlapping? Is that the navlinks?

Edit:
Also could you give me the HTML Codes to the navbar and background?

hyperballad400
05-14-2010, 03:50 AM
it's everything that isn't the background image -- nav and paragraph text. look here and you'll see what i mean:
http://clip2net.com/page/m0/5763090

Mr Travis L
05-14-2010, 04:12 AM
Ahhh, I see. On yours everything is over, I didn't know that. I thought that it was just the navbar and logo because thats all it shows on mine.

Change the body to this:
body {
background-image: url(images/main-bg.jpg);
background-repeat: no-repeat;
background-color: grey;
margin:0px 50% 0px 50%;
}

Tell me if this works... I can't really think of a better solution this late at night.

hyperballad400
05-14-2010, 11:06 PM
no, that messes it up for small screens:
http://clip2net.com/page/m0/5798687

Mr Travis L
05-14-2010, 11:47 PM
Try turning them into tables? Thats how I make all my websites, with <table>.

Easy way to do that would be this:

Put this right under your body tag: <table><tr><td>&nbsp;</td><td width="957">
Example:
<body>
<table><tr><td>&nbsp;</td><td width="957">
THEN YOUR CODES

Then put this right above your ending body tag: </td><td>&nbsp;</td></tr></table>
Example:
YOUR CODES ABOVE
</td><td>&nbsp;</td></tr></table>
</body>

What this does is first makes a blank table on the left (where the stuff is overlapping), then makes another box in the middle that is the same size as your background image (I put 957, because I think that is what your background image width is), then it makes another blank box to the right, this should automaticly put the middle box in the middle, and then make the 2 side boxes take up the rest of the page, with both the same equal width.

If this doesn't work please say.

You "may" have to get rid of your background image, and make it the middle tables background image (nothing differnt, just instead of it being a background image, it would be a table background image).

code beginner
05-15-2010, 02:47 AM
usually if you set everything to margin-left: auto, margin-right:auto, it will all center in a similar fashion.

hyperballad400
05-18-2010, 08:03 PM
thanks Mr Travis L, but this is what happened:
http://clip2net.com/page/m0/5865500
looks like my nav is not happy with the table set up. but this may be the right track...

code beginner, i don't think that'll work considering that right now the content has quite a bit of padding on it to get it in the right place...

thank you both for your help!

shepherd
05-18-2010, 08:10 PM
I think a good solution would be to make a containing div that holds everything in the middle, then place everything inside that...

eg:

#container{
width:youdecide;
height:auto;
position:relative;
left:50%;
margin:0 0 0 -50%of size; ok so here the numbers work round clockwise from top so, top, right, bottom, left, so the last number (left) should be minus half the size of the actual div, that way it will always be in the center of the page and this div will in a sense become your new body so apply any padding etc within this to contain everything else.

}

I hope this helps and I've explained that ok, if you need help let me know.

shepherd
05-18-2010, 09:35 PM
I think a good solution would be to make a containing div that hold everything in the middle and place everything inside that


?????????



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum