Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Relative positioned container div wont expand with content Help!
Old 12-19-2009, 12:51 AM Relative positioned container div wont expand with content Help!
Junior Talker

Posts: 1
Name: chris
Trades: 0
I am working on a site for my dad and i used fireworks to make out a header graphic with rollover navigation. The graphic is broken down into a table. There is a lot of crazy javascript on this that is hard to make out. The main problem I am having is trying to nest my absolute div's inside a relative positioned container div. My absolute divs do not follow or flow with the container, and when I look at the relative div element on dreamweaver it shows a small box above all my other absolute positioned content. It is not behaving as a parent. Also the div with the id fwheader is not centering. Dont know what to do, appreciate any help! Thanks!!
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Triple-A Home Maintenence & Repair</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
[B]<style type="text/css">
td img {display: block;}[/B]
[B]#container.div {
position:relative;
margin:auto;
height:auto;
width:auto;
}[/B]
[B]#fwheader {
 position:absolute;
 margin: auto;
 left: 26px;
}[/B]

[B]#bodyRegion {
 position:absolute;
 width:695px;
 height:539px;
 top: 414px;
 left: 286px;
 background-color: #0033CC;
}[/B]
</style>
</head>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<body onLoad="MM_preloadImages('images/reviews_f2.jpg','images/services_f2.jpg','images/contact_f2.jpg','images/home_f2.jpg')">
[B]<div id="container">[/B]
[B]  <div id="fwheader">[/B]
    <!-- Adobe fireworks rendered header image -->
    <table align="center" border="0" cellpadding="0" cellspacing="0" width="900">
      <tr>
        <td><img src="http://www.webmaster-talk.com/images/spacer.gif" width="384" height="1" border="0" alt="" /></td>
        <td><img src="http://www.webmaster-talk.com/images/spacer.gif" width="53" height="1" border="0" alt="" /></td>
        <td><img src="http://www.webmaster-talk.com/images/spacer.gif" width="40" height="1" border="0" alt="" /></td>
        <td><img src="http://www.webmaster-talk.com/images/spacer.gif" width="77" height="1" border="0" alt="" /></td>
        <td><img src="http://www.webmaster-talk.com/images/spacer.gif" width="40" height="1" border="0" alt="" /></td>
        <td><img src="http://www.webmaster-talk.com/images/spacer.gif" width="89" height="1" border="0" alt="" /></td>
        <td><img src="http://www.webmaster-talk.com/images/spacer.gif" width="38" height="1" border="0" alt="" /></td>
        <td><img src="http://www.webmaster-talk.com/images/spacer.gif" width="104" height="1" border="0" alt="" /></td>
        <td><img src="http://www.webmaster-talk.com/images/spacer.gif" width="75" height="1" border="0" alt="" /></td>
        <td><img src="http://www.webmaster-talk.com/images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
      </tr>
      <tr>
        <td colspan="9"><img name="tripleaheader_r1_c1" src="http://www.webmaster-talk.com/images/triple%20a%20header_r1_c1.jpg" width="900" height="196" border="0" id="tripleaheader_r1_c1" alt="" /></td>
        <td><img src="http://www.webmaster-talk.com/images/spacer.gif" width="1" height="196" border="0" alt="" /></td>
      </tr>
      <tr>
        <td colspan="5"><img name="tripleaheader_r2_c1" src="http://www.webmaster-talk.com/images/triple%20a%20header_r2_c1.jpg" width="594" height="8" border="0" id="tripleaheader_r2_c1" alt="" /></td>
        <td rowspan="4"><a href="http://www.webmaster-talk.com/reviews.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('reviews','','images/reviews_f2.jpg',1);"><img name="reviews" src="http://www.webmaster-talk.com/images/reviews.jpg" width="89" height="37" border="0" id="reviews" alt="" /></a></td>
        <td colspan="3"><img name="tripleaheader_r2_c7" src="http://www.webmaster-talk.com/images/triple%20a%20header_r2_c7.jpg" width="217" height="8" border="0" id="tripleaheader_r2_c7" alt="" /></td>
        <td><img src="http://www.webmaster-talk.com/images/spacer.gif" width="1" height="8" border="0" alt="" /></td>
      </tr>
      <tr>
        <td colspan="3"><img name="tripleaheader_r3_c1" src="http://www.webmaster-talk.com/images/triple%20a%20header_r3_c1.jpg" width="477" height="2" border="0" id="tripleaheader_r3_c1" alt="" /></td>
        <td rowspan="2"><a href="http://www.webmaster-talk.com/services.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','images/services_f2.jpg',1);"><img name="services" src="http://www.webmaster-talk.com/images/services.jpg" width="77" height="19" border="0" id="services" alt="" /></a></td>
        <td rowspan="4"><img name="tripleaheader_r3_c5" src="http://www.webmaster-talk.com/images/triple%20a%20header_r3_c5.jpg" width="40" height="196" border="0" id="tripleaheader_r3_c5" alt="" /></td>
        <td rowspan="4"><img name="tripleaheader_r3_c7" src="http://www.webmaster-talk.com/images/triple%20a%20header_r3_c7.jpg" width="38" height="196" border="0" id="tripleaheader_r3_c7" alt="" /></td>
        <td rowspan="2"><a href="http://www.webmaster-talk.com/contact.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_f2.jpg',1);"><img name="contact" src="http://www.webmaster-talk.com/images/contact.jpg" width="104" height="19" border="0" id="contact" alt="" /></a></td>
        <td rowspan="4"><img name="tripleaheader_r3_c9" src="http://www.webmaster-talk.com/images/triple%20a%20header_r3_c9.jpg" width="75" height="196" border="0" id="tripleaheader_r3_c9" alt="" /></td>
        <td><img src="http://www.webmaster-talk.com/images/spacer.gif" width="1" height="2" border="0" alt="" /></td>
      </tr>
      <tr>
        <td rowspan="3"><img name="tripleaheader_r4_c1" src="http://www.webmaster-talk.com/images/triple%20a%20header_r4_c1.jpg" width="384" height="194" border="0" id="tripleaheader_r4_c1" alt="" /></td>
        <td><a href="http://www.webmaster-talk.com/index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/home_f2.jpg',1);"><img name="home" src="http://www.webmaster-talk.com/images/home.jpg" width="53" height="17" border="0" id="home" alt="" /></a></td>
        <td rowspan="3"><img name="tripleaheader_r4_c3" src="http://www.webmaster-talk.com/images/triple%20a%20header_r4_c3.jpg" width="40" height="194" border="0" id="tripleaheader_r4_c3" alt="" /></td>
        <td><img src="http://www.webmaster-talk.com/images/spacer.gif" width="1" height="17" border="0" alt="" /></td>
      </tr>
      <tr>
        <td rowspan="2"><img name="tripleaheader_r5_c2" src="http://www.webmaster-talk.com/images/triple%20a%20header_r5_c2.jpg" width="53" height="177" border="0" id="tripleaheader_r5_c2" alt="" /></td>
        <td rowspan="2"><img name="tripleaheader_r5_c4" src="http://www.webmaster-talk.com/images/triple%20a%20header_r5_c4.jpg" width="77" height="177" border="0" id="tripleaheader_r5_c4" alt="" /></td>
        <td rowspan="2"><img name="tripleaheader_r5_c8" src="http://www.webmaster-talk.com/images/triple%20a%20header_r5_c8.jpg" width="104" height="177" border="0" id="tripleaheader_r5_c8" alt="" /></td>
        <td><img src="http://www.webmaster-talk.com/images/spacer.gif" width="1" height="10" border="0" alt="" /></td>
      </tr>
      <tr>
        <td><img name="tripleaheader_r6_c6" src="http://www.webmaster-talk.com/images/triple%20a%20header_r6_c6.jpg" width="89" height="167" border="0" id="tripleaheader_r6_c6" alt="" /></td>
        <td><img src="http://www.webmaster-talk.com/images/spacer.gif" width="1" height="167" border="0" alt="" /></td>
      </tr>
    </table>
<!--end header image  -->
[B]</div>
<div id="bodyRegion"></div>    
</div>[/B]
</body>
</head>

Last edited by chrishirst; 12-19-2009 at 04:06 AM..
chrisleaven is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 12-19-2009, 01:26 AM Re: Relative positioned container div wont expand with content Help!
Skilled Talker

Posts: 58
Trades: 0
Wow...now THAT'S a header. lol

Not sure what you're up to there but ideally your entire header should look more like:

<div id="header">logo, title & possibly a header image here</div>

It currently appears painfully and unnecessarily complex (and, I gather, not working).

Cool that you're good enough to throw something together for your dad, but I can only advise scrapping it and starting from scratch.
whatsherface_21 is offline
Reply With Quote
View Public Profile
 
Old 12-19-2009, 04:08 AM Re: Relative positioned container div wont expand with content Help!
chrishirst's Avatar
Missing! presumed drunk.

Posts: 42,371
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
absolutely positioned elements do exactly that.

They are not part of the document flow.

Get rid of the absolute positioning!
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-

A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Reply     « Reply to Relative positioned container div wont expand with content Help!
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.60856 seconds with 12 queries