Cant seem to center my website whilst using SSI's

rustypico · Jul 17, 2008

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>





</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!

angelwatt · Jul 17, 2008

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>

InLikeALion · Jul 17, 2008

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.

angelwatt · Jul 17, 2008

InLikeALion said:
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.

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.

rustypico · Jul 17, 2008

angelwatt said:

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>

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">*/

</script>
</head>

<body>
<div id="content">





</div>
</body>
</html>

--------

thanks for looking!!!!

angelwatt · Jul 17, 2008

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.

rustypico · Jul 17, 2008

angelwatt said:
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.

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

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

27CDB6E-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

rustypico · Jul 17, 2008

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!

angelwatt · Jul 17, 2008

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.

rustypico · Jul 17, 2008

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

angelwatt · Jul 17, 2008

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

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.

rustypico · Jul 18, 2008

angelwatt said:
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.

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

angelwatt · Jul 18, 2008

rustypico said:
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

Your welcome, I'm glad I was able to help. Looks like things have turned out pretty well on the site too.

rustypico · Jul 21, 2008

one last piece of help?

angelwatt said:
Your welcome, I'm glad I was able to help. Looks like things have turned out pretty well on the site too.

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

Search

Search

Cant seem to center my website whilst using SSI's

rustypico

macrumors newbie

angelwatt

Moderator emeritus

InLikeALion

macrumors 6502a

angelwatt

Moderator emeritus

rustypico

macrumors newbie

angelwatt

Moderator emeritus

rustypico

macrumors newbie

rustypico

macrumors newbie

angelwatt

Moderator emeritus

rustypico

macrumors newbie

angelwatt

Moderator emeritus

rustypico

macrumors newbie

angelwatt

Moderator emeritus

rustypico

macrumors newbie

Attachments

Our Staff