Navigation TOP of the banner
4 posters
Page 1 of 1
Navigation TOP of the banner
Hello anybody could help me on how to put my navigation to the of my banner? I'm using PunBB.
here's my CSS
here's my CSS
- Spoiler:
- body {
background-color: #296fa5;
background-image: url('https://i.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('https://2img.net/i/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;
}
Re: Navigation TOP of the banner
do you mean how to put the code ?
Stephen-- Hyperactive
- Posts : 2542
Reputation : 326
Language :
Re: Navigation TOP of the banner
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.
Step 2.
Then the whole forum will go up. To lower it then find this in your CSS and replace XY.
And your navigations will be 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;
}
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
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Navigation TOP of the banner
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.That will move navigations up.
- Code:
#pun-navlinks ul {
margin-top: -XYpx;
}
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.
Re: Navigation TOP of the banner
Why not from the templates
ACP - Display - Templates - General - Overall-header:
Find + Cut:
Edit: Sorry, you want it above the banner or on it? :=)
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>
- Code:
<div id="pun-intro" class="clearfix">
Edit: Sorry, you want it above the banner or on it? :=)
Re: Navigation TOP of the banner
Gangstar15 wrote:Why not from the templates
ACP - Display - Templates - General - Overall-header:
Find + Cut:Then paste it above:
- Code:
<div id="pun-head">
<div id="pun-navlinks">
<ul class="clearfix">
<li>{GENERATED_NAV_BAR}</li>
</ul>
</div>
</div>
- 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.
Similar topics
» Navigation on banner
» Navigation on top of banner
» How to move navigation bar next to banner ?
» [Abuse] A member copy my forum (banner, mini-banner, ecc.)
» Blue line in banner and Navigation Bar
» Navigation on top of banner
» How to move navigation bar next to banner ?
» [Abuse] A member copy my forum (banner, mini-banner, ecc.)
» Blue line in banner and Navigation Bar
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum