PDA

Click to See Complete Forum and Search --> : General box model

terov
10-31-2003, 07:19 PM
I'm working on creating theme-friendly code website for my company and am having a few problems getting it to come together.

My first hurdle is creating a box model that can contain a top border (background image) as well as left, right and bottom, as well as specifically defined corners. I've been trying to pull this off with the repeat-x, repeat-y, and no-repeat properties in conjuntion with setting the starting point for the background (left center, etc.). Here is the code I currently have:

.newsBox {
position: relative; left: 0px; top: 50px;
height: auto; width: 175px;
background-color: #14141F;
margin-bottom: 8px; margin-top: 4px;
color: white;
margin-left: 4px;
margin-right: 4px;
}
.newsT {
z-index: 5;
width: 100%; height: 100%;
position: absolute; left: 0px; top: 0px;
background: url(original/newsboxT.gif) repeat-x center top;
}
.newsTL {
z-index: 10;
position: absolute; left: 0px; top: 0px;
width: 100%; height: 100%;
background: url(original/newsboxTL.gif) no-repeat top left;
}
.newsTR {
z-index: 10;
position: absolute; left: 0px; top: 0px;
width: 100%; height: 100%;
background: url(original/newsboxTR.gif) no-repeat top right;
}
.newsL {
z-index: 1;
position: absolute; left: 0px; top: 0px;
width: 100%; height: 100%;
background: url(original/newsboxL.gif) repeat-y left center;
}
.newsR {
z-index: 1;
position: absolute; left: 0px; top: 0px;
width: 100%; height: 100%;
background: url(original/newsboxR.gif) repeat-y right center;
}
.newsB {
z-index: 5;
position: absolute; left: 0px; top: 0px;
width: 100%; height: 100%;
background: url(original/newsboxB.gif) repeat-x center bottom;
}
.newsBL {
z-index: 10;
position: absolute; left: 0px; top: 0px;
width: 100%; height: 100%;
background: url(original/newsboxBL.gif) no-repeat bottom left;
}
.newsBR {
z-index: 10;
position: absolute; left: 0px; top: 0px;
width: 100%; height: 100%;
background: url(original/newsboxBR.gif) no-repeat bottom right;
}
.newsEntry {
z-index: 100;
position: absolute; left: 0px; top: 0px;
width: 155;
padding-top: 5px; padding-bottom: 5px; padding-left: 13px; padding-right: 10px;
font: 10px/13px verdana,arial,helvetica,sans-serif;
color: gray;
}


I'm hoping that will display properly--I'm new to these forums so I'm not yet acquainted with their quirks :-) Here's the associated HTML:


<HTML>
<HEAD>
<TITLE>Testing</TITLE>
<LINK rel=stylesheet href="testing.css" type: "text/css">
</HEAD>
<BODY>

<DIV class="news">
<DIV class="newsImg"></DIV>
<DIV class="newsBox">
Testing. This is where news would be, if I could get the dang news boxes to work.
<DIV class="newsT"></DIV>
<DIV class="newsTL"></DIV>
<DIV class="newsTR"></DIV>
<DIV class="newsL"></DIV>
<DIV class="newsR"></DIV>
<DIV class="newsB"></DIV>
<DIV class="newsBL"></DIV>
<DIV class="newsBR"></DIV>
</DIV>
<DIV class="newsBox">
<DIV class="newsEntry">Stuff. Things. This is some text. Really we're
just going for a turn-line. That should do it.</DIV>
<DIV class="newsT"></DIV>
<DIV class="newsTL"></DIV>
<DIV class="newsTR"></DIV>
<DIV class="newsL"></DIV>
<DIV class="newsR"></DIV>
<DIV class="newsB"></DIV>
<DIV class="newsBL"></DIV>
<DIV class="newsBR"></DIV>
</DIV>
<DIV class="newsBox">
<DIV class="newsT"></DIV>
<DIV class="newsTL"></DIV>
<DIV class="newsTR"></DIV>
<DIV class="newsL"></DIV>
<DIV class="newsR"></DIV>
<DIV class="newsB"></DIV>
<DIV class="newsBL"></DIV>
<DIV class="newsBR"></DIV>
</DIV>
</DIV>

</BODY>
</HTML>

Here is the crux of my problem:
I cannot get text to display properly within or above the box. This happens for a few reasons:
1) If I place the text inside the container DIV, that being "newsBox", the text falls behind my left, right, top, and bottom backgrounds.
2) If I place the text in an overlapping DIV, text will display properly, but the background DIVs do not scale to the size of the overlapping DIV (which is still inside the newsBox DIV mind you). I get a number of quirky results in latest stable Mozilla and IE from this. I need it to size dynamically, and all backgrounds to tile in accordance with the appropriate size of the container DIV (newsBox). I simply do not understand why placing a DIV (newsEntry) inside newsBox—which has no height assigned to it—does not adjust the size of newsBox and cause the backgrounds, set at 100% height and 100% width of their parent (newsBox) to tile appropriately.

Really pretty frustrating, and somewhat difficult to explain. Please let me know if you need clarification and thanks so much in advance from a CSS newbie :-)
Fang
11-01-2003, 07:39 AM
Changes made to properties: left, right, bottom and top.
background: urls (change to your own)
.newsBox padding:10px added (change as required)
.newsEntry position:relative

.newsBox {
position: relative; left: 0px; top: 50px;
height: auto; width: 175px;
background-color: #14141F;
margin-bottom: 8px; margin-top: 4px;
color: white;
margin-left: 4px;
margin-right: 4px;
padding:10px;
}
.newsT {
z-index: 5;
width: 100%; height: 100%;
position: absolute; left: 0px; top: 0px;
background: url(Images/topline_grey.gif) repeat-x center top;
}
.newsTL {
z-index: 10;
position: absolute; left: 0px; top: 0px;
width: 100%; height: 100%;
background: url(Images/leftboxcorner_top.gif) no-repeat top left;
}
.newsTR {
z-index: 10;
position: absolute; right: 0px; top: 0px;
width: 100%; height: 100%;
background: url(Images/rightboxcorner_top.gif) no-repeat top right;
}
.newsL {
z-index: 1;
position: absolute; left: 0px; top: 0px;
width: 100%; height: 100%;
background: url(Images/leftline_grey.gif) repeat-y left center;
}
.newsR {
z-index: 1;
position: absolute; right: 0px; top: 0px;
width: 100%; height: 100%;
background: url(Images/rightline_grey.gif) repeat-y right center;
}
.newsB {
z-index: 5;
position: absolute; bottom: 0px; left: 0px;
width: 100%; height: 100%;
background: url(Images/bottomline_grey.gif) repeat-x center bottom;
}
.newsBL {
z-index: 10;
position: absolute; left: 0px; bottom: 0px;
width: 100%; height: 100%;
background: url(Images/leftboxcorner_bottom.gif) no-repeat bottom left;
}
.newsBR {
z-index: 10;
position: absolute; bottom: 0px; right: 0px;
width: 100%; height: 100%;
background: url(Images/rightboxcorner_bottom.gif) no-repeat bottom right;
}
.newsEntry {
z-index: 100;
position: relative; left: 0px; top: 0px;
width: 155;
padding-top: 5px; padding-bottom: 5px; padding-left: 13px; padding-right: 10px;
font: 10px/13px verdana,arial,helvetica,sans-serif;
color: gray;
}

Works ok in mozilla, IE may need a bit or tweaking depending on images used and general layout used.
Note: z-index should be a unique number. The css above works, but is not valid.
terov
11-01-2003, 02:43 PM
Bummer--as you said, it still breaks in IE... Looks like a bug on their part to me, but any ideas on how I could impliment this so as to support IE as well?

Workarounds... ::sigh:: that's why I stopped doing dynamic HTML and CSS in the days of Netscape 4.x. Oh well.

I fixed the z-indeces for validity; thanks for the heads up on that :)

