Site Conversion Table Based to CSS.. Please Help..

monkeytooth · September 22, 2008

Ok, I know I asked this question on another thread but I dont think I got my point across, nor do I think I named the subject for the topic accordingly.

I have an old school mentality to designing pages, and its been a long time and coming that I start to make a switch from that mentality to something more up to date and more functional. Problem is I put it off so long that it almost seems out of grasp. Generally I understand the how. But making the how work is a diffrent story. Anyway to the point I have a couple sites one in particular that is designed heavily with tables, using the tables as the constraints of the layout/template.

What I want to do is have a dynamicly centered layout, which I have done, but I have elements that go within the construct of the layout that are confusing the hell out of me, I have spent enough time researching and trying diffrent things to make what I want to do happen without success.. So here I am, my happy place, the place that always seems to help me when im in a bind.

So ok, layout is centered, header and footer in place, generally all is working right up until I start putting the elements into the body.

What I have is a Container, in the container is the footer, the header, and what I hope eventually the rest of the body.

Generally speaking I want to work with one master template, keep alot of stuff contained within it.. The scope of this project is huge as far as the content goes so ill spare you those details.

What I need to do currently is figure out why the elements inside my container (other then the header and footer) dont work for me. I have a 2 column setup with my container. Currently both sides right and left float, seperated by margins..

Main reason I have them floating is cause I noticed when i didnt have both sides float then the elements werent dynamic up and down content would flow out of the DIV or the div would overlap the one below it. So I floated them, now the content stays contained, and overflow stays within just strecthing it which is the desired effect.. however in doing this I lost my background image in my container. well didnt really loose it its there and shows itself to a point but a defualt point, its no longer fluid to the template. The header is 1px tall and 744px wide, and I am currently seeing about 20px in height behind everything but thats where it ends.

Needlessly to say this was something easily solved with my oldschool design mentality. Table Height/Max-Height=100% and then everything contained within the 2 columns on a table.

Does anyone know how I can solve this?

[b]The Current CSS:[/b]
@charset "utf-8";
body {
font: 10pt Verdana;
background-color: #e7e7e7;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.crecs #container {
width: 744px;
    background:url(../images/liqbdy2.gif);
margin: 0 auto;
border: 0px solid #000000;
text-align: left;
max-height:inherit;
height:inherit;
}
.crecs #container2 {
width: 744px;
    background:url(../images/liqbdy.gif), repeat;
margin: 0 auto;
border: 0px solid #000000;
text-align: left;
}
.crecs #header {
    float:right;
background-color: #e7e7e7; 
    height:163px;
max-height:163px;
}
.crecs #footer { 
    float:right;
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;
}
a {
font-family: Verdana;
font-size: 10pt;
color: #2D2D2D;
}
a:visited {
color: #2D2D2D;
}
a:hover {
color: #99CCFF;
}
a:active {
color: #0099FF;
}
form {
   padding: 1px;
   margin: 0;
}
font.navi {
color:#FFFFFF;
font-family:Verdana;
font-size:10pt;
}


[b]The Current HTML:[/b]
<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<br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  </font></div>
  <div id="taco2">FFFFFFF<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>

monkeytooth · September 22, 2008

By the way feel free to crituque the code above in anyway that can help me down the road.. or hell if you know a better way to do what I want then by all means let me know...

the desired effect for this project is to take this existing partical site

http://www.crecs.org/joblist.php?jlid=1

which was never finished by the orginal designer, and convert it from the table based layout thats there now and make it CSS driven.

Sign In

Site Conversion Table Based to CSS.. Please Help..

Recommended Posts

monkeytooth

Link to comment

Share on other sites

monkeytooth

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information