(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>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><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>
<!-- end picture -->
<div class="picture">
<img src="Learning Adobe Dreamweaver CC - Working Files/Chapter 6/Flowers Galore/images/Flower_4.jpg" alt=""/>
</div>
<!-- end picture -->
</div>
<!-- end pictureWrapper -->
</div>
<!-- end container -->
<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>
<!-- end picture2 -->
<div class="picture2">
<img src="Learning Adobe Dreamweaver CC - Working Files/Chapter 6/Flowers Galore/images/Flower_4.jpg" alt=""/>
</div>
<!-- end picture2 -->
</div>
<!-- end pictureWrapper2 -->
</div>
<!-- end container -->
</body>
</html>
Similar Messages
-
I need help Centering a div box to a background image using dreamweaver cs5.5.
I need help Centering a div box to a background image using dreamweaver cs5.5. Everything shift left when viewing on different size monitors? See what I mean at
www.woodlandhospice.comHave 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. -
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" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="PNGfix.css" />
<![endif]-->
<!--[if lte IE 7]>
<style type="text/css">
#hornav ul li { padding: 0 0 0 10px; }
</style>
<![endif]-->
<!--[if lte IE 6]>
<style type="text/css">
#wrapper-body, #wrapper-1, #wrapper-2, #wrapper-3 { height: 1%; }
</style>
<![endif]-->
<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 -
Learning DW and CSS so patience is in order .
I've being reading numerous posts here and on the web about avoiding tables for laying out web pages. I can see the advantages in terms of cleaner codes and easiness of updating and changing sites at a later time. So I started learning about DIV tags (although tables is very easy for me) and have practice a few times with fairly good results, love the absolute positioning with it. Having said that, for the love of me, can't find a way of centering horizontally a page designed with DIV tags (due to ignorance), for example, 1 column/three rows page, after defining styles, size and colors I enclosed everything in another DIV tag, wrapper I think is called, but have not found a way of centering it on the page, text-aligment on the DIV tag only centers the text not the DIV itself, how to go about this? Help is appreciated.love the absolute positioning with it.
Get over it. It's a trojan horse. Absolute positioning is not a general layout method.
To center ANY block (non-absolutely positioned) element, use CSS to give it a width and left/right margins of 'auto'. For example -
<div id="foo">...</div>
That div will be centered with this CSS -
#foo { width:300px; margin:0 auto; }
I think you are on the wrong path already, though. Stick with tables (which you say are very easy for you) UNTIL you a) understand CSS well enough to understand what absolute positioning is and why I say it's bad, and b) understand how to use float, margin, and padding to place things on the page. Then you are ready to move away from tables. -
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.
> -
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><!-- end wrapper -->
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 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,
JohnGive 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
> -
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
>>>
>>>
>>>
>>>
>>>
>>>
>>
>>
>
> -
How can I get my container div cenetered on the page? Can I
do it in CSS or do i use the allighment tool? thankswhatisgood 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, (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">
<!-- TemplateBeginEditable name="doctitle" -->
<title>ManoZe</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<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">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="../Scripts/expressInstall.swf">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="../images/menu.swf" width="800" height="65">
<!--<![endif]-->
<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">
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<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>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</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">
<!-- TemplateBeginEditable name="doctitle" -->
<title>ManoZe</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<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">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="../Scripts/expressInstall.swf">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="../images/menu.swf" width="800" height="65">
<!--<![endif]-->
<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">
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<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>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html> -
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,
AlexIs 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> -
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>
<!--begin wrapper-->
<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 -
Trouble centering AP Divs in Firefox
Hi,
I'm trying to center these apDivs in Firefox. They both are sticking to the top of the browser. I want the apDiv2 to be in the center of apDiv1. Any thoughts?
Thanks,
GordonAPDivs are absolutely positioned relative to the nearest parent container. If none is specified, it's relative to the body (top, left corner of browser).
To center APDivs, you need to wrap them inside a relatively positioned container that has a stated width in px, % or ems and margin-left, & margin-right of auto (browser default).
CSS:
body {
position: relative;
width: 970px;
margin:0 auto;
Incidentally, APDivs used as a primary layout method seldom works well. Here's why:
http://apptools.com/examples/pagelayout101.php
You'll have far fewer problems later if you stick with default positioning (unspecified) for most of your layout and use floats, margins and padding to align elements on the screen.
Basic 1-column CSS Layout (no APDivs req'd)
http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html
Good luck,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Hi~ I have made a new css for the IE6 browser and placed this under the main css in the html.
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="main2.css" />
<![endif]-->
I have tried this and it still will not center. Help!
#main {
margin:100 auto 0;
width:700px;
text-align: center;
z-index: 20;
The site looks great in Firefox and Safari browsers.
Thank you!How To get Help Quickly
http://forums.adobe.com/thread/470404
Without seeing your page.... I'm guessing this MIGHT work. If not, please post a URL for us to see.
CSS:
#main {
margin:100px auto;
width:700px;
text-align: center;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com
Maybe you are looking for
-
HT204407 Will Find Friends app work with multiple phones on one Apple ID?
My family has one apple ID and multiple devices on that account. Is it possible for my wife and I to use Find Friends this way or does she need another apple ID? When I put the app on her phone, it thinks it is me. We want to use the app to locate
-
Use "Back to my Mac" for off-site TM backup?
Can I use "Back to My Mac" for a Time machine backup. I'd like to setup a remote hard disk on my parent's iMac so I can backup remotely. I'll do the same for them on this site. Unfortunately, I suspect it's not that easy yet. We both have 1Mbps uploa
-
Pages '09 in full screen tooltip appears on other Spaces
Hi all, I'm using Lion 10.7.1, Pages '09 (4.1, 923) on a mid-2010 13" Macbook Pro. I love the full screen view on Pages and I use four desktops with Spaces. In the last couple of days I've used one of Pages' Newsletter templates (doesn't matter which
-
Is it possible to disable the mouse automatically scrolling the video playback head?
Previous versions of iMovie allowed me to move the mouse without moving the playback head. Doesn't appear possible in '11. Can it be toggled? Thanks. Lindy
-
Hi, I plan to upgrade from FCE to FCP, can I install FCP 6 without having FC studio 2? or is it part of it? Can FCP 6 capture HD? Thank you