14 replies [Last post]
Mike James
Offline
Regular
Houston
Last seen: 13 years 6 weeks ago
Houston
Timezone: GMT-5
Joined: 2005-06-22
Posts: 35
Points: 0

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 26 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

Mike James
Offline
Regular
Houston
Last seen: 13 years 6 weeks ago
Houston
Timezone: GMT-5
Joined: 2005-06-22
Posts: 35
Points: 0

content/background centering issues

Do you mean "text-align: center;" is depreciated completely, or just as a method of centering stuff other than text?

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 6 years 3 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

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.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 8 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

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

Edit: x-posted with above.

Life's a b*tch and then you die!

Mike James
Offline
Regular
Houston
Last seen: 13 years 6 weeks ago
Houston
Timezone: GMT-5
Joined: 2005-06-22
Posts: 35
Points: 0

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?

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 6 years 3 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

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.

Mike James
Offline
Regular
Houston
Last seen: 13 years 6 weeks ago
Houston
Timezone: GMT-5
Joined: 2005-06-22
Posts: 35
Points: 0

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

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 6 years 3 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

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">&nbsp;</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; 
	} 

Mike James
Offline
Regular
Houston
Last seen: 13 years 6 weeks ago
Houston
Timezone: GMT-5
Joined: 2005-06-22
Posts: 35
Points: 0

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 55 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9766
Points: 3848

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

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Mike James
Offline
Regular
Houston
Last seen: 13 years 6 weeks ago
Houston
Timezone: GMT-5
Joined: 2005-06-22
Posts: 35
Points: 0

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?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 55 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9766
Points: 3848

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

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Mike James
Offline
Regular
Houston
Last seen: 13 years 6 weeks ago
Houston
Timezone: GMT-5
Joined: 2005-06-22
Posts: 35
Points: 0

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?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 55 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9766
Points: 3848

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.