Help with div positioning

I am an utter newbie when it comes to html and CS5. Since I happen to own a copy of CS5 I have been drafted to take a stab at a very basic website for a non-profit I work with. The site can be seen here www.kidscareco.com
I have searched all around this site and the web in general for an answer to my question and while I have found lots of information on absolute vs relative position and "clear", I haven't been able to cypher out a solution to my particular problem.
I am having trouble getting one particular div to stay where I want it. I'm entirely sure that it is my fault and thus am not angry at the div. I am hopeful that someone here can offer me a few lines of css code to get the errant div to stay where it should be. I am attaching the html and css for the page in question. The page is based on a template which I can post if it is somehow helpful but I believe that the code from the "index" page is sufficient.
The div in question is #meat. (content text is: Since 1990, Kids Care Clubs has empowered children to make a better world through hands-on service projects.We give parents, teachers and youth leaders the resources they need to involve kids in the good works that will mean a brighter future for all.) I would like for it to stay neatly under the spry menu, near the top of the page and for it to expand and contract both vertically and horizontally as the browser window is resized. I have tried several different "solutions" with little success except for restricting the width of the div to about 600px but that leaves a considerable amount of white space when the page is viewed full screen on a large monitor and it forces the text down the page in an unworkable way once the actual text within the div starts to get into the order of 1000 words or so. Suggestions and helpful critique are welcomed.
Thank you!
Mike Logan
@charset "UTF-8";
/* CSS Document */
html, body {
     width:97%;
#container {
     min-height: 1000px;
     width:100%;
     min-width:850px;
     border-color:#000;
     border: solid 2px;
     alignment-baseline:middle;
     margin:25px;
#header {
     float:left;
#collage {
     float:right;
     width:202px;
#menu {
     margin-top:20px;
     height:30px;
     float:left;
     clear:left;
#MenuBar1 {
     font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
     clear:inherit;
#meat {
     float:left;
     clear:left;
     /* [disabled]max-width:600px; */
     padding:20px;
     padding-left:40px;
     font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
#footer {
     clear:both;
     width:100%;
     height:auto;
   font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ice="http://ns.adobe.com/incontextediting">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Welcome to KIDS care Colorado.com!</title>



<link href="../kidscare_template.css" rel="stylesheet" type="text/css" />
<script src="../includes/ice/ice.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<img src="../graphics/Kidscarekidslogo.png" width="220" height="144" alt="logo" /><img src="../graphics/kidscare-name.png" width="395" height="79" alt="name" />
</div>
<div id="collage"><img src="../graphics/collage.png" width="200" height="949" alt="collage" /></div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li>
      <div align="center"><span id="MenuBar1"><a href="#">Home</a>
        </span>
      </div>
    </li>
    <li><span id="MenuBar1"><a href="#">Programs</a></span></li>
    <li><span id="MenuBar1"><a href="#">Volunteer</a></span></li>
    <li><span id="MenuBar1"><a href="#">Donate</a></span></li>
    <li><span id="MenuBar1"><a href="#">Contact Us</a></span></li>
</ul>
</div>

<div id="meat" ice:editable="*">
<div align="left">Content for id "meat" Goes Here</div>
</div>

<div id="footer">
<div align="center">
    <p> </p>
    <p>KIDS care Colorado,LLC • (720) 295-3396 • <a href="mailto:[email protected]">[email protected]</a></p>
    <p>PO Box 19442 • Boulder, CO 80308
    </p><p> </p>
</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Hi Mike,
I'm going to suggest you start over with a pre-built CSS layout for this project. It's much simpler than building a page layout from scratch. Also, liquid layouts are very tricky to control. A fixed-width layout is much easier to work with. Here's a sample 2-column, fixed-width, centered layout to get you started.
http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml
Making your prototype page into a DW Template is just about the last step in your design process. After you are completely satisfied with how your protoype.html page looks and works in all browsers, then saveAs Template.
Best of luck with your project, and have fun!!
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

Need some help with region position

Hi,
I need som help with regions position....
Background:
I have 2 regions, I will call them reg1, reg2 and reg3.
reg1 = Page Template Body (2. items below region content), column 1, search region.
reg2 = Page Template Body (2. items below region content), column 2, import file region.
reg3 = Page Template Body (3. items above region content), column 1, search result, grid region, very wide.
Issue with the position, the setup explained makes my layout like this
reg1--------------------------------reg2
------------------reg3--------------------
What I want:
reg1-reg2
------------------reg3--------------------
What am I doing wrong?
Regards Daniel

Daniel,
this will also work:
Region1 HTML table cell attributes
width="10%"
Region2 HTML table cell attributes
align="left"
without touching the page template.
Denes Kubicek
http://deneskubicek.blogspot.com/
http://www.opal-consulting.de/training
http://htmldb.oracle.com/pls/otn/f?p=31517:1
-------------------------------------------------------------------

Help with Div Tags

Hello,
I've got 2 flash files in separate div tags. Div 1 is sized 100% x 100% to match the movie, and the other div tag is set at 900px x 700px (again to match the movie). The 1st tag sort of acts as a background to the top layer. This all works great and really happy with the result.
My only problem is when the browser window gets smaller than the top layer a scroll bar appears (this is no problem, i actually don't want the top layer to resize due to text legibility etc.) but what i notice is that when you scroll to view the rest of the top layer, the bottom layer no longer fills the screen, the remainder of the screen is now white, it actually cuts off some of the image from where the window was in it's last position.
this is the site:
http://www.baycreative.co.uk/Test.html
Any suggestions to why this is happening?

Try this tutorial instead. I believe the one you are
following is flawed.
Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
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
==================
"ck64" <[email protected]> wrote in message
news:g17del$r7k$[email protected]..
> Hello all,
> Just started using Dreamweaver and was following a
tutorial about making a
> layout in Photoshop, slicing it, and then importing it
into Dreamweaver.
> Then I
> delete the content portions of the image and add a box
with DIV tags.
>
> Now, the site works just fine when I put only a single
line of
> text/content
> for both FF and IE.
>
> However, once I add a second line, the site becomes a
mess in FF.
>
> I have the site hosted with 2 lines of text in my main
content box here:
>
http://cnorthington.site.io/sitebase.html
>
> Any advice you can offer would be great.
>
> Thanks,
> Chris.
>

Help with DIV tags (i think)

Hello all,
Just started using Dreamweaver and was following a tutorial
about making a layout in Photoshop, slicing it, and then importing
it into Dreamweaver. Then I delete the content portions of the
image and add a box with DIV tags.
Now, the site works just fine when I put only a single line
of text/content for both FF and IE.
However, once I add a second line, the site becomes a mess in
FF.
I have the site hosted with 2 lines of text in my main
content box here:
http://cnorthington.site.io/sitebase.html
Any advice you can offer would be great.
Thanks,
Chris.
P.S. This is what it looks like without content:
http://cnorthington.site.io//sitebasetwo.html

Try this tutorial instead. I believe the one you are
following is flawed.
Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
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
==================
"ck64" <[email protected]> wrote in message
news:g17del$r7k$[email protected]..
> Hello all,
> Just started using Dreamweaver and was following a
tutorial about making a
> layout in Photoshop, slicing it, and then importing it
into Dreamweaver.
> Then I
> delete the content portions of the image and add a box
with DIV tags.
>
> Now, the site works just fine when I put only a single
line of
> text/content
> for both FF and IE.
>
> However, once I add a second line, the site becomes a
mess in FF.
>
> I have the site hosted with 2 lines of text in my main
content box here:
>
http://cnorthington.site.io/sitebase.html
>
> Any advice you can offer would be great.
>
> Thanks,
> Chris.
>

Help with Divs need please

Hello could someone possibly help me.
My page layout has a top banner ("banner"), then main content
below in the middle (middletext), and a fotter ("footer") below the
"middletext" div
I want place a div of say 100px directly to the right of the
"middletext" div. The layout is fluid so I want the right div to
move with the rest of the page when resized in an IE window. Here
is the code for the css -
body {
background-color: #666666;
background-repeat: repeat-x;
#background {
background-color: #999999;
background-repeat: repeat-x;
width: 80%;
#content {
background-color: #CCCCCC;
background-repeat: repeat-x;
height: 300px;
#middletext {
background-color: #FFFFFF;
background-repeat: repeat-x;
margin-left: 200px;
margin-right: 200px;
height: 300px;
#footer {
background-color: #9999FF;
background-repeat: repeat-x;
height: 100px;
#rightcontent {
background-repeat: repeat-x;
width: 100px;
background-color: #CCCC66;
height: 100px;
position: absolute;
left: 1052px;
top: 135px;
#banner {
background-color: #996633;
background-repeat: repeat-x;
height: 100px;
And the code for the html page -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">

</script>
</head>
<body>
<div id="background">
<div id="banner">Content for id "banner" Goes
Here</div>
Content for id "background" Goes Here
<div id="content">
<div id="middletext">Content for id "middletext" Goes
Here</div>
id content </div>
<div id="footer">Content for id "footer" Goes
Here</div>
</div>
</body>
</html>
I also have the width of the page set to 80%, just to give a
small border, but how can I center the entire page?
Many thanks in advance!!
Billy.

Add the 'right' <div> before the 'middletext'
<div> and float it right
with a width of 100px. See code and css below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link href="test.css" rel="stylesheet"
type="text/css">
<script language="JavaScript" type="text/JavaScript">

</script>
<style>
body {
background-color: #666666;
background-repeat: repeat-x;
#background {
background-color: #999999;
background-repeat: repeat-x;
width: 80%;
#content {
background-color: #CCCCCC;
background-repeat: repeat-x;
height: 300px;
#middletext {
background-color: #FFFFFF;
background-repeat: repeat-x;
margin-left: 200px;
margin-right: 200px;
height: 300px;
#footer {
background-color: #9999FF;
background-repeat: repeat-x;
height: 100px;
#rightcontent {
background-repeat: repeat-x;
width: 100px;
background-color: #CCCC66;
height: 100px;
position: absolute;
left: 1052px;
top: 135px;
#banner {
background-color: #996633;
background-repeat: repeat-x;
height: 100px;
#right {
float: right;
width: 100px;
background-color:#FFFFFF;
</style>
</head>
<body>
<div id="background">
<div id="banner">Content for id "banner" Goes
Here</div>
Content for id "background" Goes Here
<div id="content">
<div id="right">right</div>
<div id="middletext">Content for id "middletext" Goes
Here</div>
<div id="footer">Content for id "footer" Goes
Here</div>
</div>
</div>
</body>
</html>

Help with Layer Positioning and TimeLine

Hello all, here is my situation:
I am trying to do a simple Layer animation for my home
page... 4 Layers startoff at the right of my webpage(table) and end
up at the left handside, as an example.
My problem is I have a main 1x1 table that is centered, and
that works fine to center all the text and images that are within
it, but the layers that I tried placing within it stay absolute to
the screen and not relative to the table.... and if I try to
specify relative position in the first place for any of the layers
that Layer disapears from my Layer panel and I cannot timeline with
it???!!!
This Started out as a lame trial to avoid making a flash
movie for this animation.. but right now I am more interested in
knowing the possibilities and limitations of using Layers and
Timelines in Dreamweaver.... Any help or comments are most welcome.
Layth

I have requested that the thread be removed, Andrew. That's
the best we can
do, I'm afraid. Thing is, it can only be removed from the
webforums, and
not from the local computers of those who have already
downloaded the
message. Also, if Google Groups synched already, then it's
like being
carved in stone....
You can see if that's the case by searching here -
http://groups.google.com/advanced_group_search?q=+group:macromedia.dreamweaver
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
==================
"Murray *ACE*" <[email protected]> wrote
in message
news:[email protected]...
> If you go here -
http://www.great-web-sights.com/g_layerlaws.asp,
and read
> through the layer laws, you'll see that you have broken
at least one by
> putting your layers into a table. Being absolutely
positioned, the layers
> do not rely on the table for their location on the
screen. There are ways
> to do this (easily) if you understand the whole concept
of CSS
> positioning. You can try the following things -
>
> * After setting your timeline the way you want it,
MANUALLY change the
> position attribute of each layer from "absolute" to
"relative". The
> timeline will still work, but you have changed the
entire paradigm for
> positioning on the <div> tags by making that
change. Having relatively
> positioned elements withing a table seems to work pretty
well.
>
> or
>
> * After setting your timeline the way you want it,
MANUALLY move the code
> for the layers OUT OF THE TABLE, and place it back on
the page,
> immediately above the </body> tag. Then follow
these directions -
>
> Change this -
>
> </head>
>
> to this -
>
> <style type="text/css">
> 
> </style>
> </head>
>
> change this -
>
> <body ...>
>
> to this -
>
> <body ...>
> <div id="wrapper">
>
> and this -
>
> </body>
>
> to this -
>
> </div>
> </body>
>
> and see if that helps.
>
>
> --
> 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
> ==================
>
>
> "laythss" <[email protected]> wrote in
message
> news:[email protected]...
>> Hello all, here is my situation:
>> I am trying to do a simple Layer animation for my
home page... 4 Layers
>> startoff at the right of my webpage(table) and end
up at the left
>> handside, as
>> an example.
>> My problem is I have a main 1x1 table that is
centered, and that works
>> fine to
>> center all the text and images that are within it,
but the layers that I
>> tried
>> placing within it stay absolute to the screen and
not relative to the
>> table....
>> and if I try to specify relative position in the
first place for any of
>> the
>> layers that Layer disapears from my Layer panel and
I cannot timeline
>> with
>> it???!!!
>> This Started out as a lame trial to avoid making a
flash movie for this
>> animation.. but right now I am more interested in
knowing the
>> possibilities and
>> limitations of using Layers and Timelines in
Dreamweaver.... Any help or
>> comments are most welcome.
>>
>> Layth
>>
>
>

Help with playbar positioning

I currently have a Captivate playbar that is positioned in
the upper right corner of the screen.
I have used Flash to modify the height, width, x and y axis
of the file.
The new horizontal position (the distance the playbar is from
the top of the window) is good. I’d like to the vertical
position (the distance from the right side of the window) to be
about 30 additional pixels from its current location.
I have modified the flash playbar.fla to allow for the
additional distance. I have added 60 pixels of additional length to
the cpPlaybar movie. Additionally I have shifted the center marker
30 pixels so that it (the center position marker) is still in the
center.
When I test the file with the new player it isn’t
positioned to the right like I thought it would.
I’m missing something. Has anyone successfully modified
these aspects of the playbar? If so, where might I look to change
these parameters?
Thank you,
TPK

> Is this right?
Usually not. In your case, on a page with no content and only
images, you
are probably safe, subject to the limitation described below.
By the way, it's best not to use file/pathnames containing
spaces. It can
get you into trouble on the web.
---> MrsB Fixed.css
> Firefox is giving me blue outlines around
> some elements but Safari is not.
Add this to your CSS -
a img { border:none; }
> The content in the Main Container is also
> moving when the browser is resized.
This is the penalty for having used layers, which are glued
to the screen at
the locations specified, hence "absolute positioning".
You can fix this by making div#container have these
additional styles -
position:relative;
text-align:left;
and by adding this style to your body rule -
text-align:center;
(you will likely need to reposition all the layers after
doing this)
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
==================
"doubleudet" <[email protected]> wrote in
message
news:f9su3p$4ef$[email protected]..
>I am having some problems positioning elements on my
site. I am using
>Absolute
> Positioning. Is this right? Also, Firefox is giving me
blue outlines
> around
> some elements but Safari is not. The content in the Main
Container is also
> moving when the browser is resized. Can someone please
help me out here?
>
>
http://www.mrsbillustrations.com/Illustration/illustration01.html
>

Help with divs

Hi, I am looking for some help getting this layout using divs working correctly. It will be going inside an existing spry tabbed panel. At the moment the styles are inline but I will be moving them to my external style sheet once it is working. What I am looking to do is create a div that will containg the details of a product, also contained in the div will be another div floated to the right containing the product image. The outer div will vary in height so I want the inner div that contains the image to match the height of the outer div, with the image being centered horizontaly and vertically if possible, the image will probably vary in size as well. See mockedup image below. Below that I have put the code I have got so far
<div style="border:solid 1px #000; padding:0px 0px 0px 10px; margin: 5px 0px 0px 0px">
    <div style="width:150px; border:solid 0px 0px 0px 1px #000; float:right;"><img name="" src="" width="100" height="100" alt="" /> </div>
    <h4>Universal Framing Anchor (A35)</h4>
    <p>The A35 Anchor features an exclusive bending slot which allows instant and accurate bending on-site. The balanced and completely reversible design of the A35 makes it suitable for a wide variety of applications.</p>
    <p><a href="http://www.strongtie.co.uk/products/type.php?typeID=10&familyID=7" target="_blank">"A35" Tech Data @ www.strongtie.co.uk</a></p>
</div>
Thanks for any help,
Richard

I would argue against this method for the following reasons.
First, resizing the image dynamically would require bringing in a library like JQuery to read the height of an element after the page loads and then adjust the image accodingly.
Second, as you increase the size of an image it will be more blurry, or on the flip side, if the image is large and has to be scaled down, you force users to download images larger than what is necessary increasing your page load times depending on the amount of products per page.
From a user's standpoint, my experience has been that if you make images larger, it will draw more attention to that item over your other items, is that what you want to do?
Then depending on how long the descriptions are, you also increase the amount of scrolling on your page. If the descriptions are that long your best bet may be to do a brief description on this "listing" page and then have the user click on something to bring them to a detailed page.
if you still want to move forward with the JQuery method post back and we can try to help you go that route.

Learning as I go, need help with div overlapping

PLEASE HELP, PEOPLE ARE LOOKING BUT YOU ARE NOT RESPONDING. At least give me something, please!! If you need more info I can give it to you, I just don't know what you need
I am learning Dreamweaver through the tutorials provided here on the Adobe site. I have basic html/css knowledge and am trying to learn how to use it!!
I have tried inserting div inside one big div, like in the getting started tutorial, but the tags seem to be overlapping when I click on the Live View option. The look fine in the design view, but overlap in the Live View. I need them not to overlap.
If this is not enough info for someone to help, please ask what you need to know.
Thank you
Robbie

1. Have you previously posted a question here? You seem to be alluding to one but I see no posts under the moniker of RobJes
     -No John, I haven't. I think I was just getting impatient. I had been working on this for a while and couldn't figure it out. I edited the original post after      I had seen that several people had looked at the question but had not even responded. I was being impatient.
2. Can you provide a link to what you've done so far?
      Here is a link to what I have so far, I think I fixed the problem, but if you see anything I could do please let me know
     http://www.spin4life.net/main.html
     Most of the links don't work yet, was just trying to get the layout fixed first.
3. What is your question in a nutshell?
     The text below the pictures on the top was overlapping with the other text below it. But like I said, I think I have it fixed now.
Either way, thank you for your reply. I really appreciate it and if you have any suggestions I would be all ears!! Thank you

Need help with Div Float Left...

Hi... this is a bit beginner, but can't seem to figure it out..
I'm trying to put three photos in a row... I am doing this by using divs with one floating left... but the third photo wants to drop to a second line below the other two...
Here is a link: http://www.robynjeandesign.com/bayareafacepainters/index.html
Help please
Thanks!

Don't overly complicate your code with too many divisions. Less is more.
Change this:
<div id="index_photos">
<div id="index_photo1"><img src="images/Face-Peacock.jpg" height="400" width="300"></div>
<div id="index_photo2"><img src="images/Face-Fairy-Crown.jpg" height="400" width="300"></div>
<div id="index_photo3"><img src="images/Face-Dragon.jpg" height="400" width="300"></div>
</div>
to this:
<img src="images/Face-Peacock.jpg" height="400" width="300">
<img src="images/Face-Fairy-Crown.jpg" height="400" width="300">
<img src="images/Face-Dragon.jpg" height="400" width="300">
Having said that, there may be times when you need 3 floats on a page. See link below for details.
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Help with div tag in DWCS4

Hola
this is my first time using --or trying to used-- CSS
I have a div tag that I want to used as a navigation bar.
I type the links, and when I try to fix them with CSS, if I put a line (border top and bottom) on top of the link, the whole links Shift out of the navigation box.
Then I tried to put an inside div in the navigation div to try to control the shifting, but it didn't work, still shift out of the div nav.
I'm going to post a link later so you can "see it".
Hope you understand my problem
Thanks for your help.
Daniel Ulysses
P.S. I'm learning DW, used to have GoLive, but have to "Update", so far...I love it, just having some issues.

Try this free menu extension from List-O-Rama.
http://www.dmxzone.com/go?5618
Project VII menus:
Uberlinks -
http://www.projectseven.com/tutorials/css/uberlinks/
CSS Express Drop menus-
http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm
Pop Menu Magic 2 - the best
http://www.projectseven.com/products/menusystems/pmm2/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.com/blogspot.com

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.

Need help with strategy / positioning of horizontal menu buttons

I have a preexisting template setup for a website. In this template there is a div called actualcontent where data for the pages goes. The navigation for the site lives to the left of the actualcontent div. However, now I am at a point that I need to implement an additional navigation method for a small subset of the site. I would like to insert about 7 links across the top of the actualcontent div that send people to other pages in the site. I would like the link that is selected to have its rectangle background a different color than the rest of the links that are shown horizontally across the top. How can this be done? Would I use a div for each link? How could I get them lined up at the same vertical height but spread horizontally across the top of the actualcontent div?
Positioning sometimes throws me for a loop. What type of positioning would I use? Would I use div's at all? Any help or links to tutorials is appreciated.

Without seeing what you have so far, I'm just tossing out a basic list menu that could go between your #header and #actualContent divisions.
CSS:
/**Top Menu Navbar**/
#navlist {
     background-color:#CCCCFF;
     padding: 5px;
     margin-left: 0;
     font: bold 12px Verdana, sans-serif;
#navlist li {
     list-style: none;
     margin: 0;
     border-top: 1px solid gray;
     display: inline;}
#navlist li a {
     padding: 0.25em 0.5em 0.25em 0.75em;
     border-left: 1em solid #AAB;
     background: #CCD;
     text-decoration: none;}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover {
     border-color: #9933FF;
     color: #000;
     background-color:#D0E8FF}
HTML:

<ul id="navlist">
     <li><a href="#">Skip to Content</a></li>
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2</a></li>
     <li><a href="#">Item 3</a></li>
     <li><a href="#">Item 4</a></li>
</ul> 
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
HTML Validator - http://validator.w3.org
CSS Validator - http://jigsaw.w3.org/css-validator/
Tutorials - http://w3schools.com/

Help with divs and columns please?

Hello all,
I'm quite new to dreamweaver and having problems. I am
designing a site with 3 columns (left for nav, middle for main
content and right for offers & advertising etc.) I am using
tables within the divs to organise content and I have aligned the
divs left and in all sorts of other ways to try and get them to
look like 3 columns but no matter what I do the right column always
ends up underneath the middle column. What am I doing wrong?
Thanks in advance

Faux columns. I don't like javascript solutions.
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
==================
"Jay Jhabrix" <[email protected]> wrote in message
news:ga92ts$23c$[email protected]..
> Murray,
>
> BTW... am trying to create a 3 column site... staying
away from tables...
> :)
>
> As i see it i have two choices:
> 1/ Go for a 'faux column" kind of solution
> 2/ PVII's javascript driven answer
>
> Ideally, i'd like to do it purely in CSS but with
minimal hacks. I will be
> using tables but don't want them to be a feature of the
design... purely
> for content. Background white. But want to have four
borders... left,
> right and the two central ones. Fixed width. Any
suggestions, links?
>
> (One menu is definitely PMM.)
>
> Cheers,
>
> JJ
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:ga920g$tv$[email protected]..
>>I can take it....
>>
>> --
>> 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
>> ==================
>>
>>
>> "Jay Jhabrix" <[email protected]> wrote in
message
>> news:ga91so$ph$[email protected]..
>>> "Murray *ACE*"
<[email protected]> wrote in message
>>> news:ga8vu7$rpa$[email protected]..
>>>
>>>> Heh - no. It was the perceived status of the
OP.
>>>
>>> That's what i kind of figured... but couldn't
resist the dig ;->
>>>
>>
>
>

Help with div container thumbnails

Learning and experimenting with css questions:
I want thumbnail containers containing jpgs and text that wrap to browser width just like thumbnail jpgs. These will eventually be put in a spry collapsible panel.
1- How to make "no-wrap" text? I want my containers to stretch the width of widest line
2 - What did I do to make my containers wrap strangely when browser window is resized...sometimes aligning right? I want them to stack on evenly spaced rows left to right.
thanks
http://planetrambler.com/test/thumbs-index.html
http://planetrambler.com/test/x1.css

Larry,
I am not sure that I understand but this might be it...
.tn-container {
background-color:#FFFFFF;
float:left;
height:180px;
padding:2px 10px;
text-align:center;
width:auto;
The only thing that concerns me about that, if it's your solution is that I am not sure about width: auto with a float. I do know that a floated element has to have a width expressed but I don't know if auto is ok.
If this doesn't work, then I suggest you reframe your question in a new thread. Because you have marked this as answered it may not attract the expert attention that might help us both!
Regards
Martin

Help with div positioning

Similar Messages

Maybe you are looking for