One more please, how to make this work? 1

[mopacfan]

Ok, if you visit pr.michaelnetherton.com and look at the four boxes in the center of the page, I am trying to get the title images and the corresponding icons to fit in the boxes and have the text flow around them. The title bar is a vertical image that runs up the left side of each box. The icon should be in upper right corner of the box and the text should fill in around them. Here is the style sheet code:

#project
{
    BORDER-RIGHT: black 1pt solid;
    PADDING-RIGHT: 3px;
    BACKGROUND-POSITION: left top;
    BORDER-TOP: black 1pt solid;
    PADDING-LEFT: 3px;
    LEFT: 5px;
    BACKGROUND-IMAGE: url(../layout/cell_back.gif);
    PADDING-BOTTOM: 3px;
    BORDER-LEFT: black 1pt solid;
    WIDTH: 260px;
    PADDING-TOP: 3px;
    BORDER-BOTTOM: black 1pt solid;
    BACKGROUND-REPEAT: repeat-x;
    POSITION: relative;
    TOP: 0px;
    HEIGHT: 180px
}
#plan
{
    BORDER-RIGHT: black 1pt solid;
    PADDING-RIGHT: 3px;
    BACKGROUND-POSITION: left top;
    BORDER-TOP: black 1pt solid;
    PADDING-LEFT: 3px;
    LEFT: 5px;
    BACKGROUND-IMAGE: url(../layout/cell_back.gif);
    PADDING-BOTTOM: 3px;
    BORDER-LEFT: black 1pt solid;
    WIDTH: 260px;
    PADDING-TOP: 3px;
    BORDER-BOTTOM: black 1pt solid;
    BACKGROUND-REPEAT: repeat-x;
    POSITION: relative;
    TOP: 0px;
    HEIGHT: 180px
}
#news
{
    BORDER-RIGHT: black 1pt solid;
    PADDING-RIGHT: 3px;
    BACKGROUND-POSITION: left top;
    BORDER-TOP: black 1pt solid;
    PADDING-LEFT: 3px;
    LEFT: 5px;
    BACKGROUND-IMAGE: url(../layout/cell_back.gif);
    PADDING-BOTTOM: 3px;
    BORDER-LEFT: black 1pt solid;
    WIDTH: 260px;
    PADDING-TOP: 3px;
    BORDER-BOTTOM: black 1pt solid;
    BACKGROUND-REPEAT: repeat-x;
    POSITION: relative;
    TOP: 3px;
    HEIGHT: 180px;
    BACKGROUND-: black 1pt solid
}
#photos
{
    BORDER-RIGHT: black 1pt solid;
    PADDING-RIGHT: 3px;
    BACKGROUND-POSITION: left top;
    BORDER-TOP: black 1pt solid;
    PADDING-LEFT: 3px;
    LEFT: 5px;
    BACKGROUND-IMAGE: url(../layout/cell_back.gif);
    PADDING-BOTTOM: 3px;
    BORDER-LEFT: black 1pt solid;
    WIDTH: 260px;
    PADDING-TOP: 3px;
    BORDER-BOTTOM: black 1pt solid;
    BACKGROUND-REPEAT: repeat-x;
    POSITION: relative;
    TOP: 3px;
    HEIGHT: 180px;
    BACKGROUND-: black 1pt solid
}
#titleimage
{
    LEFT: -3px;
    POSITION: relative;
    TOP: -3px
}
#titleicon
{
    LEFT: 124px;
    POSITION: relative;
    TOP: -89px
}

Can this even be done with css? The Zen Garden makes it all look so easy. Any help will be greatly appreciated.

Thanks,

Mopacfan

 

[Vragabond]

Here's how you could do it. Your page looked a mess in my Mozilla 1.4, I changed most of the things that caused the problems as well as cleaned up your code a bit. It shows great in Mozilla 1.4 and IE6 now, though the text won't wrap itself around the right image. I thought of that at a later stage and was too lazy to change it. Anyway, here's the code:

<style>
.smallcontainer {
    position: absolute;
    WIDTH: 247px;
    HEIGHT: 180px;
    BORDER: black 1px solid;
    BACKGROUND-IMAGE: url([URL unfurl="true"]http://pr.michaelnetherton.com/layout/cell_back.gif);[/URL]
    PADDING: 3px;
    BACKGROUND-REPEAT: repeat-x;
}

*html .smallcontainer { /* IE box size hack */
	width: 254px;
	height: 185px;
}

#project {
    LEFT: 5px;    
    TOP: 0px;
}

#plan {
    right: 5px;    
    TOP: 0px;
}

#news {
    left: 5px;    
    bottom: 0px;
}

#photos {
    right: 5px;    
    bottom: 0px;
}

.titleimage {
    POSITION: absolute;
    LEFT: 0px;
    TOP: 0px;
}

.titleicon {
    POSITION: absolute;
    right: 0px;
    TOP: 0px;	
}

#container {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 520px;
	height: 380px;
}

.smallcontainer p {
	position: absolute;
	left: 0px;
	bottom: 0px;
	margin-left: 30px;
	width: 200px;
}

</style>

<div id=&quot;container&quot;>
  <div class=&quot;smallcontainer&quot; id=&quot;project&quot;>
    <img class=&quot;titleimage&quot; src=&quot;[URL unfurl="true"]http://pr.michaelnetherton.com/layout/cell_title_project.gif&quot;[/URL] alt=&quot;project&quot; />
    <img class=&quot;titleicon&quot; src=&quot;[URL unfurl="true"]http://pr.michaelnetherton.com/layout/cell_icon_project.gif&quot;[/URL] alt=&quot;projectlogo&quot; />
    <p>Text about the stuff, Text about the stuff, Text about the stuff, Text about the stuff, Text about the stuff.</p>
  </div>
  <div class=&quot;smallcontainer&quot; id=&quot;plan&quot;>
    <img class=&quot;titleimage&quot; src=&quot;[URL unfurl="true"]http://pr.michaelnetherton.com/layout/cell_title_plan.gif&quot;[/URL] alt=&quot;plan&quot; />
    <img class=&quot;titleicon&quot; src=&quot;[URL unfurl="true"]http://pr.michaelnetherton.com/layout/cell_icon_plan.gif&quot;[/URL] alt=&quot;planlogo&quot; />
    <p>Text about the stuff, Text about the stuff, Text about the stuff, Text about the stuff, Text about the stuff.</p>
  </div>
  <div class=&quot;smallcontainer&quot; id=&quot;news&quot;>
    <img class=&quot;titleimage&quot; src=&quot;[URL unfurl="true"]http://pr.michaelnetherton.com/layout/cell_title_news.gif&quot;[/URL] alt=&quot;news&quot; />
    <img class=&quot;titleicon&quot; src=&quot;[URL unfurl="true"]http://pr.michaelnetherton.com/layout/cell_icon_news.gif&quot;[/URL] alt=&quot;newslogo&quot; />
    <p>Text about the stuff, Text about the stuff, Text about the stuff, Text about the stuff, Text about the stuff.</p>
  </div>
  <div class=&quot;smallcontainer&quot; id=&quot;photos&quot;>
    <img class=&quot;titleimage&quot; src=&quot;[URL unfurl="true"]http://pr.michaelnetherton.com/layout/cell_title_photos.gif&quot;[/URL] alt=&quot;photos&quot; />
    <img class=&quot;titleicon&quot; src=&quot;[URL unfurl="true"]http://pr.michaelnetherton.com/layout/cell_icon_photos.gif&quot;[/URL] alt=&quot;photoslogo&quot; />
    <p>Text about the stuff, Text about the stuff, Text about the stuff, Text about the stuff, Text about the stuff.</p>
  </div>
</div>

I used another container to mimic the behaviour of your page.

 

[mopacfan]

Vragabond,

I sincerely appreciate your assistance. I was actually going to go back to tables because I know I don't know enough to make this look good in other browsers and I can't take a change of it looking like crap. You've gone above and beyond. I really do appreciate you help.

 

[mopacfan]

One more thing, are you available on a consulting basis to reveiw the rest of my site?

 

[BillyRayPreachersSon]

I would be available - do you have a specific budget in mind?

Dan

 

[mopacfan]

I can spend up to $200 to have the styles proofed and redesigned. This css stuff is driving me nuts.