Check out some similar questions!

rudi_in · Jul 17, 2006, 11:00 AM

I am working on a website in Dreamweaver and I am running into a small problem.

I am working on a large screen laptop with screen settings of 1440 x 900 pixels. Of course everything looks fine.

However, when I go to a different computer with 800 x 600 settings or something different than mine, some of the layers are not automatically resized (moved over/scrunched) to fit the screen with the rest of the site.

I have tried the different positioning settings but it puts them way off.

How can I make those stray layers stay in the spot I put them?

LTheobald · Jul 18, 2006, 12:57 AM

Welcome to the horrible world of web design. That's one of the major problems with designing pages - getting the page right on different screen resolutions and different browsers.

As for why the layers aren't resizing properly, I'm assuming it might because you have given the properties set widths meaning that they cannot shrink further than that width. It could also be that the items you are positioning are relative to a different item than what you think they are.

Post some of your HTML code and I'll take a look.

rudi_in · Jul 18, 2006, 03:45 PM

Here is some of the code: I want the flash animation and the text that would describe the animation to sit to the right of it.

<div id="advert"> <img src="https://www.askmehelpdesk.com/images/logo.png" alt="Free To Learn" width="74" height="81" /> Your Choice<br />
Your Path</div>
</div>
<div id="content">
<div class="feature">
<h3>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="300" title="meteorad">
<param name="movie" value="movies/meteor.swf" />
<param name="quality" value="high" />
<embed src="movies/meteor.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="300"></embed>
</object>
</h3>
<div id="Layer3">sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here </div>

Any suggestions are appreciated.

LOL -- I noticed the big grin -- I do not really have that in my code -- LOL -- Just happens to be a colon capital D there!

Click here to see the site.

LTheobald · Jul 19, 2006, 01:40 AM

When you are putting code in the page, surround the code with [code][/code ] tags (omitting the space in the closing tag. That way you won't get the big grins and it lays out your code nicely.

First two comments on the code:

The DIV tag were a bit missed up. You don't close either the content or feature tags. Also you had a closing tag before content that didn't match up with anything.
You can take out the h3 surrounding the object tags - there's no need for it.

Anyway, when I want something on the left and something on the right I use floats. First I made the highlighted changes to your code:

Code:

<div id="advert">
    <img src="https://www.askmehelpdesk.com/images/logo.png" alt="Free To Learn" width="74" height="81" />
    Your Choice<br />Your Path <!-- removed the div that was here -->
</div>
<div id="content">
    <div class="feature">
    <h3>
        Hi!
    </h3>
    </div>
    <div id="layer3">sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here sample text here </div>
</div>

Then between your <head> tags, add the following:

Code:

<style type="text/css">
    .feature {
        width: 80%;
        float: left;
    }
    
    #layer3 {
        width: 20%;
        float: right;
    }
</style>

If you are familiar with CSS it would be better to place this code in an external CSS file but we'll leave that for now. Anyway, that worked for me. Give it a shot.

rudi_in · Jul 19, 2006, 09:21 AM

Originally Posted by LTheobald

The DIV tag were a bit missed up. You don't close either the content or feature tags. Also you had a closing tag before content that didn't match up with anything.

Sorry, I did not paste the entire code (I probably should have) - just a chunk where the layer was. I wanted the text layer to set within the content layer alongside the flash animation. These tags are closed later in the code.

I also noticed that my image source has changed as I am not getting it from askmehelpdesk.

Not sure why my copy and paste would change my image source. The file name and altenate text stayed the same though.

I am not much of a coder but I am familiar enough with it to make a few changes here and there. I work primarily in design view so I suppose that is how some of those things like the <h3> tags get stuck in there.

I am using an external style sheet.

I will give this a try and let you know how it works.

LTheobald · Jul 20, 2006, 12:32 AM

I just looked at the page you linked to (which I really should have done at the start). What exactly do you want to place to the right of the flash movie? The "Open Enrollment in..." bit? Let me know what you want and where and I'll paste up some more exact code. That is quite a big Flash movie though so it might just be better to leave it where it is. Otherwise the text would be quite a squeeze on it's right side.