Maximumbreedte banner

Hans Kamp · Bericht door **Hans Kamp** » 03 jan 2008, 10:24

Ik probeer al enige tijd de banner van mijn forum (http://www.wowforum.nl) aan te passen. De banner is 1250 pixels breed. Als mijn website wordt bekeken op een scherm van ongeveer 1650 pixels breed, wordt de banner vervormd en krijg je onder het World of Warcraft-logo een lelijk grijs-wit gedeelte dat niet te bedoeling is. Mijn eigen beeldscherm is smaller dus ik probeer de maximumbreedte op 1000 pixels te krijgen.

Logischerwijzer probeer ik overall_header.html aan te passen. Aangezien het een eigen stijl is, volgt hieronder de code:

Spoiler: bekijk

Code: Selecteer alles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2002-2006 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />

<script type="text/javascript">
// <![CDATA[
<!-- IF S_USER_PM_POPUP -->
	if ({S_NEW_PM})
	{
		popup('{UA_POPUP_PM}', 400, 225, '_phpbbprivmsg');
	}
<!-- ENDIF -->

function popup(url, width, height, name)
{
	if (!name)
	{
		name = '_popup';
	}

	window.open(url.replace(/&/g, '&'), name, 'height=' + height + ',resizable=yes,scrollbars=yes,width=' + width);
	return false;
}

function jumpto()
{
	var page = prompt('{LA_JUMP_PAGE}:', '{ON_PAGE}');
	var perpage = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';

	if (page !== null && !isNaN(page) && page > 0)
	{
		document.location.href = base_url.replace(/&/g, '&') + '&start=' + ((page - 1) * perpage);
	}
}

/**
* Find a member
*/
function find_username(url)
{
	popup(url, 760, 570, '_usersearch');
	return false;
}

/**
* Mark/unmark checklist
* id = ID of parent container, name = name prefix, state = state [true/false]
*/
function marklist(id, name, state)
{
	var parent = document.getElementById(id);
	if (!parent)
	{
		eval('parent = document.' + id);
	}

	if (!parent)
	{
		return;
	}

	var rb = parent.getElementsByTagName('input');
	
	for (var r = 0; r < rb.length; r++)
	{
		if (rb[r].name.substr(0, name.length) == name)
		{
			rb[r].checked = state;
		}
	}
}

<!-- IF ._file -->

	/**
	* Play quicktime file by determining it's width/height
	* from the displayed rectangle area
	*
	* Only defined if there is a file block present.
	*/
	function play_qt_file(obj)
	{
		var rectangle = obj.GetRectangle();

		if (rectangle)
		{
			rectangle = rectangle.split(',')
			var x1 = parseInt(rectangle[0]);
			var x2 = parseInt(rectangle[2]);
			var y1 = parseInt(rectangle[1]);
			var y2 = parseInt(rectangle[3]);

			var width = (x1 < 0) ? (x1 * -1) + x2 : x2 - x1;
			var height = (y1 < 0) ? (y1 * -1) + y2 : y2 - y1;
		}
		else
		{
			var width = 200;
			var height = 0;
		}

		obj.width = width;
		obj.height = height + 16;

		obj.SetControllerVisible(true);

		obj.Play();
	}
<!-- ENDIF -->

// ]]>
</script>

<script src="http://i.thottbot.com/power.js"></script>

</head>
<body class="{S_CONTENT_DIRECTION}">

<a name="top"></a>

<!--<div id="wrapheader">-->
<div id="wrapheader" align="center">

	<div id="logodesc">
		<table width="100%" cellspacing="0">
		<tr>
<!--			<td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>-->
<!--			<td width="100%" align="center" valign="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>-->
			<td width="100%" align="center" valign="center<span class="gen">{SITE_DESCRIPTION}</span></td>
			<td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
		</tr>
		<tr>
			<td colspan="2" width="100%" align="center"><h1>{SITENAME}</h1></td>
		</tr>
		</table>
	</div>

	<div id="menubar">
		<table width="100%" cellspacing="0">
		<tr>
			<td class="genmed">
				<!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="*" /> {L_LOGIN_LOGOUT}</a>&nbsp;<!-- ENDIF -->
				<!-- IF U_RESTORE_PERMISSIONS --> &nbsp;<a href="{U_RESTORE_PERMISSIONS}"><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="*" /> {L_RESTORE_PERMISSIONS}</a><!-- ENDIF -->
				<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --> &nbsp;<span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF -->
				<!-- IF not S_IS_BOT -->
					<!-- IF S_USER_LOGGED_IN -->
						<!-- IF S_DISPLAY_PM --> &nbsp;<a href="{U_PRIVATEMSGS}"><img src="{T_THEME_PATH}/images/icon_mini_message.gif" width="12" height="13" alt="*" /> {PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a><!-- ENDIF -->
					<!-- ELSE --> &nbsp;<a href="{U_REGISTER}"><img src="{T_THEME_PATH}/images/icon_mini_register.gif" width="12" height="13" alt="*" /> {L_REGISTER}</a>
					<!-- ENDIF -->
				<!-- ENDIF -->
			</td>
			<td class="genmed" align="{S_CONTENT_FLOW_END}">
				<a href="{U_FAQ}"><img src="{T_THEME_PATH}/images/icon_mini_faq.gif" width="12" height="13" alt="*" /> {L_FAQ}</a>
				<!-- IF S_DISPLAY_SEARCH -->&nbsp; &nbsp;<a href="{U_SEARCH}"><img src="{T_THEME_PATH}/images/icon_mini_search.gif" width="12" height="13" alt="*" /> {L_SEARCH}</a><!-- ENDIF -->
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST -->&nbsp; &nbsp;<a href="{U_MEMBERLIST}"><img src="{T_THEME_PATH}/images/icon_mini_members.gif" width="12" height="13" alt="*" /> {L_MEMBERLIST}</a><!-- ENDIF -->
					<!-- IF S_USER_LOGGED_IN -->&nbsp; &nbsp;<a href="{U_PROFILE}"><img src="{T_THEME_PATH}/images/icon_mini_profile.gif" width="12" height="13" alt="*" /> {L_PROFILE}</a><!-- ENDIF -->
				<!-- ENDIF -->
			</td>
		</tr>
		</table>
	</div>

	<div id="datebar">
		<table width="100%" cellspacing="0">
		<tr>
			<td class="gensmall"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ENDIF --></td>
			<td class="gensmall" align="{S_CONTENT_FLOW_END}">{CURRENT_TIME}<br /></td>
		</tr>
		</table>
	</div>

</div>

<div id="wrapcentre">

	<!-- IF S_DISPLAY_SEARCH -->
	<p class="searchbar">
		<span style="float: {S_CONTENT_FLOW_BEGIN};"><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> | <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></span>
		<!-- IF S_USER_LOGGED_IN -->
		<span style="float: {S_CONTENT_FLOW_END};"><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> | <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></span>
		<!-- ENDIF -->
	</p>
	<!-- ENDIF -->

	<br style="clear: both;" />

	<!-- INCLUDE breadcrumbs.html -->

	<br />

Ik heb geen idee waar ik de veranderingen moet aanbrengen.

D-Design · Bericht door **D-Design** » 03 jan 2008, 11:44

dus je wil heel je forum een max breedte geven van 1000 px zo ja dan moet je dit doen.
vind in common of colours.css de volgende text

Code: Selecteer alles

.wrap {

voeg dit erachter

Code: Selecteer alles

max-width: 1000px;

staat max-width eral dan verander je het dus daarin

Robin Huurman · Bericht door **Robin Huurman** » 03 jan 2008, 12:14

Als het een op prosilver gebasseerde stijl zou zijn dan zou hij dat kunnen doen ja, maar deze is op subsilver2 gebasseerd. Dus... open stylesheet.css en vind:

Code: Selecteer alles

#wrapheader {
	margin: 15px 25px 0 25px;
	min-height: 120px;
	height: auto !important;
	height: 120px;
	background-image: url('styles/WoW Style/theme/images/background.gif');
	background-repeat: repeat-x;
/*     background-image: url('styles/WoW Style/theme/image/cellpic_bkg.jpg');
	background-repeat: repeat;*/
/*     padding: 0 25px 15px 25px;*/
	padding: 0;
	border:1px solid;
	border-color:#707070 #000000 #000000 #707070;
}

#wrapcentre {
	margin: 15px 25px 0 25px;
        background-image: url('styles/WoW Style/theme/images/wow_cellpic_body.jpg');
        background-repeat: repeat
}

#wrapfooter {
	text-align: center;
        clear: both;
        background-image: url('styles/WoW Style/theme/images/wow_cellpic_body.jpg');
        background-repeat: repeat
}

En vervang dit door:

Code: Selecteer alles

#wrapheader {
        width: 1000px;
	margin: 0 auto;
	min-height: 120px;
	height: auto !important;
	height: 120px;
	background-image: url('styles/WoW Style/theme/images/background.gif');
	background-repeat: repeat-x;
/*     background-image: url('styles/WoW Style/theme/image/cellpic_bkg.jpg');
	background-repeat: repeat;*/
/*     padding: 0 25px 15px 25px;*/
	padding: 0;
	border:1px solid;
	border-color:#707070 #000000 #000000 #707070;
}

#wrapcentre {
        width: 1000px;
	margin: 0 auto;
        background-image: url('styles/WoW Style/theme/images/wow_cellpic_body.jpg');
        background-repeat: repeat
}

#wrapfooter {
        width: 1000px;
	text-align: center;
        margin: 0 auto;
        clear: both;
        background-image: url('styles/WoW Style/theme/images/wow_cellpic_body.jpg');
        background-repeat: repeat
}

D-Design · Bericht door **D-Design** » 03 jan 2008, 12:15

krijg je dan niet dat bij kleine beeldschermen er dan een horizontale scroll balk bij

?

Robin Huurman · Bericht door **Robin Huurman** » 03 jan 2008, 12:24

alleen bij resoluties van 800x600 of lager. Bovendien is het niet raadzaam om een phpBB forum smaller te maken dan 850px.

Hans Kamp · Bericht door **Hans Kamp** » 03 jan 2008, 15:36

Robin Huurman, alleen de banner moet worden versmald, maar de rest van het forum niet.

D-Design · Bericht door **D-Design** » 03 jan 2008, 16:40

doen moet je alleen het deel van de #wrapheader vervangen neem ik aan

Robin Huurman · Bericht door **Robin Huurman** » 04 jan 2008, 00:19

Inderdaad

Hans Kamp · Bericht door **Hans Kamp** » 04 jan 2008, 00:53

Bedankt.

Maximumbreedte banner

Maximumbreedte banner

Re: Maximumbreedte banner

Re: Maximumbreedte banner

Re: Maximumbreedte banner

Re: Maximumbreedte banner

Re: Maximumbreedte banner

Re: Maximumbreedte banner

Re: Maximumbreedte banner

Re: Maximumbreedte banner