Header Problem: PHPFusion 8 Support

Home
Search

Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.

Hello everyone,

I am having a problem with my header picture I have on my site. It seems that when the page is full screen (on my PCs resolution), it looks fine, but if you go to another res. or make the browser window larger or smaller, the image gets cut off. I have included 1 screen shots of my problem. The first of full screen on my PC, and the other is of the browser window half its size. Is there any type of coding I can do to fix this?? Please let me know ASAP, it is REALLY important.

Thank you very very much,

William

img214.imageshack.us/img214/6721/screen1nf.jpg

Uploaded with ImageShack.us

img713.imageshack.us/img713/714/screen2it.jpg

0 replies

Try on the themes site, them guys will know how to provide a solution.

0 replies

can you post the code you currently have for your header?

0 replies

This is the CSS code regarding the header, as I said and as you have seen in the screens, I need the pic to adjust according to the size of the screen.:

Code Download source

#header {
   height : 140px;
   color : #C9C9C9;
   background: #F16321 url(images/header2.gif);
   padding : 5px;
}

Edited by lunar21 on 08-10-2010 06:38, 14 y

0 replies

You cannot resize a background image. Take a smaller one.

0 replies

Is there any way to keep what i have but not make it a background??

0 replies

Quote

lunar21 wrote:
Is there any way.....

yea, change the width of your site to a fixed width, most common is to go with 960px.

By doing this your image wont be clipped when user resizes the browser to something smaller than 960px.

Edited by SimpleVision on 08-10-2010 09:22, 14 y

0 replies

Quote

SimpleVision wrote:
Quote
lunar21 wrote:
Is there any way.....

yea, change the width of your site to a fixed width, most common is to go with 960px.

By doing this your image wont be clipped when user resizes the browser to something smaller than 960px.

Sorry I am still a somewhat noobie, how do I change the width of my site to a fixed width?

0 replies

can you post your style.css and theme.php?

0 replies

Quote

SimpleVision wrote:
can you post your style.css and theme.php?

styles.css:

Code Download source

body {
   font : 11px Verdana, Arial, Sans, sans-serif;
   color : #eee;
    background:#000000 url('images/bg.jpg') no-repeat fixed center 50%;
}

a {
   text-decoration : none;
   color : #C9C9C9;
}

a:hover {
   text-decoration : underline;
   color : #C9C9C9;
}

a.side {
   text-decoration : none;
   color : #C9C9C9;
}

a:hover.side {
   text-decoration : underline;
   color : #C9C9C9;
}

#footer a {
   text-decoration : none;
   color : #C9C9C9;
}

#footer a:hover {
   text-decoration : underline;
   color : #C9C9C9;
}

.outer {
   width : 95%;
   border : 1px solid #000;
   margin-left : auto;
   margin-right : auto;
}
   
#container {
   height:100%;
   line-height : 1.5em;
   color : #C9C9C9;
   background : #000;
   padding : 2px;
}

#header {
   height : 140px;
   color : #C9C9C9;
   background: #F16321 url(images/header2.gif);
   padding : 5px;
}

#title {
   font : bold 30px "Trebuchet MS", verdana, arial, sans-serif;
   color : #fff;
   line-height: 18px;
   padding-top: 20px;
}

#title .subtitle {
   font : bold 15px "Trebuchet MS", verdana, arial, sans-serif;
   color : #C9C9C9;
}

#top-header {
   text-transform : uppercase;
   text-align : right;
   font : bold 85% helvetica, "Trebuchet MS", arial, sans-serif;
   color : #C9C9C9;
   background : #000;
   padding : 5px;
}

#top-header a {
   text-decoration : none;
   color : #C9C9C9;
   background : inherit;
}

#top-header a:hover {
   text-decoration : underline;
   color : #C9C9C9;
   background : inherit;
}

#sub-header{
   text-transform : uppercase;
   font : bold 85% helvetica, "Trebuchet MS", arial, sans-serif;
   color : #C9C9C9;
   background : #000;
   border-top : 1px solid #fff;
   border-bottom : 1px solid #fff;
   margin : 0;
   padding : 0;
}

#sub-header ul {
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
   width: 100%;
}

#sub-header a {
   background: #000;
   color: #C9C9C9;
   display: block;
   float: left;
   margin: 0;
   padding: 4px 6px 4px 6px;
   text-decoration: none;
}

#sub-header a:hover {
   background: #000;
   color: #C9C9C9;
   padding: 0.4em 0.6em 0.4em 0.6em;
}

#sub-header li {
   float: left;
   margin: 0;
   padding: 0;
}

#sub-header ul li.first-link .bullet {
   display: none;
}

#main-content {
   padding : 6px;
}

.side-both #main-content {margin: 0 190px 0 190px;}
.side-left #main-content {margin-left: 190px;}
.side-right #main-content {margin-right: 190px;}


#side-border-left {
   float : left;
   width : 180px;
   color : #333;
   padding : 6px;
}

#side-border-right {
   float : right;
   width : 180px;
   color : #222;
   padding : 6px;
}

.side-border {
   border : 1px solid #000;
}

.side-caption {
   font-size : 10px;
   color : #C9C9C9;
   background: #000;
   padding : 2px 5px 3px 5px;
}

.side-body {
   font-size : 10px;
   color : #C9C9C9;
   background: #F16321;
   background: #F16321 url(images/gradient.png) repeat-x;
   border-top : 1px solid #000;
   padding : 3px 5px 5px 5px;
}

.main-border {
   border : 1px solid #000;
   margin-bottom : 8px;
}

.main-caption {
   color : #eee;
   background : #111;
   padding : 5px;
}

.main-body {
   color : #C9C9C9;
   background: #F16321;
   background: #F16321 url(images/gradient.png) repeat-x;
   border-top : 1px solid #000;
   padding : 3px 5px 5px 5px;
}

#footer {
   font-size : 9px;
   color : #C9C9C9;
   background-image:url(images/footer.png);
   border-top : 1px solid #000;
   padding : 5px;
}

#main-container{
   width: 100%;
   overflow: auto;
}

form {
   margin : 0px;
}

hr {
   height : 2px;
   border-bottom : 1px solid #333;
   border-top : 1px solid #000;
}

hr.side-hr {
   height : 2px;
   border-bottom : 1px solid #333;
   border-top : 1px solid #000;
}

td {
   font-family : "trebuchet ms", Verdana, Tahoma, Arial, Sans-Serif;
   font-size : 11px;
}

pre {
   font-family : Verdana, Tahoma, Arial, Sans-Serif;
   font-size : 11px;
}

.alt {
   color : #C9C9C9;
}

.admin-message {
   text-align : center;
   background : #111;
   border : 1px solid #333;
   padding : 3px 4px 5px 4px;
   margin-bottom : 5px;
}

.button {
   font : 11px "Trebuchet MS", verdana, arial, sans-serif;
   color : #C9C9C9;
   background: #0066bb url(images/menu.png) repeat-x;
   border : 1px solid #000;
   margin-top : 2px;
}

.bbcode {
   font-family : "trebuchet ms", Tahoma, Arial, Verdana, Sans-Serif;
   font-size : 11px;
   background : #111;
   border : 1px solid #333;
   margin-top : 2px;
}

.textbox {
   font-family : "trebuchet ms", Verdana, Tahoma, Arial, Sans-Serif;
   font-size : 11px;
   color : #C9C9C9;
   background : #111;
   border : 1px solid #333;
   padding : 3px;
}

.news-category {
   border: 0;
   margin: 2px 10px 0 0;
   float: left;
}

.news-footer {
   text-align: center;
   font-size : 10px;
   background : #111;
   border : 1px solid #333;
   margin : 8px 0 2px 0;
   padding : 0.3em;
}

.tbl-border {
   border : 1px solid #333;
}

.tbl {
   font-size : 11px;
   padding : 4px;
}

.tbl1 {
   font-size : 11px;
   background : #222;
   padding : 4px;
}

.tbl2 {
   font-size : 11px;
   background : #111;
   padding : 4px;
}

