• 0

help with dreamweaver


Question

i have been working on a website on dreamweaver with a sticky footer it looks fine in DW but in my browser it looks like this: 2732c6a85c504d859c84308.png

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

A screenshot doesn't help at all when it's the actual code that's the issue. You'll need to post up your code.

Now is this a footer that you just want to "stick" to the bottom before content is long enough to force the browser to scroll? Or is the sticky footer going to stay on top of the content as you scroll down the browser?

Link to comment
Share on other sites

  • 0

Just to reiterate you want a footer basically like this: Webdesignledger.com?

BTW, you still didn't include your code. style.css is necessary. Best way to do this is just copy/paste into the code tag on the forum for each. No need to attach anything :p.

Edit: Whoops forgot the rest of my post!

Rather than reinvent the wheel for you, you can check out this post that shows how you can achieve a fixed footer (and header!) layout. :)

All code is available there and here is the demo you can check out :).

Link to comment
Share on other sites

  • 0

@charset "utf-8";

/* CSS Document */

* {

margin: 0;

}

html, body {

height: 100%;

}

.wrapper {

min-height: 100%;

height: auto !important;

height: 100%; /* the bottom margin is the negative value of the footer's height */

width: auto;

margin-top: 0;

margin-right: auto;

margin-bottom: -50px;

margin-left: auto;

background-color: #FFF;

background-image: url(../repeat_bg.jpg);

}

table {

font-family: "Lucida Grande";

font-size: 14px;

color: #FFF;

}

.dot {

font-family: "Arial Narrow";

font-size: 10px;

}

.footer, .push {

height: 50px; /* .push must be the same height as .footer */

font-family: "Lucida Grande";

background-color: #FFF;

font-size: 12px;

}

nav {

font-family: "Lucida Grande";

text-transform: uppercase;

color: #FFF;

}

footer {

font-family: "Lucida Grande";

font-size: 12px;

color: #FFF;

}

.footer p {

color: #CCC;

font-size: 10px;

font-weight: bold;

text-transform: uppercase;

text-align: left;

}

.footertext {

color: #333;

}

.wrapper #content table tr th {

color: #FFF;

}

secondfooter {

font-size: 10px;

}

.footer p {

color: #CCC;

}

.nav3 {

color: #333;

}

.navsmall {

color: #666;

}

this is css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />

<style type="text/css">

<!--

a:link {

text-decoration: none;

color: #999;

}

a:visited {

text-decoration: none;

color: #999;

}

a:hover {

text-decoration: underline;

color: #CCC;

}

a:active {

text-decoration: none;

color: #CCC;

}

-->

</style></head>

<body>

<div class="wrapper">

<div id="content">

<p><img src="TEST.PNG" width="580" height="156" /></p>

<table width="525" height="406" border="0">

<tr>

<th width="519" align="left" valign="top" class="footertext" scope="row">  Contact Us <span class="dot">●</span> Facebook <span class="dot">●</span> Blog <span class="dot">●</span> Videos <span class="dot">●</span> Forums</th>

</tr>

<tr>

<th scope="row"> </th>

</tr>

<tr>

<th scope="row"> </th>

</tr>

<tr>

<th scope="row"> </th>

</tr>

<tr>

<th scope="row"> </th>

</tr>

<tr>

<th scope="row"> </th>

</tr>

</table>

<div class="push"></div> <!-- end push -->

</div><!-- end content -->

</div> <!-- end wrapper -->

<div class="footer">

<p> </p>

<p class="footertext"> <span class="push"> <span class="nav3"> Contact Us | Facebook | Blog | Videos | Forums</span></span> </p>

<p class="footertext">  <span class="navsmall">  www.spartanshadowfilms.tK</span> ;<a href="http://www.youtube.com/user/SpartanShadowFilms">www.youtube.com/user/SpartanShadowFilms</a></p>

</div> <!-- end footer -->

</body>

</html>

html

Link to comment
Share on other sites

  • 0

XCalvin, the forum has bbcode enabled, so to make it cleaner (and easier) you should use the code bbcode. It's the icon with the <> brackets. You use [ code] code here and [/ code] (remove spaces).

Also, can you please reread my post? I asked you to confirm if the effect you wanted was the stickied footer in the URL example. If that is the case, I gave you a link that contains the demo and source code to achieve that effect.

By the way, you have a linked stylesheet yet you've also got inline css. Remove the inline css* and include that in your style.css file. The correct way is to include it in the style.css file (as you've done with the rest of it.)

* This should be removed and included in style.css:

a:link, a:visited {
text-decoration: none;
color: #999;
}
a:hover {
text-decoration: underline;
color: #CCC;
}
a:active {
color: #CCC;
}

I've also edited it. You do not need to repeat text-decoration: none for :visited and :active. It will inherit from :link.

Link to comment
Share on other sites

  • 0

The code you posted looks fine to me (Google Chrome 5.0.375.99), the footer sticks to the bottom, no white streaks...

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.