Cant seem to center my website whilst using SSI's

Discussion in 'Web Design and Development' started by rustypico, Jul 17, 2008.

  1. rustypico macrumors newbie

    Joined:
    Jul 17, 2008
    #1
    HI everyone, am very new to this forum, new to SSI and CSS and have done extensive googling to try and find a solution to my problem.
    OK, i am in the middle of designing a website, and i want to center the website.

    In brief, the way i have designed it just now is using SSI's, that is, i have flash files - a top nav, left nav, right nav, body text, footer, and have inserted each file into its own .htm document and positioned each one within within their respective .htm file (probably not the best way to do it i know).

    I then use SSI to include each .htm file in an .shtml file for each web page. So for example, my index.shtml page looks like this something like this:

    <body>
    <!--#include virtual="SSI/index/topnav_movie.htm"-->
    <!--#include virtual="SSI/common/left_nav.htm"-->
    <!--#include virtual="SSI/common/latest_prod.htm"-->
    <!--#include virtual="SSI/index/indexhome_body.htm"-->
    <!--#include virtual="SSI/common/footer.htm"-->
    </body>
    </html>

    what i need to do either by CSS ,or other, is center my website (if possible) so that if i manually resize the browser window, the website adjusts accordingly, but cant seem to do it.

    can anyone help? thanks!
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Common way:
    HTML:
    <head>
    ...
    <style type="text/css">
    #content { /* will be applied to HTML with an id attribute of 'content' */
     margin: 0 auto; /* should center all content; 0 for top and bottom, auto will use an equal amount on both sides resulting in centering */
    }
    </style>
    </head>
    <body>
    <div id="content">
    <!--#include virtual="SSI/index/topnav_movie.htm"-->
    <!--#include virtual="SSI/common/left_nav.htm"-->
    <!--#include virtual="SSI/common/latest_prod.htm"-->
    <!--#include virtual="SSI/index/indexhome_body.htm"-->
    <!--#include virtual="SSI/common/footer.htm"-->
    </div>
    </body>
     
  3. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #3
    I've not worked with server side includes, so I thought I'd ask a question about your solution. Are you using inline styles because a linked css won't work correctly with ssi's? If the ssi .htm page has classes/divs, will a linked css on the page they are being called into not style those tags? I'm just wondering for the future if/when I need to get into ssi's.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    I've used SSI in the past when I didn't have PHP available. A linked CSS file will be applied to any HTML included from a SSI. It works pretty much the same way as the PHP include.
     
  5. rustypico thread starter macrumors newbie

    Joined:
    Jul 17, 2008
    #5

    hi there, thanks for the quick response. have added that code as you have it there but doesnt seem to have changed anything. the website is www.puurgen.com

    Could it be to do with the fact that i have my .swf files embedded in a layer within the .htm. i do this so i can position the component parts (which i know is obvious!). Should i be positioning them with a CSS file?

    hmmm puzzling. just incase any of the rest is important, here is the full code for that page:
    ------------

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="keywords" content="solar, solar panels, renewable, photovoltaic, PV, BIPV, P-V, voltaic, solar electric, solar electricity, distributed energy, distributed power, remote power, alternative power, power, watts, watts peak, electricity, electric, domestic, home, home power, home generation, solar home, house, solar house, industrial, commercial, facades, solar roof, roof, roofing, products, renewable energy, green, green energy, green power, energy conservation, systems, supplier, designer, solutions, installer, install, installation, sales, for sale, retail, solar-cell, solar cell, solar module, module, big brother, orange, clean, non-polluting, carbon, dioxide, global, warming, climate change, sustainable, sustainable power, sustainable development, sustainability, CO2, Glasgow, Scotland, UK, leading supplier, John Charlick, carbon wars, carbon trading, grid connected, off-grid, stand alone, thin film, thick film, monocrystalline, polycrystalline, UNI-PAC, FlexiPower, united solar, uni-solar, unisolar, terra-piatta, terra-solar, sunslates, sun-slates, Astropower, Apex, powerguard, ecolux, console, intersole, eclipse, variwatt, energy mirror, econergy, saint-gobain, sggprosol, prosol, sunny boy, inverter, modulepower, generator, silicon, power management for renewable energy" />
    <title>PUURGEN | Power Management For Renewable Energy</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <LINK href="/CSS/fontstyle.css" rel="stylesheet" type="text/css">

    <style type="text/css">
    #content {
    margin: 0 auto;
    }
    </style>

    <script language="JavaScript" type="text/JavaScript">*/
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    </head>

    <body>
    <div id="content">
    <!--#include virtual="SSI/index/topnav_movie.htm"-->
    <!--#include virtual="SSI/common/left_nav.htm"-->
    <!--#include virtual="SSI/common/latest_prod.htm"-->
    <!--#include virtual="SSI/index/indexhome_body.htm"-->
    <!--#include virtual="SSI/common/footer.htm"-->
    </div>
    </body>
    </html>

    --------

    thanks for looking!!!!
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    It looks to be not centering because the div layers you've got in there are positioned absolutely, which overrides the CSS centering. When something is positioned 'absolute' is removes that content from the flow of the page. You'll need to work on laying out the page without the absolute positioning, or at least not have everything done with absolute.

    Also, the CSS I gave you, you places inside the body selector of your CSS. You need to move it outside of there,
    Code:
    body {
    ...
    }
    #content {
    ...
    }
    though that in itself won't change anything here.
     
  7. rustypico thread starter macrumors newbie

    Joined:
    Jul 17, 2008
    #7

    hi, first of all, thanks for your help!

    now, i must apologise for being so thick, but i still cant seem to get it to work. i've stripped the index.shtml page down so it just has the top nav bar only as an include:

    <body>
    <div id="content">
    <!--#include virtual="SSI/index/topnav_movie.htm"-->
    </div>
    </div>
    </body>
    </html>

    I've changed the relavent .htm file from absolute to relative (is this correct?) such that:

    <div id="Layer1" style="position:relative; width:200px; height:115px; z-index:1; top: 0px; left: 100px;">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="906" height="274">
    <param name="movie" value="/SSI/index/topnav_movie.swf">
    <param name="quality" value="high">
    <embed src="/SSI/index/topnav_movie.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="906" height="274"></embed>
    </object>
    </div>

    ------

    and have moved the style script you gave to my .css file so it reads :

    body {
    font-family: Arial Narrow, Arial Black, Arial;
    }

    #content {
    margin: 0 auto;
    }
    td {
    font-family: Arial Narrow, Arial Black, Arial;
    }

    th {
    font-family: Arial Narrow, Arial Black, Arial;
    }
    .style1 {
    font-family: Arial Narrow, Arial Black, Arial;
    color: #CC0000;
    font-weight: bold;
    font-size: 12px;
    }
    a:link {
    color: #CC0000;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    }
    a:hover {
    text-decoration: underline;
    }
    a:active {
    text-decoration: none;
    }
    ---------


    but as you will see when you load the page it still doesnt center. what silly thing am i doing wrong?
    thanks
     
  8. rustypico thread starter macrumors newbie

    Joined:
    Jul 17, 2008
    #8
    i seem to have got it working by add this to my css file:

    body {
    margin: 0px;
    padding: 0px;
    border: 0px

    font-family: Arial Narrow, Arial Black, Arial;
    }

    #content {
    margin: 0 auto;
    text-align: left;
    padding: 0px;
    width: 905px;

    }

    not sure why it works though. but thanks for all your help!
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    OK, I missed something. Div tags are block elements, which use 100% when not told otherwise and is why is wasn't exactly centering here. Is was and wasn't working, but I won't go into the dirty details here.

    To remedy, in your CSS add a width to the content, which in your original code was 913px, based on layer1. You should also remove the left: 100px parts of the tags, they aren't needed.

    Code:
    #content {
     margin: 0 auto;
     width: 913px;
    }
    I just saw you got a solution, which basically gets at what I just said.
     
  10. rustypico thread starter macrumors newbie

    Joined:
    Jul 17, 2008
    #10
    new problem same area

    thanks for your help!

    i have a new problem now though. your advice is slowly beginning to make sense. however, i am now converting my .swf layers from absolute to relative and re-aligning them. everything was going well - i had successfull aligned the top nav, left nav, and right nav. however, when i aligned the title of the body of the page i.e indexbody_title.swf, it seems to shift the left and right navs downwards a bit.

    does making layers relative have this affect or is there somethign else going on.

    thanks!
    rusty
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    As a simple solution you can lower the "top" style property on the left/right navigation areas. (if I'm understanding what you're after)

    Really though there are better ways to achieve a 3-column CSS layout. It's a bit to go into here, but check out this page, which has a number of links with various was of doing it. When you do column layouts with non-absolute positioning you shouldn't need to use the top and left style properties. Instead you use things like floats. Hope it helps.
     
  12. rustypico thread starter macrumors newbie

    Joined:
    Jul 17, 2008
    #12
    thanks so much angelwatt! have gone thru steep learning curve over the last 48 hrs which has had me pulling my hair out! But you have helped me so much!

    thanks again
    rusty
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    Your welcome, I'm glad I was able to help. Looks like things have turned out pretty well on the site too.
     
  14. rustypico thread starter macrumors newbie

    Joined:
    Jul 17, 2008
    #14
    one last piece of help?

    hi once again i have a related query to relative positioning. now that i have changed all my layers to relative positions and view the website online with safari, firefox or IE7, everything looks fine. however, if you look at the attachment you can see how the layout looks on my dreamweaver MX 2004 preview (not all to scale - had to take several slices to make the whole image). I wouldnt be bothered, but when i view the site on IE version 6 (which is on my parallels side of my mac) the website displayed exaclty as it is laid out on the dreamweaver preview.

    can you tell me why this is and why it displays ok on all 'modern' browsers?

    website is www.puurgen.com



    thanks
    rusty
     

    Attached Files:

Share This Page