...

View Full Version : Help with content aligning to bkgrd img w/CSS



beefleef
05-31-2007, 05:53 AM
I have a site that I'm working on that I'm trying to do with CSS, but I seem to have problems with it when viewing it on Mozilla Firefox.

I'm not really sure how to get the content to always center on a Mozilla Firefox web page and have it automatically center to any monitor size. it works fine on IE.

I have the background image (on which the content should rest) centered, but the content shifts around with different monitor sizes when Mozilla is used. The web page is http://www.tokkisom.com/site/haeeun_index.html

I apologize if this is a dumb question. Any help you can offer would be greatly appreciated.

Below is the CSS page that gets called that I created with help from another person:

FOR IE:

#top {text-align: center;
}

#level2 {margin-top: -470px; margin-left: -420px;
align: center;}

#level3 {margin-top: 50px; margin-left: -470px;
align: center;}

#level4 {margin-top: 39px; margin-left: 0px;
align: center;}

#level5 {margin-top: -382px; margin-left: 157px;
width: 455px; height: 345px;
align: center;}

#text { text-align: left;
width: 445px; height: 330px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
overflow: auto;
}

FOR MOZILLA:

#top {text-align: center;
}

#level2 {margin-top: -470px; margin-left: -420px;
align: center;}

#level3 {margin-top: 50px; margin-left: -470px;
align: center;}

#level4 {margin-top: 39px; margin-left: 0px;
align: center;}

#level5 {margin-top: -382px; margin-left: 157px;
width: 455px; height: 345px;
align: center;}

#text { text-align: left;
width: 445px; height: 330px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
overflow: auto;
}

}
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: justify;

}
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;

}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #f04e7e;
text-decoration: none;

}

AND FINALLY, the actual code on the Index page:

<html>
<title>Hae Eun Park Portfolio - Main</title>
<head><script type="text/javascript">

<!--
if ((navigator.appName).indexOf("Microsoft")!=-1)
{
document.write('<link rel="stylesheet" href="css/index_ie.css" type="text/css" />');
}
else
{
document.write('<link rel="stylesheet" href="css/index_moz.css" type="text/css" />');
}
-->
</script>
</head>
<body background="images/pattern.gif" repeat=x,y>
<center><IMG SRC="images/HaeEun_template.gif"></center>

<div id="top">
<div id="level2">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="175" height="40" id="Logo_topbanner" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="Logo_topbanner.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="Logo_topbanner.swf" quality="high" bgcolor="#ffffff" width="175" height="40" name="Logo_topbanner" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>


<div id="level3">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="120" height="315" id="haeeun_navlinks" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="haeeun_navlinks.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#a993c0" /><embed src="haeeun_navlinks.swf" quality="high" bgcolor="#a993c0" width="120" height="315" name="haeeun_navlinks" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>

<div id="level4">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="620" height="22" id="bottom_navlinkss" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="bottom_navlinkss.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#996946" /><embed src="bottom_navlinkss.swf" quality="high" bgcolor="#996946" width="620" height="22" name="bottom_navlinkss" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>

<div id="level5">
<div id="text">
<center><b><font size="1">Welcome to the Portfolio of Hae Eun Park</font></b><br />
<br />
<img src="images/octopus_walking.gif"></center>
</div>
</div>
</div>
</body>
</html>

Again, the home page can be found at: http://www.tokkisom.com/site/haeeun_index.html

_Aerospace_Eng_
05-31-2007, 06:50 AM
I really wouldn't use flash for a whole website. You are just asking for trouble. This should work for you though. No need to feed a separate stylesheet to each browser. I really suggest you go do some more html tutorials as you have quite a bit to learn.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
background:url(images/pattern.gif);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
}

#container {
width:640px;
height:480px;
margin:auto; /*this centers the layout*/
background:url(images/HaeEun_template.gif) no-repeat;
}

#left {
width:175px;
float:left; /*allows other divs to be next to this*/
}

#topbanner {
display:block;
margin-top:10px;
margin:10px 0 22px 5px;
}

#leftnav {
display:block;
margin-left:5px;
}

#main {
float:left;
width:440px;
padding-top:90px;
text-align:center;
}

#main h1 {
font-size:15px;
margin:0;
padding:0 0 3px 0;
}

#main img {
display:block;
margin:auto;
}

.clearfix:after { /*used to clear floats*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

#footer {
width:640px;
margin:auto;
clear:both;
}
</style>
</head>
<body>
<div id="container" class="clearfix">
<div id="left">
<object type="application/x-shockwave-flash" data="Logo_topbanner.swf" width="175" height="40" id="topbanner">
<param name="movie" value="Logo_topbanner.swf">
</object>
<object type="application/x-shockwave-flash" data="haeeun_navlinks.swf" width="120" height="315" id="leftnav">
<param name="movie" value="haeeun_navlinks.swf">
</object>
</div>
<div id="main">
<h1>Welcome to the Portfolio of Hae Eun Park</h1>
<img src="images/octopus_walking.gif" width="400" height="300" alt=""> </div>
</div>
<div id="footer">
<object type="application/x-shockwave-flash" data="bottom_navlinkss.swf" width="640" height="22">
<param name="movie" value="bottom_navlinkss.swf">
<param name="scale" value="exactfit">
</object>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum