4 replies [Last post]
steelethg
steelethg's picture
Offline
newbie
Melrose, Fl
Last seen: 13 years 38 weeks ago
Melrose, Fl
Timezone: GMT-4
Joined: 2007-03-13
Posts: 3
Points: 0

I am working on my first css site and have run into a problem.

I have a div, class=festivals (835 x 270)
I use an image as the background image (635x270)

I placed text in the div, left aligned the text and to achieve the text being centered, I added a paragraph (empty) to align the text vertically over the image in the div, and I used text indent to align the text over the image as well.

When it views in the browser, the whole div gets bumped down, leaving a gap between the navigation div and the div I am working on 'festivals'

When I remove the indents and paragraph spacing the image bounces back to the normal position, and the text goes all the way to the left of the div, no longer above the image.

Am I approaching this incorrectly as far as getting the text where I want it without affecting the div position?

Any help would be greatly appreciated, thank you.

Here is the url to view the page: http://steelesherbgarden.com/thg07_festivals.php
If you click on "HOME" you will be able to see how the image and div should look without the text.

christallization
christallization's picture
Offline
Enthusiast
Las Vegas
Last seen: 13 years 25 weeks ago
Las Vegas
Joined: 2007-03-13
Posts: 69
Points: 0

Very simple issue you have here

There are various ways of placing your text exactly where you want them. But I think in your case the best possible scenario will be to use the padding command:

The padding command puts a space within a DIV don't mistake this for the margin command which puts a space outside of the DIV.

Now what you need to do is set your padding e.g

padding-left: 100px;
padding-right: 100px;
padding-top: 100px;
padding-bottom: 100px;

Of course the above pixels are examples but you get the idea. Use any or all those paddings on the ID in your CSS script to get the result or position you need. You could of course use other means but this will be the best possible way to make a precise space on your page for the text you have on your HTML or PHP page to fit perfectly in.

Cheeers.

WHAT HAPPENS IN VEGAS, STAYS IN VEGAS.. NERDS RULE!!!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

If the bg image is 635, then

If the bg image is 635, then why wouldn't you want the div that size as well? Actually I would pad the div slightly to give the text some breathing room, say 10px, so the width would be 615px with 10px left and right padding.

.festivals {
    width: 615px;
    height: 250px;
    background: url(images/thg_2007/thg_festivals.png) top center no-repeat;
    padding: 10px;
    margin: 0 auto;
    }

Then center the div with auto margins. Also, don't use empty tags for positioning, that should be controlled in the css - you rarely need break tags either. And the section where you have text enclosed in ems and a p probably doesn't need the em, you could style those ps separately.

steelethg
steelethg's picture
Offline
newbie
Melrose, Fl
Last seen: 13 years 38 weeks ago
Melrose, Fl
Timezone: GMT-4
Joined: 2007-03-13
Posts: 3
Points: 0

I'm getting closer, but.....

Thanks for your response. Here is the info I use for my div...

/* FESTIVALS
----------------------------------------------------*/

.festivals
{
width: 835px;
height: 270px;
position: relative;
background-image: url(images/thg_2007/thg_festivals.png);
background-position: 50% 50%;
background-repeat: no-repeat;
padding-left: 225px;
padding-right: .5px;
padding-top: .1px;
padding-bottom: .1px;
}
The text is now right where I want it in relation to the image, the image is now where I want it vertically, but when I mess with the padding left and right, the text and image do not seem to be in coordination. I want the image, along with the text in this present view http://steelesherbgarden.com/thg07_festivals.php, to be centered like my navigation bar is. Thank you again.

steelethg
steelethg's picture
Offline
newbie
Melrose, Fl
Last seen: 13 years 38 weeks ago
Melrose, Fl
Timezone: GMT-4
Joined: 2007-03-13
Posts: 3
Points: 0

That did the trick....

Thank you. I made the changes and it worked fine. I can also see why this was done, so it was a good learning process. Thank you both for your help.