CSS Positioning - Help!

I am new to Dreamweaver and web design, and I must be missing
something on how CSS positioning works.
I am using DW8 and in design view the text is positioned at L
200px, T 200px, but when I preview in browser for IE 6.0, it is
positioned at L 0px, T 0px.
The code is below.
I gave this as a basic example of what is happening to me,
but every time I position layers and preview them in the browser,
they are showing up all over the place.
- Doug

#Layer1 {
position:absolute;
left:200px;
top:200px;
Non-zero values always need units.
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
==================
"dugmug" <[email protected]> wrote in
message
news:e2b5u7$9nr$[email protected]..
>I am new to Dreamweaver and web design, and I must be
missing something on
>how
> CSS positioning works.
>
> I am using DW8 and in design view the text is positioned
at L 200px, T
> 200px,
> but when I preview in browser for IE 6.0, it is
positioned at L 0px, T
> 0px.
>
> The code is below.
>
> I gave this as a basic example of what is happening to
me, but every time
> I
> position layers and preview them in the browser, they
are showing up all
> over
> the place.
>
> - Doug
>
>
>
> body {
> margin-left: 0px;
> margin-top: 0px;
> }
> #Layer1 {
> position:absolute;
> left:200;
> top:200;
> width:185px;
> height:68px;
> z-index:1;
> }
>
> -->
> </style>
> </head>
>
> <body>
>
> <div id="Layer1">This is a test! </div>
> </body>
> </html>
>

Similar Messages

Help with basic CSS positioning

I am learning the rudiments of CSS positioning - I have gone
through the good Macromedia docs and even bought a book which is
useful (HTML Utopia). I am now applying some concepts to my first
site.
Oh how I thought I knew how to apply theory.
The sily thing is I am stuck on a very basic stage. And I
just cant figure out the solution. This is my problem.
I want to centre my site on the page so I created a #wrapper
<div> which works fine
Then, I wanted to position two <div> 'boxes', each
containing a logo within this wrapper, next to each other, left to
right, with a small margin imbetween them.
The first box on the left aligns fine, relatively positioned
to the wrapper. Great.
However, the next box 'jumps' down to the next line, even
though there is space within the wrapper element for it. I assumed
as <div> tag elements 'flow' after each other, it would
continue right. But no, it flows onto the next line, a bit like
this
image 1
image 2
I was after
image 1 image 2
What am I doing wrong. Im sure Im missing the obvious. Should
I be floating at this stage?
Forgive me - Im grasping the concepts here
Heres the code:
CSS
#master_wrapper {
width: 760px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
position: relative;
#logo_box {
width: 145px;
height: 120px;
position: relative;
#banner_box {
width: 580px;
height: 120px;
margin-top: 0;
margin-left: 25px;
position: relative;
HTML
<body>
<div id="master_wrapper">
<div id="logo_box"><img
src="website_graphics/index_page/logo.jpg" alt="Logo" width="145"
height="120" />
</div>
<div id="banner_box"><img
src="website_graphics/index_page/banner_cityscape.jpg" alt="Banner"
width="580" height="120"/>
</div>
</body>
If you are feeling especially kind, could you let me know the
correct code to position a further 2 boxes which sit under the logo
and the banner respectively
Yours, cap in hand
Chris

> The first box on the left aligns fine, relatively
positioned to the
> wrapper.
> Great.
Remove the relative positioning. You don't need it. Now,
float that box
left.
> However, the next box 'jumps' down to the next line,
even though there is
> space within the wrapper element for it. I assumed as
<div> tag elements
> 'flow'
> after each other, it would continue right. But no, it
flows onto the next
> line,
> a bit like this
Div tags are block tags - that means that unless told not to,
the occupy the
entire line within their container, thus forcing them to a
new line, and all
adjacent content above and below.
Remove the position:relative from all your divs, and just
make the first two
float left.
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
==================
"socks_" <[email protected]> wrote in
message
news:[email protected]...
>I am learning the rudiments of CSS positioning - I have
gone through the
>good
> Macromedia docs and even bought a book which is useful
(HTML Utopia). I am
> now
> applying some concepts to my first site.
>
> Oh how I thought I knew how to apply theory.
>
> The sily thing is I am stuck on a very basic stage. And
I just cant figure
> out
> the solution. This is my problem.
>
> I want to centre my site on the page so I created a
#wrapper <div> which
> works
> fine
>
> Then, I wanted to position two <div> 'boxes', each
containing a logo
> within
> this wrapper, next to each other, left to right, with a
small margin
> imbetween
> them.
>
> The first box on the left aligns fine, relatively
positioned to the
> wrapper.
> Great.
>
> However, the next box 'jumps' down to the next line,
even though there is
> space within the wrapper element for it. I assumed as
<div> tag elements
> 'flow'
> after each other, it would continue right. But no, it
flows onto the next
> line,
> a bit like this
>
> image 1
> image 2
>
> I was after
>
> image 1 image 2
>
> What am I doing wrong. Im sure Im missing the obvious.
Should I be
> floating at
> this stage?
>
> Forgive me - Im grasping the concepts here
>
> Heres the code:
>
> CSS
> #master_wrapper {
> width: 760px;
> margin-top: 0px;
> margin-bottom: 0px;
> margin-right: auto;
> margin-left: auto;
> position: relative;
> }
>
> #logo_box {
> width: 145px;
> height: 120px;
> position: relative;
> }
>
> #banner_box {
> width: 580px;
> height: 120px;
> margin-top: 0;
> margin-left: 25px;
> position: relative;
> }
>
>
> HTML
>
> <body>
> <div id="master_wrapper">
>
> <div id="logo_box"><img
src="website_graphics/index_page/logo.jpg"
> alt="Logo"
> width="145" height="120" />
> </div>
>
> <div id="banner_box"><img
> src="website_graphics/index_page/banner_cityscape.jpg"
alt="Banner"
> width="580"
> height="120"/>
> </div>
> </body>
>
> If you are feeling especially kind, could you let me
know the correct code
> to
> position a further 2 boxes which sit under the logo and
the banner
> respectively
>
> Yours, cap in hand
>
> Chris
>

CSS positioning not working in IE 5.2 on a Mac

Hi all,
I have 2 images in my "about" page, the CSS positioning works fine in all other browsers. I'm working on a Mac with OS 10.41. I'm using Dreamwearver CS3. The page works great on all other browsers except IE 5.2 on my Mac, I have not checked other versions of IE yet.
Is there a way to get it to work on all browsers. here's the link to my site.
http://www.robduverger.com
Please take a look at it in either Safari, Opera, or Firefox to se what it's suppose to look like.
Thanks in advance for your help.
Rob

Get Safari for Mac - http://www.apple.com/safari/download/
IE5x is obsolete and never did support much in the way of CSS web standards. Unfortunately, IE6 still has around 15% of world wide usage, so it's hard to ignore.
Make sure your code is valid and error free.
HTML Validator - http://validator.w3.org
CSS Validator - http://jigsaw.w3.org/css-validator/
HTML & CSS Tutorials - http://w3schools.com/
If you upload your site to server and post a URL, you will get more help. Additionally, you can use http://Browsershots.org to check your page(s) in a variety of browsers/platforms (screenshots).
If you can use Firefox, get the Web developer Toolbar (a free add-on). Can't live without it. https://addons.mozilla.org/en-US/firefox/addon/60
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Css position:fixed works on mozilla 21/IE10 but not in chrome ?

Hello guys,
     I want to stick in position a rectangle or photo while scrolling browser.
I am using    sym.$("Rectangle3").css({"position":"fixed"});
This works fine in Mozilla and IE10 but not in chrome (Version 27.0.1453.116 m)
Anyone to help please?
Thanks in advance.
Anthony

Antony,
I will defer to what Sarah said.
In the future if you needed to add browser prefixes to correct differences which happen for a number of things like transform or shapes, etc..
Or course this will not correct a bug which I was not aware of in this particular case.
Here is how to add browser prefixes:
In this case to make an ellipse a circle because chrome did not recognize the ellipse. I added Opera prefix to show you the syntax.
sym.$('Ellipse').css({
          '-webkit-border-radius': '50%',
          '-o-border-radius': '50%',
          'border-radius': '50%',
          'width': '35px',
          'height': '35px'
Sometime the syntax is a little different. Just google the css to make sure.
Here is another example for a Star Wars intro where I added browser prefixes for Explorer (-ms-), Chrome (-webkit-), and Firefox(-moz-).
The code can be combined but I did not this time for this sample.
Sample files here:
https://www.box.com/s/bdu5c4lq67fkfy7blfhc
// FF
sym.$('gradient').css('background', '-moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%)');
sym.$('container').css('-moz-transform-origin', '50% 100%');
sym.$('container').css('-moz-transform', 'perspective(250px) rotateX(25deg)');
// Chrome and others
sym.$('gradient').css('background', '-webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%)');
sym.$('container').css('-webkit-transform-origin', '50% 100%');
sym.$('container').css('-webkit-transform', 'perspective(250px) rotateX(25deg)');
// Internet Explorer
sym.$('gradient').css('background', '-ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%)');
sym.$('container').css('-ms-transform-origin', '50% 100%');
sym.$('container').css('-ms-transform', 'perspective(250px) rotateX(25deg)');

CSS positioning learning - I must be missing the point?!

CSS positioning learning - I must be missing the point?!
Okay I would like to know the benefit of using CSS
positioning with DIVs when you have templates that helps your pages
look all consistent with the same navigation or header? I don't see
how you make a site look consistent doing it the other route.
I have been reading through a CSS positioning tutorial at
http://www.adobe.com/devnet/dreamweaver/articles/css_concepts.html
and it is indeed somewhat complicated ESPECIALLY when you
have to compensate for Internet explorer quirks.
So again... someone please tell me what the benefit would be
to learn CSS positioning....because I haven't for sure figured it
out. And have liked templates since you can apply them to many
pages quickly. Is CSS positioning really the future way to go?
Thanks,
Angie

Templates have nothing to do with layout. They are only able
to control
your page's CONTENT. The location of this content is
dependent not on the
region but on the HTML structure of your page.
The real advantage of using a CSS layout is that a) the pages
are somewhat
to considerably lighter in weight, and b) the externally
linked CSS file is
cached so that you don't have to continually load the same
structural markup
every time, and c) once you understand how to use the CSS,
you have so much
more control over the placement of things on the 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
==================
"computerkitten" <[email protected]> wrote
in message
news:[email protected]...
> CSS positioning learning - I must be missing the point?!
>
> Okay I would like to know the benefit of using CSS
positioning with DIVs
> when
> you have templates that helps your pages look all
consistent with the same
> navigation or header? I don't see how you make a site
look consistent
> doing it
> the other route.
>
> I have been reading through a CSS positioning tutorial
at <a target=_blank
> class=ftalternatingbarlinklarge
> href="
http://www.adobe.com/devnet/dreamweaver/articles/css_concepts.html
> and">
http://www.adobe.com/devnet/dreamweaver/articles/css_concepts.html
> and</a> it is indeed somewhat complicated
ESPECIALLY when you have to
> compensate for Internet explorer quirks.
>
> So again... someone please tell me what the benefit
would be to learn CSS
> positioning....because I haven't for sure figured it
out. And have liked
> templates since you can apply them to many pages
quickly. Is CSS
> positioning
> really the future way to go?
>
> Thanks,
> Angie
>

CSS positioning for complext layout

I've been creating web page layouts with tables for many
years now and realise that it's time to move to CSS positioning
instead. Having gone through various tutorials, I've mastered the
art of creating a 3-column layout, however the design I'm working
on at the moment needs to be more complex than this. Here's a link
to the page layout I'm trying to achieve:
http://www.sweatshop.co.uk/dev/pagelayout.htm
Is this too complex for CSS positioning? Would I be better
off using tables? Or can anyone point me in the direction of more
detailed tutorials that might help me achieve this using CSS?
Thanks in advance.
Claire

> Is this too complex for CSS positioning? Would I be
better off using tables?
> Or can anyone point me in the direction of more detailed
tutorials that might
> help me achieve this using CSS?
>
> Thanks in advance.
>
> Claire
>
Heres the html code and css:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
font-family: verdana, helvetia, ariel, sans-serif;
font-size: 11px;
background-color: #fff;
color: #fff;
#pageWrapper {
width: 750px;
margin: 0 auto;
#header {
background-color: #999;
margin-bottom: 8px;
#navigation {
background-color: #999;
margin-bottom: 8px;
#leftSide {
float: left;
width: 480px;
#basket {
width: 170px;
float: left;
background-color: #999;
#productDesc {
width: 302px;
float: left;
margin: 0 0 8px 8px;
display: inline;
background-color: #999;
#productImage {
background-color: #999;
clear: both;
height: 200px;
margin-bottom: 8px;
#pollProductoptionWrap {
width: 480px;
#poll {
width: 170px;
float: left;
background-color: #999;
#productOptionUpsellProdsWrap {
width: 302px;
float: left;
margin-left: 8px;
display: inline;
#productOptions {
background-color: #999;
margin-bottom: 8px;
#upsellProducts {
background-color: #999;
margin-bottom: 8px;
#results {
width: 262px;
float: left;
margin-left: 8px;
display: inline;
background-color: #999;
#footer {
background-color: #999;
clear: both;
</style>
</head>
<body>
<div id="pageWrapper">
<div id="header">Header</div>
<div id="navigation">Navigation</div>
<div id="leftSide">
<div id="basket">Basket</div>
<div id="productDesc">ProductDesc</div>
<div id="productImage">Product Image</div>
<div id="pollProductoptionWrap">
<div id="poll">Poll</div>
<div id="productOptionUpsellProdsWrap">
<div id="productOptions">Product
Options</div>
<div id="upsellProducts">Upsell
Products</div>
</div>
</div>
</div>
<div id="results">Results</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

CSS positioning question

Am just trying to nail this CSS positioning thing once and
for all, with a simple enough two column layout.
I've posted a link below which is pretty much there - but
there is an unintended gap between the banner image, and the navbar
link with
unwanted gap
It should look like this :
link without
unwanted gap
Cheers,
Iain

Al Sparber- PVII wrote:
> "Thierry | www.TJKDesign.com"
<[email protected]> wrote in
> message news:ei5iju$od4$[email protected]..
>> Iain71 wrote:
>>> Am just trying to nail this CSS positioning
thing once and for all,
>>> with a simple enough two column layout.
>>>
>>> I've posted a link below which is pretty much
there - but there is
>>> an
>>> unintended gap between the banner image, and the
navbar :
>>>
>>>
http://www.oriental-chamber.co.uk/homepage5.htm
>>>
>>> It should look like this :
>>>
>>>
http://www.oriental-chamber.co.uk/homepage2.htm
>>
>> Try this:
>> #header img {vertical-align:bottom}
> Float left should work too. I believe this is a function
of using a
> strict DOCTYPE.
>
http://www.projectseven.com/csslab/images/baseline/
As well as "display:block".
I just didn't want to plug a URL:
http://www.tjkdesign.com/articles/imageanddoctypes.htm
Thierry
Articles and Tutorials:
http://www.TJKDesign.com/go/?0
The perfect FAQ page:
http://www.TJKDesign.com/go/?9
CSS-P Templates:
http://www.TJKDesign.com/go/?1
CSS Tab Menu:
http://www.TJKDesign.com/go/?3

CSS Positioning or DW Problem?

