Jump to content

Floating Background Problem


Edu_Puixa
 Share

Recommended Posts

Hello here at W3schools,This is my first time I'm creating web page and I have problem with floating background which is under dynamic content. Hope someone can help me out.To get left and right borders for content area I have one long image with left border and all background and second smaller image with only right border on top of left side image.This technique works for top and bottom border around content area, cause there is defined height of 25px. But in dynamic content area I only see left border with background, but not the right border. If I define constant height for all content, then I can see right border as well.Here is link to my site: http://ciedra.nanolv.comI have already looked over some topics about similar problem and tried their solutions (set all parents height to 100%, added div with clear:both at the end of my content) nothing seems to work at all.Here is section of code for my content area.

<!-- Content area --><td id="content" align="center" width="100%"><!-- Top Border -->  <div align="center">    <div id="content_top_bar">      <div id="content_top">        <div id="content_top_right"></div>      </div>    </div>  </div><!-- Dynamic Content with Side Borders -->  <div id="content_float_bar">    <div id="content_float">      <div id="content_inner">        <div id="content_float_right"></div>        <p>Paragraph1 bla bla bla bla</p>        <p>Some text here</p>        <p>Last text is in this row.</p>      </div>    </div>  </div><!-- Bottom Border  <div align="center">    <div id="content_bottom_bar">      <div id="content_bottom">        <div id="content_bottom_right"></div>      </div>    </div>  </div></td> 

And here is CSS for content area:

#content_top_bar {	width : 100%;}#content_float_bar {	width : 100%;	height : 100%;}#content_bottom_bar {	width : 100%;}#content_top {	background-image : url(../images/content_top.gif);	background-repeat : no-repeat;	height : 25px;}#content_top_right {	background-image : url(../images/content_top_right.gif);	background-repeat : no-repeat;	height : 25px;	width : 25px;	float : right;}#content_float {	background-image : url(../images/content_float.gif);	background-repeat : repeat-y;	height : 100%;}#content_float_right {	background-image : url(../images/content_float_right.gif);	background-repeat : repeat-y;	height : 100%;	/*min-height : 150px;*/	width : 25px;	float : right;	margin-right : -30px;}#content_outer {	width : 100%;	color : #fafafa;	padding : 0;	background-color : #181818;	background-image : url(../images/content_outer.gif);	background-repeat : repeat-x;	margin : 0;}#content_inner {	height : 100%;	margin : 0 30px;}#content_inner p {	margin : 2px 0 15px 0;}#main_content {	float : none !important;	float : none;	padding : 5px;	margin : 0 5px 0 5px;}table.content_table {	width : 100%;	margin-top : 20px;	margin-bottom : 20px;}.content {	color : #fafafa;	background-color : #000000;	width : 100%;}#content {	padding : 0 10px;}#content_bottom {	background-image : url(../images/content_bottom.gif);	background-repeat : no-repeat;	height : 25px;}#content_bottom_right {	background-image : url(../images/content_bottom_right.gif);	background-repeat : no-repeat;	height : 25px;	width : 25px;	float : right;} 

Link to comment
Share on other sites

you have two content_float_right divs with no closing tags, and they seems to be in the wrong position?plus some floats added and widths, heights amended in css.Please make backup of these files before continuing because i take no responsibility blah blah blah.what i came up with is that they should be as follows:

<td align="center" width="100%" id="content">          <div align="center">                <div id="content_top_bar">                  <div id="content_top">                    <div id="content_top_right"/>                  </div>                </div>              </div><!--Jaunais saturs ar malam          <div id="content_float_bar">            <div id="content_float">            <div id="content_inner">              <div id="content_float_right"></div>              <p>Paragraph1 bla bla bla bla</p>              <p>Some text here</p>              <p>Last text is in this row.</p>            </div>            </div>          </div>-->          <div id="content_float_bar">            <div id="content_float">            <div id="content_float_right"><div id="content_inner">                                  <table cellspacing="0" cellpadding="0" border="0" align="center" class="content">                      <tbody><tr>                        <td colspan="0"><div id="topcontent">                                                                                  </div>                          <div id="breadcrumbs">                            <!--PATHWAY-->                            <div class="breadcrumbs">                              <span class="breadcrumbs pathway">Home</span>                            </div>                            <!--END PATHWAY-->                          </div>                          <div id="main_content">                            <div class="componentheading">    Jūsu ideja - Mūsu risinājums</div><table cellspacing="0" cellpadding="0" class="blog"><tbody><tr>    <td valign="top">                </td></tr></tbody></table>                          </div></td>                      </tr>                                          </tbody></table>                    </div></div>                          </div>          </div>              <div align="center">                <div id="content_bottom_bar">                  <div id="content_bottom">                    <div id="content_bottom_right"/>                  </div>                </div>              </div></td>

#content_top_bar {    width : 100%;}#content_float_bar {    width : 100%;    height : 100%;float:left;/*added*/}#content_bottom_bar {    width : 100%;}#content_top {    background-image : url(../images/content_top.gif);    background-repeat : no-repeat;    height : 25px;}#content_top_right {    background-image : url(../images/content_top_right.gif);    background-repeat : no-repeat;    height : 25px;    width : 25px;    float : right;}#content_float {    background-image : url(../images/content_float.gif);    background-repeat : repeat-y;    height : 100%;float:left;/*added*/}#content_float_right {    background-image : url(../images/content_float_right.gif);    background-repeat : repeat-y;    height : 100%;    /*min-height : 150px;*/    width : 100%;    float : right;    /*margin-right : -30px; amended*/}#content_outer {    width : 100%;    color : #fafafa;    padding : 0;    background-color : #181818;    background-image : url(../images/content_outer.gif);    background-repeat : repeat-x;    margin : 0;}#content_inner {float:left;/*added*/    height : 100%;    margin : 0 30px;}#content_inner p {    margin : 0;    padding : 2px 0 15px 0;}#main_content {    float : none !important;    float : none;    padding : 5px;    margin : 0 5px 0 5px;}table.content_table {    width : 100%;    margin-top : 20px;    margin-bottom : 20px;}.content {    color : #fafafa;    background-color : #000000;    width : 100%;}#content {    padding : 0 10px;}#content_bottom {    background-image : url(../images/content_bottom.gif);    background-repeat : no-repeat;    height : 25px;width:100%;/*added*/float:right;/*added*/}#content_bottom_right {    background-image : url(../images/content_bottom_right.gif);    background-repeat : no-repeat;    height : 25px;    width : 25px;    float : right;}

Edited by dsonesuk
Link to comment
Share on other sites

Hi dsonesuk,Thanks for info, but if I copy-paste your html code then it completely mess up all content area. Content is positioned outside its border on the right side under log-in area.Maybe you can give me fix for my posted code. As there are only 3 paragraphs as content.

Edited by Edu Puixa
Link to comment
Share on other sites

well i have come up with this, and it works in FF, O, IE6&7, and chrome.and i hope you realise you can't just paste this in the index.php page and expect this to work! because you are using joomla it has to be inserted in the correct module page, for example breadcrumbs module.

<style type="text/css">.content_float_right {background-image: url(../carbon_07_15/images/content_float.gif);background-repeat: repeat-y; background-position:right;width: 555px; right: -14px ;position: relative;}#content_inner { position: relative; left: -14px;}</style><!--[if IE]><style type="text/css">.content_float_right {right: -9px; }#content_inner { left: -9px;}</style><![endif]-->    

    <td id="content" align="center" width="100%"><!--100%-->                  <div align="center"><!--top row-->            <div id="content_top_bar">                <div id="content_top">                    <div id="content_top_right"/>                </div>            </div>        </div><!--end top row-->                      <div id="content_float_bar"><!--middle content area-->            <div id="content_float">                <div class="content_float_right">                    <div id="content_inner">                              <table cellspacing="0" cellpadding="0" border="0" align="center" class="content">                              <tbody>                                <tr>                                    <td colspan="0">                                                                                <div id="topcontent"></div>                                                                                  <div id="breadcrumbs">                                        <!--PATHWAY-->                                            <div class="breadcrumbs">                                                  <span class="breadcrumbs pathway">Home</span>                                               </div>                                        <!--END PATHWAY-->                                          </div>                                                                                  <div id="main_content">                                            <div class="componentheading">Jūsu ideja - Mūsu risinājums</div>                                                                                        <table cellspacing="0" cellpadding="0" class="blog">                                                <tbody>                                                    <tr>                                                        <td valign="top">                                                        </td>                                                    </tr>                                                </tbody>                                            </table>                                        </div>                                                                          </td>                                  </tr>                            </tbody>                        </table>                    </div>                   </div>            </div>        </div><!--END middle content area-->        <div align="center">            <div id="content_bottom_bar">                <div id="content_bottom">                    <div id="content_bottom_right"/>                </div>             </div>        </div>                  </td>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...