I am in the process of creating my first website and I’m having a problem. I have a picture at the top of each page that takes up the entire length of the page. The problem is, every time I minimize the window the picture does not shrink with it. Instead, it drops to the middle of the page and overlaps the content in my sidebar. The same thing happens with my embedded guestbook. Is there a code I can use with the pictures and guestbook to make them shrink when the window is minimized?
There may be a little disconnect in nomenclature. When I "minimize" a window, it goes into the process tray at the bottom of my screen. Nothing is left on the screen. So I think your talking about running your browser at something less than full screen. I only use full screen occasionally, and a less than full screen browser, does show a lot of web site issues.
It is common for layouts to be fluid and adjust to the visitors browser window. But that doesn't usually apply to images or sections that have fixed widths. In many cases, making a window too small for it to display properly generates scroll bars. This then forces the visitor to scroll their browser to see all of the web site. However, in many cases, like yours, display areas simply overlay others. It all depends on how it's designs.
There is no generic fix all code that can be used. It may be possible for me to make some suggestions for fixing your issue, but without seeing the problem myself, I can't be of much help. Plus, if your using something like the Website Wizards, a workable solution may not be possible.
Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....
Ok so I have finished my website and I have included the link to it in this post. If you go to my website you will see what I mean, when you make the browser smaller the picture at the top drops down and overlaps other content. Could someone offer some addvice on how to fix this? Thanks!
You are using a 1200 pixel wide image, though you have altered the code (or clicked and dragged, perhaps, in Wizard) to make it 871 pixels wide on your page. Resize it to 450 or thereabouts.
You are using a 1200 pixel wide image, though you have altered the code (or clicked and dragged, perhaps, in Wizard) to make it 871 pixels wide on your page. Resize it to 450 or thereabouts.
Thank you for you advice. Although that does work, I want the picture to fill the length of the screen. Is there anyway to keep the width the same without having the picture drop down? On other sites this does nmot happen. Sorry but I have never made a website before so I am very lost!
Yes, using the Website Wizard matters, in many ways. The Website Wizards are meant for beginners and users that don't know, or don't want to know, anything about HTML/CSS. There is certainly nothing wrong with that. Everyone should have the ability to create a web page, no matter what their skills or interests. If your not trying to do anything very complicated, the Wizards work fine. When a user starts asking it to do things beyond it's design, is when it gets dicey.
For the most part you are correct, on other sites the image shifting to the bottom doesn't happen. However that is because they use a different HTML structure than the Wizard does. I could go into a lot of explanation on why the Wizard designs do what they do, but most people wouldn't understand, and it doesn't really matter anyway. The Wizard hasn't changed in years and is probably not going to change.
So, here is something for you to try. When you are in the Wizard's editor and are viewing the main content area of a page, like the "index.html", click on the Code Editor tab. You should see the HTML code for the main content area. At the very beginning you should see some code that looks like the following:
This should tell the image to only stretch to 100% of the content area. Once you have changed it, save your work and go through the publishing sequence. The view your page through your browser. As you change browser sizes, the image should change in width. Here is a link to a copy of your home page that I modified to handle the image better. I also increased the height by 100 pixels. I also removed the google ads because they were not needed for the example.
It's not the best solution, but is fairly simple to implement. You will have to make that same change on every page you want the image.
Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....