I am having difficulty with CSS positioning after spending several hours reading and trial and error. I am beginning to think that Dreamweaver is broken, and thoughts of reloading are crossing my mind.
My desire is to have a background image "beneath" my page wrap div, essentially acting as a border surrounding it. I have assigned the position to this image "background" as relative, and therefore assigned the positioning of my page wrap div as absolute. The page wrap has been given a background color, and a line of text to enable me to "see" where I am in securing the proper placement. I would think that the background color of the page wrap div would "show" but it is not. (?)
I have positioned my palette, as we will call it, with margins, while attempting to place my page wrap using top, right, bottom and left through the CSS dialog box. Regardless of values used, the div remains in the bottom left hand corner of the browser window and refuses to budge.
#palette {
    background: url(images/pallete.png) no-repeat;
    width: 1200px;
    height: 1400px;
    margin: 100px auto;
    position: relative;
#page wrap {
    position: absolute;
    background: #C06;
    height: 1100px;
    width: 960px;
    top: 100px;
    right: -120px;
It has gotten so that any changes I make to the CSS at this stage will not even trigger a Refresh of the CSS styles panel? What gives?
Thanks.

I've never used "Live Code" before, and was able to place #page more to my liking, but it is a ballpark position so to speak, I can only approximate it's center within #palette. I begin to think I have success, until I go to browser view, where #page position seems to shift.
You are trying to use HTML like a word processor and that's the absolute (no pun intended) wrong approach!
An absolutely positioned element's location is calculated from the location of its nearest positioned ANCESTOR. An "ancestor" is a containing element, not an adjacent element (which would be a 'sibling'). Thus, if you want your absolutely positioned element to key off of the location of a relatively positioned element, it must be a child (or descendent) of that relatively positioned element. In other words, to make #page work relative to #palette, it must be inside #palette.
If there are alternatives to securing positioning other than my current method, I would be interested to learn about it. I am not aware of the drawbacks mentioned with employing this type of positioning, could you provide some detail please?
There is an excellent alternative without using positioning at all - it's called 'best practice'! The disadvantages of using absolute positioning for everything are:
1. Because absolutely positioned elements are removed from the flow of code on the page, they are immune to shifts in other non-positioned page elements due to browser viewport size changes, or text display size changes.
2. Since #1 is the case, and since text display size changes may cause the height of the container to change, if that container is absolutely positioned, its contained text may overlap other content on the screen. The more absolutely positioned text containers there are the worse this effect becomes, quickly producing an unusable, overlapping mess.
3. Absolutely positioned elements are located on the screen without regard for where the elements appear in the code, and as a result, it's quite possible to have two bits of text that only make semantic sense when taken as a unit separated by quite a bit of code, perhaps even other text bits. Thus, pages built with absolutely positioned text containers are usually not semantically sensible, meaning that they would not fare well when run through a screen assistive device.
4. Considering all of these things, pages that contain both centering elements and positioned elements frequently go wandering as viewport widths are changed.
The upshot is that the method most likely to be chosen by an inexperienced user because of its apparent simplicity is also the absolute worst possible approach to building the page.
Oh, by the way, the values for positioning below were obtained through "dragging" div=page into position. I would rather not use Live Code, but plug in concrete values in the future.
The word processing approach in action! The only way to achieve plugging in concrete values is to have a layout already planned on paper before you start.
Say more about how you want your page to look (I'm not sure what you mean exactly about centering #page "above" #palette, but if you mean "before" then consider this -
<style type="text/css">
h1, h2, h3, h4, h5, h6, p, address, blockquote, ul, ol, li {
    margin: 0px;
    padding: 0px;
html {
    background: #3E4A9C url(images/Untitled-2.png) repeat;
body {
    font: 1em Helvetica, Arial, sans-serif;
    color: #000;
    width:1200px;
    margin:0 auto;
#palette {
    background: url(images/map.png) no-repeat;
    margin: 100px auto;
#page {
    width: 960px;
    margin:0 auto;
    background-color: #03C;
</style>
</head>
<body>
<div id="page">This is my page </div>
<div id="palette"></div>
</body>
(note that I have removed all positioning, as well as all heights - it's generall a bad idea to declare explicit heights on elements that contain text, again due to potential overflow problems)

Centering CSS-buttons - Help from CSS Guru wanted

Dear group,
I created a site for a friend in which I wanted to do all the
navigation
with CSS-rollover-buttons. Actually it works fine until I try
to center the
buttons. For the buttons, which are located in the
footer-section, there is
no problem, they center fine?!
So I thought to be clever by creating a container with the
same attributes
than the footer, in which I place the buttons. But to my
surprise it didn't
work. Trying to center the #wrapper didn't bring the wanted
result. The
navigation still stings to the left of the page.
Now I have set the width from the container to 40%. But this
is no solution
and looks messy:-(
Please have a look at:
http://www.stuck-atelier.de/Galerie/kueche3/e_page-0001.html
The CSS:
http://www.stuck-atelier.de/Library/fabryb.css
Any help is very much welcome:-)
Best regards
Inge Grotjahn, frustrated

Hi Murray,
Am 15.06.2006 schrieb Murray *ACE*:
> Your problem is not in the implementation of Anurak's
correct instructions,
> it's in the basic layout of the page. The div#wrapper is
given a width of
> 40%, which restricts div#navfoto1 from reaching its
desired location.
> Remove that width and see what happens when you change
your code to this -
>
> <div id="wrapper" style="width:100%;">
> <div id="navfoto1" style="width:200px;margin:0
auto;">
> <ul>
> <li><a href="e_index.html" title="internal
link: to the
> index">Index</a></li>
> <li><a href="e_page-0002.html" title="internal
link: to the next
> picture">Next</a></li>
> </ul>
> </div>
> </div>
thank you for your advice. I changed the CSS as follows:
#wrapper {
margin:0 auto;
width: 100%;
text-align:center;
#navfoto1 {
margin: 5px auto;
width: 300px;
and left the html as it was. The result is much better than
my solution,
but doesn't center the buttons:-( With a width of 200px, the
buttons (on
pages with 3 buttons) are no longer displayed inline:-( On
the German page
you can see better, that the buttons will not center (maybe
because the
button texts are longer). And on the photoindex-page you see
it the best.
Here the link to the English pages:
http://www.stuck-atelier.de/Galerie/kueche3/e_page-0003.html
The CSS:
http://www.stuck-atelier.de/Library/e_fabryb.css
http://www.stuck-atelier.de/Galerie/kueche3/e_index.html
The CSS:
http://www.stuck-atelier.de/Library/e_fabry.css
Here the link to the German pages:
http://www.stuck-atelier.de/Galerie/kueche3/page-0003.html
The CSS:
http://www.stuck-atelier.de/Library/fabryb.css
http://www.stuck-atelier.de/Galerie/kueche3/index.html
The CSS:
http://www.stuck-atelier.de/Library/fabry.css
I really don't understand what is going wrong here:-(
Best regards
Inge Grotjahn
CatManiacs World:
http://www.gwsystems.com/inge

Help with CSS Positioning

Hello. I've been struggling with how to position my footer so that it moves relative to the content that is added to the div tags before it in the template I'm working on. Here's what my code looks like:
<!DOCTYPE html>
<html>
<head>

<title>NEW TEMPLATE</title>

<style type="text/css">

</style>
<script src="/Web Site Root Folder/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="/Web Site Root Folder/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style>


</head>
<body class="body" id="body" background="/Graphics/LOGOS AND BANNER/GRADIENT BACKGROUND 5-8-12.png">
<div id="apDiv4" >
<script>
(function() {
var cx = '004600001770955757780:ub1su5xae54';
var gcse = document.createElement('script'); gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
      '//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
</script>
<gcse:search></gcse:search></div>
<div id="apDiv5"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMif flin-Juniata-Special-Needs-Center-Inc%2F129756770511336&send=false&layout=standard &width=450&show_faces=true&font&colorscheme=light&action=like&heig ht=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></div>
<div class="wrapper" id="wrapper"><div id="apDiv1" onclick="document.location.href='http://www.mjsnc.org';" style="cursor:pointer;"><img src="/Graphics/LOGOS AND BANNER/Slogan.jpg" width="296" height="169" alt="Accept Support Empower Whatever It Takes"></div>
<div class="header" id="header">
    <div class="logoarea" id="logoarea">
      <div id="logo" onclick="document.location.href='http://www.mjsnc.org';" style="cursor:pointer;"><img src="/Graphics/LOGOS AND BANNER/Slogo Transparent BG.png" width="273" height="173" alt="Mifflin-Juniata Special Needs Center, Inc."></div>
    </div>
    <div class="navbar" id="navbar">
      <img src="/Graphics/LOGOS AND BANNER/navbar_edited-3.jpg" alt="navigation menu" width="980" height="25" border="0" usemap="#Map">
      <map name="Map">
        <area shape="rect" coords="59,4,149,24" href="/NAV BAR OPTIONS/ABOUT US/AboutUs.html" target="_blank" alt="About Us">
        <area shape="rect" coords="157,3,255,23" href="/NAV BAR OPTIONS/CONTACT US/ContactUs.html" target="_blank">
        <area shape="rect" coords="263,4,423,22" href="/NAV BAR OPTIONS/BOARD OF DIRECTORS/BoardOfDirectors.html" target="_blank">
        <area shape="rect" coords="429,3,578,22" href="/NAV BAR OPTIONS/VISION AND MISSION/MissionVisionStatementsAdopted2012.pdf" target="_blank">
        <area shape="rect" coords="586,3,698,23" href="/NAV BAR OPTIONS/GET INVOLVED/GetInvolved.html" target="_blank">
        <area shape="rect" coords="704,5,815,24" href="/NAV BAR OPTIONS/DONATE NOW/DonateNow.html" target="_blank">
        <area shape="rect" coords="826,4,924,23" href="/NAV BAR OPTIONS/AFFILIATES/Affiliates.html" target="_blank">
      </map>
    </div>
    <div class="subnavmenu" id="subnavmenu">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="#">ADULTS</a>
          <ul>
            <li><a href="/SIDE BAR OPTIONS/ADULT REC/ADULT REC.html">ADULT REC</a></li>
            <li><a href="/SIDE BAR OPTIONS/ADULT TRAINING FACILITIES/AdultTrainingFacilities.html">ADULT TRAINING FACILITIES</a></li>
            <li><a href="/SIDE BAR OPTIONS/AGENCY WITH CHOICE/AgencyWithChoice.html">AGENCY WITH CHOICE</a></li>
            <li><a href="/SUBNAVMENU/FAMILY LIVING/FAMILY LIVING.HTML">FAMILY LIVING</a></li>
            <li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">SUMMER REC</a></li>
          </ul>
        </li>
        <li><a href="#">YOUTH</a></li>
        <UL>
         <li><a href="/SUBNAVMENU/AFTER SCHOOL PROGRAM/AfterSchool.html">AFTER SCHOOL PROGRAM</a></li>
            <li><a href="/SUBNAVMENU/AKTION CLUB/AktionClub.html">AKTION CLUB</a></li>
            <li><a href="/SUBNAVMENU/CHALLENGER/Challenger.html">CHALLENGER BASEBALL</a></li>
            <li><a href="/SUBNAVMENU/EARLY INTERVENTION/EarlyIntervention.html">EARLY INTERVENTION</a></li>
            <li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">SUMMER REC</a></li>
            <li><a href="/SUBNAVMENU/T-BALL/TBall.html">T-BALL</a></li>
            <li><a href="/SUBNAVMENU/TEEN CLUB/TeenClub.html">TEEN CLUB</a></li>
            <li><a href="/SUBNAVMENU/TRAINING N TRANSITION/TrainingTransition.html">TRAINING & TRANSITION</a></li>
        </UL>
        <li><a class="MenuBarItemSubmenu" href="#">EVENTS</a>
          <ul>
           <li><a href="/SUBNAVMENU/EVENTS/LipSync.html">LIP SYNC</a></li>
            <li><a href="/SUBNAVMENU/EVENTS/TouringFriends.html">TOURING FRIENDS</a></li>
            <li><a href="/SUBNAVMENU/EVENTS/AnnualPicnic.html">ANNUAL PICNIC</a></li>
          </ul>
        <li><a class="MenuBarItemSubmenu" href="#">OTHER</a>
              <ul>
                <li><a href="/SUBNAVMENU/EDUCATION & THERAPY/EducationandTherapy.html">EDUCATION & THERAPY</a></li>
                <li><a href="/SUBNAVMENU/EQUIPMENT LOAN/EquipmentLoan.html">EQUIPMENT LOAN</a></li>
              </ul>
        </li>
            <li><a href="#">EMPLOYEES</a></li>
            <UL>
             <li><a href="/SUBNAVMENU/AGENCY WITH CHOICE/AgencyWithChoice.html">AGENCY WITH CHOICE</a></li>
                <LI><A href="/NAVBAR/ABOUT US/AboutUs.html">MEET OUR STAFF</A></LI>
                <LI><A href="/SUBNAVMENU/EMPLOYEE ACCESS/EmployeeAccess.html">EMPLOYEE ACCESS</A></LI>
      </ul>
      </ul>
    </div>
</div>
<div class="rightcontent" id="rightcontent">
    <p>Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. </p>
</div>
<div class="leftcontent" id="leftcontent">
    <p>Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
    <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
    <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
    <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. </p>
</div>
<div class="footer" id="footer">Contact Us | About Us | Disclaimer</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

There's room for much improvement.
#1 About APDivs and why you don't need (or want) them in primary layouts:
http://www.apptools.com/examples/pagelayout101.php
#2 You're complicating matters with repetitive class and id names on every element. It's better if you don't do this.
#3 Your CSS code is overly verbose. Less is more.
#4 I don't understand why you're using HTML5 but not using HTML5 tags for your content. For such a simple layout, this is all you need.
<body>
     <header>logo and menu goes here </header>
          <section>
               <aside>left column content</aside>
               <aside>right column content<aside>
          </section>
      <footer>footer goes here </footer>
</body>
Nancy O.

Help needed using CSS positioning for movie/text

I have been deconstructing a few sites to get a better
understanding of CSS for a simple portfolio.
Anyway, I have a simple navigation set up in place which I
want to place my movie next to. The problem is that I can't work
out how to place it next to the buttons...
The url to the site is:
http://www.notjustthenews.co.uk/page8.html
Once I've done that I want to place a paragraph of text to
the right of the movie so that if you resize the browser window the
text wraps around the movie.
Any help would be most appreciated.
The CSS is question is:
#wrapper{
float:right;
width: 75%;
margin: 0;
padding: 0 3% 0 0;
#widescreen {
float: left;
padding: 0px 10px 0px 0px;
margin: 0 5px 5px 0;

Not sure what the web forum and the news forum does with code
these days
but here is the complete coding/css that you need. (That's if
it
transfer ok)
<!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=iso-8859-1"><title>notjustthenews.co.uk</title>
<style type="text/css">
body{
font-family: Arial,sans-serif;
color: #000000;
line-height: 1.166;
margin: 0px;
padding: 0px;
h1 {
font-family: Verdana, Arial, sans-serif;
font-size: 120%;
color: #000000;
h3{
font-size: 100%;
color: #334d55;
p {
font-family: Arial, sans-serif;
font-size: 14px;
color: #000000;
label{
font: bold 100% Arial,sans-serif;
color: #334d55;
ul{
list-style-type: square;
#top{
border-bottom: 1px solid #cccccc;
width: 100%;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
#topmenu{
color: #cccccc;
padding: 0px 0px 0px 10px;
white-space: nowrap;
#topmenu a {
font-size: 90%;
padding: 0px 4px 0px 0px;
#title{
padding: 0px 0px 10px 10px;
#topmenu ul {
font-family: Arial, sans-serif;
font-size: 14px;
#topmenu li {
margin-bottom: 5px;
#topmenu a:link, #topmenu a:visited {
text-decoration: none;
color: #000000;
#topmenu a:hover {
color: #990000;
text-decoration: none;
#seltopmenu a:link, #seltopmenu a:visited, #seltopmenu
a:hover {
color: #990000;
text-decoration: none;
#navBar ul a:link, #navBar ul a:visited {display:
block;<br />
#navBar ul {list-style: none; margin: 0; padding: 0;
#navBar li {border-bottom: 1px solid #EEE;
html>body #navBar li {border-bottom: none;
#navBar{
float: left;
width: 200px;
background-color: #eeeeee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
#search form{
margin: 0px;
padding: 0px;
#search label{
display: block;
margin: 0px;
padding: 0px;
#projectLinks{
border-bottom: 1px solid #cccccc;
font-size: 90%;
#projectLinks h3{
padding: 10px 0px 2px 10px;
#projectLinks a:link{
text-decoration: none;
color: #000000;
padding: 2px 0px 2px 10px;
border-top: 1px solid #cccccc;
width: 100%;
voice-family: "\"}\"";
voice-family:inherit;
width: auto;
#projectLinks a:visited{
text-decoration: none;
color: #000000;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
#projectLinks a:hover{
color: #990000;
text-decoration: none;
border-top: 1px solid #cccccc;
background-color: #dddddd;
padding: 2px 0px 2px 10px;
#selprojectLinks a:link, #selprojectLinks a:visited,
#selprojectLinks
a:hover {
color: #990000;
text-decoration: none;
#widescreen {
padding: 0px 10px 0px 0px;
margin: 0 5px 5px 210px;
#widescreen object {
float: left;
margin-right: 10px;
#widescreen p {
margin-top: 0;
</style></head>
<body>
<div id="top">
<h1 id="title">notjustthenews.co.uk</h1>
<div id="topmenu"> <a href="#">home</a> |
<a href="#">movies</a> | <a
href="#">audio</a> | <a
href="#">websites</a> | <a
href="#">reviews</a>
| <a href="#">other stuff</a> | <a
href="#">contact</a>
</div>
</div>
<div id="navBar">
<div id="search">
<form action="#">
<label>search</label>
<input name="searchFor" type="text" size="10">
<input name="goButton" type="submit" value="go">
</form>
</div>
<div id="projectLinks">
<ul>
<li><a href="#">project1</a></li>
<li><a href="#">project2</a></li>
<li><a href="#">project3</a></li>
<li><a href="#">project4</a></li>
<li><a href="#">project5</a></li>
<li><a href="#">project6</a></li>
</ul>
</div>
</div>
<div id="widescreen">
<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="
http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
name="defences" width="402" height="240" align="middle"
id="full screen">
<param name="allowScriptAccess" value="sameDomain">
<param name="movie" value="movieplayer.swf">
<param name="quality" value="high">
<param name="salign" value="tl">
<param name="bgcolor" value="#000000">
<param name="FlashVars" value="vidpath=defences.flv">
<embed src="page8_files/movieplayer.swf"
flashvars="vidpath=defences.flv" quality="high" salign="tl"
bgcolor="#000000" width="402" height="240" name="defences"
align="center" allowscriptaccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="
http://www.macromedia.com/go/getflashplayer">
</object>
<p>This is some filler text. This is some filler text.
This is some
filler text.</p>
<p>This is some filler text. This is some filler text.
This is some
filler text.</p>
<p>This is some filler text. This is some filler text.
This is some
filler text.</p>
<p>This is some filler text. This is some filler text.
This is some
filler text. This is some filler text. This is some filler
text. This is
some filler text.</p>
<p>This is some filler text. This is some filler text.
This is some
filler text. This is some filler text. This is some filler
text. This is
some filler text.</p>
<p>This is some filler text. This is some filler text.
This is some
filler text. This is some filler text. This is some filler
text. This is
some filler text.</p>
<p>This is some filler text. This is some filler text.
This is some
filler text. This is some filler text. This is some filler
text. This is
some filler text.</p>
</div>
</body>
</html>

Help with CSS positioning of menu

Hello.
Am slowly making some progress following recent difficulties
with CSS.
At the moment things are finally looking the same on
different browsers EXCEPT the menu bar to the right of the movie:
http://www.notjustthenews.co.uk/page2_movies.html
Basically in Internet Explorer it's where I want it to be,
level with the top of the movie, but in Safari it drops down much
lower.
Is there anything I can do to stop this happening?
This is the CSS I'm using for the menu:
width: 300px;
height: 160px;
float: left;
margin-top: 40px;
margin-bottom: 0px;
margin-left: 85px;
display: block;
clear: none;

There's room for much improvement.
#1 About APDivs and why you don't need (or want) them in primary layouts:
http://www.apptools.com/examples/pagelayout101.php
#2 You're complicating matters with repetitive class and id names on every element. It's better if you don't do this.
#3 Your CSS code is overly verbose. Less is more.
#4 I don't understand why you're using HTML5 but not using HTML5 tags for your content. For such a simple layout, this is all you need.
<body>
     <header>logo and menu goes here </header>
          <section>
               <aside>left column content</aside>
               <aside>right column content<aside>
          </section>
      <footer>footer goes here </footer>
</body>
Nancy O.

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!

Stuck on little CSS positioning glitch in IE6

Got a pesky positioning issue I can't seem to resolve in IE
6. Checks out OK in IE7, FF, Safari, and Opera. XHTML and CSS
validates.
Here's the page:
hwaters.com
In IE6 if you narrow the browser window beyond the width of
the main content some it jumps down the page about 200 pixels (I
believe the distance it's dropping is equal to the height of the
"left_column" div on the far left (containing the nav menu). I've
tried several dozen different tweaks but keep missing the mark.
I guess my objective is simply to prevent IE6 from breaking
the layout when the browser window is narrowed to less than the
full width of the "main_content" div--but maybe I'm misreading
what's actually happening here.
Thanks for your help.
Here's the html:

The easy fix is to set a fixed width on your "main_content"
div, then
its layout is not affected by the width of the browser
window.
HTH,
Randy
> Got a pesky positioning issue I can't seem to resolve in
IE 6. Checks out OK in
> IE7, FF, Safari, and Opera. XHTML and CSS validates.
>
> Here's the page:
http://hwaters.com
>
> In IE6 if you narrow the browser window beyond the width
of the main content
> some it jumps down the page about 200 pixels (I believe
the distance it's
> dropping is equal to the height of the "left_column" div
on the far left
> (containing the nav menu). I've tried several dozen
different tweaks but keep
> missing the mark.
>
> I guess my objective is simply to prevent IE6 from
breaking the layout when
> the browser window is narrowed to less than the full
width of the
> "main_content" div--but maybe I'm misreading what's
actually happening here.

Layer or div tag positioning help wanted

Okay, actually I have two problems: 1) I have managed to
create a navigation bar, but I can't find out how to save it other
than saving the html page it was created on. The help literature
seems to vaguely indicate that a nav bar created can be saved and
used on other pages, but I'll be damned if I can find where there
are any details of this process.
*BTW, my navbar has multiple elements or buttons, so I can't
just copy paste, ctrl/shift doesn't seem to work selecting multiple
elements, tho it works on regular images*
2) Once I solve problem #1, I am goin to want to have the
navigation bar "stay put" in it's position on the screen, immune to
any scrolling that occurs on the page(s). So, I plan on putting
into a layer or div that can be given this behavior or property.
Unfortunately, I can't find or figure out how to do that, either.
Is this a good plan? Is there a better way to make the Nav bar
exempt from page scrolling?

billuminatti wrote:
> Thank you very much for the help. As someone who has
done virtually ZERO
> coding, even something as simple as copying and pasting
code per
> instructions...well, let's just say, it's not my forte.
Needless to say, my
> attempts to do just that, copy and paste per "persistent
layer" instructions,
> have not succeeded yet. There could be several reasons
for this, that I have
> noted, anyway. One is, I have an animated timeline, so
when I replace my body
> tag:
> <body onload="MM_timelinePlay('Timeline1')">
> with the new one (per instructions), my timeline
animation goes bye bye.
> Plus, the "persistence" desired is still not achieved,
which leaves me to my
> next observation: I can't see how the code refers to the
layer that I want to
> persist. IOW, how does it "know" which layer to persist?
> I took the comon-sense measure of having that layer
selected when I pasted my
> code, but I'm not fool enough to think that this would
make any difference.
> I didn't even look into the Server Side Include yet, as
i am just aiming at
> making a layer, any layer, "persist". My comment at this
point is that it seems
> very hard for me to believe that a layer behavior
(persistence, or floating) so
> web-common wouldn't have a "design-view only" solution,
in a package as
> sophisticated as Dreamweaver. This is not a slander on
your answer, BTW, which
> I am sure is a fine one. Thanks again.
>
>
No offense, but I think your approach may be a bit off base
here (of
course I have not seen a link to a a page showing what you
are trying to
achieve, so I could be completely wrong). The first part of
your
question already makes me nervous, because it makes me think
you have
used Fireworks or another image program to create your
navbars.
Depending on which version of Fireworks you are using, that
could be
disastrous or only unwieldly. The navigation bars created by
Fireworks
are definitely not the best solution,and you can go through
years of
posts, particularly by Murray, advising against their use.
If you are interested in an easier way to create your
navigation, post back.
Second, wanting your navigation to stay put while the rest of
the page
scrolls is something I see here a lot, but it's not
necessarily how the
web works. People plunge into frame hell in order to
accomplish it,
but it is like trying to kill a mosquito with a jackhammer.
There is a good extension that will do this for you if you
insist, but
given the problems you are having now, I would first create a
properly
coded page that behaves as a normal web page should, and ONLY
THEN
worry about server-side includes
revisit the issue of fixed and scrolling page elements.
An excellent tutorial for creating a cross-browser friendly,
modern
(e.g.not relying on tables for layout) page can be found at
www.projectseven.com (search for "quickdraw" without the
quotation
marks), where you can also find an excellent tutorial for
creating
horizontal or vertical navigation menus that are simple and
can be used
in templates or server-side includes (search for "uberlink"
without the
quotation marks).
Good luck.
Oh, and don't apologize for not understanding code: learn to
understand
and write good, solid html and css. Elizabeth Castro's book
HTML for
the World Wide Web is excellent. For beginning css you might
want to
start here:
http://www.mako4css.com/
Bonnie in California
kroko at
sbcglobal dot net
http://www.theanimalrescuesite.com/cgi-bin/WebObjects/CTDSites.woa

CSS Positioning - Help!

Similar Messages

Maybe you are looking for