Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help Please w/ "text-align: center"

    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>

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    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:

    Code:
    <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>
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    The "right" property can only be used along with the property "position".
    .
    .

  • #5
    Regular Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    147
    Thanks
    5
    Thanked 3 Times in 2 Posts
    Another simple way to center the actual text would be to just you the center html tags...

    <center>
    </center>
    Quote Originally Posted by rmedek View Post
    Doctordew, as soon as they come out with the opposite of an infraction, I am going to give you a million of them. You are my new favorite person on the forum.

  • #6
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    No, don't use center tags. They're deprecated and CSS should be used instead.
    .
    .

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •