Need help centering DIV in CSS

Hi- I had a "coming to jesus" last night regarding my website. I've been out of the professional web design world for about 7 years. I'm getting back in it. I used to design in tables and after some reading, I know I need to design in DIV. My problem is I do not know how to get my main section centered on the page.
I did a sketch up of what I want in layout terms.
Any suggestions on how to center a 980px div?
Here's a link to my current page with table layout.
http://www.prodentite.com/patient_edu/index.htm
Any help is appreciated.

This is a very common question, so an article has been published in the Dreamweaver FAQ
Centering a page:
http://forums.adobe.com/thread/454036
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://twitter.com/nadiap

Similar Messages

I need help Centering a div box to a background image using dreamweaver cs5.5.

I need help Centering a div box to a background image using dreamweaver cs5.5. Everything shift left when viewing on different size monitors? See what I mean at
www.woodlandhospice.com

Have you looked at your page with images disabled?
I urge you to re-think this approach to web design because images of text are not indexed by search engines, screen readers or translators. Given the demographic group your site is targeting, you really need to ensure maximum web accessibility for all users.
Navigation, headings and descriptions all need to be in real text -- not images of text.
Ken is right. Absolute positioning is pure poison for such a simple layout. My advice is to start over with one of the pre-built Starter Pages in DW. Go to File > New > Blank page > HTML. Select a layout from the 3rd column and hit CREATE button.
Nancy O.

I need help centering a div!

Hi!
So i'm attempting to set up all the body content in my website so that it is always in the center of my webpage dispite the size of the browser. I had it going fine for a while, but then something happened and I lost it. What did I do wrong?
Help!!
Here is my complete code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
          background-image: url(images/images/images/images/baby_03.png);
#apDiv1 {
          position:absolute;
          width:202px;
          height:153px;
          layer-background-color:#000;
          border:1px none #000000;
          z-index:1;
          left: 41px;
          top: -1px;
#apDiv2 {
          position:absolute;
          width:200px;
          height:115px;
          layer-background-color:#000;
          border:1px none #000000;
          z-index:2;
          left: 480px;
          top: 148px;
#apDiv3 {
          position:absolute;
          width:200px;
          height:43px;
          layer-background-color:#000;
          border:1px none #000000;
          z-index:2;
          left: 254px;
          top: 2px;
#apDiv4 {
          position:absolute;
          width:200px;
          height:40px;
          layer-background-color:#000;
          border:1px none #000000;
          z-index:3;
          left: 285px;
          top: 2px;
#Layer1 #apDiv4 pre {
          font-family: helvetica;
          font-size: 18px;
          color: #EAEAEA;
#apDiv5 {
          position:absolute;
          width:200px;
          height:115px;
          layer-background-color:#000;
          border:1px none #000000;
          z-index:4;
          left: 588px;
          top: 135px;
#apDiv6 {
          position:absolute;
          width:200px;
          height:115px;
          layer-background-color:#000;
          border:1px none #000000;
          z-index:4;
          left: 539px;
          top: 80px;
#apDiv7 {
          position:absolute;
          width:200px;
          height:115px;
          layer-background-color:#000;
          border:1px none #000000;
          z-index:4;
          left: 537px;
          top: 62px;
#apDiv8 {
          position:absolute;
          width:549px;
          height:115px;
          layer-background-color:#000;
          border:1px none #000000;
          z-index:4;
          left: 556px;
          top: 64px;
#apDiv9 {
          position:absolute;
          width:200px;
          height:115px;
          layer-background-color:#000;
          border:1px none #000000;
          z-index:5;
          left: 66px;
          top: 177px;
#menue {
          background-color:#2C2929;
          padding:1px;
          text-align:right;
          font-family:Arial, Helvetica, sans-serif;
body,td,th {
          font-size: 13px;
          font-family: Arial, Helvetica, sans-serif;
          color: #FFF;
          color: #FFFFFF;
#textone {
          font-family:Arial, Helvetica, sans-serif;
#Layer1 div #menue pre {
          font-family: Arial, Helvetica, sans-serif;
</style>
</head>
<div id="Layer1" style="margin-left:auto; margin-right:auto; width:938px; height:100%; z-index:1; layer-background-color: #9999FF; border: 1px none #000000;"><body text="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="text-align:center; width: 938px;">
</div>
    <div id="menue">
      <pre>PORTFOLIO       RESUME       CONTACT</pre>
    </div>
    <img src="images/images/images/images/autumn_06.png" width="938" height="439" />
<div>
<table width="938" border="0" cellspacing="10px" cellpadding="0">
    <tr>
      <th scope="col"><p align="center">WHO I AM:</p>
      <p align="center">People often remark that I'm pretty lucky. Luck is only important in so far as getting the chance to sell yourself at the right moment. After that, you've got to have talent and know how to use it. - Fank Sinatra</p>
      <p align="center">Similar to Ol' Blue Eyes, I've got talent and I know how to use it. I'm an ambitious graphic designer from New York. I love design and am constantly learning more about this ever changing trade. I also dabble in scientific illustration and gardening.</p></th>
      <th scope="col"><p align="center">WHAT I DO:</p>
      <p align="center">I'm knowledgeable in Adobe Photoshop, Illustrator, InDesign, Dreamweaver, and Flash. I create print material, design logos, and build websites that stand out amoungst the rest. Currently an intern at Flourish Design Studio and a student a Marywood University, I have developed this site in order to showcase my work for future employers.</p>
      <p align="center">Some examples of my work can be found here.</p>
      <p align="center"><th scope="col"><script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#0a8082'
features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
}).render().setUser('SaraLynnLuciano').start();
</script></th></p></th>
    </tr>
</table>
</div>
</div>
</body>
</html>

APDivs, oh my! I don't recommend building primary layouts with APDivs. In the long-run you will regret it. Here's why:
http://apptools.com/examples/pagelayout101.php
That said, wrap your content inside a #wrapper division that has a stated width in pixels, a margin-left and margin-right of auto, AND position:relative to contain those pesky APDivs.
CSS:
#wrapper {
position:relative;
width: 990px;
margin:0 auto;
HTML:
<body>
     
     <div id="wrapper>
          your page content goes here.....
     </div>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

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

Need Help Centering Thumbnails!

Question #1
Hi, on my web page the thumbnals are not centered in the page but go to the left. In Dreamweaver I've turned on outlines so you can see that the thumbnails are not centered. I am trying to vertically and horizontally center my thumbnails in the div. (see image) I need to know which CSS Rule controls the centering of the thumbnails?
http://www3.telus.net/~jessum/PAGES/visual_light_box.html
Question #2
A second question. I am using Visual Lightbox for my thumbnail gallery but in the interface there is no setting to add space between the thumbnails or to center the thumbnails on the page. So every time I upload my gallery the thumbnails are really close together and they go to the left and are not centered.
It's frustrting to have to constantly edit the CSS and add space between the thumbnails every time I upload the gallery. Is there a solution to fix this so I can upload my gallery and the spacing and position of the thumbnails will be the same?
I just wish there was a simple gallery solution but I haven't seen one yet. Hmmm.

Also I wish there was a way to preview the page in a browser without having to save the page every time. If I make some changes and they are not correct then I have to save the page and I've messed it all up. In Golive you could preview the page without saving it and it made it a lot easier to just undo or close the page an reopen it. Do you know why you can't make some changes then preview the page in a browser without saving it?
Edit > Preferences > Preview in Browser
http://forums.adobe.com/thread/795084
There are 2 ways you can do a preview in browser (according to your preferences settings):
1. Preview using temp files
2. Preview not using temp files
If you are using method 2, then each time you preview, the last saved version of the file will be loaded by the browser for the preview. Thus, to see your latest changes, you just have to SAVE the file.
If you are using method 1, then each time you preview, a temporary file is built by DW from the current page, and that temporary file is what is previewed in the browser. Each time you preview a page, a NEW temporary file is created.
With method 1, you have to save the page before you can preview. With method 2, you do not have the save the page before you can preview.

Need Help Centering Page in Browser Window

I'm designing my pages by creating a graphic framework in
Photoshop, slicing and exporting images into css using Fireworks to
a Dreamweaver html page. These pages look great; but they load into
the upper left corner of the browser window
I was taking a Dreamweaver class at the Denver Art Institute,
that was worthless. I dropped the class after the 4th week and am
now teaching myself. I asked the teacher how to center this kind of
page in a browser window, so the page would behave like most
webpages, centering as you change the width of the browser window.
I also wanted to add a repeating pattern in a background image. She
told me that she didn't know how, that I would have to build the
background into my Photoshop file. So, that's what I've been doing.
However, when people with smaller monitors change pages within a
site the built-in background requires them to recenter the page
manually each time.
Is there a way to center the page and add a background image
that is not built in? I've tried using Dreamweaver's background
image and margins in the Page Properties; but that just pushes the
page to the upper left and adds the background to the right and
bottom of the page.
Please visit:
http://www.livingwater.la,
http://www.renegadegraphics.biz
and
http://www.dentalmatchmakers.net
for examples.
Thanks for your help.
Mary

