www.webdeveloper.com
Results 1 to 8 of 8

Thread: Images going below footer

  1. #1
    Join Date
    May 2009
    Posts
    31

    Images going below footer

    Hi
    I have some images down the left hand side of my page. These are now over lapping the footer. Just wondering what I would need to put into stylesheet so that the footer will automatically just move down if I want to add more images?

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there AR123,

    please post a link to the site in question, so that we may observe the problem and possibly provide a solution.

    coothead

  3. #3
    Join Date
    May 2009
    Posts
    31
    Hi The navigation code is:

    Code:
    <div id="left">
    <UL class=section_navigation>
    <LI><A href="/the/content1.nsf/viewAllDocsByID/VJDDN?OpenDocument">HOSPITALITY</A> 
    <LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDE2?OpenDocument">RESTAURANT TARIFF</A> 
    <LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDED?OpenDocument">CATERING info</A> 
    <LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDFP?OpenDocument">DRY CLEANING SERVICE</A> 
    <LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDFY?OpenDocument">NEWS BITES</A> 
    <LI><A href="/the/content1.nsf/viewAllDocsByID/8NPFH2?OpenDocument">CATERING SERVICES FROM 03/01/2012</A> 
    <LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDGD?OpenDocument">YOUR COMMENTS</A> 
    <LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDGQ?OpenDocument">PROMOTIONS & OFFERS</A> </LI>
    <LI><a href="/the/content1.nsf/viewAllDocsByID/47WEQ6?OpenDocument">Back to Homepage</a></LI>
    </UL>
    
    <p><a>
    <img src="http://the/imagelib.nsf/viewImagesByIDLookup/SLUK-8QMCTE/$FILE/comms_ad.jpg" alt="Ingredients promotion poster" border="0" /></a></p>
    
    
    <p><a>
    <img src="http://the/imagelib.nsf/viewImagesByIDLookup/SLUK-8QCEVP/$FILE/jan12_button.gif" alt="Ingredients promotion poster" border="0" /></a></p>
    
    <p><a><img src="http://the/imagelib.nsf/viewImagesByIDLookup/SLUK-8QCEWM/$FILE/jan12_button2.gif" alt="Ingredients promotion poster" border="0" /></a></p>
    
    <p><a>
    and the CSS

    Code:
    <style type="text/css">
    <!-- styles for ingredients pages -->
    
    body {
    	background-color:#FFFFFF;
    	font-family: "Century Gothic";
    }
    
    #rtDataStore {
    	position: relative;
    	z-index: 10;
    }
    
    .fbtContent,.fbtContent TD, .fbtTgTable {font-family: "Century Gothic";}
    
    .fbtTgTable {font-size:85%;}
    
    .fbtGlobalNavTable, .fbtVivoMitie, .fbtNavTable1Background, .fbtNav2Row, .fbtSearchSectionHead, .fbtNav3Panel, .fbtLogoArea, .fbtSmallTex, .fbtSectionHead, .fbtLeftColumn{
     display: none;
    }
    
    .fbtDivider {
     background-color:#FFFFFF;
    }
    
    
    
    .fbtLeftNav0 {
     border-bottom-color:#000000;
     color:#000000;
     padding-bottom: 15px;
     background-color: #FFFFFF;
    }
    
    .fbtLeftNav0Active {
     color: #62AE29;
     padding-bottom: 15px;
     background-position: left top;
     padding-left: 25px;
     background-color: #FFFFFF;
    }
    
    .fbtLeftNav0Over {
     color: #000000;
     border-bottom-color:#000000;
     text-decoration: underline;
     padding-bottom: 15px;
    }
    
    A.fbtLeftNavLink0 {
     color: #000000;
     padding-bottom: 15px;
    }
    
    A.fbtLeftNavLink0Active {
     color: #62AE29;
    }
    
    .fbtLeftNavLink0Over {
     color: #62AE29;
     border-bottom-color:#000000;
     text-decoration: underline;
     padding-bottom: 15px;
    }
    
    
    /* navigation level 1 */
    
    .fbtLeftNav1 {
     border-bottom-color:#000000;
     color:#000000;
     padding-bottom: 10px;
     margin-left: 7px;
    }
    
    .fbtLeftNav1Active {
     color: #62AE29;
     padding-bottom: 15px;
     padding-left: 7px;
     background-color: #FFFFFF;
    }
    
    .fbtLeftNav1Over {
     color: #000000;
     border-bottom-color:#000000;
     text-decoration: underline;
     padding-bottom: 13px;
     background-repeat: no-repeat;
     background-position: 5px 6px;
    }
    
    A.fbtLeftNavLink1 {
     color: #000000;
     padding-bottom: 15px;
     margin-left: 7px;
    }
    
    A.fbtLeftNavLink1Active {
     color: #62AE29;
     margin-left: 7px;
    }
    
    .fbtLeftNavLink1Over {
     color: #62AE29;
     border-bottom-color:#000000;
     text-decoration: underline;
     padding-bottom: 13px;
     margin-left: 7px;
    }
    
    /* end of navigation 1 */
    
    .fbtTabRow {
     text-align: right;
     padding-right: 5px;
     padding-bottom: 10px;
    }
    
    a {
     text-decoration: none; 
    }
    
    a:hover {
     text-decoration: underline;
    }
    
    .fbtSrchButton {
     width: auto;
     height: 23px;
     background-color:#000000;
     color :#ffffff;
    }
    
    .fbtFullSearchText  A:link {
     color : #000000;
    }
    
    .fbtFullSearchText  A:visited {
     color : #000000;
    }
    
    .fbtMainContent {
     padding-top: 0px;
    }
    
    .search_position {
     position: absolute;
     left: 900px;
     top: 60px;
     width: 345px;
    }
    input {
     background-color: #69615b;
     color: #FFFFFF;
    }
    
    input.nocolor {
     background-color: #f5edb4;
     color: #69615b;
    }
    .left_v {
     padding-left: 70px;
     padding-right: 70px;
    }
    
    .right_v {
     padding-left: 70px;
     padding-right: 70px;
    }
    
    .vleft_header1_verd {
    	text-align: right;
    	background-position: left bottom;
    	height: 150px;
    	background-color: #212121;
    	padding-right: 10px;
    	padding-bottom: 10px;
    }
    
    .times {
     font-family: "Times New Roman", Times, serif;
     color: #333333;
    }
    
    .fbtContent H1 {
    	color: #009A4A;
    }
    
    .fbtContent H2 {
    	color: #000000;
    }
    
    .fbtContent H3 {
    	color: #000000;
    	margin-bottom: -20px;
    }
    
    .fbtContent H4 {
    	color: #009A4A;
    }
    .red {color: #FF0000}
    
    #left {
    	width: 20%;
    	float: left;
    	margin-top: 5px;
    	left: 5px;
    	top: 205px;
    	min-height:100px;
    	position: absolute;
    }
    
    #right {
    	float: right;
    	width: 78%;
    	border-left-width: 1px;
    	border-left-style: solid;
    	border-left-color: #CCCCCC;
    	padding-left: 3px;
    	margin-top: 5px;
    	z-index: 3;
    	position: relative;
    	background-color: #FFFFFF;
    }
    
    .clear {
    	clear: left;
    }
    .topnav{
    	margin: 0;
    	padding: 0;
    	float: left;
    	width: 100%;
    	border-width: 1px 0;
    	background-color: #69bE28;
    	font-size: 100%;
    	font-family: "Century Gothic";
    	position: relative;
    	z-index: 2;
    }
    
    .topnav li{
    display: inline;
    }
    
    .topnav li a{
    	float: left;
    	color: white;
    	text-decoration: none;
    	border-right: 1px solid white;
    	padding-top: 9px;
    	padding-right: 11px;
    	padding-bottom: 9px;
    	padding-left: 11px;
    }
    .topnav li.end a{
    	float: left;
    	color: white;
    	padding: 9px 11px;
    
    
    	text-decoration: none;
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #69bE28;
    }
    
    .topnav li.end a:hover, .topnav li.end .current{
    	color: #FFFFFF;
    
    	background-color: #009b48;
    	text-decoration: none;
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #69bE28;
    }
    
    .topnav li a:hover, .topnav li .current{
    	color: #FFFFFF;
    	background-color: #009b48;
    	text-decoration: none;
    }
    .section_navigation ul{
    	list-style: none;
    	padding: 0px;
    	border: none;
    	margin: 0px;
    	position: relative;
    	z-index: 1;
    }
    
    .section_navigation li {
    	border-bottom: 1px solid #CCCCCC;
    	list-style-type: none;
    	margin-top: 0;
    	margin-right: 0px;
    	margin-bottom: 0;
    	margin-left: -45px;
    	text-transform: uppercase;
    }
    
    .section_navigation li a{
    	display: block;
    	padding: 8px 5px 8px 8px;
    	background-color: #ffffff;
    	color: #000000;
    	text-decoration: none;
    	width: 100%;
    	border-left: 10px solid #FFFFFF;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 8pt;
    }
    
    html>body .section_navigation li a{ /*Non IE6 width*/
    width: auto;
    }
    
    .section_navigation li a:hover{
    	background-color: #E4E4E4;
    	color: #212121;
    	border-left-color: #69bE28;
    	text-decoration: none;
    }
    
    .section_navigation a.current {
    	background-color: #E4E4E4;
    	color: #212121;
    	border-left: 10px solid #009b48;
    	padding: 8px 5px 8px 8px;
    }
    .section_navigation a.current:hover {
    	background-color: #E4E4E4;
    }
    
    .mite_text_green {
    	color: #009b48;
    }
    .mite_text 
    {
    	font-family: "Century Gothic";
    	font-size: 100%;
    }
    
    <!-- end of styles for ingredients pages -->
    
    </style>
    
    
    
    <div style="width:1030px;">
    
    <DIV class=vleft_header1_verd><br><br>
      <img src="/the/imagelib.nsf/viewImagesByIDLookup/7VJFHY/$FILE/ingredients_logo.gif" alt="Ingredients logo"><br>
    </DIV>
     
     
    <UL class=topnav>
    <LI><A href="/the/Content1.nsf/viewAllDocsByID/7MLENC?OpenDocument"><STRONG>A</STRONG></A> 
    <LI><A href="/the/content1.nsf/viewAllDocsByID/7VJD9U?OpenDocument">B </A>
    <LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDAL?OpenDocument">C</A> 
    <LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDBC?OpenDocument">D</A> 
    <LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDBT?OpenDocument">E</A> 
    <LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDC9?OpenDocument">F</A> 
    <LI class="end"><A href="/the/content1.nsf/viewAllDocsByID/7VJDCN?OpenDocument">G</A> </LI></UL>

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there AR123,

    please post a link to the site in question, so that we may observe the problem and possibly provide a solution.

    coothead

  5. #5
    Join Date
    Mar 2011
    Posts
    1,139
    It appears that #left is set to float:left, which removes it from the document flow. Try adding:
    Code:
    <br style="clear:left;">
    just before your footer.
    Rick Trethewey
    Rainbo Design

  6. #6
    Join Date
    May 2009
    Posts
    31
    Thanks I have added this in.

    I have removed the position: absolute; as well and it seems to have done the trick

  7. #7
    Join Date
    May 2009
    Posts
    31
    Ive just noticed that after removing the position: absolute; my main page fixed but have noticed that the whole nav is breaking and going to below the text on a few different pages. and when I add back in the position: absolute; the other pages fix but the main pages get the issue with the images going below.

    any ideas how to fix both?

  8. #8
    Join Date
    Mar 2011
    Posts
    1,139
    I'd need to see the whole page. Post a link.
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles