...

View Full Version : I cannot get my page to view right on smaller (minimized) windows.



AsylumBoston
07-18-2008, 01:25 AM
Hi,

Apologies in advance but I am a total newb and I am using dreamweaver to build my site.

I have a 3 column setup. The 2 side columns overlap the middle when the window size is lowered. I am assuming that it looks like that on a lower res computer screen. Also everything looks good in ie and ff on laptop @ 1468x800 but when I make resolution smaller the images and sidebars infringe onto the middle column. The text resizes but images do not.

I have searched around and found auto image resizing won't work well, if at all.

Is there a way the site can be made so it scrolls horizontally when the window is shrunk?

I don't know what to post here as far as code so I'll post a link to a txt version of my code:
http://www.asylumboston.com/code.txt

I am trying to learn html/css but it is all new to me. Any help would be appriciated.

Thanks

AsylumBoston
07-18-2008, 01:26 AM
Sorry if links are not allowed in the forum. I checked rules and didn't see anything.

macwiz
07-18-2008, 01:33 AM
One: Externalize all your CSS. No inline CSS. It is a bad idea when it comes to editing the site later one, even with a Dreamweaver template.

Second, why do you care what it looks like if the window is minimized? You can't even see it than. You just see the title in the taskbar... Unless I am misunderstanding you...

effpeetee
07-18-2008, 09:22 AM
Just a small thing, but your code starts with </html> tag.
It's finished before it starts.

Also this from W3 validator.


This page is not Valid HTML 4.01 Transitional!
Result: Failed validation, 91 Errors

You can check here. (http://validator.w3.org/#validate_by_input)


Frank

oesxyl
07-18-2008, 09:33 AM
Just a small thing, but your code starts with </html> tag.
It's finished before it starts.

Frank
yes, you are right, :)


Sorry if links are not allowed in the forum. I checked rules and didn't see anything.
the links are allowed.

the problem is, how effpeetee said, that the header is messed:


</html>
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd")
(html)
head>


I presume, after looking to the rest of the code, that is not a problem for you to fix it.

regards

AsylumBoston
07-18-2008, 10:26 AM
Sorry, foolish of me not to mention. I took out headers because the txt page was displaying as html when i clicked the link so I took them out to try and fix the problem and it displayed text after that. They were in there while I was having this issue.

Thanks for the advice on externalizing the css. Do I just cut and paste them into a txt and save it as a css file?

Also on the minimizing thing. I mean just when the window is smaller. The pictures overlap and the middle column shrinks. I want to get it so when the window is made smaller it scrolls instead of overlapping like that.

If I could get it so the whole site shrinks, pics and text, when it is smaller window or smaller resolution monitor it would be better.

I'm sure these are stupid questions but I'm kinda helpless right now. Just launched the site over my radio show and I'm getting good hits. I don't want to take it down to fix but also do not want to lose visitors because of resolution issues.

I did trial and error and searched the net for help but didn't quite get the right thing to happen. Many times I just broke the page and had to reload the current code.

Thanks everyone for the help. It is greatly appriciated. If anyone wants a link put on my site let me know, its the least I could do for the help.

effpeetee
07-18-2008, 11:02 AM
In order to make a site flexible, you need to size things in ems or &#37;ages.
Position:absolute is a non starter.:eek:

There is help here. (http://www.maxdesign.com.au/presentation/liquid/index.htm)

And an example here. (http://nopeople.com/CSS/background_image_resize/)


Do I just cut and paste them into a txt and save it as a css file?

Yes, save the css as a name.css file.
Also, Dreamweaver is not a good browser. The code produced is far from good practice.

Check your code in FireFox. It will give you the most accurate result. Better if you can get away from WYSIWYG editors. They keep you from learning the code. I speak from experience.

Frank

jerry62704
07-18-2008, 03:49 PM
You can cut the stuff between <style> and the end, eliminate those two tags, put an include in your html to your new xxx.css file. You can do the same with the javascript you have there as well to your new xxx.js file.

However, you have conditionals that may require a little thought.

<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColLiqHdr #sidebar2, .thrColLiqHdr #sidebar1 { padding-top: 30px; }
.thrColLiqHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->


What I do for this same problem is put the conditional in the html like this:
<!--[if IE]> <div id="IEbugs"> <![endif]-->
.
.
.
<!--[if IE]> </div> <![endif]-->

and then in my css I'll have this:

body {
background-color: #ffff99;
font-family: Verdana, Arial, sans-serif;
font-size: 130&#37;;
}

#IEBugs body {
font-size: 90%;
}

The division "IEBugs" only appears in IE (you can target specific versions if you like) and the css markup only affects (changes the default) IE browsers.

Just an idea.

abduraooft
07-18-2008, 04:06 PM
Upload an html file after incorporating the changes(suggested so far) to your code.txt, so that we can proceed easily.

macwiz
07-18-2008, 06:29 PM
Just a small thing, but your code starts with </html> tag.
It's finished before it starts.

Also this from W3 validator.



You can check here. (http://validator.w3.org/#validate_by_input)


Frank


Nice catch on that </html>. I passed right over that.

effpeetee
07-18-2008, 08:06 PM
Nice catch on that </html>. I passed right over that.
My mind works sometimes. My 83 year old eyes work badly. How I saw that I'll never know.

Miracles sometimes happen, obviously.

Frank

AsylumBoston
07-19-2008, 06:38 AM
Upload an html file after incorporating the changes(suggested so far) to your code.txt, so that we can proceed easily.

I'll get going on that. Thanks.

Thanks again everyone for the help so far. This forum is extremely useful



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum