Layout van het forum op iedere resolutie het zelfde .

yomi · Bericht door **yomi** » 16 feb 2010, 20:25

Adres van je forum: http://www.witvisforum.nl
phpBB versie: 3.0.6

Hallo even een vraag.
Hoe kan ik er voor zorgen dat de layout van het forum op iedere resolutie het zelfde is.
Als ik kijk in een resolutie van 1280 x 720 dan mis ik een button " Galerij" in mijn hoofd balk.
Kijk ik in een resolutie van 1980 x1080 dan zie ik ze allemaal.
Dit is voornamlijk een probleem als men in logt dat er met de resolutie 1280 x720 buttons missen.

Wat zou ik hier aan kunnen doen.

Pascal

..

marian0810 · Bericht door **marian0810** » 16 feb 2010, 23:18

Afbeeldingen kleiner maken en zorgen dat de totale breedte van je balk niet meer dan 1280 pixels is. Ik neem tenminste aan dat het allemaal afbeeldingen zijn. Je kunt nou eenmaal niet iets wat bv. 1500 pixels breeds is volledig op een scherm van 1280 te zien krijgen. Of je verdeelt de knoppen over twee rijen onder elkaar. Er zijn tenslotte ook nog mensen zat die een scherm van 1024 breed hebben...

yomi · Bericht door **yomi** » 17 feb 2010, 09:32

marian0810 schreef:Afbeeldingen kleiner maken en zorgen dat de totale breedte van je balk niet meer dan 1280 pixels is. Ik neem tenminste aan dat het allemaal afbeeldingen zijn. Je kunt nou eenmaal niet iets wat bv. 1500 pixels breeds is volledig op een scherm van 1280 te zien krijgen. Of je verdeelt de knoppen over twee rijen onder elkaar. Er zijn tenslotte ook nog mensen zat die een scherm van 1024 breed hebben...

Bedankt voor je reactie,
Alleen hoe kan ik de hoofd buttons verdelen in twee rijen.
Welke bestand moet ik dan aanpassen

marian0810 · Bericht door **marian0810** » 17 feb 2010, 11:32

Dat kun je doen in je overall_header.html

yomi · Bericht door **yomi** » 17 feb 2010, 13:02

Hoi Marian,

Zou jij weten waar ik dit moet zoeken.
Hieronder mijn overall_header.html

Bedankt alvast

Pascal

Code: Selecteer alles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="nl-nl" xml:lang="nl-nl">
<!-- INCLUDE gallery/plugins_header.html -->
</head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="nl-nl" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2009 Koedijk Noord Holland.  All rights reserved. Duplication of any content on this site is prohibited." />
<meta name="keywords" content="hengelsportforum, hengelen, vissen, brasem, karper, voorn, lokvoer, feederen, witvis" />
<meta name="description" content="Nederlands hengelsportforum voor en door de visser" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title>Witvis en Feederforum nl &bull; Portaal</title>

<!-- IF S_ENABLE_FEEDS -->
	<link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" />
	<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_TOPICS}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF -->


<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 per_page = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';

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

/**
* 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>
</head>
<body class="{S_CONTENT_DIRECTION}">

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


<div id="container">
	<div id="header">
		<h1><a href="{U_INDEX}" title="{SITENAME}">{SITENAME}</a></h1>
		<p>{SITE_DESCRIPTION}</p>
	</div>
	<div id="nav">
		<ul>
				<!-- IF not S_IS_BOT --><li><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></li><!-- ENDIF -->
				<!-- IF U_RESTORE_PERMISSIONS --><li><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li><!-- ENDIF -->
				<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --><li><span style="color: red;">{L_BOARD_DISABLED}</span></li><!-- ENDIF -->
				<!-- IF not S_IS_BOT -->
					<!-- IF S_USER_LOGGED_IN -->
						<!-- IF S_DISPLAY_PM --> <li><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a></li><!-- ENDIF -->
					<!-- ELSEIF S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li><a href="{U_REGISTER}">{L_REGISTER}</a></li>
					<!-- ENDIF -->
				<!-- ENDIF -->
				<li><a href="{U_FAQ}">{L_FAQ}</a></li>
				<li><a href="{U_LINKPAGE}">&nbsp; &nbsp;{L_LINKPAGE}</a></li>
				<!-- IF S_DISPLAY_SEARCH --><li><a href="{U_SEARCH}">{L_SEARCH}</a></li><!-- ENDIF -->
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
					<!-- IF S_USER_LOGGED_IN --><li><a href="{U_PROFILE}">{L_PROFILE}</a></li><!-- ENDIF -->
				<li><a href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}">{L_GALLERY}</a>&nbsp; &nbsp;</li>
				<!-- ENDIF -->
		</ul>

		<br class="clear" />
	</div>

	<div id="content">
<!-- INCLUDE announcement_centre.html -->
		<div id="datebar">
			<table width="100%" cellspacing="1">
			<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>


		<!-- 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_UNREAD}">{L_SEARCH_UNREAD}</a> | <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 class="clear" /><br />

marian0810 · Bericht door **marian0810** » 17 feb 2010, 14:26

Probeer het eens zo:

zoek in overall_header.html naar

Code: Selecteer alles

            <li><a href="{U_FAQ}">{L_FAQ}</a></li>
            <li><a href="{U_LINKPAGE}">&nbsp; &nbsp;{L_LINKPAGE}</a></li>

en vervang het door

Code: Selecteer alles

            <li><a href="{U_FAQ}">{L_FAQ}</a></li>
			</ul>
</div> 
 <div id="nav2">
 			<ul>
            <li><a href="{U_LINKPAGE}">&nbsp; &nbsp;{L_LINKPAGE}</a></li>

en in je theme/stylesheet.css zoek je

Code: Selecteer alles

/* headers */

en daarvoor zet je:

Code: Selecteer alles

div#nav2 {
	width:100%;
	height:50px;
	background-image:url('./images/nav_background.gif');
	background-repeat:repeat-x;
	background-position:center bottom;
}
div#nav2 ul {
	margin:0;
	padding:0;
}
div#nav2 ul li {
	display:block;
	float:left;
	padding-right:10px;
}
div#nav2 ul li a {
	float:left;
	padding:12px 10px;
	height:26px;
	font-weight:bold;
	color:#FFFFFF;
	text-decoration:none;
	display:block;
}
div#nav2 ul li a:hover {
	background-color:#E23C3C;
}

Los daarvan moet je in je overall_header op regel 4 ook nog even </head> veranderen in <head>.

Niet vergeten daarna cache te legen en thema te vernieuwen.

yomi · Bericht door **yomi** » 17 feb 2010, 15:47

Hoi,
Bedankt voor je snelle reactie,
Ik ga er even mee aan de slag en laat het even weten of het gelukt is.

Jeroen · Bericht door **Jeroen** » 17 feb 2010, 17:55

Verplaatst naar 3.0 Stijlen

- Pietje

Layout van het forum op iedere resolutie het zelfde .

Layout van het forum op iedere resolutie het zelfde .

Re: Layout van het forum op iedere resolutie het zelfde .

Re: Layout van het forum op iedere resolutie het zelfde .

Re: Layout van het forum op iedere resolutie het zelfde .

Re: Layout van het forum op iedere resolutie het zelfde .

Re: Layout van het forum op iedere resolutie het zelfde .

Re: Layout van het forum op iedere resolutie het zelfde .

Re: Layout van het forum op iedere resolutie het zelfde .