Simple Machines Community Forum

General Community => Scripting Help => Aiheen aloitti: L.G.S - maaliskuu 01, 2007, 01:46:06 IP

Otsikko: Moving my menu
Kirjoitti: L.G.S - maaliskuu 01, 2007, 01:46:06 IP
html, body {
background-color:#e1f1ff;
margin:0;
padding:0;
font-family:  Tahoma, Verdana, "Trebuchet MS", Arial, Helvetica , sans-serif;
font-size:11px;

color:#00000;
}
#wrap {
margin:0 auto;
background:#e1f1ff url('images/bg_repeat.jpg') repeat-y top center;
width:998px;
padding:0;

}
a img { border:none;}
a, a:link, a:visited, a:active {
text-decoration:none;
        color:#000000;
}
a:hover {
text-decoration:underline;
}
#header {
margin:0 auto;
height:208px;
background:#000000 url('images/header_repeat.gif') repeat-x top center;
}

#innerheader {
height:150px;
background:#FFFFFF url('images/header_image.gif') no-repeat top left;
width:998px;
padding-top:57px;
}
#innerheader h1 {
text-indent:-9999em;
height:1px;
overflow:hidden;
font-size:1px;
margin:0;
padding:0;
}

#innerheader ul {
list-style:none;
margin:0;
padding:0;
}
#innerheader li {
background:#000000 url('images/nav_bg.gif') repeat-x top center;
border:1px solid #495e6e;
border-top:none;
border-bottom:none;
display:block;
float:left;
height:25px;
padding:8px 45px 0 10px;
color:#FFFFFF;
font-weight:bold;
font-size:10px;
text-transform:uppercase;
}

#innerheader li a,
#innerheader li a:link,
#innerheader li a:visited,
#innerheader li a:active {
color:#FFFFFF;
text-decoration:none;
}
#innerheader li a:hover {
text-decoration:underline;
}

#content {
width:1000px;
margin:0 auto;

}
.side_column, #middle {
width:229px;
float:left;
padding:0;
margin:0;

}
.side_column h1 {
width:166px;
height:32px;
background:#d0dfec url('images/side_h1.gif') no-repeat top center;
margin:0;
padding:13px 0 0 64px;
font-size:10px;
text-transform:uppercase;
color:#bfe3fb;
clear:both;
}
.side_column h1 small {
color:#FFFFFF;

}
.side_column ul {
list-style:none;
margin:0;
padding:0;

}
.side_column li {
margin:0;
padding:3px 9px 3px 20px;
width:200px;
border-bottom:1px solid #cedce9;
border-top: 1px solid #FFFFFF;

background-image: url('images/list_bg.gif');
background-position:center left;
background-repeat: no-repeat;
}
.side_column form {
margin:7px;
color:#8ea8c2;
font-size:11px;
font-weight:bold;
clear:left;
}
.side_column input.text {
background-color:#FFFFFF;
font-family: Tahoma, Verdana, "Trebuchet MS", Arial,  Helvetica, sans-serif;
font-size:11px;
color:#8ea8c2;
font-weight:bold;
padding:4px;
width:206px;
margin:5px 0;
border:1px solid #c0c4c7;

}
form input.check {
vertical-align:middle;
}
form label {float:left;}
form input.button {
float:right;
margin-bottom:5px;
}
.side_column #roster {text-align:center; margin-bottom:5px;}
#roster a img {border: 2px solid #a5cada; margin:3px;}
#roster #roster_data {
width:110px;
padding:3px;
height:14px;
margin:0px 0 0 8px;
background-color:#a5cada;
color:#3e3e3e;
font-weight:bold;
float:left;
}
#right h1 {
background-position:top left;
}

#middle {
width:534px;
margin:0 3px;


}

#middle #division_select {
width:534px;
height:114px;
background:#FFFFFF url('images/division_select_bg.gif') no-repeat top center;
margin:0 auto;
font-size:1em;
text-align:center;
padding:47px 0 0 0;
}
#division_select h1 {
display:none;
}

#middle #breadcrum {
background-color:#c2d3e3;
width:auto;
margin:1px 0;
padding:5px 10px;
font-weight:bold;
color:#85a7c7;
}
#middle h1 {
color:#aecbe6;
font-size:18px;
font-weight:normal;
margin:10px 0 0 20px;

text-transform:uppercase;
font-family: Helvetica , Tahoma, Verdana, "Trebuchet MS", Arial,  sans-serif;
}
#middle .content {
width:493px;
margin:10px auto;
padding:5px;
border-bottom:5px solid #02264a;
background-color:#FFFFFF;
}
#middle .content h2 {
margin:0;
background-color:#c0c9d2;
color:#02264a;
height:20px;
padding:5px 0 0 10px;
width:auto;
font-size:11px;
}
#footer {
clear:both;
height:38px;
padding-top:20px;
background:#000000 url('images/footer_repeat.gif') repeat-x top center;
text-align:center;
color:#FFFFFF;
font-weight:bold;
}
#footer a:link
{
color: #FFFFFF;
text-decoration: none;
}
#footer a:visited
{
color: #FFFFFF;
text-decoration: none;
}
#footer a:hover
{
color: #b2b2b2;
text-decoration: underline;
}


That's my style.css ^^^^ and here is my link: http://www.ruthlessintent.com/web/

How can I get it so that the menu (home, forums etc) is at the top of the webpage (where the blue bar is at the top)?

I tried changing the CSS code but for some reason if I change the height too much it goes underneath the blue bar and not above it.
Otsikko: Re: Moving my menu
Kirjoitti: mcchristie - maaliskuu 16, 2007, 04:10:47 IP
looks like it could be the padding-top in the #innerheader div

57px ?

i'd scrap that

position the innerheader within the main header using either padding in the main header, or my preference would be a margin for the innerheader