...

View Full Version : 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" />


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

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




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


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 www.photobucket.com (http://www.photobucket.com) 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:



<!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:



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

bigdoggit
11-13-2010, 06:10 AM
if you have any graphic, png or jpg I would think should work, and substitute it for mine, maybe that will help. Of course, you might be doing that right now, but just in case it is a good idea, there you go.

Chris Hick
11-13-2010, 06:41 AM
Or you can apply all the pics into an attachment? But as you said earlier, the background is tiled(not that it is noticeable), but I do not see it messing with the links at all.

bigdoggit
11-13-2010, 06:50 AM
the background image is not something that can be tiled though. Image a picture taken - if the picture is tiled it is very noticeable because it has defined edges. That is the same with my image. Suffice to say I need my image to not be tiled. Will that issue impede scroll bars from working correctly or do you think they are separate?

Chris Hick
11-13-2010, 06:57 AM
They are separate problems. The background has nothing to do with the scroll bar ha.

bigdoggit
11-13-2010, 07:13 AM
As far as the scroll bars not showing, if you substitute just any picture you grab off line can you see the same issue on your end?

Chris Hick
11-13-2010, 07:43 AM
The scrollbars show up on my view every single time.

bigdoggit
11-13-2010, 07:51 AM
okay, that is strange. Wonder what could be different. Wonder if my image is the problem. What image do you use? Are you using just a colored background?

bigdoggit
11-13-2010, 07:54 AM
Just tried a background I pulled from the web, using my same code, although a scroll bar appears at the bottom it is largely cut off, only a top little bit shows unless I shrink the window down quite a bit. Are you using the same code I supplied? Or your modified code. I am going to try yours to see if that makes the difference. If so I still have the problem of needing my image to not be tiled, but let me see.

Chris Hick
11-13-2010, 07:57 AM
I just used a pictured that was colored black. I've been diving between your supplied code and my code, trying to find out what you are talking about. I noticed your scroll bar is only half way on the screen. I've been trying to fix that as well.

bigdoggit
11-13-2010, 08:03 AM
Here is a screen shot of what I mean. You will see the scroll bar, but only the very top is showing, much of the bottom is cut off. Also, even if I scroll all the way to the right, all of the link images do not show. The screen shot does not illustrate that very well, but hopefully my explanation makes sense.

bigdoggit
11-13-2010, 10:01 AM
Have to catch some sleep, I will check in tomorrow.

bigdoggit
11-14-2010, 03:00 AM
Have you had a chance to play with this issue anymore? Or is it just working for you so you are not sure what to suggest?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum