The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Navigation TOP of the banner

View previous topic View next topic Go down

Navigation TOP of the banner

Post by admerbakud on May 19th 2011, 10:04 am

Hello anybody could help me on how to put my navigation to the of my banner? I'm using PunBB.

here's my CSS

Spoiler:
body {
background-color: #296fa5;
background-image: url('https://i28.servimg.com/u/f28/14/48/68/41/bg211.jpg');
background-repeat: repeat-repeat;
background-position: center;
background-attachment: fixed;
color: #024f75;
font-size: 12px;
font-family: tahoma, sans-serif;
}

/*Pun Wrap*/

.pun {
width: 77%;
background: #ffffff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
margin-top: 15px;
margin-bottom: 15px;
border: 1.5px solid #dee3e7;

min-width: 708px;
line-height: 130%;
}
.pun div, .pun td, .sig-line {
border-color: #6D86B7;
color: #296fa5;
}
.pun img, .pun fieldset {
border: none;
}
.pun a:link {
color: #296fa5;
}
.pun a:visited {
color: #296fa5;
}
.pun a:hover {
color: #296fa5;
}
.pun a:active {
color: #296fa5;
}
.pun a:focus {
color: #296fa5;
}
.pun h2, .pun h3, .pun th, .pun input, .pun select {
font: normal 1em tahoma, sans-serif;
}




/* logo*/
#pun-intro {
margin: 0;
padding: 1.5em 1em 1em 1em;
border-bottom: 1px solid #024f75;
background-color: #024f75;
background-image: url(http://vwclubsplit.webs.com/facebook/navig_bg.png);
background-repeat: repeat repeat;
background-position: center;
text-align: center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #6D86B7;
padding: 10px;
min-height: 150px;
}

/*Navigation*/


#pun-head #pun-navlinks {
padding: 0.5em 1.1em 0.6em 1.1em;
background-color: transparent;
border-color: #6D86B7;
border: 1.5px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#pun-navlinks ul {
list-style: bold;
text-align: center;
}
#pun-navlinks li {
display: inline;
font-size: 1.15em;
}
#pun-navlinks li a {
margin: 0 0.8em 0 0;
}
#pun-navlinks a, #pun-navlinks a:visited {

/*color: #fff;
*/
text-decoration: none;
}
#pun-navlinks a:hover, #pun-navlinks a:active, #pun-navlinks a:focus {
text-decoration: underline;

/*color: #fff;
*/
}



#pun-visit,.main-box {
padding: 0.6em 1em;
background-color: #fff;
margin: 0 0 1em 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #6D86B7;
padding: 10px;
font-size: 0.8em;
}
#pun-visit ul,.main-box ul {
float: center;
width: 90%;
text-align: center;
list-style-type: none;
}
.main-box ul {
float: left;
width: auto;
}
#pun-visit li,.main-box li {
margin-left: 0.0em;
white-space: nowrap;
float: center;
}
.pun-crumbs {
padding: 0.2em 1em;
margin: 0 1px 1em 1px;
}
.pun-crumbs p {
margin: 0;
line-height: 1.0;
font-size: 0.9em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #2688c2;
padding: 10px;
font-style: bold;
}
.pun-crumbs a {
text-decoration: none;
}






/* Announcement Box*/

#pun-announcement {
border-style: solid;
border-width: 1px;
padding: 1em;
background-color: #ffffff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
.pun .main .main-content.message {
background-color: #ffffff;
}
.pun .main .main-content p.message {
margin: 1.7em;
padding: 1em;
background-color: #fff;
border: 1px solid #6D86B7;
}

/* User information general layout-------------------------------------------------------------*/
.pun .user {
position: relative;
padding-top: 1.6em;
overflow: hidden;
width: 15em;
white-space: normal;
display: inline;
}
.pun .post .user {
float: left;
margin-left: -16em;
margin-top: -1.8em;
}
.pun .user .user-ident {
padding: 0 0 0.7em 0;
font-size: 12px;
}
.pun .user-ident .username {
font-size: 1.2em;
font-weight: bold;
display: block;
position: absolute;
top: 0;
text-decoration: none;
color: #296fa5;
}
* html .pun .user-ident .username {
padding: 0 0 0.25em;
}
*+ html .pun .user-ident .username {
padding: 0 0 0.3em;
}
.pun .user-ident .username a{
text-decoration:none}
.pun .user-ident .user-basic-info {
font-weight: bold;
}
.pun .user .user-info {
color: #6D86B7;
line-height: 1.8em;
}
.postfoot {
margin-left: -17em;
text-align: right;
clear: both;
position: relative;
border-top: 1px solid #dee3e7;
padding: 0.5em 1em;
}
.postfodiv.post-options img{
cursor: pointer;
}
.pun .postfoot .user-contact {
float: left;
width: 15em;
text-align: left;
}
* html .pun .postfoot {
margin-left: 0;
}
.pun .sig-content {
padding-top: 0.8emmargin-left: -17em;
clear:both;
position: relative;
padding: 0.5em 1em;
}
.pun .p-hidden {
text-align:center;
padding: 15px 0px;
border-bottom: 1px solid #6D86B7;
}
.pun .sig-content .sig-line {
margin: 0 auto;
border-top-style: solid;
border-top-width: 1px;
border-color: #dee3e7;
display: block;
padding-bottom: 0.5em;
width: 250px;
}

/* Table-------------------------------------------------------------*/
.pun table.table {
width: 100%;
table-layout: fixed;
empty-cells: show;
border-collapse: collapse;
}
.pun .frm .frm-form table {
border: 1px solid #dddddd;
border-top: 1px solid #1F537B;
border-color: #bbb;
}
.pun table.table th {
padding: 0.5em 0;
border-style: none;
border-color: #;
background-color: #fbfbfb;
color: #ffffff;
}
.pun table.table td {
padding: 0.6em 0 0.7em;
border-bottom: 1px solid #dddddd;
border-left: 2px solid #dddddd;
line-height: 130%;
border-right: 2px solid #dddddd;
background-color: #fbfbfb;

}

.pun .main table td.tc2, .pun .main table td.tc3 {
background-color: #fbfbfb;
}
.pun table.table td table td {
border: none;
padding: 0px;
}
.pun table .tcl {
width: 50%;
overflow: hidden;
text-align: left;
}
.pun table.table th.tcl {
padding-left: 0.5em;
}
.pun .frm .frm-form table .tc2 {
text-align: left;
padding-left: 0.5em;
}
.pun .table .tc2, .pun .table .tc3 {
width: 10%;
text-align: center;
}
.pun .frm .frm-form table .tc4 {
text-align: center;
width: 5%;
}
.pun table .tcr {
width: 30%;
overflow: hidden;
text-align: left;
padding: 0 0 0 0.5em !important;
}
.pun table th.tcl,.pun table th.tc2,.pun table th.tc3,.pun table th.tc4,.pun table th.tcr {
overflow: hidden;
}
.pun table .report {
width: 9%;
}
.pun .main table.table td.report {
background-color: #fbfbfb;
}
.pun table .tdtopics {
padding-left: 42px;
}
.pun table .tdtopics .status {
margin-left: -32px;
}
.pun table .tdtopics img, .pun .posthead img {
vertical-align: middle;
}
table .tcl.memberlist {
width: 25%;
}
.pun tbody.statused td.tcl {
padding-left: 3.4em;
}
.pun tbody.statused span.status {
position: absolute;
}
.pun table td.tcl {
border-left-style: none;
border-left-width: 0;
vertical-align: top;
height: 42px;
padding-left: 0.5em;
min-height: 24px;
}
pun table td.tcl .height-giver {
min-height: 42px;
visibility: hidden;
width: 1px;
}
td.avatar-mini a {
text-decoration: none;
}
td.avatar-mini a span {
text-decoration: underline;
}
td.avatar-mini img {
background-color: #fff;
border: 1px solid #1f537b;
vertical-align: middle;
width: 38px;
height: 38px;
}
* html .pun table {
position: relative;
}
* html .pun table td.tcl {
position: relative;
}
.pun table td.tcl h2 {
font-weight: bold;
}
.pun .main table.table td.td-title {
background-color: #f4f9fd;
}
.pun .main table.table th.name {
padding-left: 0.5em;
}
.pun .sticky-separator {
border-top: 5px double #dddddd !important;
}
.mod-text {
font-weight: bold;
}
h2.topic-title {
display: inline;
}
.hierarchy {
display: inline;
text-transform: none;
border: none;
font-size: 10px;
font-weight: bold !important;
}

/* Stats-------------------------------------------------------------*/
#stats {
padding: 0.6em 1em;
line-height: 150%;
background-color: #fbfbfb;
font-size: 10px;

}
td.stat-bar {
padding: 0 10px !important;
}
td.stat-bar div {
white-space: nowrap;
}
#onlinelist {
border-top: 0px dashed #ccc;
padding: 2.5em 1em;
background-color: transparent;
font-size: 11px;
font-type: tahoma, sans serif;
}
#onlinelist img {
float: left;
}
#onlinelist h3 {
float: left;
margin-right: 0.5em;
line-height: 150%;
}
#onlinelist p {
line-height: 150%;
}
#onlinechat {
border-top: 0px dashed #ccc;
padding: 0.6em 1em;
background-color: #fbfbfb;
}


/* Text editor (quick reply)-------------------------------------------------------------*/
.pun .main-head a.exthelp,.pun .main-head a.exthelp:link,.pun .main-head a.exthelp:visited {
padding-left: 20px;
background-repeat: no-repeat;
background-position: left;
background-image: url('http://illiweb.com/fa/punbb/helpdark.png');
}
.pun .frm-form {
background: #fbfbfb;
border: none;
}
.pun div.frm-form {
margin: 1.7em;
}
.dd-textarea {
width: 72%;
}

/* Footer*/
#pun-about {
border-style: solid;
border-width: 0px;
border-color: #;
text-align: right;
line-height: 70%;
padding: 0.8em 1em;
background-color: #;
font-size: 0.8em;
opacity: 0.1;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
margin-top: 15px;
margin-bottom: 15px;
border: 1.5px solid #dee3e7;

}
#pun-about:hover {
opacity: 1;

}
#pun-about ul {
list-style-type: none;
width: 700px;
}
#pun-about ul li {
display: inline;
}
#pun-about ul li a {
font-weight: bold;
}
#pun-about #qjump {
display: none;
width: 1px;
float: left;
text-align: left;
}
#pun-about #qjump label {
font-weight: bold;
}
#pun-about #qjump fieldset {
border: none;
}
#pun-foot {
clear: both;
}
#pun-foot h3 {
margin-top: 20px;
}
#pun-foot #pun-about ul li strong {
font-weight: normal;
}
td.fav-icon img {
float: left;
margin: 0 1em 2em 0.5em;
}

admerbakud
Forumember

Male Posts : 70
Reputation : 0
Language : English

http://unskilled.biz

Back to top Go down

Re: Navigation TOP of the banner

Post by Darkel on May 19th 2011, 11:21 am

do you mean how to put the code ?

Darkel
Hyperactive

Male Posts : 2186
Reputation : 272
Language : English, Tagalog
Location : Philippines

Back to top Go down

Re: Navigation TOP of the banner

Post by Nera. on May 19th 2011, 11:46 am

For punBB do this to move the navigations up.
Step 1.
Find this in your CSS and replace XY. Add margin-top if you don't have it.
Code:
#pun-navlinks ul { 
margin-top: -XYpx;
}
That will move navigations up.

Step 2.
Then the whole forum will go up. To lower it then find this in your CSS and replace XY.
Code:
#pun-head #pun-navlinks {
height: XYpx;
}

And your navigations will be up.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Re: Navigation TOP of the banner

Post by admerbakud on May 19th 2011, 1:54 pm

@Nera. wrote:For punBB do this to move the navigations up.
Step 1.
Find this in your CSS and replace XY. Add margin-top if you don't have it.
Code:
#pun-navlinks ul { 
margin-top: -XYpx;
}
That will move navigations up.

Step 2.
Then the whole forum will go up. To lower it then find this in your CSS and replace XY.
Code:
#pun-head #pun-navlinks {
height: XYpx;
}

And your navigations will be up.



I tried to use the code, but it doesn't effect.


admerbakud
Forumember

Male Posts : 70
Reputation : 0
Language : English

http://unskilled.biz

Back to top Go down

Re: Navigation TOP of the banner

Post by Gangstar15 on May 19th 2011, 2:07 pm

Why not from the templates Smile
ACP - Display - Templates - General - Overall-header:
Find + Cut:
Code:
               <div id="pun-head">
                  <div id="pun-navlinks">
                     <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                     </ul>
                  </div>
               </div>
Then paste it above:
Code:
<div id="pun-intro" class="clearfix">

Edit: Sorry, you want it above the banner or on it? :=)

Gangstar15
Forumember

Female Posts : 392
Reputation : 163

http://www.designdrops.net/

Back to top Go down

Re: Navigation TOP of the banner

Post by admerbakud on May 20th 2011, 8:44 am

@Gangstar15 wrote:Why not from the templates Smile
ACP - Display - Templates - General - Overall-header:
Find + Cut:
Code:
               <div id="pun-head">
                  <div id="pun-navlinks">
                     <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                     </ul>
                  </div>
               </div>
Then paste it above:
Code:
<div id="pun-intro" class="clearfix">

Edit: Sorry, you want it above the banner or on it? :=)


I tried it, as you could see on the Screen this is my forum shows.


admerbakud
Forumember

Male Posts : 70
Reputation : 0
Language : English

http://unskilled.biz

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum