Edu_Puixa Posted July 20, 2009 Share Posted July 20, 2009 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 More sharing options...
dsonesuk Posted July 20, 2009 Share Posted July 20, 2009 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;} Link to comment Share on other sites More sharing options...
Edu_Puixa Posted July 20, 2009 Author Share Posted July 20, 2009 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 27, 2009 Share Posted July 27, 2009 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> Link to comment Share on other sites More sharing options...
Edu_Puixa Posted July 27, 2009 Author Share Posted July 27, 2009 Thanks a lot dsonesuk.I have a lot of other stuff to do at the moment. As soon as I get back to homepage i'll post some good news. Hopefully! And "yes" I know about the module thing. Anyway, thanks for your time and help. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.