# Quick and dirty CSS/PHP help purely regarding design...

**URL:** <https://boards.straightdope.com/t/quick-and-dirty-css-php-help-purely-regarding-design/547527>\
**Category:** Factual Questions\
**Created:** [July 21, 2010, 11:52pm UTC](https://boards.straightdope.com/t/quick-and-dirty-css-php-help-purely-regarding-design/547527 "2010-07-21T23:52:16Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stoid](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/stoid/32/272_2.png) [@Stoid](https://boards.straightdope.com/u/Stoid)\
**Post date:** [July 21, 2010, 11:52pm UTC](https://boards.straightdope.com/t/quick-and-dirty-css-php-help-purely-regarding-design/547527/1 "2010-07-21T23:52:16Z")

</div>

I can’t share the code because it’s sensitive information having to do with billing, but here’s my issue: (I am completely clue-free when it comes to CSS, although I’m learning. I just need a FAST answer)

It’s a simple css/php script made up of a couple of pretty straightforward pages. First there’s a payment form… simple enough. There’s a submit button, the data is sent to my processor, if it’s ok the form becomes “transaction successful!” with a simple list of information.

All that is contained in the one index.php file. There’s a bunch of if/else error checking and so forth, but none of that is my issue, the form works on a technical level just fine. Actually it works just fine in every way.

My problem is the way it LOOKS. I spent a LOT of time trying to figure out how to, at the very least, make the site logo appear on the top of the payment form and the top of the results page, forget centering, or bars or any other design change. I’ll worry about that later. Right now I just want to make it look slightly less like a completely generic page that is so plain and disconnected from any identifying features that it doesn’t even look like it would really work.

But I failed.  
So… I realize I’ve given very little info, but…

---

<div class="post-metadata">

**Author:** ![choie](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/choie/32/7829_2.png) [@choie](https://boards.straightdope.com/u/choie)\
**Post date:** [July 22, 2010, 12:26am UTC](https://boards.straightdope.com/t/quick-and-dirty-css-php-help-purely-regarding-design/547527/2 "2010-07-22T00:26:35Z")

</div>

This is pretty much impossible to do without seeing the program. Unless you’re just asking how to add an image to a page?

At its most basic, in the HTML code, at the top of the page (beneath the BODY tag), you’d add:

\<img src="/yourdirectory/yourimagename.gif" /\>

No CSS or even PHP necessary. You’d have to do this for each page generated by the program.

Now, if your program uses a template system (as many PHP programs do), you can look for a template named “header” or something similar; in a template-based system, the header will be added automatically to each page. You’d add the image code to that.

Not sure if this is helpful, but as you say, you’ve given very little info.

---

<div class="post-metadata">

**Author:** ![Stoid](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/stoid/32/272_2.png) [@Stoid](https://boards.straightdope.com/u/Stoid)\
**Post date:** [July 22, 2010, 2:43am UTC](https://boards.straightdope.com/t/quick-and-dirty-css-php-help-purely-regarding-design/547527/3 "2010-07-22T02:43:34Z")

</div>

It is a template thing, and I tried to do it with the header… I guess I’ll look closer.

---

<div class="post-metadata">

**Author:** ![Kinthalis](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/kinthalis/32/16084_2.png) [@Kinthalis](https://boards.straightdope.com/u/Kinthalis)\
**Post date:** [July 22, 2010, 3:07am UTC](https://boards.straightdope.com/t/quick-and-dirty-css-php-help-purely-regarding-design/547527/4 "2010-07-22T03:07:26Z")

</div>

I don’t understand why you couldn’t let us see the php file? I’m more of a windows guy, but it’s common practise to separate the visual/interactive elements of your project from the functionality. Id use a code behind in [asp.net](http://asp.net), for example. Even if this is not the case in php, can’t you strip out the elements that are programatic, and let us see the pure HTML? Might be able to help you more. Alternatively there are a huge number of free templates out ther you can use and modify.

---

<div class="post-metadata">

**Author:** ![AnalogSignal](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/analogsignal/32/1085_2.png) [@AnalogSignal](https://boards.straightdope.com/u/AnalogSignal)\
**Post date:** [July 22, 2010, 3:09am UTC](https://boards.straightdope.com/t/quick-and-dirty-css-php-help-purely-regarding-design/547527/5 "2010-07-22T03:09:08Z")

</div>

I know it’s not the “correct” answer but the easiest way of controlling layout is to use HTML tables instead of CSS. I agree with many of the comments on this blog: [CSS Sucks Bollocks](http://www.randyrants.com/2005/04/css_sucks_bollo.html).

(Someone will be along shortly to scold me.)

---

<div class="post-metadata">

**Author:** ![Kinthalis](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/kinthalis/32/16084_2.png) [@Kinthalis](https://boards.straightdope.com/u/Kinthalis)\
**Post date:** [July 22, 2010, 3:12am UTC](https://boards.straightdope.com/t/quick-and-dirty-css-php-help-purely-regarding-design/547527/6 "2010-07-22T03:12:05Z")

</div>

Nested tables are a messy proposition. CSS will net you more reliable results, and more importantly, results that are trivial to alter and maintain. For something super simple though, quick and dirty as it were, tables would do in a pinch.

---

<div class="post-metadata">

**Author:** ![choie](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/choie/32/7829_2.png) [@choie](https://boards.straightdope.com/u/choie)\
**Post date:** [July 22, 2010, 3:28am UTC](https://boards.straightdope.com/t/quick-and-dirty-css-php-help-purely-regarding-design/547527/7 "2010-07-22T03:28:30Z")

</div>

I’m no CSS purist, but tables are really only easier if you’re using a WYSIWYG web designer; otherwise it’s really not that different using DIVs and getting used to positioning. If you’re starting out learning HTML/CSS stuff now, you might as well use the more syntactically correct (and accessible) layout method, which these days is CSS.

Anyway, **AnalogSignal** , it doesn’t look like **Stoid** needs to worry about any of this. Adding an image has nothing to do with tables, css, php or anything fancy – it’s plain vanilla HTML. Slap that IMG SRC code in the template and it really should work – assuming that you’ve entered the correct URL for the image, of course.

---

<div class="post-metadata">

**Author:** ![GuanoLad](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/guanolad/32/42_2.png) [@GuanoLad](https://boards.straightdope.com/u/GuanoLad)\
**Post date:** [July 22, 2010, 4:36am UTC](https://boards.straightdope.com/t/quick-and-dirty-css-php-help-purely-regarding-design/547527/8 "2010-07-22T04:36:56Z")

</div>

The best way to use CSS for formatting is a fixed width page. Once you’ve set the container as a centred fixed width box, everything else, either divs or images or forms, can easily slot inside one after the other.

I think the key that you’re fumbling with is you need to learn how to use div tags to enclose every element. It’s pretty simple, and once you get the hang of it, you can do broadly simple pages with ease.

---

<div class="post-metadata">

**Author:** ![Stoid](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/stoid/32/272_2.png) [@Stoid](https://boards.straightdope.com/u/Stoid)\
**Post date:** [July 22, 2010, 12:27pm UTC](https://boards.straightdope.com/t/quick-and-dirty-css-php-help-purely-regarding-design/547527/9 "2010-07-22T12:27:35Z")

</div>

> [@choie](#):
>
> I’m no CSS purist, but tables are really only easier if you’re using a WYSIWYG web designer; otherwise it’s really not that different using DIVs and getting used to positioning. If you’re starting out learning HTML/CSS stuff now, you might as well use the more syntactically correct (and accessible) layout method, which these days is CSS.
> 
> Anyway, **AnalogSignal** , it doesn’t look like **Stoid** needs to worry about any of this. Adding an image has nothing to do with tables, css, php or anything fancy – it’s plain vanilla HTML. Slap that IMG SRC code in the template and it really should work – assuming that you’ve entered the correct URL for the image, of course.

No, that’s the point. the script is fighting back. I can do that in a document that is only about design, but something about the php functionality combined with the CSS is getting in the way.

---

<div class="post-metadata">

**Author:** ![choie](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/choie/32/7829_2.png) [@choie](https://boards.straightdope.com/u/choie)\
**Post date:** [July 23, 2010, 10:22pm UTC](https://boards.straightdope.com/t/quick-and-dirty-css-php-help-purely-regarding-design/547527/10 "2010-07-23T22:22:48Z")

</div>

Well, without the code for your header, I don’t think anyone’s gonna be able to help you. You just haven’t provided enough info for us.

If you want, PM me a link to the header template and I’ll be happy to check it out and see if I can spot the problem.

---

<div class="post-metadata">

**Author:** ![Markxxx](https://avatars.discourse-cdn.com/v4/letter/m/5daacb/32.png) [@Markxxx](https://boards.straightdope.com/u/Markxxx)\
**Post date:** [July 23, 2010, 11:45pm UTC](https://boards.straightdope.com/t/quick-and-dirty-css-php-help-purely-regarding-design/547527/11 "2010-07-23T23:45:35Z")

</div>

You might want to look at [Dynamic Drive](http://www.dynamicdrive.com/) and in their forums section as well. Perhaps they can help you

---

<div class="post-metadata">

**Author:** ![Stealth\_Potato](https://avatars.discourse-cdn.com/v4/letter/s/d78d45/32.png) [@Stealth\_Potato](https://boards.straightdope.com/u/Stealth_Potato)\
**Post date:** [July 25, 2010, 8:38pm UTC](https://boards.straightdope.com/t/quick-and-dirty-css-php-help-purely-regarding-design/547527/12 "2010-07-25T20:38:35Z")

</div>

> [@Stoid](#):
>
> No, that’s the point. the script is fighting back. I can do that in a document that is only about design, but something about the php functionality combined with the CSS is getting in the way.

Yeah, some more info would definitely be helpful here to help figure out what’s going on.

CSS and PHP shouldn’t even interact – PHP scripts are run on the server, whereas CSS definitions are interpreted by the client. By the time you’ve got your stylesheets loaded on the end user’s web browser, all traces of PHP have vanished.

---

<div class="post-metadata">

**Author:** ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)\
**Post date:** [July 26, 2010, 8:41am UTC](https://boards.straightdope.com/t/quick-and-dirty-css-php-help-purely-regarding-design/547527/13 "2010-07-26T08:41:14Z")

</div>

Can you get the logo image to appear ANYWHERE on the page? Even at the end?

If so, as an ugly hack, you can increase the top margin of your text area and then absolutely position your image there.

If there’s something in the PHP preventing your CSS from taking hold, use the **!important** modifier in an inline style for your image, and put the image tag at the very bottom of your page – that would tell the browser “Forget everything you’ve been told before. Do it THIS WAY instead.”

Sample code:

```auto

<head>
<style>
body p:first-child {margin-top: 200px}
</style>
</head>
<body>
<p>Your transaction has been successful.</p>
<p>Whatever.</p>
<p>Whatever.</p>
<p>Whatever.</p>
<p>Whatever.</p>
<p>Whatever.</p>
<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" style="position: absolute !important; top: 0 !important" />
</body>

```

If you can show us the PHP with placeholder data or even the resultant HTML with the personal stuff stripped out, it would help a lot.