homepage Welcome to WebmasterWorld Guest from 107.21.163.227
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
background-image with div-tag
tobla101




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved