Frustrating text appears fixed at bottom of page!

tazzy_dude · 05-May-2008, 11:33 AM #1

Hi I hope someone can help me.

I am editing a web page in dream weaver and I don't know wht the hell I have done but my text logo that is supposed to appear at the top left of the page appears at the bottom of the website and it seems fixed so that it stays there when I scroll down! I can't find what I have done to revert this. Can anyone shed some light?

Regards
Tazzy.

TheRobatron · 05-May-2008, 04:49 PM #2

Can you post the HTML and CSS that you're using? It's probably position: fixed that's causing the logo to appear at the bottom when you scroll down.

tazzy_dude · 05-May-2008, 06:05 PM #3

Hi thanks, the site is not yet online but i can post the html and CSS.

here is the HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Smooth by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="file:///C|/Users/tariq/Documents/signify promotions/Website/smooth/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="header">
<div id="logo">
<p> </p>
<p> </p>
<p align="center"><a href="#" class="style1 style3">signify<span class="style6">promotions</span></a></p>
</div>
<div id="menu">

<ul>
<li class="active"><a href="index.html" title="">Homepage</a></li>
<li><a href="artwork.html" title="">Artwork</a></li>
<li><a href="webdesign.html" title="">Web Design</a></li>
<li><a href="stationary.html" title="">Stationary</a></li>
<li><a href="contact.html" title="">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="sidebar">
<div id="login" class="boxed">

<div class="title">
<h2>Latest News</h2>
</div>
</div>

<div id="updates" class="boxed">
<div class="content">
<ul>
<li>
<h3>April 28, 2008</h3>
<p><a href="#">Started my operation as a freelance designer.</a></p>
</li>
<li>
<h3>May 4, 2008</h3>
<p><a href="#">The launch of my new website. Design Solutions.</a></p>
</li>
<li></li>
</ul>
</div>
</div>

</div>

<div id="main">
<div id="welcome" class="post">
<h2 class="title"><span>introduction</span></h2>

<div class="story"><img src="file:///C|/Users/tariq/Documents/signify promotions/Website/smooth/images/img09.jpg" alt="" width="120" height="120" class="left" />
<p><strong>Design Solutions website has been launched to offer Graphic Design services for a variety of different projects from web site designs to brochures and printed stationary designs. If you have a project that you can't see on the site please contact me.</strong> </p>
</div>
<div class="meta"></div>
</div>

<div id="example" class="post">
<h2 class="title"><span>Current Special offers!</span></h2>
<h3 class="date"><span class="month">Feb.</span> <span class="day">24</span><span class="year">, 2007</span></h3>
<div class="story">
<p class="style5">Artwork Designs Starting From £10 Per Design.</p>
<p class="style5">Web Site Design Starting from £50.</p>
<h3> </h3>
</div>
<div class="meta">
<p> </p>
</div>
</div>

</div>

<div id="sidebar2">
<div id="sponsors" class="boxed">
<div class="title">
<h2>contact details</h2>
</div>
<div class="content">

*********<br>
**********<br>
**********<br>
**********<br>
WN6 7EG</div>
</div>

<div id="ad120x600" class="boxed">
<div class="title"><h2>Advertisement</h2></div>
<div class="content"><a href="#"><img src="file:///C|/Users/tariq/Documents/signify promotions/Website/smooth/images/ad_120x600.jpg" alt="" width="120" height="600" /></a></div>
</div>
</div>
<div style="clear: both;"> </div>
</div>


<div id="footer">
<p id="legal">Copyright © 2007 Smooth. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
<p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
</div>
</body>
</html>

Here is the CSS

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

* {
margin: 0;
padding: 0;
}

body {
margin: 20px 0;
background: #FFFFFF url(images/img01.gif) repeat-x;
font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #666666;
}

h1, h2, h3 {
color: #333333;
}

h2 {
}

h3 {
font-size: 1em;
}

p, blockquote, ul, ol {
margin-bottom: 1.5em;
line-height: 1.65em;
text-align: justify;
}

p {
}

blockquote {
margin-left: 2em;
margin-right: 2em;
font-style: italic;
}

ul {
margin-left: 3em;
}

ul li {
}

ol {
margin-left: 3em;
}

ol li {
}

a {
text-decoration: underline;
color: #3E9722;
}

a:hover {
text-decoration: none;
color: #E58C24;
}

img {
border: none;
}

img.left {
float: left;
margin: 5px 20px 0 0;
}

img.right {
float: right;
margin: 5px 0 0 20px;
}

/* Boxed Style */

.boxed {
}

.boxed .title {
background: #7FE63C url(images/img05.gif) repeat-x;
}

.boxed .title h2 {
height: 28px;
padding: 12px 0 0 20px;
text-transform: uppercase;
font-size: 1em;
color: #FFFFFF;
}

.boxed .content {
padding: 20px;
border-top: 1px solid #FFFFFF;
background: url(images/img06.gif) repeat-x;
}

/* Post */

.post {
}

.post .title {
background: #A923FF url(images/img07.gif) repeat-x;
font-size: 1em;
text-transform: uppercase;
color: #FFFFFF;
}

.post .title span {
display: block;
height: 28px;
padding: 12px 0 0 20px;
}

.post .date {
margin-top: -25px;
padding-bottom: 10px;
padding-right: 20px;
text-align: right;
font-size: x-small;
color: #FFFFFF;
}

.post .date .month {
}

.post .date .day {
}

.post .date .year {
}

.post .meta {
clear: both;
}

.post .meta p {
margin: 0;
padding: 10px 20px 40px 20px;
border-top: 1px dotted #A923FF;
line-height: normal;
font-size: x-small;
}

.post .story {
padding: 20px;
border-top: 1px solid #FFFFFF;
background: url(images/img08.gif) repeat-x;
}

/* Header */

#header {
width: 920px;
height: 120px;
margin: 0 auto;
padding: 20px 20px 0 20px;
}

/* Header > Logo */

#logo {
float: left;
width: 240px;
height: 50px;
}

#logo h1 {
margin: 0;
padding: 50px 0 0 0;
font-size: 2.6em;
}

#logo h2 {
margin-top: -5px;
font-size: 1em;
}

#logo a {
text-decoration: none;
color: #000000;
}

/* Header > Menu */

#menu {
float: right;
}

#menu ul {
margin: 0;
padding-top: 79px;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
width: 120px;
height: 30px;
margin-left: 2px;
padding-top: 10px;
background: url(images/img02.gif) no-repeat;
text-decoration: none;
text-align: center;
font-weight: bold;
color: #000000;
}

#menu a:hover {
background-image: url(images/img03.gif);
}

#menu .active a {
background-image: url(images/img04.gif);
}

/* Content */

#content {
width: 920px;
margin: 0 auto;
padding: 20px;
background: url(images/img02.jpg) no-repeat;
border-top: 1px solid #FFFFFF;
}

/* Content > Main */

#main {
float: left;
width: 480px;
}

/* Content > Main > Welcome */

#welcome {
}

/* Content > Main > Example */

#example {
}

/* Content > Sidebar */

#sidebar {
float: right;
width: 220px;
}

/* Content > Sidebar > Login */

#login {
}

#login form {
}

#login fieldset {
border: none;
}

#login legend {
display: none;
}

#login label {
display: block;
}

#login input {
margin-bottom: 10px;
padding: 2px 5px;
font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #666666;
}

#inputtext1, #inputtext2 {
width: 160px;
}

#inputsubmit1 {
margin: 0;
padding: 0;
}

/* Content > Sidebar > Updates*/

#updates {
}

#updates ul {
margin: 0;
list-style: none;
}

#updates h3 {
font-size: .8em;
}

#updates p {
line-height: normal;
font-size: .8em;
}

#updates a {
text-decoration: none;
}

/* Content > Sidebar2 */

#sidebar2 {
float: right;
width: 180px;
padding-right: 20px;
}

/* Content > Sidebar2 > Sponsors */

#sponsors {
}

#sponsors ul {
margin-left: 0;
padding-left: 0;
list-style: inside;
}

/* Content > Sidebar2 > ad120x600 */

#ad120x600 {
}

#ad120x600 .content {
padding: 20px 0;
text-align: center;
}

/* Footer */

#footer {
clear: both;
height: 100px;
padding: 40px 0;
background: #EA5ADA;
color: #FFFFFF;
}

#footer p {
margin: 0;
text-align: center;
line-height: normal;
font-size: x-small;
}

#footer a {
text-decoration: underline;
color: #FFFFFF;
}

#footer a:hover {
text-decoration: none;
}

/* Footer > Legal */

#legal {
}

/* Footer > Links */

#links {
}

matt-h · 05-May-2008, 08:01 PM #4

Well I tested that code and it worked fine for me. The Signify Promotions bit didn't stay fixed or act unusual at all.

If it's still happened, go and add the following to #header and/or #logo
position: relative;
or
position: absolute;

Can't remember which ones you should use, but test both.

Jayec · 06-May-2008, 03:02 AM #5

Quote:

Originally Posted by tazzy_dude

Hi I hope someone can help me.

I am editing a web page in dream weaver and I don't know wht the hell I have done but my text logo that is supposed to appear at the top left of the page appears at the bottom of the website and it seems fixed so that it stays there when I scroll down! I can't find what I have done to revert this. Can anyone shed some light?

Regards
Tazzy.

I've seen something similar in Dreamweaver.

Depending on your version of Dreamweaver the CSS isn't rendered/displayed correctly, but when the site is opened in your browser it displays fine. It really makes GUI design interesting when you aren't seeing what you should

Edit: This page looks fine in DW8 and IE7 (Also, don't forget to update the "Title of the page". Currently says "Smooth by Free Css")

tazzy_dude · 06-May-2008, 05:26 AM #6

Thanks for your replys guys.
Then I don't understand whats happening here then, If you have tried it and can't see any problems then it's nothing to do with the coding and must have something to do with my software! Could it be an update issue or something? I must report that this was fine one day and the next it just started doing this, so it has been fine before!

Matt-h thanks for your suggestion I did try both but it didn't make any difference.

I now know it is nothing to do with the CSS or the Tag itself because I have copied and pasted the original CSS and the tag from the origial template and it seems to still do the same thing, However the original template displays correctly in my browser, so it must have something to do with a change I have made not to the CSS or to the tag.

I dont understand....

Thanks for the replys.

tazzy_dude · 06:07 AM

This is what i am seeing in my browser and when I scroll down, my logo just stays there!!??

Thanks

TheRobatron · 06-May-2008, 12:59 PM #8

Try your site in different browsers at www.browsershots.com to see if it's your PC or certain browsers (you won't need all the browsers available, just the main ones like MSIE and Firefox.)

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)