Log in

View Full Version : HTML code for "Bottom Frame Layout"


devajyoti
12-06-2008, 12:00 AM
1) Script Title: CSS Bottom Frame Layout

2) Script URL (on DD): http://www.dynamicdrive.com/style/layouts/item/css-bottom-frame-layout/

3) Describe problem:

Aim: Hide a footer in my site :www.aieealerts.com (http://www.aieealerts.com) , built by free web builder- Weebly.com, that reads :Create a free website with Weebly...& replace it with other links...


The only options I have in the editor is : insert HTML code...
I tried Inserting the modified CSS code in http://www.dynamicdrive.com/style/layouts/item/css-bottom-frame-layout/ --- everything was fine other than 1 problem----> the page loads but the scrollbar goes off.

Now in my site : www.aieealerts.com--- U can see I got some success after modifying this code:--- http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm
But though it works in firefox and Internet explorer--- It floats the other way around in Internet explorer and exposes the footer again....


Hope my problem is clear.... I am a medical graduate from India with the very little coding skills I learnt from this site itself...

Can there be some HTML code that can help me insert and use this CSS Layout: http://www.dynamicdrive.com/style/layouts/item/css-bottom-frame-layout/


Thanx.:)
Snookerman
12-06-2008, 09:21 AM
But though it works in firefox and Internet explorer--- It floats the other way around in Internet explorer and exposes the footer again....
So does it work in IE or not? I looked at it in FF3 and IE7 and saw no problem. Could you please post a picture showing the problem?
devajyoti
12-09-2008, 09:44 PM
:) @snookerman.... Fortunately I think I had resolved it myself somehow before you saw....

But now the next step and next problem I face is....:confused:

I wanted a menu(centered) in that footer--- I used this code:


<html>
<head>

<style type="text/css">
div.down
{
position:fixed;
left:0px;bottom:0px;
padding: 0.4em 0em;
}
.cool ul
{
margin:0;
float:left;
width:100%;
list-style-type:none;
}

.cool ul li
{display:inline}

.cool ul li a
{
float:left;
text-decoration:none;
color:white;
background-color:cornflowerblue;
padding: 0em 0.6em;
border-right:1px solid white;
}

.cool ul li a:hover {background-color:#CACACA;
color:black;}

</style>
</head>

<body>
<div class='down' style='width: 100%; height: 62px; background-color: #f5f5f5;

border-bottom: 7px solid #ffffff;'>

<div class="cool" >
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Engineering</a></li>
<li><a href="#">Hotel Management</a></li>
<li><a href="#">Link four</a></li>
</ul>
</div>
<p align="center">
Like this text is centered... How do I center the blue tab aove too.....Plase help urgently... thankk you!
</p></div>
</body>
</html>


Now everything is fine except that the I am not able to center the menu tabs though I did center the text below... :mad:

U can see the page here: Entrance Exam Alerts (http://www.aieealerts.com)
devajyoti
12-09-2008, 10:46 PM
Am new into this and I know it must be simple for you people...

I tried using align="centre" in the <div> 's but didn't work... Is is due to the float command am using.... Removed all paddings... still didn't work :(

Please help!!
Snookerman
12-10-2008, 12:12 PM
align="centre" is not valid, I prefer this spelling too, but you should use the American spelling: align="center"
devajyoti
12-10-2008, 06:20 PM
ya sorry... I tried align="center" only... Didn't work... :(
Where exactly do I put it in the above code... I tried putting it in the css--- .cool ul command and also in the <div class ="cool"> in the above code--- still it doesn't work... How to make it work ?