This is the page i’m editing, http://i48.tinypic.com/2lln4sy.jpg as you can see it’s all on the left side of the page, I need it all centered. This is the code.
<!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>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="page">
<div id="Header-Right_">
<img id="Header_Right" src="images/Header_Right.gif" width="229" height="163" alt="" />
</div>
<div id="Headerx20Mid_">
<img id="Headerx20Mid" src="images/Header-Mid.gif" width="538" height="82" alt="" />
</div>
<div id="Headerx20Left_">
<img id="Headerx20Left" src="images/Header-Left.gif" width="132" height="111" alt="" />
</div>
<div id="Home_">
<a href="home"
onmouseover="window.status='Home'; return true;"
onmouseout="window.status=''; return true;">
<img id="Home" src="images/Home.gif" width="72" height="29" border="0" alt="" /></a>
</div>
<div id="Personnel_">
<a href="Personnel"
onmouseover="window.status='Personnel'; return true;"
onmouseout="window.status=''; return true;">
<img id="Personnel" src="images/Personnel.gif" width="98" height="29" border="0" alt="" /></a>
</div>
<div id="Retired_">
<a href="Retired"
onmouseover="window.status='Retired'; return true;"
onmouseout="window.status=''; return true;">
<img id="Retired" src="images/Retired.gif" width="81" height="29" border="0" alt="" /></a>
</div>
<div id="vehicles_">
<a href="vehicles"
onmouseover="window.status='vehicles'; return true;"
onmouseout="window.status=''; return true;">
<img id="vehicles" src="images/vehicles.gif" width="80" height="29" border="0" alt="" /></a>
</div>
<div id="community_">
<a href="community"
onmouseover="window.status='community'; return true;"
onmouseout="window.status=''; return true;">
<img id="community" src="images/community.gif" width="108" height="29" border="0" alt="" /></a>
</div>
<div id="townwatch_">
<a href="townwatch"
onmouseover="window.status='townwatch'; return true;"
onmouseout="window.status=''; return true;">
<img id="townwatch" src="images/townwatch.gif" width="99" height="29" border="0" alt="" /></a>
</div>
<div id="Message_">
<img id="Message" src="images/Message.gif" width="607" height="715" alt="" />
</div>
<div id="Middle-Right_">
</div>
<div id="Middle-Right_">
</div>
<div id="Sidebar_">
<img id="Sidebar" src="images/Sidebar.gif" width="150" height="663" alt="" />
</div>
<div id="footer_">
<img id="footer" src="images/footer.gif" width="899" height="25" alt="" />
</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
And the CSS
body {
margin: 0px;
padding: 0px;
display: block;
}
h1 {
font-family: "Georgia", "Arial", serif;
font-size: 20px;
color: #072663;
font-weight: normal;
}
#page {
left:300px;
top:0px;
width:899px;
height:851px;
padding: 157px 0 0 0;
}
#Header-Right_ {
position:absolute;
left:0px;
top:0px;
width:229px;
height:163px;
}
#Headerx20Mid_ {
position:absolute;
left:229px;
top:0px;
width:538px;
height:82px;
}
#Headerx20Left_ {
position:absolute;
left:767px;
top:0px;
width:132px;
height:111px;
}
#Home_ {
position:absolute;
left:229px;
top:82px;
width:72px;
height:29px;
}
#Personnel_ {
position:absolute;
left:301px;
top:82px;
width:98px;
height:29px;
}
#Retired_ {
position:absolute;
left:399px;
top:82px;
width:81px;
height:29px;
}
#vehicles_ {
position:absolute;
left:480px;
top:82px;
width:80px;
height:29px;
}
#community_ {
position:absolute;
left:560px;
top:82px;
width:108px;
height:29px;
}
#townwatch_ {
position:absolute;
left:668px;
top:82px;
width:99px;
height:29px;
}
#Message_ {
position:absolute;
left:229px;
top:111px;
width:607px;
height:715px;
}
#Middle-Right_ {
position:absolute;
left:836px;
top:111px;
width:63px;
height:715px;
}
#Middle-Right_ {
position:absolute;
left:0px;
top:163px;
width:79px;
height:663px;
}
#Sidebar_ {
position:absolute;
left:79px;
top:163px;
width:150px;
height:663px;
}
#footer_ {
position:absolute;
left:0px;
top:826px;
width:899px;
height:25px;
}
Rayzur
February 1, 2010, 2:03am
2
it’s all on the left side of the page, I need it all centered
If you will set up your page with static blocks in the normal page flow you can set a width and center your page with auto margins. Then you can use floats and margins for other elements, you may still need some AP but not the entire page as it is now.
Centering Divs & Images
You could set the image with the police cars as a background image on the body element and then set everything else in a wrapper div with a width.
#page{
width:899px;
margin:0 auto;
}
Rayzur:
Hi,
If you will set up your page with static blocks in the normal page flow you can set a width and center your page with auto margins. Then you can use floats and margins for other elements, you may still need some AP but not the entire page as it is now.
Centering Divs & Images
You could set the image with the police cars as a background image on the body element and then set everything else in a wrapper div with a width.
#page{
width:899px;
margin:0 auto;
}
I removed all the absolute positioning but the complete layout was destroyed, images were under other images.
Rayzur
February 1, 2010, 2:59am
4
Yes it would fall apart if all you did was remove the AP.
I guess you misunderstood me, what I meant was that it would really be best to recode the entire page.
I am going to guess that you are new to css, most people that are new try to build their pages with AP and learn about all the problems afterwards.
If you need help setting it up properly with static blocks and floats then you will need to post a link to the images you are using and we will go from there.
you got an url to look at?
Rayzur:
Yes it would fall apart if all you did was remove the AP.
I guess you misunderstood me, what I meant was that it would really be best to recode the entire page.
I am going to guess that you are new to css, most people that are new try to build their pages with AP and learn about all the problems afterwards.
If you need help setting it up properly with static blocks and floats then you will need to post a link to the images you are using and we will go from there.
Yeah I definitely help setting it up. Thanks.http://www.mediafire.com/?yh3mjumhona
Rayzur
February 1, 2010, 4:06am
7
OK, I got a rough start for you.
http://www.css-lab.com/test/germz/test.html
Your going to need to rework some of your images to make this work out right. You had them all sliced up for your absolute positioning. I could piece them all back together with blocks and floats but that would defeat the purpose.
All you really need to do is seam these two images together and then have the badge as a separate image.
http://www.css-lab.com/test/germz/images/Header-Mid.gif http://www.css-lab.com/test/germz/images/head-rt.gif
After you seam those images together it can be one BG image for the header positioned to the right.
Rayzur
February 1, 2010, 4:28am
8
I sliced the badge out of the image it was in and updated the test page.
http://www.css-lab.com/test/germz/test.html
Like I mentioned in my first post, there still may be some small chunks that can be AP’d. The badge would be ok to AP into place since it’s height is the same as the combined height of the header and nav.
This would probably be a good place to use a “Sticky Footer” also. It will keep the footer at the bottom on pages with minimum content and then it will push on down when content grows.
Maybe that will get you pointed in the right direction.
Wow looks great, but I need to have this as the bg, http://i50.tinypic.com/r91qc0.jpg should I just add it to body bg?
Rayzur
February 5, 2010, 2:00am
10
should I just add it to body bg?This Image that I have set on the body currently.
We will need to set it in a div outside of the wrapping div since css2.1 only allows one BG image per element.
Let me see if I can straighten it out and use the image you just linked to.
Rayzur
February 5, 2010, 2:19am
11
Okay, I made the adjustments in the Updated Page .
I have sliced and renamed most of your images so you can grab everything here in this zip file.
http://www.css-lab.com/test/germz/germz.zip
Let me know when you get it because it will get purged sometime soon.
EDIT: #top div as shown below.
[B]#top[/B]{
position:absolute;
[B]left:0;[/B]
width:100%;
height:163px;
background:url(images/top-bg.gif) repeat-x 0 0;
}
Downloading it, thank you very much!
Rayzur
February 5, 2010, 2:32am
13
Your Welcome! Glad I could help
Be sure to see my edit above, I made the change to the live page but you will need to edit the zip file after you open it.
I have an issue with expanding a div, it’s not expanding at all and if it does it stays centered,http://www.mediafire.com/?1mwwjnmj2ny
Hi, it is containing (not that you have a float there). On “.main” you give margins and thatmakes it seem (visually) that the parent isn’t containing the element.
Removing the margins shows that it indeed is not happening like that ;).
Worked like a charm! Thanks.
So sorry to be annoying again, I have a problem with my sidebar now.
<li><a href=“#”>Report</a></li>
All cluster up together and don’t even act as links.http://www.mediafire.com/?5fylqeq5mty
Rayzur
February 7, 2010, 7:48pm
19
Hi,
You would not of had to AP the top navbar if you would have made that badge a separate image from the header.jpg. Now you are having to put top padding to get the main content below the tip of the badge. That causes you to have to AP the top nav, it would have been much cleaner to just AP a separate badge image where you needed it.
Working with what you have though I would float the sidebar and clean all those <br> tags out of the html. Float the .saddic also, you are using RP to position it and you have AP’d your sidebar.
You also had a “p” nested in that sidebar ul , you just need to set up a left column and bring that “p” image after the ul.
There is no need for that xhtml strict doctype, “HTML 4.01 strict” will be just fine.
Try this approach
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Prospect Park Police Department</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="What your product is about" />
<meta name="keywords" content="The keywords people will use to search for your product" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<style type="text/css">
.style4 {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
/*h3 color: #9000A1; invalid*/
}
.style5 {font-family: Arial, Helvetica, sans-serif}
</style>
</head>
<body>
<div id="top"></div>
<div id="page">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Personnel</a></li>
<li><a href="#">Retired</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Townwatch</a></li>
</ul>
<div id="content">
<div id="left">
<ul id="leftnav">
<li><a href="#">Mission Statement</a></li>
<li><a href="#">Contact Directory</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Support the PPPD</a></li>
<li><a href="#">Prevent Crime</a></li>
<li><a href="#">Report</a></li>
<li><a href="#">Police Units</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">FAQs</a></li>
</ul>
<p><img src="images/door.jpg"/></p>
</div><!--end sidebar-->
<div class="saddic">
<h2>Message from Chief John Saddic.</h2>
<p>Hello and welcome to the Prospect Park PD Web Site. Please excuse us while our site is undergoing a complete redesign.</p>
<p>The Prospect Park Police Station is located at 720 Maryland Ave., along with the Library and the Borough Offices (right across the street from the SEPTA Train Station)</p>
<p>The Police Station phone number is (610) 534-2222. We just installed a new telephone system and you can call at anytime, and if our secretary Mary Kay does not answer you may leave a message for any officer in their individual voicemail. Below is a list of our officers and their respective extension/voice mailbox numbers:</p>
<ul>
<li>Chief John Saddic – 106</li>
<li>Sgt. Cliff Engel – 107</li>
<li>Officer Philip Coffin – 141</li>
<li>Officer William Bozeman – 130</li>
<li>Officer John Shemeluk – 131</li>
<li>Officer Jason Hoover – 132</li>
<li>Officer Henry O’Neill – 133</li>
<li>Officer William Musser – 134</li>
<li>Officer George Brown – 136</li>
<li>Officer Jonathan Richmond – 137</li>
<li>Officer John Zebley – 138</li>
<li>Officer Christopher Bassoline – 139</li>
<li>Code Enforcement Officer Robert Ticknor - 140</li>
</ul>
<p>The office of the Mayor (Don Cook) can be reached at (610) 532-1007 during regular business hours.</p>
<p>All residents are reminded to dial “9 1 1” in an emergency, or if they need to see a police officer right away. If you are calling from outside Delaware County the Communications Center can be reached at (610) 565-6500.</p>
</div><!--end saddic-->
<div id="footer">
<p>Copyright © 2008-Your Product's Name Here, All Rights Reserved.</p>
<p><a href="#">Earnings Disclaimer</a> | <a href="#">Terms of Service</a> | <a href="#">Privacy Policy</a> | <a href="#">Customer Service</a></p>
</div><!--end footer-->
</div><!--end content-->
</div><!--end page-->
</body>
</html>
@charset "utf-8";
/* CSS Document */
html {
height: 100%;
}
body {
background: #1b1b1b url(Images/bg.gif);
font-size:100%;
margin:0;
padding:0;
}
#top{
position:absolute;
left:0;
width:100%;
height:163px;
background:url(images/top-bg.gif) repeat-x 0 0;
}
#page {
position:relative;
margin:0 auto;
width:804px;
background: url(images/header.jpg) no-repeat;
padding: 163px 0 0 0;
overflow:hidden;/*contain floats*/
}
ul#nav{
position:absolute;
top:83px;
right:15px;
width:540px;/*800px total with left padding*/
height:29px;
margin:0;
padding:0 0 0 80px;
list-style:none;
/*background:red;*/
}
#nav li, #nav li a{
float:left;
}
#nav li a{
height:29px;
line-height:29px;
padding:0 20px 0 0;
text-decoration:none;
color:#FFF;
}
#nav li a:hover{
text-decoration:underline;
color:cyan;
}
#content {
clear:both;
width:755px;
margin-left: 28px;
background:#FFF;
overflow: hidden;/*contain floats*/
}
#content h2{margin:0;}
#left{
float:left;
width:133px;
background:#222;
margin-left:10px;
padding:0 15px;
}
#left p{clear:both;}
ul#leftnav {
float:left;
width:133px;
background:red;
margin:10px 0 0;
padding:0;
list-style:none;
}
#leftnav li{
float:left;
clear:left;
margin:3px 0;
/*border-bottom-image:uri(images/border.gif);*/
}
#leftnav li a{
float:left;
height:24px;
line-height:normal;
text-decoration:none;
color:#FFF;
}
#leftnav li a:hover{
text-decoration:underline;
color:cyan;
}
.saddic {
/*position:relative;
top: -40px;
left:177px;*/
float:right;
width:570px;
/*height:688px;*/
/*background:lime;*/
}
h1 {
font: 28px Tahoma;
font-weight: bold;
line-height: 32px;
text-align: center;
color: #cc0000;
margin: 20px 0 0 0;
}
#footer {
clear:both;
font: 10px Arial, Helvetica, sans-serif;
text-indent: 0;
text-align: center;
color: #999999;
margin: 20px 0 10px 0;
padding: 5px 0 0 0;
border-top: 1px solid #AAA;
}
Your solution worked perfectly, but I’m trying to add a slider and it’s in the wrong place, it won’t stay where I want it to I’ve tried all position types even AP but it’s useless.
This is how I want it to look,
This is how it looks,
And this is what I currently have.http://www.mediafire.com/?hnjmmmzy3zy