>I was taking a Dreamweaver class at the Denver Art
Institute, that was worthless
Yes, those classes usually are worthless because they focus
on using the tool without giving you the proper foundation for
understanding and managing html and css. Unfortunately, all of the
example sites you gave you AP Divs (layers) as a primary layout
method, which is a terrible approach. AP Divs should be used rarely
if ever, and only when you understand how they work. When the
visitors font is sized differently than you expected, the site
falls apart. The correct approach is to learn web
design/development outside of the context of a specific
application.
http://www.w3schools.com/html/
is a good place to start for a basic understanding of html and css.
And some basic layout techniques can be found here:
http://apptools.com/examples/pagelayout101.php

Help centering divs

Okay I'm tearing my hair out here!
I'm working on a Web design for a class. I'm trying to make a fixed header that is centered on the screen. The block containing the header is 950 pixels wide and should auto-center.
Here's a link:
http://pjutter.com/Sessions/AdvancedCSS/Lesson3/indexNew.html
This is working on Firefox and Google Chrome but not on Internet Explorer (where it is totally messed up and unreadable).
I cannot figure out how centering works. Supposedly margin: 0 auto should center a div, but that only occasionally works. I've used negative margins to center the 950-pixel div, and that works on everything except IE which is ALL messed up.
The CSS file for the header is the one called headernav. The others are part of the Blueprint framework which I'll be using on the grid underneath the header. So just ignore the others.
Can anyone help me with this?
Thanks, Phyllis

Can't see your page. But static (unspecified) positioning is all that's required for 98% of page layouts. I very rarely use APDivs except for special situations like disjointed rollovers, lightbox windows or flyout menus. And then I wrap them inside a position:relative container.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

I need help centering my images.

Hi,
I am very new to DreamWeaver and have been teaching myself
for the past week. I am building my own small website for my
portoflio and can not figure out how to auto center my website.
When I center one image the other images are in the wrong spots. I
want everything to center itself based on how big the browser is
open. Please someone help me!!!!! It's very hard to explain what I
am trying to do.. I have 3 layers in my page and they are
overlapping. I dont want each of them auto centered by
themselves,,, I want them all centered as a whole. Do I have to
select them all then center them somehow? I have tried everything
and now I am forced to ask for help!!
here is a screenshot
http://img.photobucket.com/albums/v179/smagicpie/Picture1.png

It would work exactly the way you want if you did what I
suggested. As far
as I can tell, there is no change to the code at the link you
give below.
Using layers to build your pages is what has gotten you into
this mess.
It's not a best practice by any means....
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
==================
"smagicpie" <[email protected]> wrote in
message
news:fo5dl0$j94$[email protected]..
> This isn't working. It is centering the links like you
would center text.
> I
> just need all these layers to center as a whole in the
page. I dont want
> anything else to change. Is there anyway to select all
layers and center
> them?
> Here is a screenshot showing the layers. The links are
in a table within a
> layer.
http://img.photobucket.com/albums/v179/smagicpie/Picture1.png
> www.alisonleahwalker.com
>

Need help centering page

This page is just a baby but I'd like to get this figured out
before i get to deep into it. It's in php but only the swf menu at
the top is the consistent thing. the menu at the top will center.
the background and the sidebar will not. here is the code and a
link so you can see what I'm talking about.
www.mmdup.com/newindex.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">

</style></head>
<body><?php include("menuhead.html"); ?>
<img src="images/bannerline.png" width="1000" height="5"
/>
<table width="191" height="533" border="0"
cellspacing="0">
<tr>
<td bgcolor="#779993"> </td>
</tr>
</table>
</body>
</html>
Thanks for any advice.

Here try this code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>
<body>
<div id="wrapper">
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
width="1000" height="248" title="menu">
<param name="movie" value="bannermenu.swf" />
<param name="quality" value="high" />
<embed src="bannermenu.swf" quality="high"
pluginspage="
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="1000"
height="248"></embed>
</object>
<div id="main">
<p>Some text here</p>
</div>
</div>
</body>
</html>
aka Frenchy ASP
"vidfix55" <[email protected]> wrote in
message
news:[email protected]...
> This page is just a baby but I'd like to get this
figured out before i get
> to
> deep into it. It's in php but only the swf menu at the
top is the
> consistent
> thing. the menu at the top will center. the background
and the sidebar
> will
> not. here is the code and a link so you can see what I'm
talking about.
> www.mmdup.com/newindex.php
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
> <title>Untitled Document</title>
> <style type="text/css">
> 
> </style></head>
>
> <body><?php include("menuhead.html"); ?>
> <img src="images/bannerline.png" width="1000"
height="5" />
> <table width="191" height="533" border="0"
cellspacing="0">
> <tr>
> <td bgcolor="#779993"> </td>
> </tr>
> </table>
>
> </body>
> </html>
> Thanks for any advice.
>
>
>

Need Help Centering Page Content

Hi, I have added a white box behind my main page content but the content is not centered within the box. It seems to be on the left. There are a number of different style sheets and I need to find out which style is affecting how the content is positioned.
1. In this link below I’m not sure what is making the content go to the “left”. I need all of the thumbnails to be centered in the white area. That is what I need to find out first. What is the best way to find what is causing the thumbnails to go to the left? Is there an easy way to narrow down what is causing the thumbnails to go to the left?
If I select “ul.work li” I notice it is set to (float: left). If I change it to (float: right) the thumbnails all move to the right. but if I set it to (float: none) the thumbnails all line up vertically. Not what I want.
http://www.buzzfx.ca/2d_character.html
In the homepage I also need to have all of the content centered.
http://www.buzzfx.ca
2. Also, how would I move the white box up to align with (touch the bottom) of the grey header?

