Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    5
    Thanked 0 Times in 0 Posts

    I cannot get my page to view right on smaller (minimized) windows.

    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

  • #2
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Sorry if links are not allowed in the forum. I checked rules and didn't see anything.

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    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...

  • Users who have thanked macwiz for this post:

    AsylumBoston (07-18-2008)

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.


    Frank
    Last edited by effpeetee; 07-18-2008 at 09:11 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    AsylumBoston (07-18-2008)

  • #5
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by effpeetee View Post
    Just a small thing, but your code starts with </html> tag.
    It's finished before it starts.

    Frank
    yes, you are right,

    Quote Originally Posted by AsylumBoston View Post
    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:
    Code:
    </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

  • Users who have thanked oesxyl for this post:

    AsylumBoston (07-18-2008)

  • #6
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    In order to make a site flexible, you need to size things in ems or &#37;ages.
    Position:absolute is a non starter.

    There is help here.

    And an example here.

    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
    Last edited by effpeetee; 07-18-2008 at 10:15 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    AsylumBoston (07-19-2008)

  • #8
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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.
    Code:
    <!--[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.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • Users who have thanked jerry62704 for this post:

    AsylumBoston (07-19-2008)

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Upload an html file after incorporating the changes(suggested so far) to your code.txt, so that we can proceed easily.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    Quote Originally Posted by effpeetee View Post
    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.


    Frank

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

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by macwiz View Post
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •