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…
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.
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, 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.
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.
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.
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.
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.
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.
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:
<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.