Wed, 2005-06-22 07:26
I'm working on a website (http://www.xonelabs.com/temp/sss/) and have run into two centering issues, which I hope somebody can help me with... the CSS is in the /INCLUDES folder.
The CSS and HTML validate fine (except for a few EMBED tag issues, which aren't the problem... IE-Win renders everything as intended, but FireFox messes up (or, more likely, displays the error in my coding correctly):
Problem 1 - I want the site to be centered, so I put all the content into a DIV element with the align property set to center. Using <P ALIGN=CENTER> works fine in both browsers, but this DIV element is beyond FireFox. Why won't it center? (ref: class "center" in CSS)
Problem 2 - On the CLIENTS page (follow the nav links), I've assigned a background image to the DIV element "SSS-CLIENTS" and fixed the image with the align set to "center." However, the image behaves as though it is fixed at the center of the viewport in general, not necessarily the center of the DIV. As a result, lots of cropping occurs when the DIV isn't in the center of the page. WHy would the background image for this specific DIV element behave as though it was the background image of the BODY element or something? (ref ID "sss-clients" in CSS)
Thanks very much for any help anybody can give...
Wed, 2005-06-22 08:24
#1
content/background centering issues
align:center is deprecated and Firefox doesn;t like it.
Give the div an id, something like #wrapper. In the css, give wrapper margin: auto. This will center it in Firefox.
Wed, 2005-06-22 16:34
#2
content/background centering issues
Do you mean "text-align: center;" is depreciated completely, or just as a method of centering stuff other than text?
Wed, 2005-06-22 16:41
#3
content/background centering issues
The html style align="center" is depracated, but the css text-align:center is valid, but shouldn't work on layout divs.
To align yout container to the center give it an id, say #container.
Then in the css put
#container {
margin:0 auto;
text-align:left;}
body {
text-align:center;}
The body text-align part is only for real old browsers that don't understand the auto margin thing. margin:0 auto is the correct way to center a layout.
We then give the container text-align:left to set it back to its default.
Wed, 2005-06-22 16:41
#4
content/background centering issues
As a property of an HTML tag it is depreciated but as a CSS styling property it is fine, even if 'centre' is spelt incorrectly (you Yanks - I don't know 
)
Edit: x-posted with above.
Wed, 2005-06-22 17:40
#5
content/background centering issues
Well... I applied "margin: auto" to the centering DIV, which works fine in IE, but still fails in FireFox... what am I doing wrong?
Wed, 2005-06-22 17:52
#6
content/background centering issues
#sss-masthead {
background:#000;
width:800px ;
height:185px ;
border:1px solid #000;
}
if you put the margin:0 auto in with that.
#sss-masthead {
background:#000;
width:800px ;
height:185px ;
border:1px solid #000;
margin:0 auto;
}
I think that is your container? if it isn't just apply the margin:0 auto to a div instead of the p tag.
Also you applied it to a <p> tag. This is not the best thing to do, as a p tag can't contain block level ellements such as table and div and ul.
Wed, 2005-06-22 19:11
#7
content/background centering issues
The P tag was accidental, left over from screwing around earlier - it's back to a DIV tag now, with the class "center" applied to it, which (in the CSS) has the auto margin attached to it. The other DIVS (sss-masthead, sss-site, etc.) are all in that DIV, which is supposed to center everything... and it doesn't...
Wed, 2005-06-22 19:40
#8
content/background centering issues
I have re-created your site with css.
Take a look at it, or just use it as is, I have no experience with flash, but I know your embed tags are not allowed and I am sure that their is an xhtml specific way to embed the flash correctly.
Please take the time to study the code so you understand where you was going wrong. I am sure that you will see that things are far easier than you might have originally thought.
css is about elegant simplicity.
You need to keep the #footer as it is keeping the container from sinking behind the #content and #nav, you may wish to add some content to it, either way it is doing an important job.
Also note that the content are can expand and shrink as much as you like with out throwing the layout. If you remove the footer this wont be the case.
xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>SOUTHERN SOUND SYSTEMS :: Houston, Texas</title> <link href="worship.php_files/southernsound.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="head"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="movie" height="185" width="800"> <param name="movie" value="flash/sss-header.swf"> <embed src="worship.php_files/sss-header.swf" quality="high" name="movie" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="" height="185" width="800"> </object> </div> <div id="nav"> <ul> <li class="navbig"><a href="http://www.xonelabs.com/temp/sss/eventproduction.php">Event Production</a></li> <li class="navsmall"><a href="http://www.xonelabs.com/temp/sss/audio.php">Audio Engineering</a></li> <li class="navsmall"><a href="http://www.xonelabs.com/temp/sss/lighting.php">Lighting Design</a></li> <li class="navsmall"><a href="http://www.xonelabs.com/temp/sss/video.php">Video Production</a></li> <li class="navsmall"><a href="http://www.xonelabs.com/temp/sss/staging.php">Staging / Rigging</a></li> <li class="navsmall"><a href="http://www.xonelabs.com/temp/sss/curtains.php">Fiber Optics / Curtains</a></li> <li class="navsmall"><a href="http://www.xonelabs.com/temp/sss/sales-rental.php">Equipment Sales / Rental</a></li> <li class="navbig"><a href="http://www.xonelabs.com/temp/sss/installation.php">Design / Installation</a></li> <li class="navsmall"><a href="http://www.xonelabs.com/temp/sss/theatrical.php">Theatrical Systems</a></li> <li class="navsmall"><a href="http://www.xonelabs.com/temp/sss/corporate.php">Corporate Integration</a></li> <li class="navsmall"><a href="http://www.xonelabs.com/temp/sss/worship.php">Houses of Worship</a></li> <li class="navsmall"><a href="http://www.xonelabs.com/temp/sss/retail.php">Retail / Environmental</a></li> <li class="navbig"><a href="http://www.xonelabs.com/temp/sss/clients.php">Clients / Photos</a></li> <li class="navbig"><a href="http://www.xonelabs.com/temp/sss/contact.php">Contact Southern Sound</a></li> </ul> </div> <div id="content"> <h1>Houses of Worship</h1> <p> In the worship environment, it is essential that the message be seenand heard clearly while the audio and video systems remain transparentto the worship experience. Southern Sound Systems has worked with churches of all sizes and liturgical styles to create technical systems which enhance the mission of each organization. </p> </div> <div id="footer"> </div> </div> </body> </html>
css
/* layout */
#container {
width:800px;
margin:0 auto;
border:1px solid #000;
background:#102060;
text-align:left;
}
#head {
background:#000;
width:800px;
height:185px;
border-bottom:2px solid #000;
}
#nav {
float:left;
width:220px;
padding:10px 0;
background:#384870;
border:1px solid #000040;
margin:10px;
}
#content {
width:500px;
margin:10px 0 0 270px;
color:#fff;
font:.9em arial, sans-serif;
text-decoration:none;
line-height:110%;
text-align:justify;
}
#footer {
clear:both;
width:800px;
height:5px;
}
/* selectors */
#nav ul, #nav li {
list-style:none;
margin:0;
padding:0;
}
#nav .navsmall a {
display:block;
width:200px;
padding:5px 10px;
color:#fff;
font:.7em verdana, sans-serif;
text-decoration:none;
text-align:right;
}
#nav .navsmall a:hover {
background:#f00;
}
#nav .navbig a {
display:block;
width:200px;
padding:5px 10px;
text-align:left;
font:bold .8em verdana, sans-serif;
color:#fff;
text-decoration:none;
}
#nav .navbig a:hover {
background:#00f;
}
#content h1 {
margin:0 0 17px 0;
font:1.4em "trebuchet ms", verdana, sans-serif;
color:#fff;
text-decoration:none;
letter-spacing:0.1em;
}
#content li {
color:#fff;
font:.8em arial, sans-serif;
text-decoration:none;
}
/* tag styles */
body {
background:#000040;
text-align:center;
margin:10px 0;
}
/* generic class styles */
.border-dark {
border:1px solid #000040;
}
.border-white {
border:1px solid white;
}
Wed, 2005-06-22 23:06
#9
content/background centering issues
Joseph Sprint wrote:
You need to keep the #footer as it is keeping the container from sinking behind the #content and #nav...
...because floated elements don't "take up any space" - thanks so much for this solution, it is a grea deal better than a table row, and I shall implement it right away.
Joseph Sprint wrote:
I have no experience with flash, but I know your embed tags are not allowed and I am sure that their is an xhtml specific way to embed the flash correctly.
Drew McLellan described his "Flash Satay Method" on ALA a while back, but in all my tests, the code doesn't work... so I'm still figuring that out...
In the mean time, I still haven't solved the anomaly of the concent background on the "clients / photos" page, here... (why does the fixed background behave like it's fixed to the body and not the DIV itself?)
Thu, 2005-06-23 03:36
#10
content/background centering issues
Position relative takes its reference from its natural place in the flow.
Position absolute takes its reference from its nearest positioned ancestor.
Position fixed takes its reference from the viewport. Thus it never scrolls and will have the same spot on the screen regardless of its parentage—whether it knows who its father is or not. 
cheers,
gary
Thu, 2005-06-23 04:27
#11
content/background centering issues
how inconvenient....
in that case, how would I go about keeping the background image of that DIV from scrolling when it overflows?
Thu, 2005-06-23 04:51
#12
content/background centering issues
Do you mean in IE? IE doesn't grok FP except for background images on body. Else, it treats it as AP.
I looked at the page in the Fox, and thought it was a nice look to have the scene behind the scrolling text. Of course, IE users are screwing themselves out of a lot of good browsing. 
cheers,
gary
Thu, 2005-06-23 05:03
#13
content/background centering issues
The FP works in both FF and IE. The image is set as a fixed, centered background to the DIV element which scrolls on overflow. The desired effect is for the image to stay centered and not move when the DIV scrolls. In IE, it works fine. In FF, the image is, as you mentioned, centered according to the size of the viewport, not in relation to the DIV. Ergo, as the window resizes (and the boundaries of that particular DIV fall outside the "center" of the viewport, the image gets cropped as it moves behind the other elements of the page. What I want is to keep it centered and fixed behind the text of the DIV, not the viewport in general. Is there a way to accomplish that?
Thu, 2005-06-23 06:41
#14
content/background centering issues
Put the bg image on an element /behind/ the scrolling element
#outer {
width: 250px;
background: white url(../bullseye.jpg) center no-repeat;
}
#inner {
height: 250px;
overflow: auto;
}
-----------------
<div id="outer">
<div id="inner">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi.</p>
</div>
</div>cheers,
gary