background-image with div-tag

[tobla101]

I have a problem with my div-tags. I use div-tags to design my homepage. I use one div-tag to specify what I call the mainframe which shows the wanted information (I have tags for menus too). This div-tag contains several div-tags, a headline-tag and a tag which contains the main text. It looks something like this:

<div class="main_frame">
…
<div class="headlineFrame">
Headline
</div>
<div class="mainTextFrame">
<table>
…
</table>
</div>
</div>

.main_frame { position: absolute; top: 80pt; left: 90pt; width: 853pt; height: 500pt; background-image: url(bilder/bakgrund.gif); background-repeat: repeat }

.headlineFrame { position: absolute; top: 10pt; left: 20pt; width: 600pt; height: 20pt; font-family: Verdana; font-weight: bold; font-size: 24px; color: #000000}

.mainTextFrame { position: absolute; top: 40pt; left: 20pt; width: 600pt; font-family: Verdana; font-weight: normal; font-size: 14px; color: #000000}

The problem I have is that the size of mainTextFrame doesn’t stretch so when there is a lot of text all text isn’t placed on the background-image. I have tried to remove the height preference in main_frame and also put height = 100% but this doesn’t work.

I also want the menu-tag I mentioned above to have the same height as the main_frame.

Does anyone know how to solve this?

[birdbrain]

Hi there tobla101,

and a warm welcome to these forums.

Your problem is caused by using absolute positioning where it is not really required.
Instead try using margin, like this...

<style type="text/css">
<!--
.main_frame {[red]
/* position: absolute;*/
/* top: 80pt;*/
/*left: 90pt;*/
/*height: 500pt;*/[/red] [blue]
margin-top:80px;
margin-left:90px;[/blue]
width: 853px;
background-image: url(bilder/bakgrund.gif); 
background-repeat: repeat; 
}
.headlineFrame { [red]
/*position: absolute;*/ 
/*top: 10pt; */
/*left: 20pt; */
/*height: 20px;*/[/red][blue]
margin-top:10px;
margin-left:20px;[/blue]
width: 600px; 
font-family: verdana,sans-serif; 
font-weight: bold;
font-size: 24px; 
color: #000;
}
.mainTextFrame {[red]
/* position: absolute;*/ 
/*top: 40pt; */
/*left: 20pt; */[/red][blue]
margin-top:30px;
margin-left:20px;[/blue]
width: 600px; 
font-family: verdana,sans-serif; 
font-weight: normal; 
font-size: 14px; 
color: #000;
} 
//-->
</style>
<div class="main_frame">
<div class="headlineFrame">Headline</div>
<div class="mainTextFrame">
<table><tr>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus. 
Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti sociosqu 
ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. Nunc vulputate 
magna non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a, nunc. Curabitur ut sem. 
Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt turpis. Curabitur dignissim 
vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a, accumsan vel, ante. Proin aliquam 
turpis sed augue. In pellentesque, magna a pulvinar adipiscing, est orci adipiscing felis, sed laoreet urna 
magna quis neque. Proin facilisis aliquet urna.
</p></td>
</tr></table>
</div>
</div>

...I have commented out the absolute positioning so that you may compare it with the margin.

Also note that no height values are needed.

birdbrain