HTML Help

travisbickles · Joined: 22 Oct 2008 Posts: 4

this is the first website i have ever made, and i am hitting some snags. I have been checking my work in IE7 and things are different in firefox; however that is not my main issue. My image that i am using as my background is large enough to require scrolling however i have somehow locked the image in such a way so that it does not scroll... in fact no scroll bar on the right shows up at all... i have not used any fixed background code or anything... here is the internal css i have used to insert my background

<style type="text/css">
body
{
background-color: #0b407e;
background-image: url("website-outline.jpg");
background-repeat: no-repeat;

}
</style>

i am not sure if that is the problem or not... but i am stumped... please help!

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4289 Location: MS

Whether you trigger the browser to produce a scoll bar depends on the window size and screen res to a certain extent. Does resizing the browser smaller kick in a scroll bar?

Firefox is the only browser that is close to being CSS 2.1 compliant. ALWAYS use it as your main reference on how your site looks. IE is too sloppy in parsing bad code which is why everyone loves it. If it looks wrong in FF and right in IE doesn't mean IE is correct.

Got a link to online page with problem?

BTW, it's easier to write all that CSS in shorthand:

Code: <style type="text/css">
body
{
background: #0b407e url("website-outline.jpg") no-repeat center scroll;
}
</style>

Change "center" to whatever position you need using top/center/left combinations or percents for top/left.

sticks464 · Joined: 31 Dec 2006 Posts: 2631

If your page content is not enough to exceed the window size (resolution)there will be no scrollbar.

travisbickles · Joined: 22 Oct 2008 Posts: 4

when i resize my browser to make it smaller it does not add in a scroll bar. Also the image is large enough because when i position it as center bottom the lower half of my image appears.

i do not have a link to the site as it is to replace an old out of date one for the club but still has some important info on it. If you want to take a look at my code though i could email it or something along those lines

sticks464 · Joined: 31 Dec 2006 Posts: 2631

Post your html and css so we can see what is happening.

travisbickles · Joined: 22 Oct 2008 Posts: 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> LSSC Website... Son!</title>

<link rel="stylesheet" type="text/css" href="pro_dropdown_3/pro_dropdown_3.css" />

<script src="pro_dropdown_3/stuHover.js" type="text/javascript"></script>

<style type="text/css">
body
{
background: #0b407e url("website-outline.jpg") no-repeat top center scroll;
}
</style>

</head>

<span class="preload1"></span>

<span class="preload2"></span>

<ul id="nav">
<li class="top"><a href="#nogo22" id="Main" class="top_link"><span class="down">Main </span></a>
<ul class="sub">
<li><a href="#nogo23">Home</a></li>
<li><a href="#nogo26">About</a></li>
<li><a href="#nogo24">Executive</a></li>

<li><a href="#nogo25">Partners</a></li>
<li><a href="#nogo26">Rider Profile</a></li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="Trips" class="top_link"><span class="down">Trips </span></a>
<ul class="sub">
<li><a href="#nogo23">Jay PeaK</a></li>

<li><a href="#nogo24">Le Massif</a></li>
<li><a href="#nogo25">Banff</a></li>
<li><a href="#nogo26">Ontario</a></li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="Local Events" class="top_link"><span class="down">Local Events</span></a>
<ul class="sub">

<li><a href="#nogo23">Events Local</a></li>
<li><a href="#nogo24">The Masters</a></li>
<li><a href="#nogo25">Rail Jam</a></li>
<li><a href="#nogo26">Super-fun-time</a></li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="Photos" class="top_link"><span class="down">Photos </span></a>

<ul class="sub">
<li><a href="#nogo23">Local</a></li>
<li><a href="#nogo24">Quebec</a></li>
<li><a href="#nogo25">Vermont</a></li>
<li><a href="#nogo26">Banff</a></li>
</ul>
</li>

<li class="top"><a href="#nogo22" id="How To" class="top_link"><span class="down">How To </span></a>
<ul class="sub">
<li><a href="#nogo23">Tricks</a></li>
<li><a href="#nogo24">Tune</a></li>
<li><a href="#nogo25">Set Up</a></li>
</ul>
</li>

<li class="top"><a href="#nogo22" id="Buying?" class="top_link"><span class="down">Buying? </span></a>
<ul class="sub">
<li><a href="#nogo23">Boots</a></li>
<li><a href="#nogo24">Boards</a></li>
<li><a href="#nogo25">Bindings</a></li>
</ul>
</li>

</body>
</html>

.preload1 {background: url(three_0a.gif);}
.preload2 {background: url(three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; background:#fff url(three_0.gif) no-repeat; position:absolute;left:147px;top:134px; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#8c117c; text-decoration:none; font-size:14px; font-weight:bold; padding:0 0 0 0px; cursor:pointer;background: url(three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif)right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#000; background: url(three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top; padding-bottom:3px;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #000; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#fff; text-decoration:none;border:1px solid #337ccd;}
#nav li ul.sub li a.fly
{background:#337ccd url(arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#337ccd; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#000 url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}

#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #337ccd; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#337ccd url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#000 url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}

sticks464 · Joined: 31 Dec 2006 Posts: 2631

Without the preload1 and preload2 images sizes available I'd say there is not enough content to initialize a scrollbar. All that's on the page other than the preloads is a menu bar.

travisbickles · Joined: 22 Oct 2008 Posts: 4

so i might feel like an idiot for asking this but does that mean that the background image will not show its entire self unless there is something at the bottom of it... and if so wow not my best effort... I will try it out tomorrow after my exam and if that fixes the problem god bless you... you guys must hate noobs

sticks464 · Joined: 31 Dec 2006 Posts: 2631

Yes, the content must extend past the bottom of the screen to get a scrollbar to appear irregardless of the background image size.

Straystudio · Joined: 14 Apr 2008 Posts: 297 Location: Nord Italy

sticks464 wrote: If your page content is not enough to exceed the window size (resolution)there will be no scrollbar.
sticks has been able to explain very well the matter by a few words; I second at all:

since an image is set as background-image of BODY, of a DIV as well, it won't force to completely appear likewise if called in play by IMG Tag, instead it is taken into consideration according to the page growing needing.
Simulate to have the Document without any background-image; so, the page it generates, extends to as many pixels as based on pulling content or on which size You gave any container Element (TABLE, DIV, etc.).

Then, to move such a screen/glass over another where the background-image is:
- if the main-screen is larger than the downer background-image screen, You will get the background-image to appear as surrounded/framed by a flat background-color You can still be able to set;
- on the contrary, if the main-screen is shorter than the downer background-image screen, You will get a slice of the background-image to appear.

Properties else positioning the background-image, allow to play with these either frames or cuts: where to have them.

Now, You may arrange Your layout this way, embeding the whole BODY content inside a DIV; this, getting the background-image and being sized as the background-image itself:

<html>
<body>

<div style="height: 768px; width: 1024px; background-image: url('image.jpg');">

< >
</ >

</div>

</body>
</html>

You might even assign WIDTH and HEIGHT to the BODY Tag directly, indeed; I prefer the above scheme, though.