Trouble with CSS background scaling

Hi,
Please take a look at the following page I am working on at
the moment
http://www.dpweddingphotography.co.uk/test.html
I am trying to acheive the look of
http://tomwickyphotography.com/index2.php?v=v1
Is this possible in Dreamweaver using CSS/Java? When I reduce
my browsers window and make it really narrow, up pops the white
blank space at the bottom of the page which I am trying to avoid.
You can see on the other site that when it gets to a certain point
it stops scaling down. The same with it vertically also.
Now I know this other site is done in flash but can it be
done in dreamweaver and if so how please?
Thanks
Here's the code I am using for testing:

Im not really sure I understand your question, but if you
were to make this
graphic (ContactSheet-001.jpg ) a background image and set it
to repeat,
would that not solve the issue?
"bensmithhull" <[email protected]> wrote in
message
news:gmvntr$icj$[email protected]..
> Hi,
>
> Please take a look at the following page I am working on
at the moment
>
http://www.dpweddingphotography.co.uk/test.html
>
> I am trying to acheive the look of
>
http://tomwickyphotography.com/index2.php?v=v1
>
> Is this possible in Dreamweaver using CSS/Java? When I
reduce my browsers
> window and make it really narrow, up pops the white
blank space at the
> bottom
> of the page which I am trying to avoid. You can see on
the other site that
> when
> it gets to a certain point it stops scaling down. The
same with it
> vertically
> also.
>
> Now I know this other site is done in flash but can it
be done in
> dreamweaver
> and if so how please?
>
> Thanks
>
> Here's the code I am using for testing:
>
>
>
> <html>
> <head>
> <title>BG</title>
> <style type="text/css">
> body {
> /* for IE; otherwise, BG isn't fully stretched */
> margin: 0px;
> }
>
> #bg {
> position: fixed;
> margin: 0px;
> border: 0px;
> padding: 0px;
> left: 0px;
> top: 0px;
> width: 100%;
> height: 100%;
> overflow: hidden;
> z-index: 0;
> }
>
> #bg img {
> width: 100%;
> }
>
>
> #body {
> position: absolute;
> left: 0%;
> top: 0%;
> width: 100%;
> height:100%;
> padding: 0;
> z-index: 10;
> }
>
> li {
> margin-bottom: 2em;
> }
> </style>
> 
> </head>
>
> <body>
> 
> <div id="bg"><img
src="images/ContactSheet-001.jpg"></div>
>
> <div id="body">Put the page's content
here.</div>
> </body>
> </html>
>

Similar Messages

Trouble with css background

Hey guys, I am having trouble with some code. I have nested divs inside of a container dive for the body copy, but I am having trouble with the background of the container div going behind the nested divs. I only have this issue with the background when I go to float the nested divs.
Below is a copy of my html and a copy of my linked css style sheet.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Optimus Lens</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<style type="text/css">
#sector {
     background-repeat: no-repeat;
     background-position: left;
     width: 869px;
     margin-top: -51px;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
#oag {
     width: 574px;
     margin-left: 23px;
     float: left;
     /* [disabled]position: relative; */
#small_col {
     width: 279px;
     margin-right: 23px;
     float: right;
     /* [disabled]position: static; */
</style>
</head>
<body onload="MM_preloadImages('images/home_over.jpg','images/our_mission_over.jpg','images/products_over.jpg','images/news_over.jpg','images/order_over.jpg','images/contact_over.jpg')">
<div id="CONTAINER">
       <div id="header"><img src="images/header_top.png" width="916" height="39" />
       <img src="images/header_logo.jpg" width="916" height="95" />
      <img src="images/header_image.jpg" width="916" height="266" />
       <img src="images/header_bar.jpg" width="916" height="9" />
</div>
      <div id="menuContainer">
     
                <ul>
                <li>
                <img src="images/fold_left_top.png" width="22" height="35" /><img src="images/menu_left.jpg" width="197" height="35" />
                </li>
                <li>
                    <div class="menu n1"><a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/home_over.jpg',1)"><img src="images/home_up.jpg" alt="home" name="home" width="66" height="35" border="0" id="home" /></a></div></li>
                <li>
                  <div class="menu n2"><a href="mission.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Our Mission','','images/our_mission_over.jpg',1)"><img src="images/our_mission_up.jpg" alt="Our Mission" name="Our Mission" width="124" height="35" border="0" id="Our Mission" /></a></div></li>
                <li>
                    <div class="menu n3"><a href="products.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','images/products_over.jpg',1)"><img src="images/products_up.jpg" alt="products" name="Products" width="98" height="35" border="0" id="Products" /></a></div></li>
                <li>
                    <div class="menu n4"><a href="news.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','images/news_over.jpg',1)"><img src="images/news_up.jpg" alt="News" name="News" width="77" height="35" border="0" id="News" /></a></div></li>
                <li>
                    <div class="menu n5"><a href="order.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Order','','images/order_over.jpg',1)"><img src="images/order_up.jpg" alt="Order" name="Order" width="77" height="35" border="0" id="Order" /></a></div></li>
                <li>
                  <div class="menu n6"><a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/contact_over.jpg',1)"><img src="images/contact_up.jpg" alt="Contact" name="Contact" width="80" height="35" border="0" id="Contact" /></a></div></li>
                <li>
                  <img src="images/menu_right.jpg" width="197" height="35" /><img src="images/fold_right_top.png" width="22" height="35" /> </li>
                </ul>
      </div>
       <div id="header_bottom"><img src="images/fold_left_bottom.png" width="22" height="38" /><img src="images/header_bottom.jpg" width="916" height="38" /><img src="images/fold_right_bottom.png" width="22" height="38" />
    </div>
     <div id="bodycopy">
       <div id="sector">
      <img src="images/home/sector_top.png" width="869" height="341" alt="sector frames" />
      </div>
       <p> </p>
       <div id="oag">
      <img src="images/home/oag_join.png" width="574" height="281" alt="save with oag" />
      <p> </p>
      <img src="images/home/bottom.png" width="574" height="132" />
      </div>
      <div id="small_col">
      <img src="images/home/optimize_small.png" width="279" height="132" />
      <p> </p>
      <img src="images/home/intuition_small.png" width="279" height="132" />
      <p> </p>
      <img src="images/home/intuition_small.png" width="279" height="132" />
      </div>
     </div>
    <div id="footer"><img src="images/footer.png" width="916" height="52" />
</div>
</div>
</body>
</html>body {
     margin: 0px;
     background-image: url(images/background_fade_04.jpg);
     background-repeat: repeat-x;
     background-position: top;
     background-color: #DCDCDC;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
#box1 {
     background-image: url(images/bodycopybox_01.png);
     background-repeat: no-repeat;
     background-position: left;
     height: 54px;
     width: 869px;
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
#box2 {
     background-image: url(images/bodycopybox_02.png);
     background-repeat: repeat-y;
     background-position: left;
     width: 869px;
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
.bodycopybox {
     padding-right: 40px;
     padding-left: 40px;
.bodycopyboxheader {
     padding-right: 40px;
     padding-left: 40px;
     font-weight: bolder;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     color: #21368b;
#box3 {
     background-image: url(images/bodycopybox_04.png);
     background-repeat: no-repeat;
     background-position: left;
     height: 31px;
     width: 869px;
     margin:0 auto;
#box4 {
     background-image: url(images/bodycopybox_03.png);
     background-repeat: no-repeat;
     background-position: left;
     height: 31px;
     width: 869px;
     margin:0 auto;
p {
     margin: 0px;
#header_bottom {
     width: 960px;
     margin:0 auto;
#CONTAINER {
     width: 100%;
     margin:0 auto;
#header {
     width: 916px;
     margin:0 auto;
#menuContainer {
     width: 960px;
     margin:0 auto;
     height: 35px;
#menuContainer ul{
     list-style:none;
     height:35px;
     margin:0;
     padding:0;
#menuContainer li{
     float:left;
     height:35px;
     margin:0;
     padding:0;
#menuContainer li a{
     text-align:center;
     float:none;
     height:35px;
     margin:0;
     padding:0;
div.menu{position:relative;}
.n1{
     width:66px;
     float:left;
     display:inline-block;
     clear:both;
.n2{
     width:124px;
     float:left;
     display:inline-block;
     clear:both;
.n3{
     width:98px;
     float:left;
     display:inline-block;
     clear:both;
.n4{
     width:77px;
     float:left;
     display:inline-block;
     clear:both;
.n5{
     width:77px;
     float:left;
     display:inline-block;
     clear:both;
.n6 {
     width:80px;
     float:left;
     display:inline-block;
     clear:both;
#bodycopy {
     background-color: #FFFFFF;
     width: 916px;
     padding: 0px;
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
#footer {
     width: 916px;
     margin:0 auto;
     padding: 0px;

Try this:
#CONTAINER {
width: 900px;
margin:0 auto;
background: #FFF;
overflow:hidden; /**float containment**/
/**There is no need for #sector division, you can delete it.**/
#oag {
width: 574px;
float: left;
margin-left: 25px;
#small_col {
width: 279px;
float: right;
margin-right: 25px;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Viewing Troubles with CSS web

Hello,
I am still having trouble with a web page that I was asked to
redesign. I decided to implement CSS into the page to change the
appearance and navigation, however, the javascript (inherited) that
was used on the page is having problems. I don't not know
javascript, therefore I really can't address that issure right now.
The page is centered in all of the browsers, along with the
header and the container for the tab menu. The issue is the other
containers that have side navigation or the content within the tab
menu container.
My concern is that the page is viewing correctly in IE6 and
Opera but not in Netscape and Firefox. When I preview the page in
the browsers, I get an error message in the status bar "done but
errors on page" (still views correctly in IE & Opera).
Hopefully, this all makes sense and everyone is not off
enjoying pre-4th July celebrations to respond. -Thanks!
css style

Did you post a link to your page?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Iwannaknow2" <[email protected]> wrote in
message
news:e8b5du$9q2$[email protected]..
> Hello,
>
> I am still having trouble with a web page that I was
asked to redesign. I
> decided to implement CSS into the page to change the
appearance and
> navigation,
> however, the javascript (inherited) that was used on the
page is having
> problems. I don't not know javascript, therefore I
really can't address
> that
> issure right now.
>
> The page is centered in all of the browsers, along with
the header and the
> container for the tab menu. The issue is the other
containers that have
> side
> navigation or the content within the tab menu container.
>
> My concern is that the page is viewing correctly in IE6
and Opera but not
> in
> Netscape and Firefox. When I preview the page in the
browsers, I get an
> error
> message in the status bar "done but errors on page"
(still views correctly
> in
> IE & Opera).
>
> Hopefully, this all makes sense and everyone is not off
enjoying pre-4th
> July
> celebrations to respond. -Thanks!
> [email protected]
>

I am having trouble with CSS. Displays right in DW but not in web browser

Hello,
I am having difficultiy getting my webpage to look the way it does in Dreamweaver in a browers (All 5 of them). My problems are with:
- Title Heading Content
- Sidebar
I have two lines in my heading with the name of the organization. I made two rules. Header H1 and a sub header. For some reason while previewing them in a browser there is a gap between the two words. But in DW there is not. I do not want the gaps. How can I fix it?
In a browser the side bar does not come all the way down. There is a small gap between it and the footer. Like the other problem this does not appear in DW only in the browers.
Any help would be appreciated! I am still learning CSS.
I believe these are the only two files you need to look at.
Thanks for the help!

Also how can you see if your ISP offers the free web server space?
Contact your internet service provider (ISP). Often this is your telephone or cable broadband provider too. If not, there are many free or very low cost remote server hosts around. Do a Google search.
I did do the validator and it told me I was fine. I did not do a CSS one though.
Good. So we know it's not an HTML error. Get the FF Web Developer Toolbar. It permits you to edit CSS in your browser to see how changes effect the layout plus a lot of other cool stuff.
Sorry I'm still new to all of this.
Don't fret, Tim. We all started in the same place. You'll catch on soon enough.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Trouble with CSS Positioning

Hello-
I am working with a built-in Dreamweaver CSS template (2
Column, Fixed, Header & Footer). I am trying to get the two
divs that are nested inside the container div to always be 100%
height of that container div... Just can't seem to get it right.
For example, I have a div named "Container". Then I have two
nested divs, one called "LeftSideBar" (set to float: Left), the
other named "MainContent" (no float). When I go to set the
positioning, I put the height of the interior divs to 100%, but
only the "MainContent" div is adjusting to the height of the
outside "Container" div. The "LeftSideBar" stays the same and does
not grow to fill 100% of the Container.
Below is the code for the three Divs mentioned above... Any
help would be much appreciated.
PS - Here is a link to the page...
Executive.html
Here is the CSS code for the three Divs:

Anyone? I would really appreciate the help!

Trouble with CSS div column

Just got DW CS3 and having a good time learning the new
features. About to pull my hair out regarding one issue though, and
I have definitely hit the wall, I pretty sure I tried every option,
but maybe I am missing something. Here is the page in question:
http://www.grpg.org/NewDesign
I cannot get the right and left hand columns to just stop
where the main container stops, i.e. the white section, before the
footer. As you can see on the right hand column, if I make the
height 100%, it goes past the footer, and if I make it a fixed
length, like on the left column, it does not extend all the way to
the bottom...I need them both to stretch with the main container,
i.e. the white part. I have tried all the positioning tags,
relative, absolute, etc. and none of them seem to give me what I
want. Please HELP!

The best (i.e., non-javascript) method to make columns look
to be the same
height is to use a faux-column method. Google that....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"SnakEyez02" <[email protected]> wrote in
message
news:g6snvo$6c8$[email protected]..
> Divs do not work like tables, so if you expand 2 divs
down next to each
> other
> they will keep their respective heights unlike tables
which expand. I
> would
> recommend taking a look at the source code of the
following example and
> read
> over the tutorial that accompanies it:
>
>
http://www.projectseven.com/tutorials/css/pvii_columns/col3fluid.htm
> Example
>
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
>
> Project Seven also has some other good tutorials so I'll
just give you
> that
> link for a later time:
>
>
http://www.projectseven.com/tutorials/index.htm
>
>

Please help beginner with CSS background-image

I'm using Dreamweaver CS4. I set up a local site on my computer. D:Data\Local_sites\Gravity_Works. Under this directory using Dreamweaver I created 3 folders - css, images and Templates. In the images folder I have an image - bg_body_winter.jpg. In the Templates folder I have Gravity-Works-Home01.dwt . I created a new page form the template file and named it index-test01.html and saved it directly in the Gravity_Works folder
I have this css code in a linked css file in the css folder :
body {
    background: url(/images/bg_body_winter.jpg) no-repeat scroll center top #C1CAD6;
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
I uploaded the site to a test folder on my server at fatcow.com. You can see the page using the link below.
http://www.openrangeimaging.com/Test/Gravity-Test/index-test01.html
The image appears as it should in Dreamweaver Live View. It does not appear in Design view. It also does not appear when previewing the local file in a browser. The image does not appear when looking at the index-test01.html file thats on the server using the link above. The background-color I specified shows up but not the image.
I'm confused about how I should name the path to the image. I beleive it should be site root relative so that no matter where I upload the site, the image can be found. Can anyone tell me how I should name the path to the image correctly.
I feel like I should know how to do this and have searched around in the online help and the tutorial books I have but I'm just not getting it.
TIA for any help.

body {
    background: url(/images/bg_body_winter.jpg) no-repeat scroll center top #C1CAD6;
Using a site root relative path, means the server will look for the images folder at
http://www.openrangeimaging.com/images
Try using a doc relative path while you're testing (remove the leading / from the path).

Trouble with css borders- won't show in browser

When I link my external style sheet, my borders work when I preview them in ie, but when I put my site (including the external style sheet) I cannot see the borders. My borders are around tables and inside tables and around images. In some docs, the css border will show if I attach it to the doc, but if I make the css an external style sheet, it won't work. Any suggestions?
Thank You!

BossDJ is just asking for a link to your page. Do you have it uploaded anywhere? Even if it's not a good looking page, it might be the easiest way for you to get help.
From what you say, I would guess the problem might be the way you are linking to your external style sheet.
Try looking in the head of your document and copy the code for that into the forum post.
<link href="../css/contact.css" rel="stylesheet" type="text/css" media="all" />
That's an example of a link to a style sheet in one of my pages. It's the red part that might be going wrong for you.
Martin

Having trouble with CSS Properties panel

copying all from a button (example). Many properties such as gradient don't always seem to be shown in the properties and therefor not carried across to the external (DW) page? What am I doing wrong? No problem modifying CSS but shouldn't it be there?
In fact if I don't put in a border to the button only the dimensions seem to be there?

The .tif file format isn't generally recommended for web use; it's intended more for print. Historically, some browsers haven't supported the format, if I recall correctly, though many of them may do so now. (Just checked Firefox and Safari, and both seem to display the format just fine.)
It could be that Dreamweaver doesn't recognize the .tif format. (I'm a little lazy to test this theory at the moment, but it seems quite likely.) Here's one rather old thread on this topic: http://forums.adobe.com/thread/26977
Incidentally, this is straying from the topic of your original post and would have been better posted as a new discussion.

CSS Background properties

Hi there and thanx for helping me out.
I'm having trouble with my background properties in CSS.
I used CS3's Two Columns, Header & Footer, Fixed template
to build my
site.
I have a background which I want to use. It must not repeat
and also
must be fixed and not scroll with the page.
When using this:
background-image: url(../graphics/background.jpg);
background-repeat: no-repeat;
The image shows perfectly well
BUT, when adding:
background-attachment: fixed;
my background does not appear and has disappeared.
Can someone please help me? This happens with both FireFox
and IE.
Thank you so long.
Deon

Try something like this. Good luck, Tom
table
margin-top: auto !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: auto !important;
width: 850px !important;
height: 100% !important;
text-align: left !important;

Some help with my background

Hey all. I just started on dreamweaver and I'm having trouble with the background. I made it myself in another adobe program and saved it in jpg, tif and psd. The image is 4000 x 4000 px. DW doesn't like tif and doesn't accept it. Now, for the psd and jpegs, it takes them and makes them the background but it zooms in rediculously and bloats the image.
THanks

Browsers have no ability to read a photoshop .psd file, you should only be using .jpg, .gif and .png for best cross-browser rendering.
Also, 4000 x 4000 pixels is HUGE for a webpage. You really should never get more than 2000 pixels in either direction and even that is a very large image for online purposes. A background image over 200KB is too large. It would take almost 1 minute for that single file to download over a 56k modem.
To Optimize your image in Photoshop, open the image and hit Ctrl + Shift + Alt (or command) + S to Save For Web.
Click the 2-Up tab and take a look at the file size and speed of download for the image. You can click the bottom image in the 2-Up and move the Quality slider for higher or lower quality. That will affect the file size and load time. Choose the lowest quality setting that doesn't make your image degrade too far and click Save.
EDIT: DW isn't zooming in at all, it is simply displaying the file at full size (without the reduction in size you are likely using in Photoshop). If you are using PS to view the entire image all at once, you are likely zoomed out several steps and are only viewing it at 16-25% actual size. My 23" monitor is only 1920 pixels wide and 1080 tall, a 4000 pixel image needs to be reduced to 22% or so in order to view the entire thing without scrolling in PS.

Trouble with spacing of divs vertically

Hi all,
I am having trouble with CSS and vertically stacking my divs, In the following code there are a number of identical divs and I want them to stack one upon the other like in a list. At the moment I need to hit returns after each div to get below the one above and it puts way too much room in between each div doing this. I am at a loss how to do set the amount of spcae between them and also to make one go directly below the other.
Any and all help greatly appreciated
Thanks Rick
<bodystyle="margin:0; padding:0;">
<div class="logo">
<p><img src="images/spinlogonewsml.jpg" alt="Spin City Logo" border="0" style="position: absolute; top: 10px; left: 500px; /></p>
<p> </p>
<p> </p>
</div>
<div class=main">
<div class="imagebutton" id="left"><img src="images/img_16_n.png" width="40" height="40" alt="left button" /></div>
<div class="help">Rotate the Object or Panorama left one increment.</div>
<p> </p>
<div class="imagebutton" id="right"><img src="images/img_17_n.png" width="40" height="40" alt="Right Button" /></div>
<div class="help">Rotate the Object or Panorama right one increment.</div>
<p> </p>
<div class="imagebutton" id="Plus"><img src="images/img_18_n.png" width="40" height="40" alt="Plus Button" /></div>
<div class="help">Zoom into the image a step at a time.</div>
<p> </p>
<div class="imagebutton" id="minus"><img src="images/img_19_n.png" width="40" height="40" alt="Minus Button" /></div>
<div class="help">Zoom out of the image a step at a time.</div>
<p> </p>
<div class="imagebutton" id="AutoRotate"><img src="images/img_20_n.png" width="40" height="40" alt="Auto Rotate Button" /></div>
<div class="help">Starts or stops auto rotation of the Object or Panorama.</div>
<p> </p>
<div class="imagebutton" id="DefaultView"><img src="images/img_23_n.png" width="40" height="40" alt="Default Vew Button" /></div>
<div class="help">Resets the Object or Panorama to it's starting position.</div>
<p> </p>
<div class="imagebutton" id="RotateMode"><img src="images/img_25_n.png" width="40" height="40" alt="RotateMode" /></div>
<div class="help">
Sets the mouse interactive mode to 'Rotate' allows for rotating the Object when zoomed in, toggles with 'Move' button below.
</div>
<p> </p>
<div class="imagebutton" id="MoveMode"><img src="images/img_24_n.png" width="40" height="40" alt="Move Mode Button" /></div>
<div class="help">Sets the mouse interactive mode to 'Move' allows for dragging the Object when zoomed in, toggles with 'Rotate' button above.</div>
<p> </p>
<div class="imagebutton" id="SoundButton"><img src="images/img_28_n.png" width="40" height="40" alt="Sound Button" /></div>
<div class="help">Use this button to mute the sounds played by the interactive presentation.</div>
<p> </p>
</div>
</body>
</html>

Way too many divisions. All you need is one main division or possibly two. The rest is easily contained inside <p> tags.
Copy and paste this into a new HTML document.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vr help File</title>
<style type="text/css">
/**zero out browser default settings on everything**/
* {margin:0; padding:0; line-height: 100%; font-size: 100%;}
p {
line-height: 1em;
font-size: 16px;
margin-bottom: 12px; /**space between paragraphs**/
#logo {
float:right;
width: 35%;
margin-right: 150px /**adjust as req'd**/
</style>
</head>
<body>
<div id="logo">
<img src="http://www.spincityimaging.com/images/spinlogonewsml.jpg" width="74" height="53" class="logo" />
</div>
<p><img src="http://www.spincityimaging.com/images/img_16_n.png" width="40" height="40" alt="left button" />Rotate the Object or Panorama left one increment.</p>
<p><img src="http://www.spincityimaging.com/images/img_17_n.png" width="40" height="40" alt="Right Button" />Rotate the Object or Panorama right one increment.</p>
<p><img src="http://www.spincityimaging.com/images/img_18_n.png" width="40" height="40" alt="Plus Button" />Zoom into the image a step at a time.</p>
<p><img src="http://www.spincityimaging.com/images/img_19_n.png" width="40" height="40" alt="Minus Button" />Zoom out of the image a step at a time.</p>
<p><img src="http://www.spincityimaging.com/images/img_20_n.png" width="40" height="40" alt="Auto Rotate Button" />Starts or stops auto rotation of the Object or Panorama.</p>
<p><img src="http://www.spincityimaging.com/images/img_23_n.png" width="40" height="40" alt="Default Vew Button" />Resets the Object or Panorama to it's starting position.</p>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Need help with Page Layout and Background Scaling

hello, everyone.
I am in the process of designing a new website for myself,
and while I was researching nicely designed pages to use as
inspiration, I stumbled upon this site:
http://www.jeffsarmiento.com/
obviously, the design is very impressive, but it also
incorporates a lot of web mechanics that I have been trying to
figure out, so I will use this page as an example.
one thing I need help with is backgrounds. as you can see in
the posted website, the creator used a seamlessly tiled paper
texture to display the bulk of his content on. also make not of the
pattern that is located to the left of the paper texture. how do I
create seamless backgrounds like this that will scale to fit any
amount of content or any resolution? I can't imagine that the guy
that made that site created a new size background every time he
made an update, so there has to be an easier way.
the second thing that I am having trouble with is general
site layout. I have read that most sites used series of invisible
tables to organize there content, but when I open the source of
this page in dreamweaver, he was using something different. div
tags? should I be using these? who do I use them? are there any
general layout tips that someone could pass on to me? perhaps a
link to a good tutorial?
please help me. i am very confused.
thanks so much.

IMO not a good site to emulate. To wit:
Top background image:
http://www.jeffsarmiento.com/images/bg-top.jpg;
745px
x 350px 137K
Main background image:
http://www.jeffsarmiento.com/images/bg-tile.jpg;
745px x 950px 130K
Total page size: 454K (Check here:
www.websiteoptimization.com)
Website usability experts routinely recommend a maximum page
size of ~80K
Check out the We We Scale @ www.FutureNowInc.com/wewe/ where
they suggest,
"You speak about yourself approximately 0,003 times as often
as you speak
about your customers. Might that have an impact on your
effectiveness?"
That is 100% consistent with the #1 Web Design mistake:
"Believing people
care about you and your web site." or to phrase more
expansively, "Our site
tries to tell you how wonderful we are as a company, but not
how we're going
to solve your problems."
www.sitepoint.com has some excellent books on making a
website actually
attractive and usable at the same time.
Walt
"beWILLdered_" <[email protected]> wrote in
message
news:[email protected]...
> hello, everyone.
> I am in the process of designing a new website for
myself, and while I was
> researching nicely designed pages to use as inspiration,
I stumbled upon
> this
> site:
>
http://www.jeffsarmiento.com/
> obviously, the design is very impressive, but it also
incorporates a lot
> of
> web mechanics that I have been trying to figure out, so
I will use this
> page as
> an example.
> one thing I need help with is backgrounds. as you can
see in the posted
> website, the creator used a seamlessly tiled paper
texture to display the
> bulk
> of his content on. also make not of the pattern that is
located to the
> left of
> the paper texture. how do I create seamless backgrounds
like this that
> will
> scale to fit any amount of content or any resolution? I
can't imagine that
> the
> guy that made that site created a new size background
every time he made
> an
> update, so there has to be an easier way.
> the second thing that I am having trouble with is
general site layout. I
> have
> read that most sites used series of invisible tables to
organize there
> content,
> but when I open the source of this page in dreamweaver,
he was using
> something
> different. div tags? should I be using these? who do I
use them? are there
> any
> general layout tips that someone could pass on to me?
perhaps a link to a
> good
> tutorial?
> please help me. i am very confused.
>
> thanks so much.
>

Spry Sliding Panel bugs with Flash SWF, iFrames, CSS background images

Greetings,
I'm working on a site right now that is build with Spry 1.6
Sliding Panels. On the home panel I have integrated a looping SWF,
and scrolling iFrames on the Overview panel. After extensive
research on these forums, I'm still scratching my head at a few
bugs listed below:
• Firefox (MAC v2.0.0.14)
- The SWF on the home panel doesn't hide properly when
sliding to a different panel. I have set 'wmode opaque' parameters
to the flash file, but this seems to have not resolved the issue.
- Additionally, I've noticed that sometimes the SWF will not
finish sliding into the correct position when clicking to the home
panel (the SWF will stop sliding several pixels left of the
original positioning).
- The SWF (which happens to be a loop animation) resets every
time the home panel is visited. In my testing, this does not happen
in any other browser.
- On the Overview panel, scrolling iFrames are used on the
"Staff Profiles". These iFrames don't hide properly when clicking
through other panels, as the scroll bars are still viewable.
- Overall, the sliding animation is a bit choppy compared to
all other browsers. I can live with this, but I wonder if I have
improper code somewhere?
• Opera (MAC v9.27)
- Same issue as above concerning the fact that the SWF
appears outside of the sliding panel view port.
• IE 6
- CSS background images flash during the sliding panel
animation.
* Site page links *
Main URL
Home
Page iFrame
Overview
Page iFrame
* CSS *
Main
site-wide CSS
Sliding
Panels CSS
* Scripts *
Sliding
Panels Sript
Any suggestions, pointers would be much appreciated!
Cheers,
Chris

Greetings,
I'm working on a site right now that is build with Spry 1.6
Sliding Panels. On the home panel I have integrated a looping SWF,
and scrolling iFrames on the Overview panel. After extensive
research on these forums, I'm still scratching my head at a few
bugs listed below:
• Firefox (MAC v2.0.0.14)
- The SWF on the home panel doesn't hide properly when
sliding to a different panel. I have set 'wmode opaque' parameters
to the flash file, but this seems to have not resolved the issue.
- Additionally, I've noticed that sometimes the SWF will not
finish sliding into the correct position when clicking to the home
panel (the SWF will stop sliding several pixels left of the
original positioning).
- The SWF (which happens to be a loop animation) resets every
time the home panel is visited. In my testing, this does not happen
in any other browser.
- On the Overview panel, scrolling iFrames are used on the
"Staff Profiles". These iFrames don't hide properly when clicking
through other panels, as the scroll bars are still viewable.
- Overall, the sliding animation is a bit choppy compared to
all other browsers. I can live with this, but I wonder if I have
improper code somewhere?
• Opera (MAC v9.27)
- Same issue as above concerning the fact that the SWF
appears outside of the sliding panel view port.
• IE 6
- CSS background images flash during the sliding panel
animation.
* Site page links *
Main URL
Home
Page iFrame
Overview
Page iFrame
* CSS *
Main
site-wide CSS
Sliding
Panels CSS
* Scripts *
Sliding
Panels Sript
Any suggestions, pointers would be much appreciated!
Cheers,
Chris

CSS -- background color doesn't show with scroll bar

I have a nav bar with a background-color that shows up fine if the image opens to the right size. If, however, the window opens small and I have to use the scroll bar to move things over, the color for the nav bar isn't there.
Any thoughts would be appreciated.
Here's the code:
HTML:
<body>
    <div id="Global">
        <div id="navHeader">
            <div id="navBar">
                <ul class="navStyle">
                    <li>Home</li>
                    <li>Chamber Info</li>
                    <li>Event Galleries</li>
                    <li>Contact Us</li>
                    <li>Join</li>
                </ul>
            </div>
        </div>
    </div>
</body>
CSS:
@charset "utf-8";
/* CSS Document */
    padding:0 0;
    margin:0 0;
body{
    background-color:#f1eee3;
#Global{ margin:0 auto;}
#navHeader{
    width:100%;
    height:40px;
    margin:0 auto;
    background-color:#bfbfbf;
#navBar{
    margin: 0 auto;
    width:960px;
    text-align:center;}
.navStyle{
    font-family:"Eras Medium ITC",Arial, Helvetica, sans-serif;
    font-size:18px;
    padding-top:10px;
.navStyle li{
    display:inline;
    padding-left:20px;
    padding-right:20px;

Does this help?
#navHeader{
width:100%;
min-height:40px;
_height:40px; /**for IE6 only**/
margin:0 auto;
background-color:#bfbfbf;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Trouble with CSS background scaling

Similar Messages

Maybe you are looking for