...

View Full Version : Help Please w/ "text-align: center"



Tom Scott
07-29-2007, 06:20 AM
I'm working on this website for my daughter' dance team... http://pantherettes.com/slideshow (actually /slideshow is the 'beta' site).

I've got it all about finished, but I can't get the head and footer text to center in IE 7 (works in Safari 3.0.2 on my Mac).

Below is the code up thru the #head formatting.

My goal here is to have the head and footer area to be the width of the browser window less 375 pixels, which is reserved for the #ad area to the right for the rotating banner ads.

Any help or hints is greatly appreciated.

<html>
<head>
<title>Pantherettes.com</title>
<style type="text/css">
body {background-color: #000; background-image: url('background.jpg'); background-repeat: no-repeat; overflow: hidden}
#head {font-size: 48px; height: 100px; top: 15px; left: 5px; right: 375px; position: absolute; text-align: center; color: #FFF; font-family: 'TimesNewRomanPS-ItalicMT', 'Times New Roman', 'serif'; font-style: italic; overflow: hidden;}
<snip>

BWiz
07-29-2007, 06:37 AM
Given what you had said, I guess a kind of "semi-liquid" layout would be useful. It's too late for me to go testing stuff; but try this:



<style type="text/css">
#container /* just there */
{
padding: 0;
margin: 0;
width: 100%;
}
#content
{
padding: 5px;
}
#ads
{
float: right;
width: 375px;
}
</style>

<div id="container">
<div id="content">
Links and blah
</div>
<div id="ads">
Ads
</div>
</div>

Tom Scott
07-30-2007, 05:08 PM
Thanks, I'll mess with that a little on my next day off.

The "text-align: center" was working previously. We had "width: 65%". I took that out and added "right: 375px". That's when the text-align stopped working in IE7. (It works in Safari, though).

Just curious... Everything I've read on CSS shows this should work. Anyone have an idea why it isn't?

Thanks,

Tom.

Jutlander
07-30-2007, 05:13 PM
The "right" property can only be used along with the property "position".

doctordew
07-30-2007, 05:44 PM
Another simple way to center the actual text would be to just you the center html tags...

<center>
</center>

Jutlander
07-30-2007, 06:03 PM
No, don't use center tags. They're deprecated and CSS should be used instead.

_Aerospace_Eng_
07-30-2007, 11:12 PM
IE6 only allows you to use top and left, bottom and left, top and right, or bottom and right. You can use opposites like top and bottom or left and right. This is fixed in IE7 though as you can see. This should get you going in the right direction.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pantherettes.com</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
background-color: #000;
background-image: url('background.jpg');
background-repeat: no-repeat;
overflow:hidden;
}

#head {
font-size: 48px;
height: 100px;
margin:0 375px;
text-align: center;
color: #FFF;
font-family: 'TimesNewRomanPS-ItalicMT', 'Times New Roman', serif;
font-style: italic;
}

#footer {
font-size: 16px;
height: 35px;
text-align: center;
color: #FFF;
font-family: 'TimesNewRomanPS-ItalicMT', 'Times New Roman', 'serif';
font-style: italic;
clear:both;
}

#leftnav {
width: 120px;
text-align: center;
color: #FFF;
font-family: 'TimesNewRomanPS-ItalicMT', 'Times New Roman', 'serif';
font-style: italic;
float:left;
}

#main {
margin-left:120px;
}

#menuhead {
font-size: 28px;
padding: 8px;
}

#ad {
width: 367px;
height: 160px;
text-align: right;
float:right;
}

.menuitem {
text-decoration: none;
width: 100px;
border: 1px solid #000;
display: block;
margin: 5px 5px 0px 10px;
color: #FFF;
border-color: #777777 #000000 #000000 #777777
}

a.menuitem:hover {
font-weight: bold;
background-color: #a20036
}

a.menuitem:active {
border-color: #000000 #777777 #777777 #000000;
outline: none;
}
</style>
<script src="init.js" type="text/javascript"></script>
<script type="text/javascript">
<!--

/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

//-->
</script>
</head>
<body onload="loadmaincontent('http://pantherettes.com/welcome.html')">
<div id="ad"> <a href="javascript:gotoshow()"><img src="sponsors_ads/pantherettes_bnw" name="slide" border="0" height="159"></a>
<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimages(
"sponsors_ads/pantherettes_bnw.png",
"sponsors_ads/jean.png",
"sponsors_ads/target_tcoe.jpg",
"sponsors_ads/brusters.jpg",
"sponsors_ads/sherman.jpg"
)
slideshowlinks(
"http://pantherettes.com/sponsors.html",
"http://jeanscottrealestate.com",
"http://target.com/tcoe",
"http://www.brusters.com",
"mailto:FredSusan@bellsouth.net?subject=LCMS%20Sponsorship"
)

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

//-->
</script>
</div>
<div id="head"> Lawton Chiles Pantherettes </div>
<div id="leftnav"> <span id="menuhead">Menu</span> <br>
<script language="JavaScript" src="menu.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
drawmenuitems()
</script>
<font size="2">&copy; 2006 - 2007<br>
Thomas J. Scott</font> </div>
<div id="main">
<iframe id="content" frameborder="0"></iframe>
<script language="JavaScript" type="text/javascript">
resizecontentframe()
</script>
</div>
<div id="footer"> Please Support & Thank Our Sponsors Featured On Our Sponsor's Page and to the Right. </div>
</body>
</html>

Tom Scott
08-01-2007, 06:35 AM
Hey guys, all that helps a lot... and gave me a couple other ideas, too. I'm on vacation for two weeks and will have some time to mess with it.

I may just stick with "width: xx%" for each (like 39% ads, 60% left side stuff). It works, except for the narrowest browser windows that no one would use.

Aerospace... it looks like you are suggesting using "margin:0 375px". Hmmm... I didn't think of that. But, then again, I'm just a hack <g>... trying to make a nice website for the kids in my free time. I'll try that and look at the code you posted more closely.

Appreciate everyone's help very much.

Tom.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum