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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Scroll bars not showing when viewable area is less than minimum width

    I am using a single image as the background for my web page. I am then adding div containers to hold content. The first one I am working with will hold my links to other pages or other sites. I have set a minimum width for the links div to 800px. My monitor has much higher resolution so I can shrink the window down to test looks at such a low width. Unfortunately, though the div links container stops shrinking the content becomes cut off and no scroll bars appear. I expected they would naturally appear. I am testing this in Firefox 3.6.12 at the moment. I know there will be other issues with min-width in IE6 and under, maybe even IE7, can't remember, but this issue seems to need fixing first. I have a div container called "wholepage" right after the body tag. That div container has a minimum width set to 800px as well. Any help would be greatly appreciated. I can add code if it helps, but at this point I didn't think it would matter.

    Eric

  • #2
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Have you tried using the overflow:auto; in your div css?
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    overflow kind of works

    I hadn't tried that - still a bit new to web page design. I added overflow to the wholepage div container which also has a min-width of 800px defined but no scroll bars appeared. I next added it to the div container for just the links section and made sure the 800px minimum width was defined for that element as well. (that is two different elements with 800px min width defined) In this case a scroll bar appears but unless the window is very very short the scroll bar is mostly cut off and when the window narrow much of the scroll bar's width is cut off and scrolling it to the right will not show all of the image.

    I don't want the image to have a min-width or min-height because since everything is based on percentages other elements start to get crunched together or just move into spots they are not suppose to be at.

    Good suggestion so far since a small step forward was achieved but still not acting right.

  • #4
    New Coder
    Join Date
    Nov 2010
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    by image I mean background image for the whole page and the links element is also cut off as some of the links will not appear even when I try scrolling all the way to the right

  • #5
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Do you mind giving me your code or link to the site? This seems like and issue I could fix easily if seen. Quick question though, why do you have a div for your entire page?
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #6
    New Coder
    Join Date
    Nov 2010
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why I have a div for whole document and code

    have a div only because in reading how to create fluid layouts this setup was suggested. Beyond that I have no reason to keep it.


    HTML Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Erich Alan Homepage</title>
    <link href="SiteThemeSetup.css" rel="stylesheet" type="text/css" />


    </head>
    <body>
    <div id="wholepage">

    <img src="Background_W_Logo_LeftPic.png" alt="background" id="bg" />


    <!-- The links in the document -->
    <div id="links">

    <span id="musiclink" class="linksimages"> <a href="http://www.google.com" title="Hear Music"><img alt="Click to Hear Music" title="Hear Music" src="Link_Music.png" class="linksimages"/></a></span>
    <span id="biolink" class="linksimages"> <a href="http://www.yahoo.com" title="The Mind Behind The Music"><img alt="Click To Know The Mind Behind The Music" title="The Mind Behind The Music" src="Link_Bio.png" class="linksimages"/></a></span>
    <span id="performanceslink" class="linksimages"> <a href="http://www.cats.com" title="Upcoming Performances"><img alt="See When and Where I'm Performing" title="See When and Where I'll be Performing" src="Link_Performances.png" class="linksimages"/></a></span>
    <span id="gallerylink" class="linksimages"> <a href="http://www.dogs.com" title="View Photos"><img alt="View Photos" title="View Photos" src="Link_Gallery.png" class="linksimages"/></a></span>
    <span id="morecreativeworkslink" class="linksimages"> <a href="http://www.horses.com" title="View More Creative Works"><img alt="View More Creative Works" title="View More Creative Works" src="Link_MoreCreativeWorks.png" class="linksimages"/></a></span>

    </div>

    </div>

    </body>
    </html>



    CSS Code:

    html, body {position: fixed; height: 100%; width: 100%; margin: 0; padding: 0; border: 0}
    body {width : 100%; height: 100%; background-repeat: no-repeat}
    #wholepage {min-width: 800px; min-width: 800px}
    a {outline: none}
    #links {border-style: none; border-width: 0px; width: 50%; height: 80%; padding: 0px; margin: 0px; position: fixed; top: 22%; left: 16%; z-index: 4; min-width: 800px; overflow: auto}
    #musiclink {position: relative; left: 0%}
    #biolink {position: relative; left: 10%}
    #performanceslink {position: relative; left: 20%}
    #gallerylink {position: relative; left: 30%}
    #morecreativeworkslink {position: relative; left: 40%}
    .linksimages {border-style: none; border-width: 0px}




    img#bg {position:fixed; top:0; left:0; width:100%; height:100%; min-width: 800px}



    Let me know if any other information will help

    Eric

  • #7
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    AAAAAA o.O

    That almost burns my eyes a little brah.. I suggest first putting those between two code tags so that I can see it a little better. (HINT: edit the post>highlight the code>press the number hash mark on the text editor box)

    Eh, I'm not big on using fluid layouts, but if that is what you want, go for it. Now lets get some proper technique...

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Erich Alan Homepage</title>
    <link href="SiteThemeSetup.css" rel="stylesheet" type="text/css" />
     
     
    </head>
    <body>
    <div id="wholepage">
     
     
    <!-- The links in the document -->
    <div id="links">
     
    <span id="musiclink" class="linksimages"> <a href="http://www.google.com" title="Hear Music"><img alt="Click to Hear Music" title="Hear Music" src="Link_Music.png" class="linksimages"/></a></span>
    <span id="biolink" class="linksimages"> <a href="http://www.yahoo.com" title="The Mind Behind The Music"><img alt="Click To Know The Mind Behind The Music" title="The Mind Behind The Music" src="Link_Bio.png" class="linksimages"/></a></span>
    <span id="performanceslink" class="linksimages"> <a href="http://www.cats.com" title="Upcoming Performances"><img alt="See When and Where I'm Performing" title="See When and Where I'll be Performing" src="Link_Performances.png" class="linksimages"/></a></span>
    <span id="gallerylink" class="linksimages"> <a href="http://www.dogs.com" title="View Photos"><img alt="View Photos" title="View Photos" src="Link_Gallery.png" class="linksimages"/></a></span>
    <span id="morecreativeworkslink" class="linksimages"> <a href="http://www.horses.com" title="View More Creative Works"><img alt="View More Creative Works" title="View More Creative Works" src="Link_MoreCreativeWorks.png" class="linksimages"/></a></span>
     
    </div>
     
    </div> 
     
    </body>
    </html>
     
     
    CSS Code:
     
    html, body {position: fixed; height: 100%; width: 100%; margin: 0; padding: 0; border: 0}
    body {width : 100%; height: 100%; background-repeat: no-repeat}
    #wholepage {min-width: 800px; min-width: 800px
    background-image: url("Background_W_Logo_LeftPic.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left top; 
    }
    a {outline: none}
    #links {border-style: none; border-width: 0px; width: 50%; height: 80%; padding: 0px; margin: 0px; position: fixed; top: 22%; left: 16%; z-index: 4; min-width: 800px; overflow: auto}
    #musiclink {position: relative; left: 0%}
    #biolink {position: relative; left: 10%}
    #performanceslink {position: relative; left: 20%}
    #gallerylink {position: relative; left: 30%}
    #morecreativeworkslink {position: relative; left: 40%}
    .linksimages {border-style: none; border-width: 0px}
    Ok, I cleaned that up a tad bit, not completely considering I am at work with no access to a notepad or anything for me to see better or see the result. Check it out and see how it looks to you. Then, we'll go from there.

    OFF_NOTE: I wonder if it would be easier for you to put all those links in an array and call them from there. Hmmm..
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #8
    New Coder
    Join Date
    Nov 2010
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    here is my original code wrapped in [CODE] as you suggested

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Erich Alan Homepage</title>
        <link href="SiteThemeSetup.css" rel="stylesheet" type="text/css" />
    
    
    </head>
    <body>
        <div id="wholepage">
    
        <img src="Background_W_Logo_LeftPic.png" alt="background" id="bg" />
    
    
            <!-- The links in the document  -->
            <div id="links">
    
            <span id="musiclink" class="linksimages"> <a href="http://www.google.com" title="Hear Music"><img alt="Click to Hear Music" title="Hear Music" src="Link_Music.png" class="linksimages"/></a></span>
            <span id="biolink" class="linksimages"> <a href="http://www.yahoo.com" title="The Mind Behind The Music"><img alt="Click To Know The Mind Behind The Music" title="The Mind Behind The Music" src="Link_Bio.png" class="linksimages"/></a></span>
            <span id="performanceslink" class="linksimages"> <a href="http://www.cats.com" title="Upcoming Performances"><img alt="See When and Where I'm Performing" title="See When and Where I'll be Performing" src="Link_Performances.png" class="linksimages"/></a></span>
            <span id="gallerylink" class="linksimages"> <a href="http://www.dogs.com" title="View Photos"><img alt="View Photos" title="View Photos" src="Link_Gallery.png" class="linksimages"/></a></span>
            <span id="morecreativeworkslink" class="linksimages"> <a href="http://www.horses.com" title="View More Creative Works"><img alt="View More Creative Works" title="View More Creative Works" src="Link_MoreCreativeWorks.png" class="linksimages"/></a></span>
        
            </div>
    
        </div>    
    
    </body>
    </html>



    CSS

    Code:
    html, body      {position: fixed; height: 100%; width: 100%; margin: 0; padding: 0; border: 0}
    body            {width : 100%; height: 100%; background-repeat: no-repeat}
    #wholepage      {min-width: 800px; min-width: 800px}
    a               {outline: none}
    #links          {border-style: none; border-width: 0px; width: 50%; height: 80%; padding: 0px; margin: 0px; position: fixed; top: 22%; left: 16%; z-index: 4; min-width: 800px; overflow: auto}
    #musiclink      {position: relative; left: 0%}
    #biolink        {position: relative; left: 10%}
    #performanceslink   {position: relative; left: 20%}
    #gallerylink    {position: relative; left: 30%}
    #morecreativeworkslink {position: relative; left: 40%}
    .linksimages    {border-style: none; border-width: 0px}
    
    
    
    
    img#bg {position:fixed; top:0; left:0; width:100%; height:100%; min-width: 800px}
    Last edited by bigdoggit; 11-13-2010 at 03:17 AM. Reason: pasted in my original code

  • #9
    New Coder
    Join Date
    Nov 2010
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    tried your cleaned up version but it does not allow the background image to fill the viewable window. The image just shows at its original size of 1024 by 768.

  • #10
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Then why not shrink the size using http://<a href="http://www.photobuck...bucket.com</a> or a photoeditor? I will help you definitely for sure in about an hour is that ok? I leave work about 30 minutes then it takes me 30min to get home. I'll then get you all set to go. ^_^
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #11
    New Coder
    Join Date
    Nov 2010
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help later is fine

    ya, that is fine to help later when you get some free time. I appreciate it. I'm not sure what you mean by shrink it using photobucket. I have an image made in microsoft expression design. It has been saved as a png graphic and is being used as the background image for the body of my page. I do not need the graphic itself shrunk nor expanded. What I really want is a page that will have images stretch or shrink to fit whatever windows size the user has displayed. I will want a minimum width and height. When these values are not met I will want scroll bars so someone can easily view the entire page. Another angle I am thinking about is that of smart phones and the web. I would really rather have a webpage that displays well in these browsers and thought a more fluid layout might achieve this. Finding some issues there too, but still, that is my whole train of though. It is 11:15 pm here, EST, not sure what time it is by you. I will check back in in an hour or so and see where you are at. Thanks again for offering your time.

    Eric

  • #12
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    I'm here ^_^
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #13
    New Coder
    Join Date
    Nov 2010
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Me too

    me too, where are we at then

  • #14
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Ok, this is what I have so far. Look at it in your browser bc I don't have your pics so I can't tell precisely.

    HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Erich Alan Homepage</title>
        <link href="SiteThemeSetup.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body>
        <div id="wholepage">
    
        <!-- The links in the document  -->
            <div id="links">
    
            <span id="musiclink" class="linksimages"> <a href="http://www.google.com" title="Hear Music"><img alt="Click to Hear Music" title="Hear Music" src="Link_Music.png" class="linksimages" /></a></span>
            <span id="biolink" class="linksimages"> <a href="http://www.yahoo.com" title="The Mind Behind The Music"><img alt="Click To Know The Mind Behind The Music" title="The Mind Behind The Music" src="Link_Bio.png" class="linksimages" /></a></span>
            <span id="performanceslink" class="linksimages"> <a href="http://www.cats.com" title="Upcoming Performances"><img alt="See When and Where I'm Performing" title="See When and Where I'll be Performing" src="Link_Performances.png" class="linksimages"/></a></span>
            <span id="gallerylink" class="linksimages"> <a href="http://www.dogs.com" title="View Photos"><img alt="View Photos" title="View Photos" src="Link_Gallery.png" class="linksimages" /></a></span>
            <span id="morecreativeworkslink" class="linksimages"> <a href="http://www.horses.com" title="View More Creative Works"><img alt="View More Creative Works" title="View More Creative Works" src="Link_MoreCreativeWorks.png" class="linksimages" /></a></span>
        
            </div>
    
        </div>    
    
    </body>
    </html>
    CSS:

    Code:
    /* CSS Document */
    html, body      {
        position: fixed; 
        height: 100%; 
        width: 100%; 
        margin: 0 auto; 
        padding: 0; 
        border: 0;
        background: url("Background_W_Logo_LeftPic.png") repeat top left;
        min-width: 800px; 
        min-width: 800px;
        }
    #wholepage, a    {
        outline: none;
        }
    
    #links          {
        border-style: none; 
        border-width: 0px; 
        width: 50%; 
        height: 80%; 
        padding: 0px; 
        margin: 0px; 
        position: fixed; 
        top: 22%; left: 16%; 
        z-index: 4; 
        min-width: 800px; 
        overflow: auto;
        }
    #musiclink      {
        position: relative; 
        left: 0%;
        }
    #biolink        {
        position: relative; 
        left: 10%;
        }
    #performanceslink   {
        position: relative;
        left: 20%;
        }
    #gallerylink    {
        position: relative; 
        left: 30%;
        }
    #morecreativeworkslink {
        position: relative;
         left: 40%;
         }
    .linksimages    {
        border-style: none; 
        border-width: 0px;
        }
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #15
    New Coder
    Join Date
    Nov 2010
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background image is tiled

    the background image is tiled instead of stretching across the entire screen. Because of this the links are in the wrong place


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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