Thanks in advance for any help!
toicontien
11-02-2003, 02:39 AM
(biting lip and wincing), I know this has been repeated dozens of times in this forum, but if possible, get your HTML to validate at http://validator.w3.org/ - in doing this you will throw IE 6 and IE5/Mac, Mozilla, Opera, and many other browsers released after year 2000, into standards compliance mode. You'll get much more consistent results across different browsers and platforms.

I realize this isn't specifically solving your problem, but validating my HTML is one more step in trouble-shooting CSS that helps me out a bunch. If you're working on a company web site with pre-existing HTML documents, you gotta deal with what you've got. But if possible, get the code to validate.
terov
11-08-2003, 07:28 PM
Everything is now, according to the W3C validators, 100% standards compliant.

Here is a repost of the code:

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=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<title>Testing</title>
<link rel="stylesheet" href="testing.css" type="text/css" />
</head>
<body>
<div class="news">
<div class="newsImg"></div>
<div class="newsBox">
<div class="newsT"></div>
<div class="newsTL"></div>
<div class="newsTR"></div>
<div class="newsL"></div>
<div class="newsR"></div>
<div class="newsB"></div>
<div class="newsBL"></div>
<div class="newsBR"></div>
<div class="newsEntry">Stuff. Things. This is some text. Really we're
just going for a turn-line. That should do it.</div>
</div>
<div class="newsBox">
<div class="newsT"></div>
<div class="newsTL"></div>
<div class="newsTR"></div>
<div class="newsL"></div>
<div class="newsR"></div>
<div class="newsB"></div>
<div class="newsBL"></div>
<div class="newsBR"></div>
<div class="newsEntry">Stuff. Things. This is some text. Really we're
just going for a turn-line. That should do it.</div>
</div>
</div>
</body>
</html>


CSS:

body {background-color: #111119}

/*******************
* *
* News box styles *
* *
*******************/
.news {
position: absolute; left: 50px; top: 200px;
padding-bottom: 80px;
}
.newsImg {
position: absolute; left: 1px; top: 0px;
width: 118px; height: 48px;
background: url(original/news.gif) no-repeat top left;
}
.newsBox {
position: relative; left: 0px; top: 50px;
height: auto; width: 175px;
background-color: #14141F;
margin-bottom: 8px; margin-top: 4px;
color: white;
margin-left: 4px;
margin-right: 4px;
}
.newsT {
z-index: 4;
width: 100%; height: 100%;
position: absolute; left: 0px; top: 0px;
background: url(original/newsboxT.gif) repeat-x center top;
}
.newsTL {
z-index: 8;
position: absolute; left: 0px; top: 0px;
width: 100%; height: 100%;
background: url(original/newsboxTL.gif) no-repeat top left;
}
.newsTR {
z-index: 9;
position: absolute; right: 0px; top: 0px;
width: 100%; height: 100%;
background: url(original/newsboxTR.gif) no-repeat top right;
}
.newsL {
z-index: 1;
position: absolute; left: 0px; top: 0px;
width: 100%; height: 100%;
background: url(original/newsboxL.gif) repeat-y left center;
}
.newsR {
z-index: 2;
position: absolute; right: 0px; top: 0px;
width: 100%; height: 100%;
background: url(original/newsboxR.gif) repeat-y right center;
}
.newsB {
z-index: 5;
position: absolute; bottom: 0px; left: 0px;
width: 100%; height: 100%;
background: url(original/newsboxB.gif) repeat-x center bottom;
}
.newsBL {
z-index: 10;
position: absolute; left: 0px; bottom: 0px;
width: 100%; height: 100%;
background: url(original/newsboxBL.gif) no-repeat bottom left;
}
.newsBR {
z-index: 11;
position: absolute; bottom: 0px; right: 0px;
width: 100%; height: 100%;
background: url(original/newsboxBR.gif) no-repeat bottom right;
}
.newsEntry {
z-index: 100;
position: relative; left: 0px; top: 0px;
width: 155px;
background-color: transparent;
padding-top: 5px; padding-bottom: 5px; padding-left: 13px; padding-right: 10px;
font: 10px/13px verdana,arial,helvetica,sans-serif;
color: gray;
}


I would post a URL, but my basic ISP hosting has,
for some reason, been disabled. This code still
has issues with IE that standards compliance has
not resolved. Any suggestions are welcome and
deeply appreciated :)
Fang
11-09-2003, 03:03 AM
This works and validates, but uses quirks mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="MSThemeCompatible" content="Yes">
<title>General box model Quirks mode</title>
<style type="text/css">
<!--
body {background-color: #aaa}

/*******************
* *
* News box styles *
* *
*******************/

.news {
position: absolute; left: 50px; top: 200px;
padding-bottom: 80px;
}
.newsImg {
position: absolute; left: 1px; top: 0px;
width: 118px; height: 48px;
background: url(Images/news.gif) no-repeat top left;
}
.newsBox {
position: relative; left: 0px; top: 50px;
height: 100%; width: 175px;
background-color: #ddd;
margin-bottom: 8px; margin-top: 4px;
color: white;
margin-left: 4px;
margin-right: 4px;
}
.newsT {
z-index: 4;
width: 100%; height: 100%;
position: absolute; left: 0px; top: 0px;
background: url(Images/boxT.gif) repeat-x center top;
}
.newsTL {
z-index: 8;
position: absolute; left: 0px; top: 0px;
width: 100%; height: 100%;
background: url(Images/boxTL.gif) no-repeat top left;
}
.newsTR {
z-index: 9;
position: absolute; right: -1px; top: 0px;
width: 100%; height: 100%;
background: url(Images/boxTR.gif) no-repeat top right;
}
.newsL {
z-index: 1;
position: absolute; left: 0px; top: 0px;
width: 100%; height: 100%;
background: url(Images/boxL.gif) repeat-y left center;
}
.newsR {
z-index: 2;
position: absolute; right: -1px; top: 0px;
width: 100%; height: 100%;
background: url(Images/boxR.gif) repeat-y right center;
}
.newsB {
z-index: 5;
position: absolute; bottom: 0px; left: 0px;
width: 100%; height: 100%;
background: url(Images/boxB.gif) repeat-x center bottom;
}
.newsBL {
z-index: 10;
position: absolute; left: 0px; bottom: 0px;
width: 100%; height: 100%;
background: url(Images/boxBL.gif) no-repeat bottom left;
}
.newsBR {
z-index: 11;
position: absolute; bottom: 0px; right: -1px;
width: 100%; height: 100%;
background: url(Images/boxBR.gif) no-repeat bottom right;
}
.newsEntry {
z-index: 100;
position: relative; left: 0px; top: 0px;
width: 155px;
background-color: transparent;
padding-top: 5px; padding-bottom: 5px; padding-left: 13px; padding-right: 10px;
font: 10px/13px verdana,arial,helvetica,sans-serif;
color: gray;
}
-->
</style>
</head>
<body>
<div class="news">
<div class="newsImg"></div>
<div class="newsBox">
<div class="newsT"></div>
<div class="newsTL"></div>
<div class="newsTR"></div>
<div class="newsL"></div>
<div class="newsR"></div>
<div class="newsB"></div>
<div class="newsBL"></div>
<div class="newsBR"></div>
<div class="newsEntry">Stuff. Things. This is some text. Really we're
just going for a turn-line. That should do it.</div>
</div>
<div class="newsBox">
<div class="newsT"></div>
<div class="newsTL"></div>
<div class="newsTR"></div>
<div class="newsL"></div>
<div class="newsR"></div>
<div class="newsB"></div>
<div class="newsBL"></div>
<div class="newsBR"></div>
<div class="newsEntry">Stuff. Things. This is some text. Really we're
just going for a turn-line. That should do it.</div>
</div>
</div>
</body>
</html>
I tweeked the right side images (-1px) to get it to work for IE.
This page (http://www.quirksmode.org/css/100percheight.html) may be of interest.