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
https://forums.phpfreaks.com/topic/54845-solved-php-freaks-header/
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.

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.