Help with CSS Layout

[sailorsmokey]

Hi Everyone,

 

I am trying to widen the content area on an existing layout that is CSS based.  While I did all the PHP & MySQL stuff for this web site, I have to admit that my CSS skills are sorely, sorely lacking.  I have spent about an hour trying to figure out how to fix the CSS to do what I want.  I did get the header image to a larger size, but I can't get the layout to expand to match it.  I think the CSS tag that needs changed has something to do with either "bodyshell" or "bodycontent," but I've tried changing some of the values on the style sheet to no avail. 

 

Here's my test page, so you can see what it looks like now, and what I'm trying to do.  What I want is a larger space where the item is displayed, so I can add some additional content. 

 

http://www.autismcommunitystore.com/itemtest.php?item=826

 

There are several CSS files being used, but I think a couple of them only do the navigation menus.  I'll post what I believe is the main CSS file here, along with the code for the page.  Let me know if something appears to be missing.

 

At this point, I'm lost in a jungle.  This is a little bit beyond my current skills, but seems like it might be something I'm just not getting.  Absolutely ANY advice, help, or comment that might help me would be fantastic and highly, highly appreciated!

 

Here's the CSS file (named autismstyle-alttest.css):

a {
color: #697345;/*#ff8c38;*/ /* color:  */
}

a:visited {
text-decoration: none;
color:#697345; /* color: #003366;*/
}

a:link {
text-decoration: none;
}

* { padding:0; /*margin:0;*/ }

h1, h2, h3 {
margin:0;
}

body { 
background:url('http://www.watchesandthings.com/autism/images/BackgroundMain.jpg') repeat-x top #fffff8; 
font:normal 12px "Trebuchet MS", arial, sans-serif;  
color: #46203C;
text-align:center; 
width:100%;
margin:0;  /*margin: 5px; */
}

a:hover {
text-decoration: none;
color: #87935c;/*#ff8c38;*/ /* color:  */
}




* html a:hover {text-decoration: none;	color: #FFFFFF; background-color: #E3DFF3;}/* IE specific hack...color defines store cart and checkout out on IE ONLY */


a:active {
text-decoration: none;
color: #003366;
}

#container {
z-index:0;
margin:0 auto; 
text-align:left; 
width:900px; 
border:solid thin #8D9F4D; 
background: url(http://www.watchesandthings.com/autism/images/productbackground.jpg) repeat-y left #ffffff;  /*http://www.watchesandthings.com/autism/*/
} 

#home_container {
z-index:0;
margin:0 auto; 
text-align:left; 
width:900px; 
border:solid thin #8D9F4D; 
background: url(http://www.watchesandthings.com/autism/images/homebackground.jpg) repeat-y left #ffffff;  /*http://www.watchesandthings.com/autism/*/
} 

#graphicMenu {
z-index:1;
position: relative;
margin:10px; 
height: 380px;
width:525px; 
border:solid thin #8D9F4D; 
background: #ffffff;  /*featured products loaded into this layer*/
}



#featured {
z-index:1;
position: relative;
margin:10px; 
height: 230px;
width:525px; 
border:solid thin #8D9F4D; 
background: #ffffff;  /*featured products loaded into this layer*/
}

#featuredproduct h5 {
padding-left: 30px;
font-size: 12pt;
font-weight: 700;
}

#featuredproduct h4 {
padding-left: 20px;
font-size: 9pt;
font-weight: 900;
}

#featuredproduct a:hover {
font-color: #8D9F4D;/*#ff8c38;*/ /* color:  */
}

#artdisplay {
z-index:1;
position: relative;
margin:0 auto; 
height: 300px;
width:500px; 
border:solid thin #8D9F4D; 
background: #ffffff;  /*images of artshare show up here*/
overflow:scroll;
}

#thumbs {
z-index:1;
overflow:scroll;
position: relative;
margin:0 auto;
height: 140px;
width:500px; 
border:solid thin #8D9F4D; 
background: #ffffff;  /*Thumbs of community section loaded into this layer*/
}
#thumbRestrict {
overflow:visible;
position: relative;
margin:0 auto;
height: 110px;
width: 500%;
}/*this div restricts the thumbs so that it will scroll only horizontally*/



/*product dropped in to get items view on front page well */
#product h5 {
padding-left: 30px;
font-size: 12pt;
font-weight: 700;
}

#product h4 {
padding-left: 20px;
font-size: 9pt;
font-weight: 900;
}

#product a:hover {
font-color: #8D9F4D;/*#ff8c38;*/ /* color:  */
}



.prod-id {
margin: 0;
font-size: 9pt;
}

.prod-title {
font-color: #50592D;
font-size: 13pt;
font-weight: 700;
}

.prod-price {
font-size: 12pt; 
}

.prod-dollar {
font-color: #FF0033;
font-size: 12pt; 
}








} 
/* unedit import from Dano's sheet----------*/
/* Classes */

.breadcrumbs{
margin-top: 10px;
        margin-left: 30px;
        padding-bottom: 10px;
        color: #332d72;
        z-index: 10;
}

.breadcrumbs a {
        color: #332d72;
}

/*new breadcrumbs---------------------------------------------*/


#other-categories{
position:absolute;
clear:both;
width:205px;
left:330px;
top:50px;
border:solid thin #8D9F4D; 
padding:10px 10px 10px 10px;
}

#other-categories h3{
font-size:1.2em;
font-weight:700;
}
/*End new breadcrumbs---------------------------------------------*/



.clear {
clear:both; 
display:block; 
font-size:1px; 
height:1px; 
line-height:-1;
}

.last {
border:0 solid;
}

input.buttonsubmit {
margin-left:4px !important; text-transform:uppercase;
}

/* IDs */

#bodycontent {
float:right; 
width:545px; 
background: none;
} 

*html #bodycontent {
height: auto !important; height: 400px;
min-height: 600px;
}
/* 150 + 610 = 760 original value */
/* 215 + 545 = 760 changed value to support wider menu*/

#bodyshell {
z-index: 5;
border-left:150px solid transparent; 
float:left; 
zoom:1; 
margin:0;
} 

#bodyshell:after {
clear:both; content:"."; 
display:block; 
height:0; 
visibility: hidden;
}
*:first-child+html #bodyshell { width:610px; }

#brandmark {
float: left; 
font: normal 26px Tahoma, Geneva, Verdana, sans-serif; 
width:500px; margin-top:10px;
} 

/* 510 + 250 = 760 */

#brandmark a {
color:#8895b8; 
display:block; 
padding:6px 0 5px 13px; 
text-decoration:none;
}


#captionarea, #info-div {
/*margin:0px 0px 0px;*/
position:relative;
top: -15px;
left: 10px;
width: 85%;
background: transparent;
/*border-bottom:1px #fff solid;*/
}/* 1px is used to prevent Margin Folding */

#messagearea {
position:relative;
top: -20px;
background: transparent;
padding-top:10px;

}




#itemtype #contentarea #captiontitle {margin:15px 0 10px; padding:0 2px;}
#itemtype #captiontitle {background:none; color:#000000; font:bold 14px Tahoma, Geneva, Verdana, sans-serif; margin:0; padding:2px 2px 8px;} /*The Left/Right Padding is smaller because the Caption Title needs to be nested within the Caption on Item pages, but not on Section pages */

#contentarea {margin: 0 15px 10px;}

#bodyContent {
background-color:#697345; 
color:#ffffff; 
font:bold 14px Tahoma, Geneva, Verdana, sans-serif; 
margin:0; 
padding:4px 15px 6px;
}


/* ----------------------= footer -------------------------------- */


#copyright {background:transparent; color:#ffffff; display:block; font:normal xx-small/1.2 verdana, sans-serif; text-align:center;}

#finaltext, #introtext {margin:10px;background: none;}

#footer {
background: #857CB7 url('http://www.watchesandthings.com/autism/images/footer_tile2.gif') repeat-y;
        height:65px;
clear:both; 
        zoom:1;
	width: 900px;
	border:solid thin #8D9F4D;
	border-top:none; 
}

#footer-links {
background:transparent;
color:#ffffff; 
display:block; 
font-weight: 300; 
font-size:11px; 
padding:15px 0 15px; 
text-align:center;
}

#footer-links a {
background:transparent;
color:#ffffff; 
text-decoration:none; 
}

#footer-links a:hover {
background:transparent;
        padding-bottom: 1px;
border-bottom: 1px solid #ffffff;
}

/* -----------------------end footer------------------------*/

/* ----------------------= header -------------------------*/
#header {
        background: url(http://www.watchesandthings.com/autism/images/acs_logotest.jpg) no-repeat #9392b4 -1px 0px;
        height: 215px;
	color: fff;
}

#logo {
position: absolute;
top: 0 px;
left: auto;
z-index: 1;
/**/
}

#header a {
        padding-top: 10px;
}

/*  upper navigation ba   */
#nav-general {

position:relative;
top:-2px;
clear:both; 
    float:right;
display:block; 
list-style:none; 
margin:0 5px 0 0;
        color: #50592D;
}



#nav-general li {
background: none;
border:1px solid #ffffff;
border-top:0; 
float:left; 
margin:0 2px;
        
} /* General Link Colors */

#nav-general li a {
        color: #ffffff;
display:block; 
font-size:10px; 
font-weight:bold; 
padding:4px 20px 6px; 
text-align:center; 
text-decoration:none; 
        white-space:nowrap;
}

#nav-general li a:hover {
background:transparent;
        background: url('http://www.bowleswatch.com/acs/66_per_background.png') repeat;
color: #50592D;
}

/*




*/

/*#nav-product {
     _display:inline;
     float:left;
     margin-left:-150px;
     overflow:hidden;
     position:relative;
     width:150px; z-index:100;
     min-height: 550px; 
     height: auto !important; height: 400px;
    background: url(http://www.bowleswatch.com/acs/66_per_background.png) repeat;
}*/


/* IE Experiences the pixel doubling bug here. "display: inline;" fixes this. Position Relative and Z-Index are needed for IE in order to display the background colors */

/*#nav-product ul li a {
    border-bottom: 2px solid #ffffff;        
    color:#332d72;
    display:block;
    font-weight:bold;       
    font-size:11px;
    height:auto;
    margin:0;
    min-height:16px;
    padding:5px 10px 6px 10px;
    text-decoration: none;
    width:130px;
}*/

/*#nav-product ul li a:hover {
    background-color: #ffffff;
    color:#332d72;
}*/

/*#nav-product li {
margin:0;
}*/

/*#nav-product ul {
list-style:/*url(http://us.st11.yimg.com/us.st.yimg.com/I/yhst-11545486226283_1937_535304) 0 0;}
*/
#htmltop, #htmlbottom{
padding:5px;
}

* html #nav-product ul li a{
width:123px; 
height:auto; 
overflow:hidden;
}

* html #nav-product ul li a:hover{
width:123px;
}

* html #nav-product { 
overflow:visible; 
width:150px; 
}


/* ----------------------------=  search area styles ------------------------------- */

#searcharea {
position: relative;
margin-top: 0;  /* fixes IE bug */
/*	position: absolute;
z-index: 100;
left: 300px; top: 300px;*/
}

#searcharea input { /* Go button*/
        background: #C8D791;
        color: #50592D;
font-size:11px;
        font-weight: 100;
margin:0 0 0 5px;
        border: solid 1px #50592D;
	position:relative;	
}



#searcharea fieldset {
        background: url('http://www.watchesandthings.com/autism/images/searchTile.gif') repeat-x;
display:block; 
        border: 0px;
        width: 770px;
        height: 20px;
        margin: 0 0 0 0;
padding: 3px 10px 3px 10px;
}

#searcharea label {
color:#f2eff6; 
font-size:10px; 
font-weight:600; 
}

#searchsubmit {
        border:solid 1px #fff;
        margin:1px 0px 2px 5px;
        padding: 0px 2px 2px 1px;
        background: #ffffff url('') repeat-x;
        color:#fff;
        font:11px Arial,verdana,sans-serif;
        text-align: center;
        cursor: pointer;
        height: 17px;
}

*html #searchsubmit{
  	         padding:1px 2px 1px;
}

#searchpageHeader {
background-color:#eba755; 
color:#ffffff; 
font:300 14px Tahoma, Geneva, Verdana, sans-serif; 
margin:0;
padding:3px 15px 4px;
}

input#query {
    margin-top: 2px;
     margin-left:4px;
     padding:1px;
     background-color:#fff;

     color:#000;
}
#query {padding:1px;}

/*  -----------------------------= end search styles -------------------------------*/

#slogan {color:#50592D; display:block; float:right; font:normal 11px Tahoma, Geneva, Verdana, sans-serif; padding:2.7em 15px 10px 10px; width:225px; text-align:right;} /* 225 + 25= 250 */

*:first-child+html #info-div,
*:first-child+html #specialtitle,
*:first-child+html #messagearea { width:550px; } *:first-child+html 

#itemarea { width:570px; }


#badge { margin: 0 auto; }

* html #badge { 
width:136px; 
text-align:center;
}
/* ------this is all Dano's code up to here--------------------*/
/*---------------------changes up to here---------------------*/
#search {position: relative; margin-top: -15px; height: 20px; }

.newlink:hover { background-color: #F3F8FD; }


/*---------------------------=content---------------------------------------*/

#content {
margin-left : 12em;
}


/*-----------------------------=menu styles begin here-------------------*/
#prodlist {
     _display:inline;
     float:left; 
     margin-left:-150px;
/*    position:relative;*/
/* 	position: absolute;
top: 2px;
left: 100px;*/
     width:215px; 
 z-index:50;
     min-height: 550px; 
     height: auto !important; height: 400px;
   background: url(http://www.watchesandthings.com/autism/images/66_per_background.png) repeat;

}
* html #prodlist {position: absolute;  !important; left: -1em; background: none;} /* IE specific hack...positions menu to the left*/
#menu {position: relative; list-style-type:none; margin:0; padding:0; width:215px; z-index:10 /*keep menu's on top in IE and other browsers*/ }
#menu li {padding:0.25em 0 0.25em 0.25em; ; margin:0; position:relative; width:220px; height: 1.7em; z-index:10;}
#menu li dl {position:relative; top:0; left:0; padding-bottom:0;}
#menu li a, #menu li a:visited {text-decoration:none; font-weight: 900;}
#menu li dd {display:none; }


#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}

#menu dl {width: 220px; margin: 0; padding: 0; background: transparent; }
#menu dt {margin:0; padding: 0; font-size: 1.17em; line-height: 1em; white-space: nowrap;}
#menu dd {margin:0; padding:0; color: #fff; text-align:left; float:right;}
#menu dt a, #menu dt a:visited {display:block; font-size: 1em; color: #50592D; text-align: left; background-color : none; padding:0.25em 0 0.25em 0.25em;}


#menu li a:hover {border:0; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {width:500px;}
#menu li:hover dt a, #menu a:hover dt a {background-color: #F1EFFA;/* rgb(251,248,239);*//*#FBF8EE;*/ /*#E3DFF3*/ color: #50592D; border:1px solid #50592D;}

* html #menu li:hover dt a, #menu a:hover dt a {background-color: #E3DFF3 ; color: #50592D; border:1px solid #50592D;  } /* IE specific hack...only difference is in the backgrnd-color */
#menu dd a, #menu dd a:visited {background-color: #E3DFF3; color: #50592D; padding:0.3em 0; text-decoration:none; display:block; text-align:center; border-left:1px solid #50592D; border-right:1px solid #50592D; border-bottom:1px solid #50592D; width:298px;}
#menu dd a:hover {background-color: #F1EFFA;/*#E8D591*/; color:#50592D; border-left:1px solid #50592D; border-right:1px solid #50592D; border-bottom:1px solid #50592D;}
#menu b {display:block; overflow:hidden;}


/*---------------------------=menu styles end here------------------------*/

#store-info {
padding-left: 20px;
}


/*---------------------------=store footer styles----------------------------*/

 

Now, here is the web page code:

<?
include 'connect.php';

$item=$_REQUEST['item'];
$result = mysql_query("SELECT * FROM product WHERE id=$item", $dbh);
$myrow = mysql_fetch_array($result);

$titlekey=$myrow["title"];

header("Content-type: text/html; charset=utf-8");

?>

<!DOCTYPE HTML SYSTEM "http://www.watchesandthings.com/validator/HTML4plus.dtd">

<html>

<head>
<!--need to update the style shee so that autismstyle-alt can be first-->
<link rel="stylesheet" type="text/css" href="http://www.watchesandthings.com/autism/css/autismstyle-alttest.css">
<link rel="stylesheet" type="text/css" href="http://www.watchesandthings.com/autism/css/autismstyle-sub.css">
<link rel="stylesheet" type="text/css" href="http://www.watchesandthings.com/autism/css/autism-sub.css">
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="http://www.watchesandthings.com/autism/css/autismstyle-sub-ie6.css">
<![endif]-->

<title><?
echo $titlekey;
?></title>

</head>


<body id="maintype">

<div id="container">
<? include 'headertest2.php'; ?>

<div id="bodyshell">
	<? include 'navtest2.php'; ?>
	<div id="bodycontent">
			<div id="messagearea">

				<div>
					<table width="450" border="0" cellspacing="0" cellpadding="0"  style="font-size:1.1em; line-height: 20px; font-style: italic;">
						<? include 'itemsourcetest.php';
					 		//</table> don't add this back in w/out changing item-source.php or the layout will break
					 	?>
				</div>
			</div>
		<br clear="all" />

<?
include 'bottomtest2.php';
?>

 

Thank you so very much for taking the time to read my post, and maybe help me out a little!

 

 

[cssfreakie]

Hi sailorsmonkey,

 

I noticed the with of the image is caused by inline style. (by using firebug you can see where stuff get's it's style from and when it only says, element.style it means it's hardcoded (inline) in your output.

 

this is what it looked like:

<div style="width: 50%;"><center><span class="item-image"><img alt="Magnetic Artist Easel" src="http://www.watchesandthings.com/autism/files/21W.jpg"></span><br>
</center></div>

and this is what it could look like;

<div style="width: 57%;"><center><span class="item-image"><img alt="Magnetic Artist Easel" src="http://www.watchesandthings.com/autism/files/21W.jpg"></span><br>
</center></div>

Notice the 57 percent which will make the space bigger. The script that is outputting this should be adjusted. (i would set it to pixels really since you have a fixed width container). Even better would be to give that <div> a class or ID depending on how often you use it. And set the width in a style sheet.

Besides that i noticed you are using an incredible amount of empty <p> elements that is not very clean.

 

Hope this helps a bit

cheers

 

css freakie

 

p.s. I also notice you use the <center> tag, that is not a good thing. Nowadays we set margin to

#id{margin:0 auto;}

and for IE 5

#id{text-align:center;}

[sailorsmokey]

Hi cssfreakie,

 

Thank you for the tips.  I understand how the div percentage could make the space bigger - what I'm having trouble figuring out, with all these containers, is how to make the entire layout bigger.  I've not heard of firebug before - it sounds like this is a program that would help me wade through all the muck, then?

 

Also, why is it that the center tag is not recommended for use - does it have browser compatibility issues, or does it drag down the load time?  I've never been told not to use this tag.  I mostly use it in my paragraph tags, like <p align="center"> but the person who created this layout used the tag <center> a lot.  Is there a difference in these two usages, or are both usages not recommended?

 

I'm going to take a renewed effort at trying to figure this out right...NOW.  If anyone else has anything helpful to add, please do!  It is very much appreciated as I'm wading through code that is really just too far advanced for my knowledge level.

 

*Hug to cssfreakie for taking the time to look at all this, and to help me some!*

[cssfreakie]

hehe thanks for the kind words!

 

Firebug (addon for firefox) is really a nice tool, i made a little video on it (5min) you might want to check it out. if you have questions on it let me know.

 

as far as <center> yes that is deprecated, so it might not be supported in the future.

now <p align="center"> </p> i would not recommend either since it is inline style. and that is pretty much always redundant. Just put styles in an external stylesheet and use either selector, #id's or .classes to set style to something.

 

Now as far as the width of your website. Its wrapped up in a container div <div id="container">

if you want to make your website wider, i recommend 960px

 

so just set the width:

#container { /* at line 6 of your stylesheet */
    border: thin solid #8D9F4D;
    margin: 0 auto;
    text-align: left;
    width: 960px; /* i adjusted only this */
    z-index: 0;
}

 

and as far as suggestions, this may sound stupid, but i have some useful articles on common things on my blog which could help you get a better idea of things in a simple way.

 

Cheers!

 

cssfreakie

[sailorsmokey]

cssfreakie,

 

Thank you again for all the useful comments.  I actually did look a little bit at your blog site some the other night, and it is very useful and helpful. 

 

I have gone through and changed the width tag to 960 as you suggested, but to no avail.  Quite honestly, this code is far, far above me - I am only a grade school student when it comes to CSS. 

 

I think this thing is just really, really imbedded - and since I am at such a low knowledge level, and I didn't do the coding to begin with, it has been very difficult for me to jump up at this level without going through the prelminary steps.

 

Part of my frustration stems from the fact that when I do change a width value, and reload the page, then I don't see the change reflected there.  Which makes it even more difficult for me to figure out what, exactly, I have changed.

 

I just may need to look for some real assistance from someone more knowledgeable than me on this one, and continue my education at a basic level so that eventually I CAN modify this code and know what I'm doing.....

 

Thank you again, I do appreciate all comments, and I will check out your firebug video. 

[cssfreakie]

Yeah certainly check out that video (only 5 min:). Firebug is your best friend when it comes to css. you can change the code in your browser and immediately see the effect. when it looks good, just copy and paste the code in your real stylesheet and upload it. Anyway if you need help with css, just post it here, there are quite some people here that like to help out.

 

A nice thing would be to start and create your own template, it doesn't have to look good, but it sure is a nice practice, and you might even do it better than the person that initially made your template.