css issues

Hello,

Let me start by saying I am learning as I am going here, so bear with me¿ . I created a site in Photoshop that I exported into Dreamweaver, which caused spacing problems with all the tables it created.

I then created a style sheet to play around with. It doesnt render too well in DW, but once uploaded its not too bad.

I have some issues right now. One is I cannot seem to get it aligned to the center, and the other is some of my divs aren’t showing up, RightSide and footer.

My code is attached. Live view is www.itphilly.com/test/keenans/index4.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Keenan's Irish Pub. Where All Neighborhoods Meet.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--Fireworks CS3 Dreamweaver CS3 target.  Created Wed Apr 14 12:24:08 GMT-0400 (Eastern Daylight Time) 2010-->
<link href="css/irish.css" rel="stylesheet" type="text/css" />

<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>


</head>
<body>
<div id="container" align="center">
<div id="logo"></div>

<div id="topPage"></div>

<div id="topNAV">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="757" height="33" id="FlashID" title="topNAV">
    <param name="movie" value="images/media/topNav2.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="7.0.70.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="../Scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="images/media/topNav2.swf" width="757" height="33">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="7.0.70.0" />
      <param name="expressinstall" value="../Scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
</div>

<div id="sideNav">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="224" height="553" id="FlashID2" title="sideNAV">
    <param name="movie" value="images/media/sideNav3.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="7.0.70.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="../Scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="images/media/sideNav3.swf" width="224" height="553">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="7.0.70.0" />
      <param name="expressinstall" value="../Scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
</div>

<div id="content">content area </div>

<div id="botLeft"></div>

<div id="RightSide"></div>

<div id="footer">footer</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID2");
//-->
</script>

</div> <!--container closer-->
</body>
</html>


@charset "utf-8";
/* CSS Document */

#logo {
	position: fixed;
	height: 182px;
	width: 224px;
	left: 0px;
	top: 0px;
	background-image: url(../images/index_r1_c1.gif);
	right: auto;
	bottom: auto;
}

#topPage {
	height: 77px;
	width: 757px;
	margin: 0px;
	padding: 0px;
	left: 225px;
	top: 0px;
	position: fixed;
	background-image: url(../images/topPage.gif);
	float: none;
}
#container {
}


#RightSide {
	height: 1000px;
	width: 18px;
	margin: 0px;
	padding: 0px;
	position: fixed;
	left: 982px;
	top: 0px;
	background-image: url(../images/sideRight.gif);
}

#topNAV {
	margin: 0px;
	padding: 0px;
	height: 33px;
	width: 757px;
	position: fixed;
	left: 225px;
	top: 78px;
}

#sideNav {
	margin: 0px;
	padding: 0px;
	height: 553px;
	width: 224px;
	position: fixed;
	left: 0px;
	top: 182px;
}

#content {
	margin: 0px;
	padding: 0px;
	height: 850px;
	width: 757px;
	position: fixed;
	left: 225px;
	top: 112px;
}

#botLeft {
	margin: 0px;
	padding: 0px;
	height: 265px;
	width: 224px;
	position: fixed;
	left: 0px;
	top: 735px;
	background-image: url(../images/index_r5_c1.gif);
}

#footer {
	margin: 0px;
	padding: 0px;
	height: 37px;
	width: 757px;
	position: fixed;
	left: 225px;
	top: 963px;
}

#container {
	margin: 0px;
	padding: 0px;
	height: auto;
	width: 1000px;
}
body {
	background-image: url(../images/bg.jpg);
	background-repeat: repeat-x;
}

Open in new window

ibewlocal98Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LZ1Commented:
Any reason you have everything in a fixed position? This prevents these elements from moving at all on the page.  
0
CCSOFlagCommented:
that's usually the point of having them fixed.
0
ibewlocal98Author Commented:
LZ1,

Being the css newb that I am, i thought they had to be setup this way.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

CCSOFlagCommented:
ibew.  They don't have to be set up that way, but there is nothing wrong with fixing elements, if you ahve a pre-determined location for everything.  
0
LZ1Commented:
I see.  I remember working on your site yesterday too.  
You want everything centered and scrollable right?  As well as your DIVs showing?
0
CCSOFlagCommented:
your div is showing up, it's the picture that isn't showing up.  Am looking into it more.
0
CCSOFlagCommented:
actually, it is showing up.  the scroll bar isn't working though.
0
CCSOFlagCommented:
Are you disabling the scroll bar in any of your scripts?
0
LZ1Commented:
May I ask what was wrong with the other solution from yesterday?
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_25874136.html?cid=1131#a30751579 
Just so I know.
0
ibewlocal98Author Commented:
LZ1,

Yes you helped yesterday but got me interested in making things a bit simpler.

I used coordinates for everything thinking if I fixed them the IDs, that the site would layout exactly where the coordinates were.
0
ibewlocal98Author Commented:
@ CCSOflag . no I dont think so.

@ LZ1. solution was good. I am now trying to learn more about how to do the same with CSS from the ground up.
0
LZ1Commented:
I see.  
Simplicity makes life easier, however it doesn't always happen that way. If your going the CSS route, I would definitely start here:
http://www.w3schools.com/css/default.asp 
0
LZ1Commented:
Your background is back in your right DIV and your footer is visible again.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
background:none repeat scroll 0 0 transparent;
border:0 none;
font-size:100%;
margin:0;
outline:0 none;
padding:0;
}
body {
line-height:1;
}
ol, ul {
list-style:none outside none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:none;
}
:focus {
outline:0 none;
}
ins {
text-decoration:none;
}
del {
text-decoration:line-through;
}
table {
border-collapse:collapse;
border-spacing:0;
margin:0;
}
</style>
<style> 
body {
	width:100%;
	height:100%;
	background:url("http://www.itphilly.com/test/keenans/images//bg.jpg") repeat-x scroll left 0px #FFFFFF;
}
#wrapper {
	clear: both;
	width: 1000px;
	margin:0px auto;
}
#header {
	width: 100%;
	height: 182px;
}
#header img { 
	float:left;
	position:relative}
#header #nav {
	float: left;
	position: relative;
	width: 757px;
	height: 33px;
	margin-top: 77px;
}
#sidebar {
	float: left;
	height: 553px;
	width: 224px;	
}
#content {
	height:850px;
	width:757px;
}
#RightSide {
        height: 1000px;
        width: 18px;
        margin: 0px;
        padding: 0px;
        background-image: url(http://www.itphilly.com/test/keenans/images/sideRight.gif);
		float:right;
}

#footer {
	float: left;
	width: 1000px;
	position: relative;
	text-align:center;
}
</style>
</head>

<body>
<div id="wrapper"> 
	  <div id="RightSide"></div>
<div id="header"> <img src="http://www.itphilly.com/test/keenans/images//logo.gif" width="224" height="182" />
   	  <div id="nav"> 
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="757" height="33" id="FlashID" title="top Navigation">
     <param name="movie" value="http://www.itphilly.com/test/keenans/images//media/topNav2.swf" />
     <param name="quality" value="high" />
     <param name="wmode" value="opaque" />
     <param name="swfversion" value="7.0.70.0" />
     <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
     <param name="expressinstall" value="Scripts/expressInstall.swf" />
     <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
     <!--[if !IE]>-->
     <object type="application/x-shockwave-flash" data="http://www.itphilly.com/test/keenans/images//media/topNav2.swf" width="757" height="33">
       <!--<![endif]-->
       <param name="quality" value="high" />
       <param name="wmode" value="opaque" />
       <param name="swfversion" value="7.0.70.0" />
       <param name="expressinstall" value="Scripts/expressInstall.swf" />
       <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
       <div>
         <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
         <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/http://www.itphilly.com/test/keenans/images//shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
       </div>
       <!--[if !IE]>-->
     </object>
     <!--<![endif]-->
   </object>
    </div><!--end nav-->
  </div><!--end header-->

<div id="sidebar">  
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="224" height="553" id="FlashID2" title="side Navigation">
     <param name="movie" value="http://www.itphilly.com/test/keenans/images//media/sideNav3.swf" />
     <param name="quality" value="high" />
     <param name="wmode" value="opaque" />
     <param name="swfversion" value="7.0.70.0" />
     <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
     <param name="expressinstall" value="Scripts/expressInstall.swf" />
     <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
     <!--[if !IE]>-->
     <object type="application/x-shockwave-flash" data="http://www.itphilly.com/test/keenans/images//media/sideNav3.swf" width="224" height="553">
       <!--<![endif]-->
       <param name="quality" value="high" />
       <param name="wmode" value="opaque" />
       <param name="swfversion" value="7.0.70.0" />
       <param name="expressinstall" value="Scripts/expressInstall.swf" />
       <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
       <div>
         <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
         <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/http://www.itphilly.com/test/keenans/images//shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
       </div>
       <!--[if !IE]>-->
     </object>
     <!--<![endif]-->
   </object>
<img name="beer" src="http://www.itphilly.com/test/keenans/images//beer.gif" width="224" height="265" border="0" id="beer" alt="beer" />
</div><!--end sidebar-->
<div id="content"> 
content 

</div><!--end content-->


	<div id="footer"> 
	All of the bottom stuff goes here 
	</div><!--end footer-->
</div><!--end wrapper-->
</body>
</html>

Open in new window

0
ibewlocal98Author Commented:
What did you change? I guess I am confused as to why if I have the exact coordinates set to fixed positions in the CSS why it doesnt display that way....
0
CCSOFlagCommented:
ibew, your page is bigger than a single window of a browser unless someone has very high resolution.  Because of your fixed positioning is prevents it from scrolling because fixed means it is relative to the browser window.  IF you change your positioning to absolute, I think it will achieve what you want.
0
LZ1Commented:
Well first I changed the fixed positioning.  Basically fixed does not allow for things to move or flow naturally throughout the page.  Second, I took away the coordinates for the each element.  As CCSOFlag stated >>" fixed means it is relative to the browser window".  So if I had a monitor that was 800X600 resolution and one of the elements is 250px over from the left, that's almost 1/3 of resolution gone.  
A fixed position is good if your going to stage individual elements, like a contact button or something similar, at the same point on every page.  Think the old style Facebook bar at the bottom.  It was "Fixed" to the bottom.  
If you are going to work with absolute positioning I caution you again.  Absolute positioning works really well if your 'layering" with CSS.  Or if you need something to be absolutely positioned at an edge, but still need it to scroll with the page.  Absolute and fixed positioning abide by their own set of rules and will not always play well with other elements on the page.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CCSOFlagCommented:
LZ is correct in that absolute and fixed use their own rules.  While absolute is more powerful with layering, I don't think it has to be a layered site to utilize it if you understand how absolute works.  As long as you have done your measuring and know at what exact coordinates you want everything, absolute is the way to go.  On the other hand if you have not measured everything out but still want the divs to line up with each other, then absolute may not be the way to go.  I usually measure out my webpages and have exact coordinates for my divs.  I also enjoy the look of overlapping divs, thus I use absolute a lot.
0
ibewlocal98Author Commented:
thanks for your help!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.