SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
Thread: how to do it in css?
-
Oct 25, 2004, 08:41 #1
- 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
fiskalet's make things easier
-
Oct 25, 2004, 12:24 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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; }
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>
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