[SOLVED] So new to CSS and Template Layout it Hurts, Please Help..

monkeytooth · September 22, 2008

Ok this is such a new concept to me that its hurting. I am still stuck on an older school method of laying out pages, and I am tempting to break my habbit of that. But the main issue is I cant get the background to work for me in the container class.

What I have is a dynamicly centered layout.. The container class being the element that centers it all. What I want is the elements contained in the container element to be dynamic in height.. which I figured out how to do by floating them, but the problem with floating them is that I lost my background, since floating them only seems to contain them by width the container no longer streches with them. On the flip side of that, if I dont float them then when the height changes they start to over lap one another or overflow outside of the container. Any one have any ideas? Right now Im just looking to make the background image in container work while maintaining dynamic elements within the container'

Feel free to critique the rest of the code though. Any help specially right now while the concept is still in its infancy would be greatly appreciated.

The CSS:
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background-color: #e7e7e7;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.crecs #container {
width: 744px;
             background:url(../images/liqbdy2.gif);
background-repeat:repeat-y;
margin: 0 auto;
border: 0px solid #000000;
text-align: left;
}
.crecs #container2 {
width: 744px;
             background:url(../images/liqbdy.gif), repeat;
margin: 0 auto;
border: 0px solid #000000;
text-align: left;
}
.crecs #header {
background-color: #e7e7e7; 
             height:163px;
max-height:163px;
}
.crecs #footer { 
background-color: #e7e7e7;
background:#e7e7e7;
             width:744px;
text-align:center;
}
.crecs #taco {
margin: 0 5px 0px 0px;
background:#000000;
float:right;
width:195px;
}
.crecs #taco2 {
margin: 0 0 5px 5px;
background:#FF0000;
float:left;
width:534px;
}

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="crecsz.css" rel="stylesheet" type="text/css" />
</head>

<body class="crecs">

<div id="container">
  <div id="header"><img src="../images/crecs_head_01.gif" width="744" height="130" /><img src="../images/crecs_head_02.gif" width="189" height="33" /></div>
  <div id="taco"><font class="navi">HHHHHHHHH</font></div>
  <div id="taco2">FFFFFFF<br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  </div><br />
<div id="taco2">GGGGGGGG<br />
  <br />
  <br />
  <br />
  <br />
</div>
<div id="footer"><img src="../images/liqftr.gif" width="744" height="20" /><br>
<font face="Verdana"><font color="#000000" size="2"><a href="#null">Privacy</a>
<a href="#null">Terms</a> <a href="http://www.crecs.org/contact.php">Contact</a>
<a href="#null">About</a> <a href="mailto:CHacia@mindlink.org">Webmaster</a><br>
</font><font size="2"> <br>
</font><a href="http://www.crecs.org/index.php"><font size="2">www.CRECS.org</font></a><font size="2">
<font color="#000000">@ 2008</font><br>
<a target="_blank" href="http://www.mindlink.org">Advocacy Unlimited</a> |
</font><a target="_blank" href="http://www.focusonrecovery.org/"><font size="2">
FOR-U</font></a></font>
</div>
</div>
</body>
</html>

Sign In

[SOLVED] So new to CSS and Template Layout it Hurts, Please Help..

Recommended Posts

monkeytooth

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information