The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Remove floating banner in html
kbnelson
post Aug 28 2012, 11:45 AM
Post #1





Group: Members
Posts: 4
Joined: 28-August 12
Member No.: 17,691
I need to remove the floating banner at the top of my web page (working in Microsoft Front Page), and I would like to know what code to alter to make this banner and menu scroll with the rest of the page. Many thanks!

http://goldmindspub.com/index.htm

The html code for this section of the page is below:

<!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>Goldminds Publishing, Nashville, TN</title>

<meta name="Goldminds" content="" />

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


</head>
<body style="background-color: #000000; background-image: url('')" link="#0000FF" vlink="#0000FF"><div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="wrapper">

<div id="headerSpan" style="z-index:0;">
<table id="header" height="200px" width="1114" >
<tr>
<td style="vertical-align:bottom">

<p align="center">
<map name="FPMap0">
<area href="https://www.facebook.com/goldmindspublishing" shape="rect" coords="827, 140, 868, 177">
<area href="http://www.twitter.com/goldmindspub" shape="rect" coords="878, 141, 916, 179">
<area href="http://www.linkedin.com/pub/brenda-bradshaw/36/688/851" shape="rect" coords="926, 141, 966, 178">
</map>
<img border="0" src="2012_Banner.jpg" width="1000" height="200" usemap="#FPMap0"></td>
</tr>
<tr>
<td style="vertical-align:bottom" bgcolor="#000000" height="25">

<div id="menu" class="menu" style="width: 1003px; height: 50px">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="aboutUs.htm" >About Us</a>
<ul>
<li><a href="execTeam.htm" >Executive Team</a></li>
<li><a href="editTeam.htm" >Editorial Team</a></li>
<li><a href="submissions.htm" >Submissions</a></li>
<li><a href="salesTeam.htm" >Sales Team</a></li>
<li><a href="designTeam.htm" >Design Team</a></li>
<li><a href="history.htm" >History</a></li>
<li><a href="contactUs.htm" >Contact Us</a></li>

</ul>
</li>
<li><a href="news.htm" >News</a>

</li>
<li><a href="" >Booklist</a>
<ul>
<li><a href="currentTitles.htm" >Current Titles</a></li>
<li><a href="forthTitles.htm" >Forthcoming</a></li>
<li><a href="embrace.htm" >Embrace</a></li>
<li><a href="sleuths_ink.htm" >Sleuths, Ink.</a></li>
<li><a href="education.htm" >Education</a></li>
<li><a href="monthly_special.htm" >Great Deals!</a></li>
</ul>
</li>
<li><a href="authors.htm" >Authors</a></li>
<li><a href="" >Ordering</a>
<ul>
<li><a href="orderLibraries.htm" >Libraries</a></li>
<li><a href="orderResellers.htm" >Resellers</a></li>
<li><a href="currentTitles.htm" >Individuals</a></li>
</ul>
</li>
</ul>
</div>
</td>
</tr>
</table>
</div><!--------------- end headerspan ------------------>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 28 2012, 01:41 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 13,726
Joined: 9-August 06
Member No.: 6
Open your style sheet and remove 'postion: fixed' from the rule below. Also remove the top and left declarations.
CODE

#headerSpan {
    width:100%;
    margin:0px;
    padding:0px;
    position:fixed;
    top:0;
    left:0;
    background: url("oldsite/images/bannerBackground2.png") repeat-x top;
    z-index:100;
    }


You'll need to adjust the padding for BODY, marked out with /*keeps the page from sliding up underneath the fixed header*/ .


--------------------
“Never go to excess, but let moderation be your guide.”
– Cicero
IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kbnelson
post Aug 28 2012, 04:24 PM
Post #3





Group: Members
Posts: 4
Joined: 28-August 12
Member No.: 17,691
Thanks for getting back to me, but I'm afraid you are dealing with a total novice. All I have is the html code I put in the opening message. I don't know how to open the style sheet, and I can't see "position: fixed" in the html code. Can you be painfully specific, for my sake? Thanks so much!


QUOTE(pandy @ Aug 28 2012, 01:41 PM) *

Open your style sheet and remove 'postion: fixed' from the rule below. Also remove the top and left declarations.
CODE

#headerSpan {
    width:100%;
    margin:0px;
    padding:0px;
    position:fixed;
    top:0;
    left:0;
    background: url("oldsite/images/bannerBackground2.png") repeat-x top;
    z-index:100;
    }


You'll need to adjust the padding for BODY, marked out with /*keeps the page from sliding up underneath the fixed header*/ .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kbnelson
post Aug 28 2012, 04:33 PM
Post #4





Group: Members
Posts: 4
Joined: 28-August 12
Member No.: 17,691
I just located this style sheet, with the info below: what EXACTLY do I change? blink.gif



@charset "utf-8";
/* CSS Document */

#menu {
z-index:100;
float:right;
}

#menu a {
background-image:url("oldsite/images/darkBrownGradient.png");
margin: 0px 1px 0px 0px;
text-align:center;
}

/**********************Top Menu Navigation***********************/

#menu ul { /*effects the overall lists*/
padding:0px;
margin:0px;
}

#menu ul li { /*effects list items in the list*/
display:inline;
float:left;
width:115px;
list-style-type:none; /*removes bullets*/
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-transform:uppercase;
color: #BFB28D;
height:40px;
}

#menu ul li a { /*effects list items that are hyper links*/
background-color:#630;
color:#FFF;
text-decoration:none; /*removes underline*/
line-height:40px; /*auto vertically-centers text at desired line-height*/
width:115px;
display:block; /*fills out clickable and colored area*/

}

#menu ul li ul {
visibility:hidden; /*hides all submenus from view initially*/
}

#menu ul li ul li a {
background-color:#000;
background-image:url("oldsite/images/tanGradient.png");
font-size: 11px;
}

/*pseudo-classes for user interaction*/

#menu ul li a:hover {
background-color:#000;
background-image:url("oldsite/images/gradientGold.png");
}

#menu ul li ul li a:hover {
background-color:#100; /*background color for hovered sub-items*/
}

#menu ul li:hover ul { /*will only affect unordered lists that are found under list items that are currently being hovered over inside unordered lists*/
visibility:visible; /*makes the submenu visible when the above list item is hovered*/
}

/*
#menu .current_page_item a {
background-image:url(images/gradientGold.png);
}
*/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kbnelson
post Aug 28 2012, 04:42 PM
Post #5





Group: Members
Posts: 4
Joined: 28-August 12
Member No.: 17,691
Okay, I kept digging and found the style sheet for the banner (not just the menu), applied your directions, and voila! No more irritating floating banner!!!!

Thanks so much for helping me!

biggrin.gif laugh.gif tongue.gif biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 28 2012, 04:49 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 13,726
Joined: 9-August 06
Member No.: 6
Best of all, you did manage to find it and change it yourself even though you thought you couldn't. Keep that up! happy.gif


--------------------
“Never go to excess, but let moderation be your guide.”
– Cicero
IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd May 2013 - 07:16 AM
Invision Power Board © 2013  IPS, Inc.
Licensed to: HTMLHelp.com, LLC