Problem when page is minimized

[tagman2001]

Hi hope this is the right place to post these questions,

I have two problems if some would please help me:

1. I have noticed when I minimize the landing page the content, images; search bar and the site navigation are all over the place (which is the only page I am close to finishing). The page looks distorted and the columns aren’t line up. When the page is maximized it looks the way I want it to look. I guess what I’m asking is there a code to fix this problem or should I be looking to the way I coded the page?
2. What code can I use to replace the (depreciated align=”middle”) to align the search box with the dimensions of 72 wide by 32 high, placing the image directly in the middle of the box?

I am using HTML 4.01 strict with CSS. I did not post the html for the landing page because I thought there might be too much code. I would like to thank you in advance for any help you can give.

Thanks,

tagman2001

[jscheuer1]

1 ) When you 'minimize' a page you cannot see it. You probably mean 'restore down'. In any case, you seem to be talking about what happens when a page is viewed through different sized windows. Similar things happen when a page is viewed at different resolutions and/or text sizes. The best solution is a more flexible design that allows your content to flow into the space alloted for it with any overflow being able to be scrolled into view vertically. There are other approaches.

2 ) I'm not aware of any particular element which is called a 'search box'. However, if you want to place an image in the middle of something, you can do it at least two ways:


<div style="text-align:center;"><img src="whatever.jpg"></div>

or:


<div><img style="width:50px;height:20px;margin:0 auto;" src="whatever.jpg"></div>

These both assume that the division is of the dimensions you mentioned.

Note: Styles should be in a stylesheet.

[tagman2001]

Thanks for your reply,

Being new to coding I’m sure I use the wrong terminology and it is frustrating for me trying to communicate. Would you guide me to a source for a more flexible design or give me an example of one?

The following code is for a Google search within the site that I am trying to build:


<!-- SiteSearch Google -->
<form method="get" action="http://www.google.com/custom"><p>
<input type="hidden" name="domains" value="www.xyz.com">
<label for="sbi" style="display: none">Enter your search terms</label>
<input type="text" name="q" size="31" maxlength="255" value="" id="sbi">
<label for="sbb" style="display: none">Submit search form</label>
<input type="submit" name="sa" value="Search" id="sbb">
<input type="radio" name="sitesearch" value="" checked id="ss0">
<label for="ss0" title="Search the Web">web</label>
<input type="radio" name="sitesearch" value="www.xyz.com" id="ss1">
<label for="ss1" title="Search www.abc.com">www.xyz.com</label>
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" style="border: 0em;" alt="Google" width="75" height="32"></a>
<input type="hidden" name="client" value="pub-">
<input type="hidden" name="forid" value="1">
<input type="hidden" name="channel" value="">
<input type="hidden" name="ie" value="ISO-8859-1">
<input type="hidden" name="oe" value="ISO-8859-1">
<input type="hidden" name="safe" value="active">
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#2D8930;VLC:663399;AH:center;BGC:FFFFFF;LBGC:FFFFFF;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;LH:50;LW:250;L:http://www.xyz.com;FORID:1">
<input type="hidden" name="hl" value="en">
</p>
</form>
<! -- SiteSearch Google -->
I cann't center the Google image in the middle. The text, radio buttons and input field area are to the left of the Google image. Would you know what code is need or where I might be able to read about a fix?

I tried to use the original code Google provided but it wouldn’t validate (it did center the image) I have to modify it a bit. I am only using div on this site so I had to remove some of the tables. I just am not sure of what to do.

Thanks,

tagman2001

[jscheuer1]

There are many page templates available here at DD and many many more available on the web. You should look for 'fluid' or 'liquid' templates, but go ahead and use any that work out and suit your purposes. The ones on DD are here:

http://www.dynamicdrive.com/style/layouts/

About the Google code not validating. The entire Google site is designed in quirksmode. So, it will usually not validate to DOCTYPE. But, perhaps you are using a stricter DOCTYPE than you need. You should almost certainly not be using an XHTML DOCTYPE. Also, the folks at Google generally know what they are doing, such that if they give out code to insert in your web page, even if it doesn't validate, it works and can be used with confidence. Writing properly for quirks is trickier than writing and validating to standards, but here you can have confidence in the work of the Google designers and in their making updated code available should it become necessary/required.