.forum-caption {
   font-size : 11px;
   color : #eee;
   background : #000;
   padding : 2px 4px 3px;
}

.quote {
   color : #C9C9C9;
   background : #111;
   padding : 2px;
   margin : 0 20px;
   border : 1px solid #333;
}

.poll {
   height : 12px;
   border : 1px solid #000;
}

.comment-name {
   color : #C9C9C9;
}

.shoutboxname {
   color : #C9C9C9;
}

.shoutbox {
   color : #ddd;
}

.shoutboxdate {
   font-size : 9px;
   color : #888;
}

.small {
   font-size : 10px;
   font-weight : normal;
}

.small2 {
   font-size : 10px;
   font-weight : normal;
   color : #888;
}

.side-small {
   font-size : 10px;
}

.side-label {
   color : #C9C9C9;
   background : #111;
   padding : 2px;
}

#navigation {
   line-height : 2em;
}

#navigation h2 {
   margin : 10px 0 10px 0;
   font : normal 11px verdana, arial, tahoma, sans-serif;
   color : #C9C9C9;
   background : inherit;
}
   
#navigation ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}

#navigation li {
   margin : 0 0 0.5em 0;
}

#navigation a {
   display : block;
   font-size : 11px;
   color : #C9C9C9;
   background : #111;
   padding : 0.1em 0.8em;
   border : 1px solid #333;
   text-decoration : none;
}

#navigation a:hover {
   background: #0066bb url(images/menu.png) repeat-x;
   color : #ddd;
}

/* Page Navigation */

.pagenav {
   padding: 0.4em;
}

.pagenav span {
   background : #0066bb;
   border: 1px solid #000;
   padding: 0.2em 0.4em 0.2em 0.4em;
   margin: 0.2em;
}

.pagenav a {
   border: 1px solid #000;
   padding: 0.2em 0.4em 0.2em 0.4em;
   margin: 0.2em;
   text-decoration: none;
   color : #0099cc;
   background : #222;
}

.pagenav a:hover {
   margin: 0.2em;
   text-decoration: none;
   background : #0066bb;
   color : #ddd;
}

/*Helpers*/
.center {margin: 0 auto;}
.content_center {text-align: center;}
.flleft {float: left !important;}
.flright {float: right !important;}
.clear {clear: both;}


