Trying to convert my tables over to "No Table" CSS. Even after tons of tutorials and examples, I'm running into problems! I'm looking to address a couple of specific issues, points will be split between answers that address the following:
Thanks for any help!
**************************
*********
QUESTIONS (see code below:)
**************************
*********
1. miniLeft and miniRight - these are the left-hand and right-hand side borders.
I want the bgcolor to stretch to the bottom of the box, notice that they stop at the height
of the font size without repeating (left side bg is red, right is green.) How can I
make this happen?
2. Title Text - in miniTop - should be vertically centered in the box. How?
**************************
*********
**************************
*********
SOME BACKGROUND: The goal of my design is to be a flexible "Skin" franework
that will allow me to switch from bgcolor borders to graphic borders as needed.
So there's lots of code!
Note that graphic file names are standardized, if the graphic does not
exist in the directory the div defaults to the bg color.
The snippet provided deals with the wrappers for small content,
like left side menus and news teasers.
Code changes should be pretty simple for all of you CSS experts, please post
code snippets...
<HTML>
<HEAD>
</HEAD>
<BODY>
<STYLE>
/* **************************
**********
**********
**********
*** */
/* SMALL CONTENT WRAPPER */
/* **************************
**********
**********
**********
*** */
#miniTable
{
width: 150px;
height:;
background-color: #000000;
background-image: url( backgroundminiTable.jpg );
border: solid 0px #000000;
border-spacing: 0px;
border-collapse: collapse;
font-family: Verdana, Tahoma; Arial; sans-serif;
font-size: 10px;
color:#000000;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px, 0px, 0px, 0px;
}
#miniTop
{
width:150px;
height:30;
border: solid 1px #000000;
background-color: #00FF00;
background-image: url( backgroundminiTop.jpg );
border-spacing: 0;
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom:auto;
padding: 0px, 0px, 0px, 0px;
white-space: normal;
vertical-align: middle;
text-align: center;
color: #FFFFFF;
font-weight: bold;
font-size: 10pt;
font-style: normal;
font-family: Verdana, Tahoma; Arial; sans-serif;
float:left;
}
#miniLeft
{
width:1px;
height:0px;
border: solid 0px #;
background-color: #FF0000;
background-image: url( backgroundminiLeft.jpg );
border-spacing: 0;
border-collapse: collapse;
margin-left: 0;
margin-right: 0;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px, 0px, 0px, 0px;
white-space: normal;
vertical-align: top;
text-align:;
font-family: Verdana, Tahoma; Arial; sans-serif;
font-size: 10px;
color:#000000;
float:left;
}
#miniMiddle
{
width:148px;
height:;
border: solid 0px #;
background-color: #EEEEEE;
background-image: url( backgroundminiMiddle.jpg );
border-spacing: 0;
border-collapse: collapse;
margin-left: 0;
margin-right: 0;
margin-top: 0px;
margin-bottom: 0px;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px;
white-space: normal;
vertical-align: top;
text-align: ;
font-family: Verdana, Tahoma; Arial; sans-serif;
font-size: 10px;
color:#000000;
float:left;
}
#miniRight
{
width:1px;
height:;
border: solid 0px #;
background-color: #00FFF0;
background-image: url( backgroundminiRight.jpg );
border-spacing: 0;
border-collapse: collapse;
background-repeat: repeat-y;
margin-left: 0;
margin-right: 0;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px, 0px, 0px, 0px;
white-space: normal;
vertical-align: top;
text-align:;
font-family: Verdana, Tahoma; Arial; sans-serif;
font-size: 10px;
color:#000000;
float:left;
}
#miniBottom
{
width:150px;
height:0px;
border: solid 0px #;
background-color: #0000FF;
background-image: url( backgroundContentFooter.jp
g );
border-spacing: 0;
border-collapse: collapse;
margin-left: 0;
margin-right: 0;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px, 0px, 0px, 0px;
white-space: normal;
vertical-align: top;
text-align:;
font-family: Verdana, Tahoma; Arial; sans-serif;
font-size: 0px;
color:#000000;
float:left;
}
</STYLE>
<DIV ID="miniTable">
<DIV ID="miniTop">TITLE </DIV>
<DIV ID="miniLeft"></DIV>
<DIV ID="miniMiddle">
The content for this area goes in here.
As you would expect, the content is variable in length
and can be short like this blurb or very long.
All content is dynamically served so hardcoding heights
is not a viable option.
</DIV>
<DIV ID="miniRight"></DIV>
<DIV ID="miniBottom"></DIV>
</DIV>
</BODY>
</HTML>
