refiking Posted June 9, 2007 Share Posted June 9, 2007 Anyone have any idea how to script a header similar to the PHP Freaks header? What I'm interested in doing is adding a picture that extends to the length of the page like theirs, but I only want to add the next line to it. Where it says Hello (user). With the timestamp on the right. Can anyone help me with this? Quote Link to comment Share on other sites More sharing options...
christofurr Posted June 9, 2007 Share Posted June 9, 2007 There are probably several ways to code a header like that, but after taking a peek at the source of this page, I'm assuming that they got it done with HTML. You can create a table of a certain width within the containing div which you'll probably want to center. In the table, you'll have two rows - one for the header (with a column span of 2) and another for the greeting and date. In the top row, you'll place a div with 100% width and the height of your header image, no margin or padding, and a background image that repeats horizontally. In that same div, you'll place your header image. In the next row of the table, you'll create two columns - one for the greeting and another for the date. The first column will have 50% width. The second column of the second row will also have 50% width and must align it's text to the right. You must take into consideration the proportions of the reapeating background image and header image. If the header image is a few pixels too short or too long (horizontally), it will show. Quote Link to comment Share on other sites More sharing options...
christofurr Posted June 9, 2007 Share Posted June 9, 2007 <html> <body> <!-- Containing div --> <div style="width: 100%; margin-left: 20px; margin-right: 20px; margin-top: 15px; border: 0px;"> <!-- Header table --> <table style="width: 100%; margin: 0px; padding: 0px; border: 0px;" cellpadding="0px" cellspacing="0px"> <!-- Top row --> <tr> <td colspan="2"> <!-- Header div. Adjust to fit height of your header. Replace image URL with your own --> <div style="width: 100%; height: 40px; background-image: url('backgroundimage.jpg'); background-repeat: repeat-x;"> <!-- Header image. Replace image URL with your own --> <img src="headerimage.jpg" style="border: 0px; margin: 0px;" /> <!-- End header div --> </div> <!-- End top row --> </td> </tr> <!-- Bottom row --> <tr> <!-- Greeting column --> <td style="width: 50%;"> <!-- Code for greeting --> <?php /* Some code here */ ?> <!-- End greeting column --> </td> <!-- Date column --> <td style="width: 50%;"> <!-- Code for date --> <?php /* Some code here */ ?> <!-- End date column --> </td> <!-- End second row --> </tr> <!-- End header table --> </table> <!-- Continue with the rest of your web page's content --> <p> This is content. </p> <!-- End containing div --> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
christofurr Posted June 9, 2007 Share Posted June 9, 2007 It's not as complicated as it looks. You can neaten up the styles with CSS. Quote Link to comment Share on other sites More sharing options...
taith Posted June 9, 2007 Share Posted June 9, 2007 <table width=100%> <tr> <td>Hello <?=$user?></td> <td style="text-align:right;"><?=date("Y")?></td> </tr> </table> Quote Link to comment Share on other sites More sharing options...
refiking Posted June 9, 2007 Author Share Posted June 9, 2007 How do I input the code you just gave me into the original code given earlier? Quote Link to comment Share on other sites More sharing options...
refiking Posted June 9, 2007 Author Share Posted June 9, 2007 I have a javascript header above the one you all gave me and it won't line up perfectly. How can I change that? Here is a link to see what I mean www.ctpweb.com/leads/index.php Quote Link to comment Share on other sites More sharing options...
penguin0 Posted June 9, 2007 Share Posted June 9, 2007 depends on if you want the javascript header lower or the image. you can change the offset of the javascript in the config file. Quote Link to comment Share on other sites More sharing options...
refiking Posted June 9, 2007 Author Share Posted June 9, 2007 Can't I move the PHP Freaks Header over like a half of an inch to the left? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.