That said, it probably wouldn't be all that hard to validate the Google code, but I cannot do that without knowing your DOCTYPE. Also, it would really help to see the Google code itself, not 'what you have tried so far' that doesn't work.

You can try for the Google image:


<img src="http://www.google.com/logos/Logo_25wht.gif" style="border: 0em;vertical-align:middle;" alt="Google" width="75" height="32">

But, I am not certain what you are going for. That is why I would want to see the original code from Google.

[tagman2001]

John,

Thank you for the code it works well. As far as the doc type I am using what was suggested by another coder on this forum HTML 4.01 Strict “should use nothing else”. I have no idea which doc type I should use; I guess I will over time.

I'm sure of Google and I have no doubt in the work of the Google designers. I am so new to coding and so far out of my field of expertise. It’s like a fish out of water. I am looking to learn a new skill and build something for my children’s future.

It seems that I have more questions. Does the fluid layout allow me to insert more than three columns? I am not trying to promote my site here; the landing page is located at www.crazydollarsaver.com.

I want to thank you and do find your input useful. I too donate to a lot of worth while charities as noted in your signature.

Regards,

tagman2001

[Ryan Fitton]

I have noticed that in IE 7. Your Google search bar goes over your websites navigation bar. And your "Free Stuff" collumn is mre further upwards than your others.

[tagman2001]

Thanks for the observation and heads up I am trying to fix the problem. What resolution are you using? I have tested the page with IE 7 and FF 1290 by 960 pixels resolution. I am now looking at a fluid layout as suggested (jscheuer1).

It looks like I have to go back to the drawing board. :confused:

Regards,

tagman2001

[djr33]

So many overlapping problems. Huge problems in Safari 2, and most are present in Firefox 2 (mac), but I understand you are trying to use divs, not tables.
Not really sure how to fix it. Seems like you may need to start in a new direction to begin with.

Just take the window and resize it manually, slowly, and see things slide. It's a mess.

[Veronica]

One of the things you're doing is trying to position things vertically within your divs, with all those lefttop, leftmiddle,righttop, etc. Unless you do it right, that can get messed up in different browsers, resolutions, etc.

Simplify your layout. As John suggested, find a layout with fluid and fixed content. Basically, a container div (holds everything), a header div and and a footer div (which you've got), and then just 3 divs in between, maybe with a fixed-fluid-fixed layout for those 3 divs.

Then take your content and put it into those 3 divs. As you add content, keep testing in different browsers and different reslutions. That way, you don't wind up with a finished design and nasty surprises after all that work (which I guess you've got now-sorry).

You can also read up more about divs, floats, etcs, for example http://css.maxdesign.com.au/floatutorial/ or http://www.w3schools.com/css/css_positioning.asp

Good luck!

[tagman2001]

Thanks for all your help,

I have tried to follow your suggestions and used a fluid layout. Please let me know how it looks and what I need to do. I am sure I have a long way to go. How do you (hoping am use the right terminology) resize or put space on the sides of the layout so it is centered? Your input is greatly appreciated. www.crazydollarsaver.com

Thanks

tagman2001

[djr33]

Much better.

The google search layer is still way off to the right if the page is made very thin, the crazydollarsaver logo image is also over to the right a bit, and a thing or two of the content below slides over on top of something else.
The bottom also is a problem in that the black background doesn't stay under the white navigation links if they extend two rows due to lack of space. Looking into placing them within a div that has a black background would be a good idea.

Overall, much better and almost acceptable, but I'd see if you can work on those issues.

[tagman2001]

Thanks for the input.

I made some of the changes you suggested, not sure if they are correct. Any idea how I might be able to make the three columns in the middle centered (say 90&#37;) and leaving the top of the page and footer the size they are now?

Thanks

tagman2001

[tagman2001]

Can really use the have figuring how to fix the problems. I need help putting borders around the columns, I am so confused. :confused:

Thanks
tagman2001