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

bigdoggit · 11-13-2010, 12:25 AM

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

Chris Hick · 11-13-2010, 12:45 AM

Have you tried using the overflow:auto; in your div css?

bigdoggit · 11-13-2010, 01:21 AM

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.

bigdoggit · 11-13-2010, 01:22 AM

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

Chris Hick · 11-13-2010, 02:14 AM

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?

bigdoggit · 11-13-2010, 02:37 AM

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" />


<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

Chris Hick · 11-13-2010, 02:59 AM

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..

bigdoggit · 11-13-2010, 03:12 AM

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}

bigdoggit · 11-13-2010, 03:16 AM

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.

Chris Hick · 11-13-2010, 03:24 AM

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. ^_^

bigdoggit · 11-13-2010, 04:11 AM

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

Chris Hick · 11-13-2010, 05:29 AM

I'm here ^_^

bigdoggit · 11-13-2010, 05:54 AM

me too, where are we at then

Chris Hick · 11-13-2010, 05:58 AM

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;
    }

bigdoggit · 11-13-2010, 06:03 AM

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