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/

Similar Messages

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 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

Centering One DIV in Another DIV

Hi --
On this page:
http://www.mort.thelegatogroup.com/
the DIV #navigation is
set to extend left to right across the viewport. Within
#navigation is
another DIV -- #navbuttons -- that I want centered on the
screen.
While it's centered in IE6 I cannot get it centered in FF.
Can someone give
me a hand?
Thanks,
John

Give the inner div a CSS width, and left/right margins of
"auto".
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
==================
"Tarvardian" <[email protected]> wrote in
message
news:epqoa1$l1h$[email protected]..
> Hi --
>
> On this page:
http://www.mort.thelegatogroup.com/
the DIV #navigation is
> set to extend left to right across the viewport. Within
#navigation is
> another DIV -- #navbuttons -- that I want centered on
the screen.
>
> While it's centered in IE6 I cannot get it centered in
FF. Can someone
> give me a hand?
>
> Thanks,
> John
>

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.

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

Centering ap div position problem

Hi people, I'm new to dreamweaver and have what seems to be a basic problem but one that I can't fix, even after looking on the forums and web.
My problem is when I go into design mode I can drag my "ap divs" around so they are in the centre of my screen (webpage) and nicely lined up, however once I test the website in any web-browser they are no longer centered and seem to reposition themselves at random. I've included some screen-shots so you can see what I mean.
Website in design view
Website in webbrowser
Here is my code so you can look at it and spot my mistakes.
<title>index</title>
</head>
<style type="text/css" >
body
background-image:url('background.png');
background-repeat:no-repeat;
background-position:50% -2%;
background-color:#D7D7D7;
</style>
<style type="text/css">
#apDiv1 {
          position:absolute;
          width:578px;
          height:57px;
          z-index:1;
          left: 535px;
          top: 1526px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
</style>
<style type="text/css">
#apDiv2 {
          position:absolute;
          width:937px;
          height:288px;
          z-index:1;
          left: 360px;
          top: 14px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
</style>
<div align="center" id="apDiv1">This page was created by me on 28th Decmber 2099. Updated - 29th December 2099. </div>
<div align="center" id="apDiv2"><img src="banner.png" width="928" height="284" /></div>
</html>
If you can see the solution to my problem or if there is another/better way of centering text/banners using ap divs, then please let me know. Thanks in advance.

The biggest mistake that those new to Dreamweaver make is using Absolutely Positioned <divs>.
Why, because in most instances they will 'restrict' your construction. By their nature being Absolutely Positioned they do NOT move away from the co-ordinates that you give them. What you are seeing is the background image moving, its an illusion.
I would never advise anyone to use AP positioning unless they have a great deal of experience in positioning.
One way to control AP <divs> is to surround them in a 'wrapper' <div> (see code below)
<div id="wrapper">
<div align="center" id="apDiv1">This page was created by me on 28th Decmber 2099. Updated - 29th December 2099. </div>
<div align="center" id="apDiv2"><img src="banner.png" width="928" height="284" /></div>
</div>
Then use css to make the wrappers position 'relative' and to center it horizontally using margin: 0 auto (see below)
#wrapper {
position: relative;
width: 578px;
margin: 0 auto;
Your AP <divs> will now take their co-ordinates from the top/left of the 'wrapper' <div>
So alter your left positioning to 0 in your apDiv1 and apDiv2 (see below)
#apDiv1 {
          position:absolute;
          width:578px;
          height:57px;
          z-index:1;
          left: 0;
          top: 1526px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
#apDiv2 {
          position:absolute;
          width:937px;
          height:288px;
          z-index:1;
          left: 0;
          top: 14px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
As the default position is left you don't really need to declare it but it does no harm if you do.

Centering the layout using CSS as opposed to tables

Hello all...I have spent about 4 hours with the trial version
of Dreamweaver 8 and have solved all but one of the troubles I used
to encounter when using GoLive.
I followed the tutorial in DW8, first building their sample
webpage using a table layout, then using a CSS layout.
The table layout is easy to center, click the body tag, then
select center justification in the Properties Inspector and the
page is now centered in the browser.
However...
I can't get DW8 to do this when building the page with CSS
layers. Should I enclose all of my layers within one main layer and
apply the div align="center" tag?
DW8 is an absolute BREEZE in comparison to GLCS2!!!
Many thanks,
Wordman

A layer in DW speak is an absolutely positioned div.
If you compare my #div code to what you have created - does
yours have
position: absolute defined in the style ?? That's a 'layer'.
Have a read of this article by Murray:
http://www.great-web-sights.com/g_positioning.asp
and this:
http://apptools.com/examples/pagelayout101.php
You may find the css tutorials here to be beneficial:
http://www.adobe.com/devnet/dreamweaver/css.html
Look for the beginner tuts by Adrian Senior
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
CSS Tutorials for Dreamweaver
http://www.adobe.com/devnet/dreamweaver/css.html
"Wordman-GL" <[email protected]> wrote in
message
news:[email protected]...
> Murray...In reviewing the link Nadia provided (Thanks,
Nadia!) I am
> comparing
> her code to the code I generated using 'layers' in the
CSS version of the
> DW
> tutorial website. If I use the Layer command to create a
layer in DW, I
> get
> styles in the head of the document beginning with #,
just as your wrapper
> code
> does. These styles generate when using layers, and they
look damn near
> like the
> styles created in Nadia's code. Are we arguing semantics
calling a 'layer'
> a
> layer, or am I missing something huge here?
>
> I'm barely able to convey what I think is the right
information, so
> although I
> am confused, I am nowhere near as confused as I was with
GL.
>
> All I want to generate are a couple of websites heavy on
photos and light
> on
> text...brochureware. As I'm also a photographer, I'll
want to build a site
> with
> galleries of my work. I have read that CSS is the only
way to go, and I'm
> all
> for it...
>
> So if I shouldn't use the layer command, are you
suggesting just raw
> coding
> instead? If so, why even use DW or GL?
>
> I reallyneed help here. I feel as though I am swimming
with boulders in my
> pockets and am nowhere near recshing the shore before I
drown...
>
> Cheers...
>
> Wordman
>
>

How can I create a vertical scroll for text in a 'div' in CSS Dreamweaver?

Hi there,
I need to flow a lot of text into a CSS div. However, I don't want a big long page as it will look ugly and be inconsistent with the other pages in the site.
I need to be able to put in a vertical scroll directly in the div containing the text (not on the whole page) so the user can scroll the text down without moving down the whole page.
Is there a way for me to do this?
I'm a beginner to CSS so a step by step for dummies approach would be most helpful.
Thanks in advance for any help!

use the overflow:scroll property:
http://www.w3schools.com/Css/pr_pos_overflow.asp

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
>>>
>>>
>>>
>>>
>>>
>>>
>>
>>
>
>

AP element on centered content div

I'm trying to position an AP element relative to a content
div centered in the browser window but so far nothing has worked,
and I would rather not use relative positioning.
Any help would be greatly appreciated.

> didn't cross my mind to use relative positioning for the
wrapper div
> itself
It should have.
This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with
regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
This does several things -
1. It 'removes' the element from the flow of the code on
the page so that
it can no longer influence the size or position of any other
page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from
the position of
its closest PARENT *positioned* element - in the
absence of any explicitly
positioned parent, this will default to the <body> tag,
which is always
positioned
at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the
layer's code
appears (between <body> and </body>), its
location on the screen will not
change (this assumes that you have not positioned the A/P
element within
a table or another A/P element, of course).
Furthermore, the space in
which
this element would have appeared were it not positioned
is not preserved
on the screen. In other words, absolutely positioned elements
don't take
up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
In contrast to absolute positioning, a relatively positioned
page element is
*not* removed from the flow of the code on the page, so
it will use the
spot
where it would have appeared based on its position in
the code as its
zero point reference. If you then supply top, right,
bottom, or left
positions
to the style for this element, those values will be
used as offsets from
its
zero point.
This means that it DOES matter where in the code the
relatively positioned
element appears (, as it will be positioned in that location
(factoring in
the offsets) on the screen (this is true for any placement in
the code).
Furthermore, the space where this element would have
appeared is
preserved in the display, and can therefore affect the
placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
As with relative position, static positions also "go with
the flow". An
element with a static position cannot have values for
offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless
explicitly
positioned, all div elements default to static positioning.
Position:fixed
A page element with this style will not scroll as the page
content scrolls.
Support for this in elements other than page backgrounds is
quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables,
images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that
if it is not
positioned or explicitly styled otherwise, a) it will always
begin on a new
line on the screen, and b) it will always force content to a
new line below
it, and c) it will always take up the entire width of its
container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of
other
elements
on the page. For example, a 'layer' placed over a hyperlink
will mask that
hyperlink.
You can see a good example of the essential difference
between absolute and
relative positioning here -
http://www.great-web-sights.com/g_layersdemo.asp
You can see a good demonstration of why using layers for a
page layout tool
is dangerous here -
http://www.great-web-sights.com/g_layer-overlap.asp
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
==================
"JimHawkins" <[email protected]> wrote in
message
news:[email protected]...
> Thank you! That solved my problem.
>
> By the way, when I said I didn't want to use relative
positioning, I was
> referring to the elements I wanted to position within
the wrapper div; it
> didn't cross my mind to use relative positioning for the
wrapper div
> itself. I
> should have been more clear.
>

Difficulty with 1 div in CSS layout

Hi there.
I'm having trouble getting this 100% right.
http://www.josua.co.za/Templates/josua-default.dwt.php
My general layout as well as the 3 images I use as part of my header works 100%. BUT, my content does not work. The moment I add this:
position: absolute;
top: 145px;
my footer falls away or it appears at the top of my page.
I know this is only some minor adjustment but for the life of me, I cannot fix it.
Please help me out.
Sincere regards,
Deon

DeonH wrote:
Hi there.
Sorry, the telephone rang when I was writing the post and forgot to tell the rest of the story.
Yes, when I add it to the content DIV the footer falls of.
Here is an extract form my css file regarding this question:
.oneColFixCtrHdr #container {
width: 970px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
.oneColFixCtrHdr #header {
position: relative;
top: 30px;
left: 0px;
width: 970px;
z-index: 1;
height: 110px;
background-image: url(../graphics/josua-banner1-pix.jpg);
background-repeat: repeat-y;
#headertext {
position: absolute;
top: 35px;
right: 20px;
z-index: 2;
#headerlogo {
position: absolute;
top: 8px;
left: 40px;
z-index: 3;
What do I need to do to fix this? (I know my CSS is probably very cluttered. )
Regards,
Deon
What do you need to do to fix it? Stop using Absolutely Positioned <divs>. Once you make them absolutely positioned it removes them from the natural flow of the html, they act like they don't exist. Therefore the footer jumps up to consume the next available space in the natural html flow.

Add AP Div to CSS Layout...

Hey,
I really need to add an AP Div to my CSS- Layout (3 column
absolutely positioned) ! No problem BUT i need it to shrink and
grow with the other parts of the page (sidebar1/2, main content,
header, footer etc..) In other words, I need a third sidebar in
this "CSS-Set"... How can I "attach" the apDiv's to the other Divs
such as main content, header... ?!
Thx for help !

On Mon, 12 Jan 2009 15:47:54 +0000 (UTC), "hendrik.r."
<[email protected]> wrote:
> I really need to add an AP Div to my CSS- Layout (3
column absolutely
>positioned) ! No problem BUT i need it to shrink and grow
with the other parts
>of the page (sidebar1/2, main content, header, footer
etc..) In other words, I
>need a third sidebar in this "CSS-Set"... How can I
"attach" the apDiv's to the
>other Divs such as main content, header... ?!
The short answer is, you cannot. Absolutely positioned page
elements
cannot interact with other page elements because they are
removed from the
normal flow of the document. That's what makes absolute
positioning a bad
way to do most things.
Gary

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>

Centering a DIV in CSS

Similar Messages

Maybe you are looking for