/*IE Fixes*/
* html #main-content {
   height: 1%;
   width: auto;
}
.clearfix:after {
   content:".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
.floatfix {overflow:hidden;}
* html .floatfix {width:100%;}
.center, *[align="center"] {margin: 0 auto;}

theme.php:

Code Download source

<?php
if (!defined("IN_FUSION")) { header("Location: ../../index.php"); exit; }
require_once INCLUDES."theme_functions_include.php";

define("THEME_WIDTH", "100%");
define("THEME_BULLET", "&middot;");

function render_page($license=false) {
   
   global $settings, $locale, $main_style, $userdata, $aidlink;
   
   echo "<div class='outer'><div id='top-header'>\n";
   if (iMEMBER) {
      echo "<a href='".BASEDIR."edit_profile.php'>".$locale['global_120']."</a>\n";
      echo "&middot; <a href='".BASEDIR."messages.php'>".$locale['global_121']."</a>\n";
      echo "&middot; <a href='".BASEDIR."members.php'>".$locale['global_122']."</a>\n";
      if (iADMIN && (iUSER_RIGHTS != "" || iUSER_RIGHTS != "C")) {
         echo "&middot; <a href='".ADMIN."index.php".$aidlink."'>".$locale['global_123']."</a>\n";
      }
      echo "&middot; <a href='".BASEDIR."setuser.php?logout=yes'>".$locale['global_124']."</a>\n";
   } else {
      echo "<a href='".BASEDIR."login.php'>Login</a>\n";
      if ($settings['enable_registration']) {
         echo "&middot; <a href='".BASEDIR."register.php'>Register</a>\n";
      }
   }
   echo "</div>\n";
   
   echo "<div id='header' class='clearfix'>\n";
   echo "<div style='margin:35px 10px 0 10px'>".showbanners()."</div>\n";
   echo "</div>\n";
   
   echo "<div id='sub-header' class='clearfix'>\n";
   echo "<div class='flleft'>".showsublinks(" ")."</div>\n";
   echo "<div class='flright' style='text-align:right;padding:0.4em'>".showsubdate()."</div>\n";
   echo "<div class='clear'></div>\n";
   echo "</div>\n";
   
   echo "<div id='container' class='clearfix $main_style'>\n";
   if (LEFT) { echo "<div id='side-border-left'>".LEFT."</div>\n"; }
   if (RIGHT) { echo "<div id='side-border-right'>".RIGHT."</div>\n"; }
   echo "<div id='main-content'><div id='main-container'>".U_CENTER.CONTENT.L_CENTER."</div></div>\n";
   echo "</div>\n";
      
   echo "<div class='clear'></div>\n";
   
   echo "<div id='footer'>\n";
   echo "<div class='center' style='text-align:right;width:50%'>".stripslashes($settings['footer'])."</div>\n";
   echo "<div class='clear'><br /><br /></div>\n";
   echo "<div class='clear'></div>\n";
   echo "</div></div>\n";
}

function render_news($subject, $news, $info) {

   echo "<div class='main-border'>\n";
   echo "<div class='main-caption'>".$subject."</div>\n";
   echo "<div class='main-body'>".$news."\n";
   echo "<div class='news-footer'>\n";
   echo newsposter($info,"&middot;").newsopts($info,"&middot;").itemoptions("N",$info['news_id']);
   echo "</div>\n</div>\n</div>\n";

}

function render_article($subject, $article, $info) {

   echo "<div class='main-caption'>$subject</div>\n";
   echo "<div class='main-body'>".($info['article_breaks'] == "y" ? nl2br($article) : $article)."</div>\n";
   echo "<div class='news-footer'>\n";
   echo articleposter($info,"&middot;").articleopts($info,"&middot;").itemoptions("A",$info['article_id']);
   echo "</div>\n";

}

function opentable($title) {

   echo "<div class='main-border'>\n";
   echo "<div class='main-caption'>".$title."</div>\n";
   echo "<div class='main-body'>\n";

}

function closetable() {

   echo "</div>\n</div>\n";

}

function openside($title, $collapse = false, $state = "on") {
   
   global $panel_collapse; $panel_collapse = $collapse;


   echo "<div class='side-border'>\n";
   if ($collapse == true) {
      $boxname = str_replace(" ", "", $title);
      echo "<div class='side-caption' style='float:right;margin-top:6px;'>".panelbutton($state,$boxname)."</div>\n";
   }
   echo "<div class='side-caption'>".$title."</div>\n";
   echo "<div class='side-body floatfix'>\n";
   if ($collapse == true) { echo panelstate($state, $boxname); }

}

function closeside($collapse = false) {

   global $panel_collapse;

   if ($panel_collapse == true) { echo "</div>\n"; }
   echo "</div>\n</div>\n";
   echo "<br />";
}
?>

0 replies

in the style.css file replace

Code Download source

.outer {
   width : 95%;

with

Code Download source

.outer {
   width : 960px;

Your image also needs to be 960px pixels wide.

0 replies

Quote

SimpleVision wrote:
in the style.css file replace
Code Download source
.outer {
   width : 95%;
with
Code Download source
.outer {
   width : 960px;
Your image also needs to be 960px pixels wide.

Ok well that fixed the Issue with the width, but now the height is messed up (look below the red line, it starts to repeat itself). In both high and low res., it turns up like the image below. How do I fix this?

img156.imageshack.us/img156/4774/capturequx.jpg

EDIT: I found the problem, I had a fixed height. Once I got rid of that and resized my picture, everything was just fine :D

Edited by lunar21 on 08-10-2010 11:06, 14 y

0 replies

Category Forum

System Administration - 8

Labels

None yet

Statistics

Views 0 views
Posts 11 posts
Votes 0 votes
Topic users 5 members

5 participants

Notifications

Track thread

You are not receiving notifications from this thread.

Header Problem

11 posts

PHPFusion

Resources

Community

Development