How do I get a header image to span the width of the screen without getting distorted?

I've just finished two online classes for Dreamweaver through Ed2go and have a reasonable idea of HTML and CSS. What I'm trying to do is a re-make of my personal web site (www.astral-imaging.com) that I display my astronomy images using all CSS layout and proper HTML coding. The existing site was done long ago using FrontPage and is loaded with tables and nested tables for layout. I need to make several templates for repeated pages but I'm lost on how to create my header banner. I've used Photoshop CS5 to create what I want to use and saved it as a .JPG file. The original canvas size is 1000x200 pixels but I also want the site to use a liquid template so that if the viewer is using a monitor at 1024 width or higher the page will fill the screen.
My target audience is mostly people in astronomy groups that I participate with and their screen resolutions will most like be 1280 and up. The images posted are usually 1000, 2000, and 3000 pixels wide. The reason for this is that there is very faint and small detail in these images and the larger sizes allows the viewer to scroll around in the full sized images to see this detail. There are links so the viewer has a choice of how large an image they want to view. So this explains my rational behind the sizing and I'm left with how to make the header expand without distorting to various sized displays. Below is what I had designed. Am I asking for too much or just a bit too green to know what to do? Any suggestions would be extremely welcomed. The PSD file has the separate 4 layers. What I have though about is the header being multiple images:
the actual background gradient image
the DRO info floated left
Glimpses of Our Universe centered
image floated right
Only issue is I'm not sure if this will work and if so what is the proper coding? I think there needs to be a div container and although I know how to create the div, inserting multiple items into it and using CSS to style them is confusing me. Is there a link to information on DIVs that would help explain this. From what I've seen from my Google searches I haven't seen anything that addresses this. Maybe I need better search terms.
Thanks,
Steve

Nancy,
I appreciate the feed back but this doesn't extend the banner across the page. I understand the header background color filling in the area to the right of the banner image as well as the background color of the body tag. I guess what I'm wondering is if it's possible to have multiple images in the header div tag? I may not even be explaining this correctly. If I were using a table to lay this out it would have 1 row and 3 columns with the gradient image as the background in all 3. I could keep the cell width set to a fixed number for the right and left cell while center cell would be able to span the remainder of the screen width to fill across the top of the page. The hight would adjust to maintain the aspect ratio. Does this make any sense?
Basically the code below is what I'm after but using CSS to lay it out and not a table:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
table {
background-image: url(images/banner_background.png);
text-align: left;
body {
background-color: #000;
.center {
text-align: center;
background-image: url(images/banner_background.png);
.right {
background-image: url(images/banner_background.png);
margin: 1px;
padding: 0px;
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <th width="22%" scope="col"><img src="images/DRO_trans.png" width="325" height="200"></th>
    <th width="59%" class="center" scope="col"><img src="images/glimpses-astral.png" width="450" height="120"></th>
    <th width="19%" scope="col"><img src="images/Thor-3rd-300.jpg" width="300" height="198" alt="Thor's Helmet"></th>
</tr>
<tr>
    <td colspan="3"> </td>
</tr>
</table>
</body>
</html>
If it's any help or you are curious, the png files can be downloaded here: http://www.astral-imaging.com/test_images.zip
Thanks,
Steve

Similar Messages

How can I get a header image to span full width of page?

Hi All
I have tried just about every thing to get this image to span the full width of the page, its fine in design mode but when I view it in preview its centred with white space either side.

Hi Brad
Thanks for your reply, I have treied that also with similar results.

How do I use Adobe Edge to get faded header images on my website?

Trying to use Adobe Edge to get faded header images on my website. Was referred to Adobe Edge because it is supposed to be easy for beginners. I was able to upload my images, but then there was no instruction/direction on what to do next. Everything I clicked just brought me somewhere else. I'm a novice who needs help with coding, as everytime I tried adding coding to my page, it messed it up. I would appreciate if someone can tell me what to do after I upload the images.

Yes, Animate. Again, I uploaded the images, but then, I didn't see any directions on what to do next, as I would like fading header images for my website. I understand that it is supposed to generate the code for my website, which is where I need the most help.

How do I get a "transfer images" button to show up in the solution center?

How do I get a "transfer images" button to show up in the solution center for my officejet 6500 709a on XP?
Scan buttons are displayed and work, as does print.

What installing the twain plug-in, you mean? Go to your applications folder. Find the Adobe Photoshop Elements 11 folder. Look in there for a folder called support files, then for a folder called optional plugins. In the Optional Plugins folder, there should be a folder called ImportModules. Just drag that from the Optional Plugins folder to the regular Plugins folder.
This will be infinitely easier to do if you put your applications folder window into list view, not the default icon view. To do that, click this button at the top of the window:

Can some please provide instructions on how to import an iPhoto library from an old Mac to a new Mac without getting a bunch of duplicates? I tried transferring my pictures using an external hard drive and then copying it to the Pictures folder on my Mac

Can someone please provide instructions on how to import an iPhoto library from an old Mac to a new Mac without getting a bunch of duplicates? I tried transferring my pictures using an external hard drive and then copying it to the Pictures folder on my new Mac. I ended up getting a bunch of duplicates. My old Mac has an older version of iPhoto while the new Mac has iPhoto '11. Is that the cause of the problem? Please advise. Thanks.

Simply copy the iPhoto Library from the Pictures Folder on the old Machine to the Pictures Folder on the new Machine.
Then launch iPhoto. That's it.
This moves photos, events, albums, books, keywords, slideshows and everything else.
Regards
TD

I get an error message when trying to sign into the support community with another Apple id. On the pick a username screen I get "an account utilizing this address already exists...." despite trying a few usernames. Anyone know how I can resolve this?

I get an error message when trying to sign into the support community with another Apple id. On the <pick a username> screen I get "an account utilizing this address already exists.Only one account per email address is allowed on the Apple Support Communities" despite trying a few usernames. Anyone know how I can resolve this?

This problem has been driving me demented. The instructions that Ivan gives have partially worked for me. By following his link
"How to find out if you have multiple Apple IDs" I was able to identify that yes I did have two apple accounts using the same e mail address. One was very old that I used to use for the forum boards and one is my much more recent ID that I use for everything these days. So I changed the e mail address for the old account which is associated with these discussion boards and that's the account that I am now posting this from. However even though the two accounts now have different e mail addresses when I try to log onto the boards with my more recent main apple ID I still get all the same errors as described at the start of this thread by rodgers_j. And of course that's the one I want to use so that I only have one itunes account for everything.
So if anyone has any more hints I'd be very grateful.

Please Help!! How to get the width of the String for print out?

Hi there,
I need to do some printing in my application. I just want to know how can I get the width of the string when it is printed on the paper.
I have tried to use the following code to get the width
Rectangle2D rec = font.getStringBounds(str, new FontRenderContext(null, true, true));
double width = rec.getWidth();
however, the width I got from that function is not correct (the returned width is longer than the printed one)
Does anyone know how to solve this problem?
Thank you and Happy New Year !

hi,
The getFontMetrics(Font) is also defined in the Component class and therefore you can retrieve it even if you dont override the paint method.
try the following (provided ur code extends some class that extends Component indirectly)
FontMetrics f = this.getFontMetrics(this.getFont());
int width = f.stringWidth(str); //str is the String for which u need to check the width.
hope this was useful
happy holidayz

How can i adjest the width of the JTable Header

hi all,
I have putted group header in JTable, due to this the width of the JTable and width of the column of the row is little bit variation. pleases suggest me any way to avoid it.
Thanks
Dayananda B V

TableColumn tCol = null;
        for(int i = 0; i <= 5; i++){
            tCol = tblData.getColumnModel().getColumn(i);
            if(i == 1)
                tCol.setPreferredWidth(130);
            else
                tCol.setPreferredWidth(30);
        }

How do I make a horizontal bar stretch to always fill the width of the browser outside of the wrappe

When I enter 100% in the width field it will fill to the wrapper which is at 1000px, I want just certain Horizontal Bars to fill the width of the browser at all times.
Example is at http://www.hollywoodunderground.com - the bars below the header/links and the bar above the footer. Trying to figure out how to get both of those to always fill the width of the browser while still maintaining the original wrapper for all of the other content. Do I just find a way to get those 2 bars outside of the wrapper into a new wrapper or do I do it within the wrapper?

You would have to set up your construction a bit differently.
You would put the logo and the social media icons in their own <div> set to 1000px, margin 0 auto to horizontally center it
<div id="logoSocialMedia"></div>
Then you would have your black bar <div> set to width: 100% (no need to set this though as it will fill the available space).
<div class="blackBar"></div>
Then you would have your youtube videos <div> set to 1000px, margin 0 auto.
<div id="youTubeVideos"></div>
Then another black bar <div>:
<div class="blackBar"></div>
Get it?

How to increase the width of the Crystal Report

Hello All
How to increase the width of the Crystal report template in the CR designer in .NET 2005 editor ?
I need to design a report which has to accomodate more number of columns.So achieve that i need to redesign the report having more width.
CrystalReports version 10.2.3600.0
Thanks in advance
Srivatsa

HI Srivatsa,
You can make a wider report by creating virtual pages. Virtual pages are the extra pages to the right of the main page that get created to accommodate cross-tabs that are wider than a single page. By inserting a cross-tab in a report then suppressing it, you can create a report that is multiple pages wide.
Insert and Suppress a Cross-Tab
1. On the 'Insert' menu, click 'Cross-Tab'.
2. In the Cross-Tab Expert, click any field and move it into the 'Columns' box, and click any field and move it into the 'Summarized Fields' box. Do not move any fields into the 'Rows' box.
3. Click the 'Customize Style' tab and select the following check boxes:
" Suppress Empty Rows
" Suppress Empty Columns
" Suppress Row Grand Totals
" Suppress Column Grand Totals
4. Click the 'OK' button and then insert the cross-tab into the Report Header section.
5. On the 'Report' menu, click 'Format Sections'. Click 'Report Header' and select the 'Underlay Following Sections' check box.
When you run the report you will not see the cross-tab, but you will be able to scroll to the right and see multiple virtual pages.
====================
NOTES:
" As there are no rows to the Cross-Tab, it does not carry on to Page 2 and the virtual pages do not appear past the first page.
" To increase or decrease the number of virtual pages do one of the following:
- Limit the number of records for the field in the 'Column' box of the 'Cross-Tab Expert' using the 'Select Expert'.
- Change the width of the 'Column' field in the Cross-Tab by moving the edges of the field.
====================
How to Insert Fields on Virtual Pages
You cannot drag-and-drop a field onto a virtual page, you can only do so on the main page. To get a field to appear on a virtual page:
1. Insert the field on the main page.
2. Click the 'Preview' tab.
3. Drag the right edge of the field to the right, onto the virtual page.
4. Drag the left edge of the field to the right, onto the virtual page.
Hope this helps!!
Regards,
Shweta

How to make a JPanel containing buttons take up the width of the window?

I'm creating a GUI and I have a button group that I want to be the width of the window. I have another JPanel on the same window that doesn't have a button group in it and it takes up the width of the window. I don't think I'm doing anything differently creating the two, but I need consistency.
The best way I can explain this is with code, so I created an example of what I am doing here:
import java.awt.*;
import javax.swing.*;
public class test extends JFrame {
     public test() {
          JPanel win = new JPanel();
          JPanel buttonsPanel = new JPanel();
          JPanel statusPanel = new JPanel();
          win.setLayout(new BoxLayout(win, BoxLayout.Y_AXIS));
          buttonsPanel.setLayout(new BoxLayout(buttonsPanel, BoxLayout.Y_AXIS));
          statusPanel.setLayout(new BoxLayout(statusPanel, BoxLayout.Y_AXIS));
//          createRadioButtonsPanel
          ButtonGroup buttons = new ButtonGroup();
          JRadioButton currentMap = new JRadioButton("option1", true);
          JRadioButton newMap = new JRadioButton("option2");
          JRadioButton noMap = new JRadioButton("option3");
          buttons.add(currentMap);
          buttons.add(newMap);
          buttons.add(noMap);
          buttonsPanel.add(currentMap);
          buttonsPanel.add(newMap);
          buttonsPanel.add(noMap);
          buttonsPanel.setBorder(
                    BorderFactory.createTitledBorder("Create: "));
//           createStatusPanel
          JLabel statusLabel = new JLabel("Loading...");
          statusLabel.setBorder(BorderFactory.createLoweredBevelBorder());
          statusLabel.setPreferredSize(new Dimension(400,20));
          statusLabel.setMinimumSize(new Dimension(400,20));
          statusLabel.setMaximumSize(new Dimension(400,20));
          statusPanel.add(statusLabel);
          JPanel statusButtons = new JPanel(new FlowLayout(FlowLayout.RIGHT));
          JButton pauseSearch = new JButton("Pause");
          JButton cancelSearch = new JButton("Cancel");
          statusButtons.add(pauseSearch);
          statusButtons.add(cancelSearch);
          statusPanel.add(statusButtons);
          statusPanel.setBorder(BorderFactory.createTitledBorder("Status: "));
          win.add(buttonsPanel);
          win.add(statusPanel);
          getContentPane().add(win);
          pack();
          setVisible(true);
     public static void main(String args[]) {
          test s = new test();
}When I compile and run this class I get this window:
http://img136.imageshack.us/img136/1538/exampleek5.png
You see how on the bottom, "Status" JPanel takes up the entire width of the window? When the window is resized, the border is also resized. I would love to have the top "Create" JPanel have the same behavior. How do I do this?
Thanks in advance!

It can get confusing when using the BoxLayout. The box layout takes into consideration the X alignment of the components as well as the minimum and maximum lengths.
So I suggest you read the Swing tutorial on [url http://java.sun.com/docs/books/tutorial/uiswing/layout/box.html]How to Use Box Layout for examples and explanations on how these values are used in the layout process.
It may be easier to use a BorderLayout for the high level layout manger, since it will resize a components width when added to the NORTH, CENTER or SOUTH.

I can no longer adjust the width of the Bookmarks Sidebar, how do I fix this issue?

In the past I could hover my mouse arrow over the slider vertical bar to the right of the sidebar and get a 2 headed arrow that I could use to adjust the width of the Bookmarks Sidebar but that stopped working. I need to fix this issue. What do I need to do?

Maybe something you installed to Firefox messed up that feature.
Do you have that problem when running in the Firefox SafeMode? <br />
[http://support.mozilla.com/en-US/kb/Safe+Mode] <br />
''Don't select anything right now, just use "Continue in SafeMode."''
If not, see this: <br />
[http://support.mozilla.com/en-US/kb/troubleshooting+extensions+and+themes]

How to change the width of the variable screen?

Hi
like in the subject mentioned i need to know how i can change the width of the variable screen....
right now i have to scroll if i want to see the right part auf the variable screen...
maybe i can change the width with css?

Hi,
Using CSS specify the table width for the variable screen and include the Css in the header section of the table.

How to change the width of the scrollbar

how to change the width of the scrollbar,
I wanted to have a large scrollbar in all controls (for a touch screen app lets say) then is that possible?
Either through CSS, code,
skins anything really... Any ideas?
Thanks in advance.

Hi,
horizonatal(vertical)ScrollBar.width - in AS/MXML code
horizontal(vertical)ScrollBarStyleName - for style. But I'm not sure that width getted from css.

Hi I am a keen photographer and I have just bought you SD card reader for ipad. This works well but was winding if there is an app that I can view the images on the SD card full screen without having to import them to the iPad or is there a way to do thi

Hi
I am a keen photographer and I have just bought you SD card reader for ipad. This works well but was winding if there is an app that I can view the images on the SD card full screen without having to import them to the iPad or is there a way to do this on the iPad
The reason for buy this was for when I was out and about to get a better view off my images.
I have a iPad 2 16gb
Hope you can help!
Thanks

A couple of weeks ago, (after reading a review in TUAW) I bought a wireless hub/ SD card reader called RAVPower. its app comes with a built in viewer, so you can load it up, and see the pics full screen.

How do I get a header image to span the width of the screen without getting distorted?

Similar Messages

Maybe you are looking for