SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot Fiska's Avatar
    Join Date
    Jul 2004
    Location
    Dardania - Ancient Illyria
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to do it in css?

    I'm now working on the bottom of the page, but I don't know how to achieve
    bottom navigation of the page (see the attached pic this is how it should be), but the thing is that this on the pic I can't implement it on CSS , now as it is there is no bottom navigation, instead it should have been as in the pic attached!

    here is the url http://test.rrota.net/qytetaret.html

    therefore left navigation is not working on mozilla , IE is ok

    help would be appreciated
    fiska
    Attached Images Attached Images
    let's make things easier

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Id be inclined to absolutely place that right footer so that you can get it exact (assuming theres nothing to go underneath it).

    Code:
    #bottomline {
     background-color: #DDD6C6;
     width: 647px;
     height: 5px;
     border-bottom: 1px solid #000;
     border-right: 1px solid #000;
     border-left: 1px solid #000;
     color: #000;
    }
    *html #bottomline {overflow : hidden; margin-bottom : 0;}/* IE */
    #bottomleft{
     background-color: #FFCC00;
     margin :0;
     padding:0;
     width: 214px;
     border-bottom: 1px solid #000;
     border-left: 1px solid #000;
     color: #000;
    }
    #bottomleft h1{
     padding:0;
     padding-left: 10px;
     line-height:16px;
     margin:0;
     position:relative;
    }
    #bottom {position:relative;margin-top:-1px;}
    * html #bottom{margin-top:0}
    #bottomright {
     position:absolute;
     left:215px;
     top:0;
     background-image: url(http://test.rrota.net/common/images/bott.gif);
     background-repeat: repeat-x; 
     padding: 0;
     width: 433px;
     border-right:1px solid #3D3D3D;
     line-height: 24px;
     height:24px;
     }
    #bottomright img{
     border:none;
     position:absolute;
     left:-7px;
     top:0;
     display:block;
    } 
    #bottomright a{
    }
    #bottline {
     background-color: #728AA9;
     overflow: hidden;
     height: 5px;
     width: 219px;
     float: left;
     margin-top: -6px;
     border-left : 1px solid #000;
     border-bottom : 1px solid #000;
     color: #000;
    }
    html:
    Code:
      <!-- end of the border-->
      <div id="bottomlineqyt"></div>
      <div id="bottom"> 
    	<div id="bottomleft"><h1> 2004 Bashkia a Tiranes</h1></div>
     <div id="bottomright"><img src="http://test.rrota.net/common/images/edge.gif" alt=""  /> 
    	  <a href="#">fjdskl</a></div>
      </div>
    </div>
    <!-- end of the central-->
    </body>
    That evens up the display in ie and firefox.

    Paul

    (BTW Your left menu at ther top needs a bit of work in firefox as the lines are overlapping but I asssume you are working on that.)


Bookmarks

Posting Permissions

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