View Full Version : looking for some help with css problems...

Jan 17th, 2010, 01:28 AM
ok, having some problems with styling my page with css....

1 - for some reason can not get the main wrapper div to be centered on the page.

2 - when I begin to style the divs inside the "sitecolor" div the body of that div disappears and the footer disappears.

3 - how do i get the footer to stay positioned under the content div?

The look I am trying to achieve is on www.brooklyntreatshoppe.com
any insight as to what I am doing wrong would be a great help.

Here is the HTML:

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:::Brooklyn Treat Shoppe:::</title>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
<link href="BTSstylesheet.css" rel="stylesheet" type="text/css" />

<body onload="MM_preloadImages('images/homeover.gif','images/menuover.gif','images/galleryover.gif','images/testimonialsover.gif','images/faqover.gif','images/aboutourchefover.gif')">

<div id="wrapper">

<div id="header">
<img src="images/BTSlogo.gif" width="317" height="141" alt="BrooklynTreatShoppeLogo" />

<div id="sitecolor">

<div id="nav">
<a href="http://www.brooklyntreatshoppe.com/home.html" target="content" onmouseover="MM_swapImage('home','','images/homeover.gif',1)" onmouseout="MM_swapImgRestore()"><img src="images/homeoff.gif" name="home" width="88" height="89" border="0" id="home" /></a><a href="http://www.brooklyntreatshoppe.com/menu.html" target="content" onmouseover="MM_swapImage('menu','','images/menuover.gif',1)" onmouseout="MM_swapImgRestore()"><img src="images/menuoff.gif" name="menu" width="80" height="89" border="0" id="menu" /></a><a href="http://www.brooklyntreatshoppe.com/gallery" target="content" onmouseover="MM_swapImage('gallery','','images/galleryover.gif',1)" onmouseout="MM_swapImgRestore()"><img src="images/galleryoff.gif" name="gallery" width="87" height="89" border="0" id="gallery" /></a><img src="images/placeanorderoff.gif" width="76" height="89" alt="place an order" /><img src="images/contactusoff.gif" width="73" height="89" alt="contact us" /><a href="http://www.brooklyntreatshoppe.com/testimonials.html" target="content" onmouseover="MM_swapImage('testimonials','','images/testimonialsover.gif',1)" onmouseout="MM_swapImgRestore()"><img src="images/testimonialsoff.gif" name="testimonials" width="73" height="89" border="0" id="testimonials" /></a><a href="http://www.brooklyntreatshoppe.com/faq.html" target="content" onmouseover="MM_swapImage('faq','','images/faqover.gif',1)" onmouseout="MM_swapImgRestore()"><img src="images/faqoff.gif" name="faq" width="75" height="89" border="0" id="faq" /></a><a href="http://www.brooklyntreatshoppe.com/aboutourchef.html" target="content" onmouseover="MM_swapImage('About our Chef','','images/aboutourchefover.gif',1)" onmouseout="MM_swapImgRestore()"><img src="images/aboutourchefoff.gif" name="About our Chef" width="95" height="89" border="0" id="About our Chef" /></a><img src="images/friendsofthebakeryoff.gif" width="69" height="88" alt="friends of the bakery" />
<!--end of "nav"div-->

<div id="content">

<div id="leftbox">
<img src="images/HomepagePics.png" width="220" height="194" />

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 200,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#800000'
tweets: {
background: '#ffffff',
color: '#331300',
links: '#450000'
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
<!--end of "leftbox"div-->

<div id="copy">
<p>Brooklyn Treat Shoppe is a dessert catering company that specializes in flavor combinations that bring back memories of childhood and a sense of nostalgia. <br />
As your internet bakery and ‘the' online hot spot for sweet treats, we offer personal touches to any event. <br />
Our mission is to create fantastic finishing touches where we thrive on flavor combinations that make you think of your childhood, a comfortable place or a special holiday. <br />
Sculpted cake masterpieces, or Cake Art, are our specialty but we also love to make classic cakes, miniature desserts and specialized cupcakes. And, yes, we do Wedding cakes too!

Heart and soul goes into every treat that makes its way out of our door - large or small. <br />
We are here to please, the Brooklyn way!
Have an idea? We'll make it happen.

Do you have an event that needs a dessert?
Need a cake?
Contact us!
<p>718-866-5333<br />
<a href="mailto:[email protected] "> [email protected]<br />
<br />
</a><a href="http://www.facebook.com/brooklyntreatshoppe"><img src="images/facebook.gif" width="43" height="43" alt="BTS on Facebook" /></a><a href="http://www.twitter.com/bklyntreatshppe"><img src="images/twitter-tiny.gif" width="43" height="43" alt="BTS on Twitter" /></a>
<!--end of "copy"div-->

<!--end of "content"div-->

<!--end of "sitecolor"div-->

<div id="footer">
<!--end of "footer"div-->

<!--end of "wrapper"div-->


Here is the CSS:

@charset "UTF-8";body {
background-image: url(images/BTSbkrnd.jpg);
font-family: Tahoma, Geneva, sans-serif;
#wrapper {
width: 800px;
position: absolute;
#wrapper #header {
position: absolute;
z-index: 6;
width: 100%;
left: -25px;
#wrapper #sitecolor {
background-color: #FFFCD3;
position: absolute;
top: 75px;
width: 100%;
#wrapper #sitecolor #nav {
text-align: right;
position: absolute;
z-index: 7;
width: 100%;
right: 50px;
top: 10px;
#wrapper #sitecolor #content {
#wrapper #sitecolor #content #leftbox {
position: absolute;
width: 150px;
top: 100px;
#wrapper #sitecolor #content #copy {
position: absolute;
width: 550px;
right: 25px;
top: 100px;
#wrapper #footer {
z-index: 9;
position: absolute;
width: 100%;
bottom: 0px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 9px;

Jan 17th, 2010, 11:56 AM
Hi there,

It's not a good practice to use absolute positions everywhere for making web layouts, read http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/

I'd recommend you to check http://bonrouge.com/2c-hf-fixed.php to see how to make a good 2 column layout.

Jan 17th, 2010, 12:02 PM
1. want to center #wrapper
add: margin: 0 auto;

2. not very clear

3. for the footer, using absolute position with the bottom attribute may not be recognized by the web browser. usually, just put 'footer' behind the 'content', the default flow of 'footer' is just what you want -- under 'content' div

Add My Website
Jan 17th, 2010, 07:24 PM
Agreed, just use margin: 0 auto but that will only work on position:relative divs. Check out CSS Gallery (http://www.addmywebsite.co.uk) for loads of examples of different website layout using css

Jan 19th, 2010, 04:20 PM
Thanks for the advice on this. I seem to have worked out my issues. Your replies have been a big help.

Jan 19th, 2010, 04:24 PM
i may be a dope but i can't figure out how to mark this post as RESOLVED. if someone wants to tell me that would be great.

Jan 19th, 2010, 04:25 PM
and for anyone interested in what i was talking about in problem #2 of the first post... this article is what i found to solve my problem...