No replies
aquaanimus
Offline
newbie
Wisconsin, USA
Last seen: 9 years 39 weeks ago
Wisconsin, USA
Joined: 2009-07-22
Posts: 1
Points: 0

Hello, I am very new to html and CSS. Currently, I am trying to fix an issue with the red navigation buttons on my web page. I am using posistion: relative; however, when the page is minimized, my navigation buttons will double up, instead of staying put. What I mean, the home button will move under one of the other buttons. Sometimes, like on IE, the home button will even follow the users mouse around when they try to click on another button. I hope I am including everything to help. Please forgive me if I am missing something. Thank you in advance for any assistance you can provide. The address is http://www.markedbytheboys.com/fanfiction

The navigation buttons in my css is this:

/* the following defines your menu inside the banner div */
/* the box around the menu and aligning the text to right */
#menu A, #footermenu A { 
	color: #FFFFFF; 
	text-decoration: none; 
	font-weight: bold;
	width:100px; 
	height:20px; 
	position: relative;
	border: 1px solid #000;
	background: #800000;
	display: block;
	text-align: center;
}
#menu A:hover, #menu #current:hover, #footermenu A:hover, #footermenu #current:hover { 
	text-decoration: none;
	width: 120px;
	height: 28px;
	z-index: 200;
	background: #800000;
	color: #FFFFFF;
	line-height: 28px;
	margin-top: -4px;
	margin-left: -7px;
	border: 1px solid #000;
	overflow: hidden;
	position: relative;
}
#menu #current, #footermenu #current {
	color: #FFFFFF;
	text-decoration: none; 
	font-weight: bold;
	width:100px; 
	height:20px; 
	position: relative;
	border: 1px solid #000;
	background: #800000;
	display: block;
}
#menu UL, #footermenu UL { 
	padding: 0; 
	margin: 5px 0;
	list-style-type: none;
}
#menu LI, #menu #menu_current, #footermenu LI, #footermenu #menu_current {
	width:100px; 
	height: 20px; 
	float: right;
	margin-right: 5px;
}
 
#menu, #footermenu { 
	height: 32px;
	border: 1px solid #000;
	background: #D8D8D8;
	padding-right: 10px;
}
/* end menu setup */

My entire CSS is this:

<a href="http://www.markedbytheboys.com/fanfiction/index.php
Embedded" rel="nofollow">http://www.markedbytheboys.com/fanfiction/index.php
Embedded</a> Styles from <a href="http://www.markedbytheboys.com/fanfiction/index.php
 
#columncontainer" rel="nofollow">http://www.markedbytheboys.com/fanfiction/index.php
 
#columncontainer</a> { margin: 1em auto; width: auto;}
#browseblock, #memberblock { width: 100%; padding: 0; margin: 0; float: left; border: 0px solid transparent; }
.column { float: left; width: 49%; }
html>body .column { width: 50%; }
.cleaner { clear: both; height: 1px; font-size: 1px; margin: 0; padding: 0; background: transparent; }
#settingsform { margin: 0; padding: 0; border: none; }
#settingsform FORM { width: 100%; margin: 0 10%; }
#settingsform LABEL { float: left; display: block; width: 30%; text-align: right; padding-right: 10px; clear: left; }
#settingsform DIV { margin: 1ex auto; clear: both;}
#settingsform .fieldset SPAN { float: left; display: block; width: 30%; text-align: right; padding-right: 10px; clear: left;}
#settingsform .fieldset LABEL { float: none; width: auto; display: inline; text-align: left; clear: none; }
#settingsform { float: left; margin: 1ex 10%; }
#settingsform .tinytoggle { text-align: center; }
#settingsform .tinytoggle LABEL { float: none; display: inline; width: auto; text-align: center; padding: 0; clear: none; }
#settingsform #submitdiv { text-align: center; width: 100%;clear: both; height: 3em; }
#settingsform #submitdiv #submit { position: absolute; z-index: 10001; margin: 1em; }
a.pophelp{
    position: relative; /* this is the key*/
    vertical-align: super;
}
 
a.pophelp:hover{z-index:100; border: none; text-decoration: none;}
 
a.pophelp span{display: none; position: absolute; top: -25em; left: 20em; }
 
a.pophelp:hover span{ /*the span will display just on :hover state*/
    display:block;
    position: absolute;
    top: -3em; left: 8em; width: 225px;
    border:1px solid #000;
    background-color:#CCC; color:#000;
    text-decoration: none;
    text-align: left;
    padding: 5px;
    font-weight: normal;
    visibility: visible;
}
.required { color: red; }
.shim {
	position: absolute;
	display: none;
	height: 0;
	width:0;
	margin: 0;
	padding: 0;
	z-index: 100;
}
 
.ajaxOptList {
	background: #CCC;
	border: 1px solid #000;
	margin: 0;
	position: absolute;
	padding: 0;
	z-index: 1000;
	text-align: left;
}
.ajaxListOptOver {
	padding: 4px;
	background: #CCC;
	margin: 0;
}
.ajaxListOpt {
	background: #EEE;
	padding: 4px;
	margin: 0;
}
.multiSelect {
	width: 300px;
}
 
 
http://www.markedbytheboys.com/fanfiction/skins/MBTB/style.css
 
BODY { 
	background: #D8D8D8;
	color: #000;
	margin: 0;
	padding: 0;
}
 
IMG { 
	border: 0;
	padding: 0;
	margin: 0;
}
 
HR { color: #dcdcdc; background: #dcdcdc; height: 2px; border: 1px solid #000; width: 75%; }
 
/* Header cells in tables throughout the site */
TH { 
	background: #D8D8D8;
	color: #FFF;
	font-weight: bold;
}
/* links */
A { 
	color: #3B0B39;
	font-weight: bold;
	text-decoration: none;
}
/* hovering links */
A:hover {
	text-decoration: underline overline;
}
/* the box at the top of the page */
#banner {
	text-align: center;
	background: #000000;
	padding-bottom: 0px;
	border-bottom: 1px solid #000;
}
/* The appearance of your site's name in the banner area*/
#sitename {
	font-size: 64px;
	font-weight: bold;
	color: #D1E0EF;
	height: 100px;
	line-height: 100px;
}
/* The appearance of your site's slogan in the banner area */
#slogan {
	font-size: 20px;
	font-weight: bold;
	color: #D1E0EF;
	text-align: right;
	padding: 0px 20px;
}
/* The location of the div containing the skin change drop menu  in the banner area */
#skin {
	position: absolute;
	right: 30px;
	top: 25px;
}
/* The location of the div containing the RSS link in the banner area */
#rss {
	position: absolute;
	right: 50px;
	top: 55px; 
}
 
/* the following defines your menu inside the banner div */
/* the box around the menu and aligning the text to right */
#menu A, #footermenu A { 
	color: #FFFFFF; 
	text-decoration: none; 
	font-weight: bold;
	width:100px; 
	height:20px; 
	position: relative;
	border: 1px solid #000;
	background: #800000;
	display: block;
	text-align: center;
}
#menu A:hover, #menu #current:hover, #footermenu A:hover, #footermenu #current:hover { 
	text-decoration: none;
	width: 120px;
	height: 28px;
	z-index: 200;
	background: #800000;
	color: #FFFFFF;
	line-height: 28px;
	margin-top: -4px;
	margin-left: -7px;
	border: 1px solid #000;
	overflow: hidden;
	position: relative;
}
#menu #current, #footermenu #current {
	color: #FFFFFF;
	text-decoration: none; 
	font-weight: bold;
	width:100px; 
	height:20px; 
	position: relative;
	border: 1px solid #000;
	background: #800000;
	display: block;
}
#menu UL, #footermenu UL { 
	padding: 0; 
	margin: 5px 0;
	list-style-type: none;
}
#menu LI, #menu #menu_current, #footermenu LI, #footermenu #menu_current {
	width:100px; 
	height: 20px; 
	float: right;
	margin-right: 5px;
}
 
#menu, #footermenu { 
	height: 32px;
	border: 1px solid #000;
	background: #D8D8D8;
	padding-right: 10px;
}
/* end menu setup */
 
 
#loginblock { 
	margin: 3px 0 0 0;
	padding: 3px 10px;
	border: 1px solid #000;
	background: #800000;	
	text-align: left;
}
#loginblock .textbox, #loginblock .checkbox { 
	font-size: 9px; 
	vertical-align: baseline;
}
#loginblock .button { 
	font-size: 8px; 
	padding: 0; 
	margin: 0; 
	font-weight: bold; 
	font-family: "Arial"; 
	vertical-align: text-bottom; 
}
#loginlinks {
	display: inline;
	margin: 0 1ex;
}
#loginlinks A {
	color: #ffffff;
}
 
/* the footer box at the bottom of the page */
#footer {
	border-top: 2px solid #000;
	background: #BDBDBD;
	color: #000000;
	clear: both;
	padding: 3px 0 1em 0;
}
 
#footertext {
	margin: 1em;
}
 
/* this is a carryover from 1.1.  Generally it is used around tables and table cells. */
.tblborder { 
	border: 1px solid #000;
	padding: 6px;
	border-collapse: collapse;
}
 
/* Main page surrounds the text between the header and the footer.  
For IE, height is set to 650 to force the footer down to the bottom of the page where the content is short.  
And the second declaration is for everyone else so that it will scroll if longer but be a minimum of 650px
*/
#mainpage {
	height: 550px;
	padding: 0 1em 1em;
}
html>body #mainpage { 
	height: auto;
	min-height: 550px;
}
 
#viewuser #mainpage {
	padding: 0;
}
 
/* Most pages use pagetitle to format the page's title */
#pagetitle { 
	font-size: 20px;
	color: #000000;
	padding: 5px;
	margin: 0 25% 1em;
	padding-left: 1em;
	border-bottom: 0px solid #BDBDBD;
	text-align: Center;
}
 
/* 
Where there's a list of alphabet links #alphabet controls their look. 
Just to make things simpler #pagelinks controls the look of the links 
at the bottom of multi-page results and will be set here too. 
Generally, they look alike.
*/
#alphabet, #pagelinks { 
	text-align: center; 
	font-size: 13px; 
	margin: 1em 0;
	line-height: 25px;
}
#alphabet A, #pagelinks A { 
	background: #800000; 
	border: 1px solid #000; 
	padding: 2px 4px; 
	margin: 0; 
	text-decoration: none; 
	color: #ffffff;
}
#alphabet A:hover, #pagelinks A:hover { 
	background: #800000; 
	border: 1px solid #000;
	padding: 2px 4px; 
	margin: 0; 
	text-decoration: none; 
	color: #ffffff;
}
#alphabet #currentletter, #pagelinks #currentpage { 
	background: #800000; 
	color: #ffffff; 
	border: 1px solid #000; 
	padding: 2px 4px; 
	margin: 0; 
	text-decoration: none;
	font-weight: bold; 
} 
.ellipses {
	vertical-align: sub;
	padding: 4px 5px 0px;
}
#plnext, #plprev { margin: 0 20px !important; }
 
/* End alphabet and page link declarations */
 
/* labels throughout the site in forms and in other places */
LABEL, .label {
	color: #000000;
	font-weight: bold;
}
 
/* The listings of stories etc. */
/* .sectionheader styles the headings "Stories" and "Series" */
.sectionheader {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	padding: 1ex;
}
 
/* The box around each individual story */
.listbox {
	margin: 1em 5%;
}
 
/* The title bar for each story box. */
.listbox .title {
	padding: 4px;
	color: #ffffff;
	border: 1px solid #000;
	background: #3B0B39;
}
.listbox .title A, .listbox .tail A {
	color: #ffffff;
}
.listbox .title .label, .listbox .tail .label, .listbox .tail .adminoptions .label { 
	color: #ffffff;
	font-weight: bold;
}
 
/* The content of the box...summary, categories, etc. */
.listbox .content {
	padding: 6px;
	background: #fff;
	border: 2px solid #000;
	margin: 0 5px;
        font-size: 0.9em; 
}
 
 
/* The tail info published date etc. on the last line */
.listbox .tail {
	padding: 3px 7px;
	color: #ffffff;
	border: 1px solid #000;
	background: #3B0B39;
}
 
.listbox .tail .adminoptions { display: inline; }
 
/*End story/series listings */
 
/* titleblock is used for the title information in series and challenges */
#titleblock {
	margin: 0 10%;
}
 
/* The pulldown jump menus on several pages. */
.jumpmenu {
	text-align: right;
	padding: 1ex;
}
 
/* On the story page, there's a jumpmenu at the bottom. It looks better centered, so this will replace the declaration above for that 
drop down list ONLY */
#pagelinks .jumpmenu {
	text-align: center;
}
 
/* This is used on series and challenges and other places where a response is solicited */
.respond { 
	text-align: center;
	padding: 6px;
}
 
.listbox .tail .respond {
	padding: 0;
	text-align: right;
}
 
/* The sort menu on the categories page */
#sortform { text-align: center; margin: 1em; }
 
 
/* On pages that don't use listings, the content is surrounded by a div labeled output */
#output { 
	padding: 10px;
}
 
#profilecontainer {
	background: #BDBDBD;
	padding-top: 1em;
}
 
/* User Profile stuff */
/* The top list of information */
#profile {
	margin: 0 10% 1em 10%;
	border: 1px solid #000;
	background: #FFF;
	padding: 1em;
}
/* The sort menu in the profile */
#sort {
	text-align: right;
	padding: 1ex 3em; 
 }
/* The following declarations control the tabs */
#tabs {
	margin: 0;
	padding: 0;
	background: #BDBDBD;
	margin-bottom: 1em;
}
#tabs UL {
	padding: 3px 0;
	margin: 0;
	border-bottom: 1px solid #000;
	font: bold 12px Verdana, sans-serif;
}
 
#tabs LI {
	list-style: none;
	margin: 0;
	display: inline;
}
 
#tabs LI A {
	padding: 3px 0.5em;
	margin-left: 3px;
	border: 1px solid #000;
	border-bottom: none;
	background: #3B0B39;
	text-decoration: none;
	color: #ffffff;
}
 
#tabs LI A:hover {
	color: #ffffff;
	background: #800000;
	border-color: #000;
}
 
#tabs #active A{
	background: #610B5E;
	border-bottom: 1px solid #610B5E;
	color: #ffffff;
}
 
/* This controls the look of the blocks on the index page.   */
 
/* Your welcome message */
#welcome {
	margin: 1em;
	border-top: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	padding: 10px;
	background: #BDBDBD;
	color: #000000;
	font-size: 120%;	
}
 
/* The box around the block */
.block { 
	margin: 1em;
	border: 1px solid #000;
}
 
/* The block's title */
.block .title {
	background: #3B0B39;
	color: #FFF;
	font-weight: bold;
	padding: 6px;
	border-bottom: 1px solid #000;
}
 
/* The block's content */
.block .content {
	padding: 6px;
	background: #FFF;
}
 
.featuredbox .title {
	background: #FFF;
	color: #610B5E;
	margin: 0% 1em;
        font-size: 0.9em; 
	border-bottom: 3px double #214263;
	text-align: left;
}
.featuredbox .content{
 font-size: 0.9em;
 
} 
 
.randombox .title {
	background: #FFF;
	color: #610B5E;
	margin: 0% 1em;
	border-bottom: 3px double #214263;
	text-align: left;
}
.recentbox .title {
	background: #FFF;
	color: #610B5E;
        font-size: 0.9em;
	margin: 0% 1em;
	border-bottom: 3px double #214263;
	text-align: left;
}
.recentbox .content{
 font-size: 0.9em;
 
}
.recentbox {
	margin-bottom: 1em;
}
 
#leftindex { 
	width: 270px;
	float: left;
}
html>body #leftindex {
	margin-top: -1em;
}
 
#rightindex {
	margin-left: 275px;
}
 
#info_left {
	text-align: right;
	font-weight: bold;
}
#info_right {
	text-align: right !important;
}
#newestmember {
	font-weight: bold;
}
 
 
/* The next link at the bottom of a multi-chapter story */
#next { 
	float: right;
}
/* The previous link at the bottom of a multi-chapter story */
#prev { 
	float: left;
}
 
#prev A, #next A{
	margin: 1ex;
	padding: 2px 4px;
	border: 1px solid #000;
	background: #3B0B39;
	color: #FFFFFF;
}
#prev A:hover, #next A:hover {
	text-decoration: none;
	background: #800000;
	color: #ffffff;
}
 
/* The story and chapter notes */
.notes { 
	margin: 1ex 20%;
	border: 1px solid #000;
	background: #FFF;
}
 
.notes .title {
	background: #3B0B39; 
	padding: 2px 4px;
}
.notes .title .label {
	color: #ffffff;
	font-weight: bold;
}
 
.noteinfo { 
	padding: 5px; 
}
 
/* End story and chapter notes */
 
.storyinfo {
	padding: 0 15px; 
}
 
#story { 
	padding: 1em;
}
 
.jumpmenu2 { text-align: center; }
 
.newstitle { 
	font-size: 110%; 
	margin: 0 40% 0 0;
	padding: 4px;
	border-bottom: 3px double #214263;
}
 
.newssig {
	text-align: right;
	margin: 0 0 1em 40%;
	border-bottom: 3px double #214363;
}
 
.comment { 
	padding: 7px;
	margin: 1ex 10%;
	background: #FFF;
	border: 1px solid #689ACC;
	border-left: 10px solid #689ACC;
	border-right: 10px solid #689ACC;
}
.commentsig {
	font-style: italic;
	margin-left: 20px;
}
 
.new { 
	color: #F33;
	font-style: italic;
	font-weight: bold;
}
 
.listbox .title .new { 
	color: #F33;
	padding: 2px 3px;
}
 
#titleblock {
	border: 1px solid #689ACC;
	border-left: 10px solid #000000;
	border-right: 10px solid #000000;
	background: #FFF;
	margin: 1em 10%;
	padding: 7px;
}
 
#titleinfo { text-align: center; }
 
#viewstory .listbox { border: 1px solid #000; background: #FFF; padding: 7px;}
#viewstory .listbox .content { border: 0; }
#viewstory .listbox .adminoptions { padding: 0 7px; margin: 0;}