Thanks John, I managed to watch a good tutorial that set me straight.
So back to the initial question. I am trying to center the content in the body but it seems to be aligned "left". Using Firebug, I think I have found the part that needs changing.
1. At this link: http://www.buzzfx.ca/2d_character.html
2. I hovered over the thumbnails until I found: <ul class="work fullwork clearfix">
3. I then looked in the style and I believe it is this code below in "bold italics" that I need to edit to get the "content" to be centered but I am not sure how specifically to fix it/
Q. Why does "margin-left: 40px;" have a strike through it?
Q. Is "margin-left: 40px;" the reason the content is aligned "left"?
Q. Could I not just "center" the contents instead of have it positioned from the "left"? Please explain!
I would be very grateful if someone could look at my page in Firebug to tell what the best way is to center the body content.
.clearfix:after {   clear: both;
   content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
ul.work {
margin: 0 -15px;
ul, ol {
margin-left: 40px;
h1, h2, h3, h4, form, table, ul, ol, p, dl, blockquote, hr {margin-bottom: 30px;
text-align: left;
ol, ul {
list-style: none outside none;

Need help with mobily slider CSS

Hi there, I have found a really nice slider which you can see a demo here:
http://playground.mobily.pl/jquery/mobily-slider/demo.html
Basically, I am trying to get the bullets currently underneath the images to sit on top of the image, but whatever I try, I am not achieving what I want. I was wondering if you could give me some advice on where I on how to make it happen... please!
I can get one bullet to move up and sit on top, but then I loose all but the one bullet.
Here is the CSS:
#content {
width:900px;
.slider {
float:left;
width:900px;
height:305px;
position:relative;
padding-bottom:26px;
.sliderContent {
float:left;
width:900px;
height:305px;
clear:both;
position:relative;
overflow:hidden;
.sliderArrows a {
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url(../gfx/prev_next.png);
width:42px;
height:42px;
position:absolute;
top:50%;
margin-top:-34px;
.prev {
background-position:0 0;
left:15px;
.prev:hover {
background-position:0 -44px;
.next {
right:15px;
background-position:-44px 0;
.next:hover {
background-position:-44px -44px;
.sliderContent .item {
position:absolute;
width:900px;
height:305px;
background:#fff;
z-index:10;
.sliderBullets {
position:absolute;
bottom:0;
left:50%;
z-index:50;
margin-left:-45px;
.sliderBullets a {
display:block;
float:left;
text-indent:-9999px;
outline:none;
margin-left:5px;
width:10px;
height:11px;
background:url(../gfx/bullets.png) no-repeat;
.sliderBullets .active {
background-position:0 -13px;
.sliderContent a {
outline:none;
a {
color:#fff;
a img {
border:none;
Any guidance you could give is going to be appreciated.
Thanks in advance
Mat

Add padding: 20px 0 0 0; to the css selector below, as shown.
.sliderContent {
padding: 20px 0 0 0;
float:left;
width:800px;
height:350px;
clear:both;
position:relative;
overflow:hidden;
Amend bottom: 0; to top: 0; on the css selector below, as shown:
.sliderBullets {
position:absolute;
top:0;
left:50%;
z-index:50;
margin-left:-45px;
That's it, Job done.

Need help centering different sized images being loaded from a container

stop();
mainArea_mc.visible = false;
home_btn.addEventListener(MouseEvent.CLICK, function () { gotoAndStop("Home Template")} );
var totalImages:int = 0;
var imageDirectory : String = "";
var currentImage:int = 1;
var filePrefix : String = "";
var loader1 : Loader = new Loader(); // 2 loaders so we can fade an image on top of the other
var loader2 : Loader = new Loader();
pic_mc.addChild(loader1);
pic_mc.addChild(loader2);
loader1.name = "loader1";
loader2.name = "loader2";
loader1.contentLoaderInfo.addEventListener(Event.COMPLETE , resizeFadeImage);
loader2.contentLoaderInfo.addEventListener(Event.COMPLETE , resizeFadeImage);
info_mc.title_txt.autoSize = TextFieldAutoSize.LEFT;
if (presModeSlides) // Setup slide viewer vars
    totalImages = slides[currentSlideNumber].numSlides
    imageDirectory = "Data/slides/"+slides[currentSlideNumber].directory+"/";
    filePrefix = "slide";
    info_mc.title_txt.text = slides[currentSlideNumber].title
    info_mc.speaker_txt.text = slides[currentSlideNumber].speaker
    info_mc.university_txt.text = slides[currentSlideNumber].university
else // Setup picture viewer vars
    totalImages = 233;
    imageDirectory = "Data/pictures/";
    filePrefix = "picture";
    info_mc.title_txt.text = "3rd International BioPlex® 2200 User Meeting";
    info_mc.speaker_txt.text = "Pictures";
    info_mc.university_txt.text = "";
info_mc.speaker_txt.y += info_mc.title_txt.height; // Position sublines so they are directly under title
info_mc.university_txt.y += info_mc.title_txt.height;
leftArrow_btn.addEventListener(MouseEvent.CLICK, prevImage);
rightArrow_btn.addEventListener(MouseEvent.CLICK, nextImage);
showImage(currentImage)
function showImage(num:int)
    if (pic_mc.getChildIndex(loader1) > pic_mc.getChildIndex(loader2)) // Place the jpg into which ever container is on top at the moment
        loader1.load(new URLRequest(imageDirectory+filePrefix+currentImage+".jpg"));
    else
        loader2.load(new URLRequest(imageDirectory+filePrefix+currentImage+".jpg"));
function resizeFadeImage(e:Event)
    e.currentTarget.loader.alpha = 0;
    Tweener.addTween(e.currentTarget.loader, {alpha:1, time:0.4, onComplete: removeOtherImage , onCompleteParams:[e.currentTarget.loader]});
    e.currentTarget.loader.scaleX = 0.75;
    e.currentTarget.loader.scaleY = 0.75;
    var bitMap : Bitmap = Bitmap(e.currentTarget.loader.content);
    bitMap.smoothing = true;
function removeOtherImage(l:Loader)
    if (l.name=="loader1")
        pic_mc.setChildIndex(loader1,0);
        if (loader2.content != null)
            if (loader2.content is Bitmap)
                (loader2.content as Bitmap).bitmapData.dispose();
    else
        pic_mc.setChildIndex(loader2,0);
        if (loader1.content != null)
            if (loader1.content is Bitmap)
                (loader1.content as Bitmap).bitmapData.dispose();
function nextImage(e:Event)
    if ((!Tweener.isTweening(loader1)) && (!Tweener.isTweening(loader2)))
        if (currentImage < totalImages)
            currentImage ++;
        else
            currentImage = 1;
        showImage(currentImage);
function prevImage(e:Event)
    if ((!Tweener.isTweening(loader1)) && (!Tweener.isTweening(loader2)))
        if (currentImage > 1)
            currentImage --;
        else
            currentImage = totalImages;
        showImage(currentImage);

function resizeFadeImage(e:Event)
    e.currentTarget.loader.alpha = 0;
    Tweener.addTween(e.currentTarget.loader, {alpha:1, time:0.4, onComplete: removeOtherImage , onCompleteParams:[e.currentTarget.loader]});
    e.currentTarget.loader.scaleX = 0.75;
    e.currentTarget.loader.scaleY = 0.75;
e.currentTarget.loader.x = (stage.stageWidth-e.currentTarget.loader.width)/2;
e.currentTarget.loader.y = (stage.stageHeight-e.currentTarget.loader.height)/2;
    var bitMap : Bitmap = Bitmap(e.currentTarget.loader.content);
    bitMap.smoothing = true;

I need help with CSS and floating

Okay, I know I need to get up on CSS and get rid of tables in
my sites.
However, I'm running up against a problem, and after banging
my head
against it for a while, I realize I need help. I've stripped
this down
so as to only show the area where I'm having difficulty.
What I want is a page that has everything down the center,
taking up no
more than 750 pixels and no more than 550 pixels of width. No
problem there.
After the header and the top content, I'd like to have two
"columns",
each in it's own separately-colored box. I would like the
right-side
column/box to be a static size, while the left-side
column/box sizes
dynamically.
Where I'm having problems is that when one column is boxed,
it's fine,
but whenever I wrap each column in its own box, the
fixed-size box
either jumps below or above the other box (depending on which
one has
been floated and which order the div's appear in the code).
Here are the links:
CSS:
http://www.afice.org/stylesheet/floatmestyles.css
ex 1:
http://www.afice.org/floatme1.html
ex 2:
http://www.afice.org/floatme2.html
Before sending, I took a look again, just to see if I was
missing
anything. I did notice that it doesn't seem to be that the
box is
jumping down so much as it is that it's getting written over.
Anyway, sorry for the long-winded explanation. I hope I've
managed to
explain what I'm trying to do well enough that someone can
tell me where
I'm going wrong.
Thanks,
--Kevin

Do you want something like this:
http://www.pmob.co.uk/temp/spointfooter.htm
You will need to look at the code to see how it was done.
Otherwise, there are different examples here on Pauls' site:
http://www.pmob.co.uk/temp/3colfixedtest_4.htm
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.perrelink.com.au
- Web Dev
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.adobe.com/devnet/dreamweaver/css.html
"Kevin D-R" <[email protected]> wrote in
message
news:[email protected]...
> Okay, I know I need to get up on CSS and get rid of
tables in my sites.
> However, I'm running up against a problem, and after
banging my head
> against it for a while, I realize I need help. I've
stripped this down so
> as to only show the area where I'm having difficulty.
>
> What I want is a page that has everything down the
center, taking up no
> more than 750 pixels and no more than 550 pixels of
width. No problem
> there.
>
> After the header and the top content, I'd like to have
two "columns", each
> in it's own separately-colored box. I would like the
right-side column/box
> to be a static size, while the left-side column/box
sizes dynamically.
>
> Where I'm having problems is that when one column is
boxed, it's fine, but
> whenever I wrap each column in its own box, the
fixed-size box either
> jumps below or above the other box (depending on which
one has been
> floated and which order the div's appear in the code).
>
> Here are the links:
>
> CSS:
http://www.afice.org/stylesheet/floatmestyles.css
>
> ex 1:
http://www.afice.org/floatme1.html
>
> ex 2:
http://www.afice.org/floatme2.html
>
> Before sending, I took a look again, just to see if I
was missing
> anything. I did notice that it doesn't seem to be that
the box is jumping
> down so much as it is that it's getting written over.
>
> Anyway, sorry for the long-winded explanation. I hope
I've managed to
> explain what I'm trying to do well enough that someone
can tell me where
> I'm going wrong.
>
> Thanks,
>
> --Kevin

Need Help With Dreamweaver Divs

This is a clip of my website that I am making, it is not online yet.
But what I need help is with the divs, as you can see the div with the blue text is overlapping a fireworks html banner I made.
Any way I can fix this so that the fireworks banner goes over the div instead of the other way around?
All help is thanked!

This is a problem with stacking order. Your Blue Text division has priority over your rollover-menus.
Please read about z-index.
http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
For better answers, we need a link to your site's test page.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Need help centering DIV in CSS

Similar Messages

Maybe you are looking for