Good thinking on the text being separate from the image. Not only good for SEO, but easier to change — and if images are off for some reason the text is still there.
Since the image will be in the background of the div, text lays on top automatically. At that point it’s all a matter of styling.
This is really a general css question (not wordpress) so you might want to visit some sites on css for specifics. You could style <p>’s with margins and padding, add divs with floats, or absolutely position elements to get the effect you’re looking for.
Thanks for the feedback Csleh. I’ll definitely look into getting more information on the CSS specifics.
I still have some questions about how all of this actually comes together.
I assume that I can get the background image to show up purely through defining and placing the proper CSS into my template. My real concern right now is the mechanics of styling the text and targeting the links within the graphic background, and furthermore, how this relates to the way WordPress works. Lets just say that I have all my copy written up in a WordPress page, how then do I access this text for styling in my CSS stylesheet? If you look at the image I linked to in my first post you can see that there are a few different styles/sizes of text, how do I define portions of the text in my page to style differently than others?
Is it perhaps better for me to just create a blank page in WordPress and use CSS and PHP to create the whole thing including the text?
As you can see, I’m somewhat at a loss here. 🙂
Thanks,
-Mike
Once you put in a background image just ignore it for now. that image has no effect itself on layout.
Links and text are treated exactly like any other links and text in a template page.
As far as how wordpress works, what you want is no different than calling in content from any other post. Your real issue is having a custom template page for this post only, and css styling.
THere’s probably a million ways to solve this problem. Here’s what I would do:
Put all content in a post. Assign classes to each paragraph, or more probably make each a different heading type and apply a class to that. I would do that only because when editing a post in html view I can actually see the <hx> tags and add class easier.
Make a custom template for that post. Probably means having a specific category, and a category template.
On the template page you can put in your custom css. I would not call headers/footers/anything else, but copy header and footer code into this template.
Style each header class to place the content where I wanted. As an example:
h1.headline {font-size:24px; color:#cccccc; position:absolute; top:6px; left:12px; text-align:center; background:red;}
If you use absolute positioning remember to make a wrapper div and give it position:relative.
Then in the template page call the content as you would for any post.
I highly recommend using firefox and firebug to try out css styling effects on the fly.
