Horizontally centering a div with "auto" margins...

I believe this is the first time I've ever encountered an instance where something works as intended in IE7, but won't in IE8+ or FF3.
I am trying to horizontally center a 995px fixed (non-scrolling) div that stretches to 100% vertically.
Here's the code I'm using :
.class {
    height:100%;
    width:995px;
    position:fixed;
    background:no-repeat left center;
    top:0; bottom:0;
    padding:0;
    margin:0 auto;
    overflow:hidden;
As I said, it works like a charm in IE7, but the entire div is left-justified in the viewport on anything more recent than that.
Can anyone spot anything wrong with my method?

Not sure what you're trying to accomplish, but you can't have it both ways.
Use either static (default) positioning and auto (default) margins or fixed positioning with coordinates for top or bottom & left or right. Older IE browsers don't support fixed positioning on anything except the body tag -- which may explain your results.
<!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>Untitled Document</title>
<style type="text/css">
.center {
width:995px;
background:no-repeat left center;
padding:0;
margin:0 auto;
overflow:hidden;
border:1px solid silver;
text-align:center;
.fixed {
width: 250px;
position:fixed;
top:5em;
left:0;
text-align:center;
border: 4px solid green;
</style>
</head>
<body>
<div class="center">
this is a centered division
</div>
<div class="fixed">
this is a fixed division
</div>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

Centered flash site with no margins

I was wondering if any one could help me in "coding" my site
to have my flash page be centered and have NO margins.... I know
Kirupa.com had a code on his site in regards to some code to be
placed in the "head" tag of the .html "page" but it has since been
removed. Could anyone here please help?
the ultimate goal is to have the site fill up the entire
screen.
Thanks in advance

if you're using a flash 9 player you can use the Stage's
"displayState" property to go fullscreen. otherwise, none of the
old javascript tricks work with the ie security fixes.

Centering a Div Horizontally

Hello,
I need help centering a div horizontally with CSS. What I'm trying to do is get this box that will contain text to center on the page and then I will expand it's width to match the image right above it, to fit the design.
Here is my code (i made the code of the div that I want to center within the document bold):
<!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 name="description" content="Lorentz Painting Co.: Pristine, Precise and Professional" />
<meta name="keywords" content="Maciej Lorenz, paint, high quality, interior, exterior, co., painting, professional, New England, Vermont, Nassachussetts, Boston, New York New Hampshire, New England" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Nantucket Gift Basket Company</title>
<link href="stylesMain.css" rel="stylesheet" type="text/css" />



<script type="text/javascript" src="scripts.js"></script>
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:1844px;
    height:43px;
    z-index:1;
    left: 64px;
    top: 253px;
body {
    background-color: #FFF;
    background-image: url(shingles1.jpg);
    background-repeat: repeat;
a:link {
    text-decoration: none;
    color: #FFF;
a:visited {
    text-decoration: none;
    color: #FFF;
a:hover {
    text-decoration: none;
    color: #FF0;
a:active {
    text-decoration: none;
    color: #FF0;
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-5']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-6']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-7']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</head>
<body>
<div id="wrapper-1">
<div id="branding">
    <h1><img src="Nantucket Products_editedsmaller.jpg" width="482" height="326" /></h1>
        <p> </p>
        <div id="content-2">
      <div class="content-wrap">
        <p> </p>
        <p>ddddddddddddddddddddddddddddddddddddddddddddd</p>
        <p> </p>
      </div>
    </div>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <h1> </h1>
    <div id="wrapper-2">
      <div id="wrapper-3">
        <div id="content-bottom"></div>
      </div>
      <div id="footer">
        <p> </p>
        <p><a href="index.php" title="Lorentz Painting; Why us? We are the best and most affordable painting company in New England, MA, NH, NY, VT, CT, ME and etc.">Home</a> - <a href="gift_baskets.php" title="Lorentz Painting Co.: Products & Services; nothing but the finest painting products that can be found in the market., New England, VT, NH, MA, NY, CT, ME">Gift Baskets</a> - <a href="contact.php" title="Contact Lorentz Painting Co. Today for the best painting value in New England, VT, NH, MA, NY, CT">Contact</a></p>
<p><strong><a href="sitemap.html" title="Site Map of Lorentz Painting Co. the most professional and highest quality painting company in New England, VT, NY, NH, MA, ME, CT">The Nantucket Gift Basket Co., 2011</a></strong></p>
        <p><strong><a href="http://cwws.org" title="Common Wealth Web Solutions" target="_new">Designed by CWWS</a></strong>      </p>
        <p> </p>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("Lorentz Painting Co.: The best value in painting in New England, NY, VT, NH, MA, ME, CT. A professional company that produces high quality results.");
swfobject.registerObject("Lorentz Painting Co.: The most Pristine, Precise and Professional Painting Company in New England, NY, VT, NH, MA, ME, CT.");
swfobject.registerObject("Lorentz Painting Co.: High Quality painting at an affordable price. Serving New England, NY, VT, NH, MA, ME, CT.");
</script>
</body>
</html>

Thank you guys for bringing me good advice/info, I attempt to put it to use tonight and I will get back to you and let you know how it goes.
Thanks!
Date: Tue, 7 Jun 2011 21:39:44 -0600
From: [email protected]
To: [email protected]
Subject: Centering a Div Horizontally
Have a look at the following simplified example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html {
     height: 100%;
     background: #CCC;
body {
     width: 960px;
     margin: auto;
     background: #FCF;
     height: 100%
h1 {
     margin: 1.5em 20px;
#header {
     width: 482px;
     margin: auto;
     height: 326px;
     background: #FF9;
     text-align: center;
</style>
</head>
<body>
<div id="header">
<p>this is the space for your image</p>
</div>
h1. This can be a header
</body>
</html>
Notice how, with a block element, the width is set to a value combined with a margin set to auto. This principle can be used for any block element including BODY
The idea is to keep it simple
Gramps
>

Horizontally centering flash .swf" and disallowing horizontal scroll??

Is it possible to center a flash .swf file on a website, and then disable horizontal scrolling?
I made my website in Flash Catalyst, and I made the width 1700px and the height 1200px. I made the width large because I wanted it to look good in the largest screen resolutions, but my biggest problem now that I've finished making the website is putting it up. Simply embedding it makes it scroll horizontally all the way to 1700px, which isn't good for those with small browsers.
Originally, I was planning on making the flash file the background in CSS (using body {background: url(FILE.swf) no-repeat #000 top center}) but then I found out you can't put .swf's as backgrounds.
Basically, I want to know if it's possible to center the .swf horizontally, and then disallow horizontal scrolling. I want to keep vertical scrolling,
Any help appreciated!

Is it possible to center a flash .swf file on a website, and then disable horizontal scrolling?
Yes, but it introduces other problems. With scrolling disabled, you might not be able to see all the page. I DO NOT recommend what you are trying to do. Flash scaling would most likely give you better results.
Background images if intended to cover a large area are typically very small images which are repeated to create a pattern. Using one large image will still never cover all the possible screen resolutions or page sizes... for example larger than 1700 or taller than 1200 pixels.
Centering requires a set dimension, like 1700 so auto set margins would center it, but it still may not cover 100% as using a width of 100% would.
That being said, turn off horizontal scroll and leave vert on with:
overflow-y: auto !important;
overflow-x: hidden !important
then you'll need to use z-indexing to lay anything else over the top of you background .swf
Here a sample page that should get you going... dimensions are smaller so you can see how it works... the principle is the same.
<!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>No Scroll</title>
<style type="text/css">

</style>
</head>
<body>
<div id="main_container">
<div id="flash">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="800" height="600" id="overflow" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="overflow.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffff00" /><embed src="overflow.swf" quality="high" bgcolor="#ffff00" width="800" height="600" name="overflow" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<div id="content">
<p align="center">This is the center</p>
</div>
</div>
</body>
</html>
Best of luck!
Adninjastrator

Centering a DIV Tag

Hi,
am having trouble / don't have a clue how to centre a div tag
to the center of the page? Can someone point me where am going
wrong. Here is the html code:
thanks in advance
hammer.

>>I think you'll find significant disagreement here
about the following
Yes, here, I definitely will find significant disagreement.
But I'm very
much of the opinion that publishing to the web is for the
masses, not just
for you folk with the time, motivation, and expereince to
deal with the
range of issues relating to css layout. The simplicity of
tables far
outweighs the gains of css layout at this point in time.
>>There is nothing worse than a morass of nested tables
spanned to death,
>>not
only for you as the maintainer of the site, but also for the
browsers, some
of which simply cannot render such pages. CSS layouts do not
have these
problems.
Here you are wrong. I would actually revese that whole point.
It is css
layout that are notorious fo rbrowsers laying out or not
rendering properly.
Tables never came close to having such issues. Even nested
tables, one level
deep, are perfectly fine.
>>some
of which simply cannot render such pages. CSS layouts do not
have these
problems.
Politely, where the heck have you been living these last few
years!!
>>Future maintainence, bandwidth usage, and simplicity
of layout are big
benefits of using CSS as opposed to tables.
simplicity of layout??? Again, I think you are missing the
argument here.
Its almost a given that tables are simpler to use for layout.
Almost all
books on teh topic agree, but point out the long term benefit
of css layout
despite the added complexity. So please don't use the
'simplcity' as an
argument here. CSS layout is the most intimidating and hard
to fathom thing
for most beginners, not just the new syntax but all the
nonsensical
(seeming) twists and turns that must be taken to get it to
work properly -
not to mention they are buggy as hell. Tables? They don't
come close to
being as nasty as CSS layout as it is today.
>>Everyone here (I think) agrees that if tables work
better for you, then use them. BUT use them correctly if you
are going to
do that. It's pretty simple, really....
Agreed. I personally use tables for average sized websites
which have to be
edited/maintained by general staff - you can teach tables oto
people inside
of amorning to a day. You'd need weeks to months to teach
enough CSS layout
to a layman and even then he'd think it sucks. I will be
using css for
layout about two browser versions from now.
I don't see the sense on jumping on a technology that, at
every second turn
you get, go here for this hack, do this to get around that
problem, IE
cannot do this so use this javascript fix, oh it doesn't work
while looking
at in dreanweaver but it will work in the browser, blah blah
blah...its
enough to put someone off web design for life.
I came to the web initially becuase I was amazed at how much
I could do with
so little knowledge - it was awseome. I think this should
still happen to
people today - it's quite empowering. I think the reality is
a lot more folk
get disheartned, confused and simply don't run with it. We
scare the crap
out them with css layout.
"Murray *ACE*" <[email protected]> wrote
in message
news:[email protected]...
>I think you'll find significant disagreement here about
the following -
>
> * CSS for layout is simply not there yet
> * Its only the accesibility issue which tables lose
points for
> * Possibly, the only benefit of css layout is that it
can be centrally
> goverened through a linked style sheet, but even this
can be done with DW
> templates and tables
>
> CSS for layout is certainly "there". Perhaps it's not
there for you, but
> it surely is for others.
>
> There is nothing worse than a morass of nested tables
spanned to death,
> not only for you as the maintainer of the site, but also
for the browsers,
> some of which simply cannot render such pages. CSS
layouts do not have
> these problems.
>
> Future maintainence, bandwidth usage, and simplicity of
layout are big
> benefits of using CSS as opposed to tables.
>
> But let's not make this a holy war. Nobody here is
saying that you have
> to replace tables with CSS. Everyone here (I think)
agrees that if tables
> work better for you, then use them. BUT use them
correctly if you are
> going to do that. It's pretty simple, really....
>
> --
> 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
> ==================
>
>
> "Arrdvark" <[email protected]> wrote in
message
> news:[email protected]...
>> tables are much simpler, translate well to knowledge
people have from
>> other tools (ie; ms word) and can do layout quite
well. CSS for layout is
>> simply not there yet - it feels like one great big
hack and is difficult
>> for people to learn, especially causal web designers
who just dont have
>> the time to amass all teh knowledge and expereince
needed just to get a
>> simple css layout working in both major browsers.
One of the things that
>> made the web so big was how simple it was to publish
to - CSS layout is a
>> step backward in this regard.
>>
>> tables are still fine for most sites, a perfectly
valid choice. Its only
>> the accesibility issue which tables lose points for.
Possibly, the only
>> benefit of css layout is that it can be centrally
goverened through a
>> linked style sheet, but even this can be done with
DW templates and
>> tables, or dynamic pages and tables (ie: asp.net
master pages).
>>
>> I am 50 / 50 these days as to wether css layout is
worth the hassle for
>> the average website being bult by the avergae
person.
>>
>>
>>
>>
>> "FreakyJesus" <[email protected]>
wrote in message
>> news:[email protected]...
>>> Very well said, Thierry
>>> And Arrdvark, I hear you on this:
>>> "it almost always causes total confusion as to
"why" this is the case
>>> and puts
>>> people right off CSS altogther."
>>> I am showing a friend how to use CSS (blind
leading the blind) and on a
>>> regular basis she's like "wouldn't this be
easier with tables within
>>> tables."
>>> Css CAN be very confusing.
>>>
>>> Andy
>>>
>>>
>>>
>>>
>>>
quote:
Originally posted by:
Newsgroup User
>>> Al wrote:
>>> > On Fri, 01 Dec 2006 09:39:18 -0500, Murray
*ACE*
>>> > <[email protected]>
wrote:
>>>
>>> >> Not only something different, but an
inferior choice at that!
>>>
>>> > I guess it can sometimes be difficult for
an inexperienced user to
>>> > assess and evaluate multiple solutions. If
there are downsides to
>>> > public forums, that would be at least one
of them. It's hard enough
>>> > for newbies to assess a single solution,
but wading through a
>>> > sub-discussion between third-parties
micro-analyzing their personal
>>> > favorite solutions can be untenable.
>>>
>>> I agree, but I can also understand that it can
be frustrating for people
>>> (people in general) who try to help to see that
the OP (OPs in general)
>>> didn't even try a solution that didn't require
too much effort.
>>> IMHO, there was not much for the OP to go
through here since *early* in
>>> this
>>> thread, the OP had everything to make it work.
>>> First post FreakyJesus said to set up the
left/right margin of the DIV
>>> to
>>> "auto" and second post Murray gives a very
explicit "fix" for IE5:
>>> body { text-align:center; }
>>> #graybox { text-align:left; }
>>> Actually, just trying margin auto could have
been enough for the OP.
>>> Sometimes it is important to know "some"
Javascript, HTML or else to be
>>> able
>>> to implement (not necessary understand) a
solution, but here it was not
>>> the
>>> case.
>>>
>>> Nothing against the OP here, and nothing to get
excited either ;-)
>>> This is just a general statement about the other
side of the coin.
>>>
>>> > Note to self: Recite Serenity Prayer before
posting here in the
>>> > future.
>>>
>>> Let's hope that works :)
>>>
>>> --
>>> 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
>>>
>>>
>>>
>>>
>>>
>>>
>>
>>
>
>

Centering a DIV, (help) Tried several solutions, none helped.

Hi,
I am trying to center my webpage, fortunatly i tried to center it before i did to much work on it.
Heres my Css. (it already includes the proposed solution that i saw on this forum, being the wrapper the last solution, it wraps the other 2 divs (topo and menu))
@charset "UTF-8";
/* CSS Document */
body {
    text-align:center;
    right: auto;
    height: auto;
    width: 800px;
    position: relative;
    left: auto;
#topo {
    background-color: #000;
    left: auto;
    right: auto;
    width: 800px;
    clip: rect(auto,auto,auto,auto);
    position: relative;
    overflow: auto;
    height: auto;
#menu {
    width: 800px;
    left: auto;
    right: auto;
    position: relative;
    height: auto;
#Wraper {
    text-align: center;
    position: relative;
    left: auto;
    right: auto;
    width: 800px;
Heres my html. In case it matter
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>ManoZe</title>



<link href="../css/styles.css" rel="stylesheet" type="text/css">
<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css"></style>
</head>
<body>
<div id="Wraper">
<div>
    <div id="topo">
      <div>
        <div align="center"><img src="../images/banner.jpg" width="800" height="300">    </div>
      </div>
    </div>
    <div id="menu">
      <div align="center">
        <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="65">
          <param name="movie" value="../images/menu.swf">
          <param name="quality" value="high">
          <param name="wmode" value="transparent">
          <param name="swfversion" value="6.0.65.0">
          
          <param name="expressinstall" value="../Scripts/expressInstall.swf">
          
          
          <object type="application/x-shockwave-flash" data="../images/menu.swf" width="800" height="65">
            
            <param name="quality" value="high">
            <param name="wmode" value="transparent">
            <param name="swfversion" value="6.0.65.0">
            <param name="expressinstall" value="../Scripts/expressInstall.swf">
            
            <div>
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
            
          </object>
          
        </object>
      </div>
    </div>
    <div align="center"> </div>
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>
Thks allot for you help!.

I redid the file, and it worked, i made an efford to minimize the code to a bare minimum, maybe less is more(?)
Here goes the new files code. (to help understand what went wrong)
New CSS:
@charset "UTF-8";
#topo {
    width: 800px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
#menu {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
New HTML;
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>ManoZe</title>



<link href="../css/styles.css" rel="stylesheet" type="text/css">
<style type="text/css"></style>
<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="topo"><img src="../images/banner.jpg" width="800" height="300"></div>
<div id="menu"> <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="65">
    <param name="movie" value="../images/menu.swf">
    <param name="quality" value="high">
    <param name="wmode" value="opaque">
    <param name="swfversion" value="6.0.65.0">
    
    <param name="expressinstall" value="../Scripts/expressInstall.swf">
    
    
    <object type="application/x-shockwave-flash" data="../images/menu.swf" width="800" height="65">
      
      <param name="quality" value="high">
      <param name="wmode" value="opaque">
      <param name="swfversion" value="6.0.65.0">
      <param name="expressinstall" value="../Scripts/expressInstall.swf">
      
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      
    </object>
    
</object>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

(Noob) Centering a div?

I am very new to dreamweaver and have been following some tutorials and was wondering if someone could help me with a spot. I am just messing around trying to learn structure with divs. I am trying to use 100% width on areas which seems to be working and the text seems easy enough to center.
But in the "middle" div, I added two picture divs. How do I center the picture divs with a % or to keep it responsive?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#container {
width: 100%;
#header {
width: 100%;
height: 300px;
background-color: #3399FF;
#middle {
margin-top: 150px;
margin-right: auto;
margin-left: auto;
font-style: normal;
font-weight: 400;
font-family: abel;
font-size: 45px;
width: auto;
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
#title {
margin-top: 0px;
margin-bottom: 0px;
color: #FFFFFF;
font-size: xx-large;
padding-top: 75px;
font-style: normal;
font-weight: 400;
font-family: chunk;
#pictures {
float: left;
margin-left: 0px;
margin-right: 0px;
height: 300px;
width: 300px;
padding-left: auto;
padding-right: auto;
margin-top: 100px;
</style>
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/chunk:n4:default;abel:n4:default.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="header">
    <div id="title">
      <div align="center">
        <h1>Starbucks Coffee</h1>
        <p>We have the best coffee.</p></div></div>
</div>
<div id="middle">
    <div align="center">
      <p>Welcome to Starbucks</p>
      <div id="pictures"><img src="Learning Adobe Dreamweaver CC - Working Files/Chapter 6/Flowers Galore/images/Flower_1.jpg" width="220" height="300" alt=""/></div>
      <div id="pictures"><img src="Learning Adobe Dreamweaver CC - Working Files/Chapter 6/Flowers Galore/images/Flower_4.jpg" width="220" height="300" alt=""/></div>
    </div>
</div>
</div>
</body>
</html>

jmflu wrote:
Thanks for the reply!
I really appreciate it
Below one method is responsive and the other is not.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="charset=UTF-8">
<title>Untitled Document</title>
<style>
#container {
    width: 100%;
#container img {
    max-width: 100%;
    height: auto;
#pictureWrapper {
    width: 47%;
    margin: 0 auto;
    overflow: hidden;
    background-color:#CCC;
.picture {
    float: left;
    width: 46%;
    margin: 0 2%;
    background-color:#63C;
#pictureWrapper2 {
    width: 480px;
    margin: 0 auto;
    overflow: hidden;
    background-color:#CCC;
.picture2 {
    float: left;
    width: 220px;
    background-color:#63C;
    margin: 0 10px;
h2 {
    text-align: center;
</style>
</head>
<body>
<div class="container">
<h2>Responsive</h2>
<div id="pictureWrapper">
<div class="picture">
<img src="Learning Adobe Dreamweaver CC - Working Files/Chapter 6/Flowers Galore/images/Flower_1.jpg" alt=""/>
</div>

<div class="picture">
<img src="Learning Adobe Dreamweaver CC - Working Files/Chapter 6/Flowers Galore/images/Flower_4.jpg" alt=""/>
</div>

</div>

</div>

<div class="container">
<h2>Not Responsive</h2>
<div id="pictureWrapper2">
<div class="picture2">
<img src="Learning Adobe Dreamweaver CC - Working Files/Chapter 6/Flowers Galore/images/Flower_1.jpg" alt=""/>
</div>

<div class="picture2">
<img src="Learning Adobe Dreamweaver CC - Working Files/Chapter 6/Flowers Galore/images/Flower_4.jpg" alt=""/>
</div>

</div>

</div>

</body>
</html>

Vertically centering a div

Hi All,
I want to be able to have a full screen image with text overlaying it in the centre. I want the full screen image to respond to the size of the viewport. I have the following code which works for the opening screen image.
CSS:
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 3vh;
text-align: left;
html, body, #a {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
#a {
    display: table;
background-color: #0CF;
#b {
    display: table-cell;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
#content {
    border: 5px solid red;
    width: 90%;
    height: auto;
    margin: auto;
HTML:
<div id="a">
<div id="b">
    <div id="content">
      <h1>THIS IS MY HEADING</h1>
    </div>
</div>
</div>
I want to be able to replicate this down my page. I can simply copy and paste the Html and it works but it obviously runs off the same CSS. If i change the div id name and copy the CSS code and rename that, it stops working.
Any help would be great on this as I really need this to work for my design.
If you need me to elaborate more just let me know.
Cheers,
Alex

Is this the kind of solution you are looking for?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,300,300italic,300|Droid+Ser if:400,400italic' rel='stylesheet' type='text/css'>
<style>
html {
    height:100%;
body {
    background: #fff;
    color: #878787;
    font-weight:300;
font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    text-align:left;
    height:100%;
    padding: 0;
    margin: 0;
.fullScreen {
width:100%;
height:100%;
display: table;
.fullScreen .fullScreenText {
display: table-cell;
text-align: center;
vertical-align: middle;
.fullScreen .fullScreenText p {
text-align:center;
.fullScreen h2 {
    font-size: 30px;
    color: #fff;
    text-align: center;
.fullScreen a {
text-decoration: none;
display: inline-block;
background-color:#C90;
color: #fff;
padding: 15px 25px;
font-weight: 600;
</style>
</head>
<body>
<div class="fullScreen" id="panel1" style="background: #f2f2f2 url('http://pixabay.com/static/uploads/photo/2012/04/26/20/06/butterfly-43008_640.jpg') no-repeat scroll center right; -webkit-background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
<div class="fullScreenText">
<h2>Some text goes here for the home page</h2>
<a href="#panel2" data-scroll data-speed="800" data-easing="easeInOutQuad">About Us</a>
</div>
</div>
<div class="fullScreen" id="panel2" style="background: #f2f2f2 url('http://pixabay.com/static/uploads/photo/2014/10/29/17/19/butterfly-508143_640.jpg') no-repeat scroll center right; -webkit-background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
<div class="fullScreenText">
<h2>Some text goes here for the about page</h2>
<a href="#panel1" data-scroll data-speed="800" data-easing="easeInOutQuad">Home</a>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
/* =============================================================
    Smooth Scroll 3.2
    Animate scrolling to anchor links, by Chris Ferdinandi.
    http://gomakethings.com
    Easing support contributed by Willem Liu.
    https://github.com/willemliu
    Easing functions forked from GaÃ«tan Renaudeau.
    https://gist.github.com/gre/1650294
    URL history support contributed by Robert Pate.
    https://github.com/robertpateii
    Fixed header support contributed by Arndt von Lucadou.
    https://github.com/a-v-l
    Infinite loop bugs in iOS and Chrome (when zoomed) by Alex Guzman.
    https://github.com/alexguzman
    Free to use under the MIT License.
    http://gomakethings.com/mit/
* ============================================================= */
window.smoothScroll = (function (window, document, undefined) {
    'use strict';
    // Feature Test
    if ( 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach ) {
        // SELECTORS
        var scrollToggles = document.querySelectorAll('[data-scroll]');
        // METHODS
        // Run the smooth scroll animation
        var runSmoothScroll = function (anchor, duration, easing, url) {
            // SELECTORS
            var startLocation = window.pageYOffset;
            // Get the height of a fixed header if one exists
            var scrollHeader = document.querySelector('[data-scroll-header]');
            var headerHeight = scrollHeader === null ? 0 : scrollHeader.offsetHeight;
            // Set the animation variables to 0/undefined.
            var timeLapsed = 0;
            var percentage, position;
            // METHODS
            // Calculate the easing pattern
            var easingPattern = function (type, time) {
                if ( type == 'easeInQuad' ) return time * time; // accelerating from zero velocity
                if ( type == 'easeOutQuad' ) return time * (2 - time); // decelerating to zero velocity
                if ( type == 'easeInOutQuad' ) return time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration
                if ( type == 'easeInCubic' ) return time * time * time; // accelerating from zero velocity
                if ( type == 'easeOutCubic' ) return (--time) * time * time + 1; // decelerating to zero velocity
                if ( type == 'easeInOutCubic' ) return time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration
                if ( type == 'easeInQuart' ) return time * time * time * time; // accelerating from zero velocity
                if ( type == 'easeOutQuart' ) return 1 - (--time) * time * time * time; // decelerating to zero velocity
                if ( type == 'easeInOutQuart' ) return time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration
                if ( type == 'easeInQuint' ) return time * time * time * time * time; // accelerating from zero velocity
                if ( type == 'easeOutQuint' ) return 1 + (--time) * time * time * time * time; // decelerating to zero velocity
                if ( type == 'easeInOutQuint' ) return time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration
                return time; // no easing, no acceleration
            // Update the URL
            var updateURL = function (url, anchor) {
                if ( url === 'true' && history.pushState ) {
                    history.pushState( {pos:anchor.id}, '', '#' + anchor.id );
            // Calculate how far to scroll
            var getEndLocation = function (anchor) {
                var location = 0;
                if (anchor.offsetParent) {
                    do {
                        location += anchor.offsetTop;
                        anchor = anchor.offsetParent;
                    } while (anchor);
                location = location - headerHeight;
                if ( location >= 0 ) {
                    return location;
                } else {
                    return 0;
            var endLocation = getEndLocation(anchor);
            var distance = endLocation - startLocation;
            // Stop the scrolling animation when the anchor is reached (or at the top/bottom of the page)
            var stopAnimation = function () {
                var currentLocation = window.pageYOffset;
                if ( position == endLocation || currentLocation == endLocation || ( (window.innerHeight + currentLocation) >= document.body.scrollHeight ) ) {
                    clearInterval(runAnimation);
            // Scroll the page by an increment, and check if it's time to stop
            var animateScroll = function () {
                timeLapsed += 16;
                percentage = ( timeLapsed / duration );
                percentage = ( percentage > 1 ) ? 1 : percentage;
                position = startLocation + ( distance * easingPattern(easing, percentage) );
                window.scrollTo( 0, position );
                stopAnimation();
            // EVENTS, LISTENERS, AND INITS
            updateURL(url, anchor);
            var runAnimation = setInterval(animateScroll, 16);
        // Check that anchor exists and run scroll animation
        var handleToggleClick = function (event) {
            // SELECTORS
            // Get anchor link and calculate distance from the top
            var dataID = this.getAttribute('href');
            var dataTarget = document.querySelector(dataID);
            var dataSpeed = this.getAttribute('data-speed');
            var dataEasing = this.getAttribute('data-easing');
            var dataURL = this.getAttribute('data-url');
            // EVENTS, LISTENERS, AND INITS
            event.preventDefault();
            if (dataTarget) {
                runSmoothScroll( dataTarget, dataSpeed || 500, dataEasing || 'easeInOutCubic', dataURL || 'false' );
        // EVENTS, LISTENERS, AND INITS
        // When a toggle is clicked, run the click handler
        Array.prototype.forEach.call(scrollToggles, function (toggle, index) {
            toggle.addEventListener('click', handleToggleClick, false);
        // Return to the top of the page when back button is clicked and no hash is set
        window.onpopstate = function (event) {
            if ( event.state === null && window.location.hash === '' ) {
                window.scrollTo( 0, 0 );
})(window, document);
</script>
</body>
</html>

IE8 sees horizontal menu as white, with dropdowns not dropping

I previously received a great solution from Altruistic Gramps regarding our menu's background images, but then someone viewed our site (http://www.usc.edu/org/seagrant/NS/) with IE8 and saw the transparent menubars as white. I googled a solution to this, which was commenting out the #FFF in the css IE hack section - background: #FFF; - but then the background was perfectly clear, probably because we have the menus to be semi transparent.
I looked for a solution to this but could not find any, and so opted to create a semi transparent 1x1px png file and using that as a background image
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: url(../Images/clear1px.png);/*background: #FFF;/*/
This works, to an extent: We're using auto as the menubar width in order to get some longer titles to fit and so now, the trans gray texture does not extend all the way across as it does while looking through other browsers. In order to use the 'house icon' I had to enclose the spry menu in another div (located in the main css) and color that, but now I have no idea what to do with the way it looks in IE8
If you need more of the spry css or the main css, please let me know and I'll post it.
Best regards.

Thanks again for the response. I made these changes in the menu css and the index page and the menu went clear again and the subs still don't seem to drop at all. After checking your link to the compatibility modes, I tried each of the IE= samples and the only one that did anything was 5. That just messed up the menu completely. I went back to 9 and it was the same no drop sort of thing.
I was thinking maybe it was the extra div I originally made to keep the home icon in the same group as the rest of the spry menu, so I took that div out, and although the spry menu clicked into place, it still had the transparency and drop-down problems.
I'll post my main css - maybe that'll show something. Excuse the mess, but we've been adding things as we go
Thanks again for spending all this time on it!
ul{
    list-style:none;
    margin:0 0 1em 0px;/*0 0 1em 15px*/
    padding: 0;
ul li{
line-height:1.3em;/*1.3em*/
margin: .25em 0;/*.25em 0*/
padding: 0 0 0 15px;/*0 0 0 15px*/
background:url(../Images/Compass_Website_small_2-4-11.png) no-repeat 0 .01em;/*0 4px - this is the adjustment for line-placement of icon .15em*/
li ul{
margin:0 0 0 30px;
list-style:disc;
li ul li{
padding-left:0;
background:none;
li ul li ul{
margin:0 0 0 30px;
list-style:circle;
ul li ul li ul{
padding-left:0;
background:none;
/* Holly Hack to fix ie6 li bg */
/* Hides from IE-mac \*/
* html li{height: 1%;}
/* End hide from IE-mac */
@media print{
ul {
    list-style:disc;
    margin-left:30px;
ul li {
    padding-left:0px;
    background:none;
} /* end print */
.picture { background-color: #ffffff; /*F9F9F9*/
border: 0px solid #CCCCCC; padding: 3px;
font: 10px/1.4em Helvetica, Arial, Verdana, sans-serif; }
.picture img { border: 1px solid #CCCCCC;
vertical-align:middle; margin-bottom: 3px; }
.right { margin: 0.0em 0pt 0.5em 18px; float:right; }/*0.5em 0pt 0.5em 0.8em*/
.left { margin: 0.0em 18px 0.5em 0pt; float:left; }/*0.5em 0.8em 0.5em 0pt*/
body,td,th {
font-family: Helvetica, Arial, Verdana, sans-serif;/*orig Verdana, Arial, Helvetica, sans-serif*/
font-size: 14px;
color: #000;
margin: 0px;
padding: 0px;
line-height: normal;
font-weight: normal;
text-align: left;
a:link {
text-decoration: none;
color: #000000;
input {
font-size: 14px;/*11px*/
line-height: normal;
font-weight: normal;
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #0000FF;
a:visited {
text-decoration: none;
color: #000000;
a:hover {
text-decoration: none;
color: #25408F;/*ffffff, 5a5a5a*/
a:active {
text-decoration: none;
h1 {
font-size: 22px;
line-height: normal;
font-style: normal;
margin-bottom: .1em;
h2 {
font-size: 20px;
line-height: normal;
font-style: normal;
margin-bottom: .1em;
h3 {
font-size: 18px;
line-height: normal;
font-style: normal;
margin-bottom: .1em;
h4 {
font-size: 16px;
font-style: normal;
line-height: normal;
margin-bottom: .1em;
h5 {
font-size: 14px;
font-style: normal;
line-height: normal;
margin-bottom: .1em;
#topmenu {
text-align: center;
height: 20px;
vertical-align: auto;
padding: 0px;
width: 600px;
float: none;
margin: 0px;
font-size: 14px;
h6 {
font-size: 12px;
font-style: normal;
line-height: normal;
margin-bottom: .1em;
body {
margin: 0;
#txo-search {
float: left;
width: 812px;
#container{
width: 900px;
margin-left: auto;/*auto*/
margin-right: auto;/*20px*/
border:0px none #000000;
height: auto;
padding: 0px;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #FFF;
#searchbar {
float: right;
padding-top: 3px;
padding-right: 12px;
padding-bottom: 0px;
padding-left: 0px;
font-size: 9px;
text-transform: uppercase;
#sidebar{
float:left;
background: #ebebeb;
background-color: #FFF;
width: 225px;
padding: 0px 0px 0px 12px;
margin: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
height: auto;
text-align: left;
font-size: 14px;/*12px*/
line-height:normal;
color: #000;
position: relative;
#sidebar2{
float:left;
background: #ebebeb;
background-color: #FFF;
width: 205px;/*205px*/
padding: 30px 0px 0px 0px;/*12px, 20px*/
margin: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
height: auto;
text-align: left;
font-size: 14px;/*12px*/
line-height:normal;
color: #000;
position: inherit;
z-index: 2;
}#textonly{
padding-top: 3px;
float: left;
padding-left: 12px;
padding-right: 0px;
padding-bottom: 0px;
#mainContent{
padding:0px 6px 0px 0px;/*0px 6px*/
width: 650px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin: 0px;
float: left;
position: relative;
height: auto;
color: #000;
background-color: #FFF;
#mainContent2{
padding: 6px 6px 6px 6px;/*0px 6px*/
width: 650px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin: 0px;
float: left;
position: relative;
height: auto;
color: #000;
}#headerpic {
padding:0px 0px 0px 0px;
width: 900px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin: -28px 0px 0px 0px;
float: left;
position: inherit;
height: 246px;
z-index: -2;
}#headerpicCaption {
padding:6px 0px 0px 12px;
width: 888px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin: -24px 0px 0px 0px;
float: left;
position: relative;
height: 19px;
z-index: 1;
background-color: rgba(149,149,149,0.7);
color: #FFF;
font-weight: bold;
}#horizontalmenudiv {
padding:0px;
width: 900px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
margin: 0px 0px 0px 0px;
float: left;
position: relative;
height: 28px;/*24, 28px*/
z-index: 1;
background-color: rgba(0,0,0,0.0); /*0.6*/
#header {
margin:0px;
border:0px none #000000;
height: auto;
padding: 0px;
float: left;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: #990000;
text-align: left;
vertical-align: top;
width: 900px;
z-index: 1;
position: relative;
#footer {
width:900px;
margin:0px;
text-align:center;
height: auto;
padding: 0px;
border-top: 0px none;
border-right: 0px none;
border-bottom: 0px none;
border-left: 0px none;
float: left;
z-index:1
position: relative; /*background-color: #68a4db;*/
#logocontainer {
width:140px;
margin:0px;
height: 92px;
padding: 0px 0px 0px 12px;
float: left;
border-top: 0px none;
border-right: 0px none;
border-bottom: 0px none;
border-left: 0px none;
background-color: #990000;
#logocontainer2 {
width:140px;
margin:0px;
height: 92px;
padding: 0px 12px 0px 0px;
float: left;
border-top: 0px none;
border-right: 0px none;
border-bottom: 0px none;
border-left: 0px none;
background-color: #990000;
.MainTitle {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 28px;
color: #ffcc00;
font-weight: bold;
.homepagethemediv {
font-family: Helvetica, Arial, Verdana, sans-serif;
margin: 0px;
padding: 3px 3px 3px 0px;/*3px*/
height: auto;
width: 205px;
text-align: left;
float: left;
vertical-align: top;
line-height: normal;
.regpagethemediv3x {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;/*12px*/
margin: 0px;
padding: 3px;
height: 220px;/*300px*/
width: 205px;
float: left;
vertical-align: top;
text-align: left;
line-height: normal;
.regpagethemediv2x {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;/*12px*/
margin: 0px;
padding: 0px 18px 0px 0px;
height: 375px;/*300px*/
width: 300px;
float: left;
vertical-align: top;
text-align: left;
line-height: normal;
.regpagethemediv2xstaff {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;/*12px*/
margin: 0px;
padding: 0px 18px 0px 0px;
height: auto;/*300px*/
width: 300px;
float: left;
vertical-align: top;
text-align: left;
line-height: normal;
.regpagethemediv2xcenter {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;/*12px*/
margin: 0px; /*0px*/
padding: 3px;
height: 500px;/*300px*/
width: 270px;
float: left;
vertical-align: top;
text-align: left;/*left*/
line-height: normal;
#center_div
width:270px;
left:50%;
margin-left:-135px;
z-index: 2;
.regpagethemediv1x {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;/*12*/
margin: 0px;
padding: 3px 3px 3px 0px;
height: auto;/*300px*/
width: 625px;
float: left;
vertical-align: top;
text-align: left;
line-height: normal;
.regpagefloaterLeft {
font-size:12px;/*12px*/
margin: 0px;
padding: 3px;
height: auto;/*300px*/
width: 45%;
vertical-align: top;
text-align: left;
line-height: normal;
float: left;
border: 2px;
border-color: 25408F;
border-style: solid;
.regpagefloaterRight {
font-size:12px;/*12px*/
margin: 0px 0px 0px 18px;
padding: 3px;
height: auto;/*300px*/
width: 45%;
vertical-align: top;
text-align: left;
line-height: normal;
float: right;
border: 2px;
border-color: #25408F;
border-style: solid;
.smallprint {
font-size: 10px;
.SGBlue {
color: #25408F;
#SGBlue {
color: #25408F;

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

Transparent Div with Solud text

How would I have to right my CSS and HTML toachive the above affect? Whenever I do it everything is transparent.

I saw this and that is what I tried to replicate so I think I'm missing something.
abouttext {
position: relative;
.content {
padding: 10px 0 10px 5;
width: 40%;
/* [disabled]float: left; */
margin-left: auto;
margin-right: auto;
height: auto;
margin-top: 25px;
/* [disabled]font-family: Candara; */
/* [disabled]color: #FFF; */
/* [disabled]font-size: 14px; */
background-color: #fdbe02;
opacity: .01
opacity: .5;
The content div is what I want transparent with th text solid.
<div id="apDiv2">Gary Steffy Lighting Design Inc. | GSLD™</div>
<div class="container">
<p> </p>
<div class="header">
<div class="title">
      <p class="titlecivic"><img src="images/bar2.jpg" width="1920" height="4" /></p>
      <p class="titlecivic">ABOUT</p></div></div>
</div>
<div class="content">
<p class="abouttext">Gary Steffy Lighting Design Inc. was founded in 1982 in Ann Arbor, Michigan, to advise clients on interior and exterior normal power architectural lighting that balances users’ vision and comfort needs with social and economic matters. The firm’s practice is well-rounded, using principles, experience, mockups, and modeling to achieve success regardless of application. Breadth of commissions ranges from boutiques, residences, classrooms, and hotels to halls of justice, hospitals, corporate facilities and historic landmarks. Explore some of our experiences categorized in the drop down menu under Portfoli at the left.
The firm is nationally recognized and has contributed toteams and buildings bestowed some of the highest design honors. The firm’s consistent successes are driven by a design discipline that respects and enhances rather than over-dazzles people, architecture, interiors, and landscape. Design aesthetics and objective lighting criteria are pursued vigorously in achieving lighting solutions appropriate to clients’ priorities. The firm’s design services, including design programming, concept and design development exploration, technical assessment, and contract documents, and construction administration services are well-honed based on principles identified in Gary Steffy’s writings.</p>
</div>
<div class="sidebar1">
<div id="AcrdMenuAbNTKFBDiv" class="AbNTKFB__Main" >
    <ul style="margin:0px; width:150px;">
      <li style="width:150px;">
        <div><a class="AbNTKFB__Top_SEL" href="index.html">Home</a></div>
      </li>
      <li style="width:150px;">
        <div class="AbNTKFB__Top">About</div>
      </li>
      <li style="width:150px;">
        <div class="AbNTKFB__Top">Portfolio</div>
      </li>
      <li style="width:150px;">
        <div class="AbNTKFB__Top">Contact</div>
      </li>
    </ul>
<script type="text/javascript">var AcrdMenu_ID="AcrdMenuAbNTKFB"</script><script type="text/javascript" src="cssmenutools/scripts/AcrdMenu11.js">/* AcrdMenuMenu script ID:AcrdMenuAbNTKFB */</script></div>



<div id="prevthumb"></div>
<div id="nextthumb"></div>

<div id="controls-wrapper" class="load-item">
<div id="controls">
<div id="slidecaption"></div>

Is it possible to get text div to auto size?

I created an empty text box div with width 0 and height 0. I would like it to expand to accomodate text assigned to it in code to fit in one line on the click of a button. How would I do this without pre determining the width of the box?

I finally found how to change the css text properties of a text box (div) in the compositionName_edge.js file that Edge generates when you save the project so that the text box would resize dynamically something like Flash dynamic text fields that resize to the left depending on the text you give it in code.
In the file look for id:'name_of_your_text_div' and under rect:[ the last 4 items should be set to auto].
Then look for states object and under "${_name_of_your_text_div}" remove all styles execept top and left.
I'm hoping that Adobe will eventually make it easier to do that in the properties panel.

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.

Centering a DIV in CSS

How can I get my container div cenetered on the page? Can I
do it in CSS or do i use the allighment tool? thanks

whatisgood wrote:
> How can I get my container div cenetered on the page?
Can I do it in CSS or do i use the allighment tool? thanks
As long as it has a declared width, use auto for margin-left
and
margin-right:
#container {
width: 700px;
margin-left: auto;
margin-right: auto;
Short video tutorial here:
http://experts.na3.acrobat.com/center_page/
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS4",
"PHP Solutions" & "PHP Object-Oriented Solutions"
http://foundationphp.com/

Centering a Div

Hi,
Up to now I've used
#container {
width: 920px;
margin-right: auto;
margin-left: auto;
along with text-align: center; in the body to center my
pages.
Another method is
#container {
width: 920px;
margin-left: -460px;
position: absolute;
left: 50%;
What are the pros and cons of the two methods - is one of
them 'best' ?

Hi Mick,
Text-align:center; is the worst in my oppinion.
Reason is its a IE only method. and according to W3C
standards should not do anything but center-align text.
And IE does this to all elements.
The visually best method is position absolute and than
-margin the half of he width.
This method gives you the most control over how your page
looks only problem is that when the browser is smaller than the
content most of the times u wont get scrollbars and wont be able to
see the menu or some things that are on the side of the page.
The best method in my opinion is margin: 0 auto;
Only thing is that IE 6 and earlier don't pick this up.
hope this helps,
JK

Horizontally centering a div with "auto" margins...

Similar Messages

Maybe you are looking for