Welcome to WebmasterWorld Guest from 54.144.107.83

Forum Moderators: not2easy

Message Too Old, No Replies

background-image with div-tag

     

tobla101

7:34 am on May 3, 2005 (gmt 0)

Inactive Member
Account Expired

 
 


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?

9:52 am on May 3, 2005 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts:948
votes: 4


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