WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Navigation TOP of the banner on Thu May 19, 2011 1:35 pm

lordadmer


Registered Member
Registered Member
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('http://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;
}

2 Re: Navigation TOP of the banner on Thu May 19, 2011 9:10 pm

Nera


WebArtz Technician
WebArtz Technician
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.


_________________

3 Re: Navigation TOP of the banner on Sat May 21, 2011 10:42 am

lordadmer


Registered Member
Registered Member
I tried it as you could see. on screen shot

4 Re: Navigation TOP of the banner on Tue May 24, 2011 3:20 pm

Nera


WebArtz Technician
WebArtz Technician
How many pixels have you added?
If you want I can do it for you.


_________________

View previous topic View next topic Back to top  Message [Page 1 of 1]

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