Jump to content

[SOLVED] PHP Freaks Header


refiking

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

<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>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.