Static field width on a dynamic width page using CSS

mkruer · Post by **mkruer** » Sun Dec 09, 2007 1:28 am

The title about says it I am trying to fix an issue with the current way topics are displayed.
Because the current Prosilver style breaks up the view topic area into 4 parts by page width
50% for the Topic
8% for post count
8% for views
25% for last post
People would run anything higher then the default width of 800px start seeing a lot of wasted space devoted to posts, topics, views, posted by. These fields do not need to be dynamic, and the space saved should be devoted to the Topic field which tends to wrap (and it does not need to) Below is the code that fixes the issue in the forum view a save a text wrapping issue that I am trying to resolve. I will also look into fixing the view topic. we don't need 15% of the side of the page devoted to user data when a static width will work better. For most users this is a non issue, but soon as you use a resolution hight then 1024x768 you will start to know a lot of wasted space that does not need to happen.

more details can be found on the Original Thread on the development site. http://area51.phpbb.com/phpBB/viewtopic ... 26&t=28270

MKruer wrote:A blast form the past.
I came up with what I consider a better version for fixing/improving the dynamic topic name with static width posts, topics, views, posted by width issue feilds.
Code: Select all
dd.posts, dd.topics, dd.views {
/*	width: 8%; */ Removed
	width: 70px; */ Added
	text-align: center;
	line-height: 2.2em;
	font-size: 1.2em;
}
Code: Select all
dd.lastpost {
/*	width: 25%; */ Removed
	width: 230px; */ Added
	font-size: 1.1em;
}
Code: Select all
ul.topiclist dt {
	display: block;
	float: left;
	width: 50%;
	font-size: 1.1em;
	padding-left: 5px;
	padding-right: 5px;
	margin-right: -425px; */ Added
}
Code: Select all
li.header dt {
	font-weight: bold;
	margin-right: -425px;  */ Added
}
This works perfectly... except for one issues that I have yet be unable to solve. The problem is the contents of the Topic itself do not wrap until the end of the page. It gets to the first field and then goes under the existing fields, (posts, topics, views, posted by) so it ends up looking like a jumbled mess. Can someone who is smarter then myself in the ways of CSS figure out how to make the text wrap before it gets to the the static width fields. I am trying to not add any tags and just use the existing css items.

I highly recommend this fix for anyone who likes using a full screen providing we can fix the wrapping bug.

mkruer · Post by **mkruer** » Sun Dec 09, 2007 8:28 pm

Ok go the last part figure out. I have to add two tags into the viewforum_body.html which I was hoping to avoid.

Replace in viewforum_body.html

Code: Select all

<dl class="icon">
	<dt><!-- IF S_DISPLAY_ACTIVE -->{L_ACTIVE_TOPICS}<!-- ELSEIF topicrow.S_TOPIC_TYPE_SWITCH and topicrow.S_TOPIC_TYPE gt 1 -->{L_ANNOUNCEMENTS}<!-- ELSE -->{L_TOPICS}<!-- ENDIF --></dt>
	<dd class="posts">{L_REPLIES}</dd>
	<dd class="views">{L_VIEWS}</dd>
	<dd class="lastpost"><span>{L_LAST_POST}</span></dd>
</dl>

With

Code: Select all

<dl class="icon">
	<dt><div id="topictext"><!-- IF S_DISPLAY_ACTIVE -->{L_ACTIVE_TOPICS}<!-- ELSEIF topicrow.S_TOPIC_TYPE_SWITCH and topicrow.S_TOPIC_TYPE gt 1 -->{L_ANNOUNCEMENTS}<!-- ELSE -->{L_TOPICS}<!-- ENDIF --></div></dt>
	<dd class="posts">{L_REPLIES}</dd>
	<dd class="views">{L_VIEWS}</dd>
	<dd class="lastpost"><span>{L_LAST_POST}</span></dd>
</dl>

And replace

Code: Select all

<dl class="icon" style="background-image: url({topicrow.TOPIC_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
	<dt style="<!-- IF topicrow.TOPIC_ICON_IMG and S_TOPIC_ICONS -->background-image: url({T_ICONS_PATH}{topicrow.TOPIC_ICON_IMG}); background-repeat: no-repeat;<!-- ENDIF -->" title="{topicrow.TOPIC_FOLDER_IMG_ALT}">
		<!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><a href="{topicrow.U_VIEW_TOPIC}" class="topictitle">{topicrow.TOPIC_TITLE}</a>
		<!-- IF topicrow.S_TOPIC_UNAPPROVED or topicrow.S_POSTS_UNAPPROVED --><a href="{topicrow.U_MCP_QUEUE}">{topicrow.UNAPPROVED_IMG}</a> <!-- ENDIF -->
		<!-- IF topicrow.S_TOPIC_REPORTED --><a href="{topicrow.U_MCP_REPORT}">{REPORTED_IMG}</a><!-- ENDIF --><br />
		<!-- IF topicrow.PAGINATION --><strong class="pagination"><span>{topicrow.PAGINATION}</span></strong><!-- ENDIF -->
		<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} {L_POSTED_ON_DATE} {topicrow.FIRST_POST_TIME} 
	</dt>
	<dd class="posts">{topicrow.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
	<dd class="views">{topicrow.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
	<dd class="lastpost"><span><dfn>{L_LAST_POST} </dfn>{L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL}
		<a href="{topicrow.U_LAST_POST}">{LAST_POST_IMG}</a> <br />{L_POSTED_ON_DATE} {topicrow.LAST_POST_TIME}</span>
	</dd>
</dl>

With

Code: Select all

<dl class="icon" style="background-image: url({topicrow.TOPIC_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
	<dt style="<!-- IF topicrow.TOPIC_ICON_IMG and S_TOPIC_ICONS -->background-image: url({T_ICONS_PATH}{topicrow.TOPIC_ICON_IMG}); background-repeat: no-repeat;<!-- ENDIF -->" title="{topicrow.TOPIC_FOLDER_IMG_ALT}"><div id="topictext">
		<!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><a href="{topicrow.U_VIEW_TOPIC}" class="topictitle">{topicrow.TOPIC_TITLE}</a>
		<!-- IF topicrow.S_TOPIC_UNAPPROVED or topicrow.S_POSTS_UNAPPROVED --><a href="{topicrow.U_MCP_QUEUE}">{topicrow.UNAPPROVED_IMG}</a> <!-- ENDIF -->
		<!-- IF topicrow.S_TOPIC_REPORTED --><a href="{topicrow.U_MCP_REPORT}">{REPORTED_IMG}</a><!-- ENDIF --><br />
		<!-- IF topicrow.PAGINATION --><strong class="pagination"><span>{topicrow.PAGINATION}</span></strong><!-- ENDIF -->
		<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} {L_POSTED_ON_DATE} {topicrow.FIRST_POST_TIME} 
	</div></dt>
	<dd class="posts">{topicrow.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
	<dd class="views">{topicrow.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
	<dd class="lastpost"><span><dfn>{L_LAST_POST} </dfn>{L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL}
		<a href="{topicrow.U_LAST_POST}">{LAST_POST_IMG}</a> <br />{L_POSTED_ON_DATE} {topicrow.LAST_POST_TIME}</span>
	</dd>
</dl>

Add to the CSS

Code: Select all

#topictext {
	padding-right: 425px;
}

This now makes the right site (Views, Post, etc... ) a static width and make the rest of the area dynamic, effectively making it the same proportions of the original phpbb2 template.

mkruer · Post by **mkruer** » Sun Dec 09, 2007 9:31 pm

Another small tweak for Wide screen users, this time for viewpost views. Again this is to make the side a static width.

Code: Select all

.postbody {
	padding: 0;
	line-height: 1.48em;
	color: #333333;
/*	width: 78%;  Remove*/
	width: 100%; /* Add */
	float: left;
	clear: both;
	margin-right: -200px; /* Add */
}

Code: Select all

.postprofile {
	/* Also see tweaks.css */
	margin: 5px 0 10px 0;
	min-height: 80px;
	color: #666666;
	border-left: 1px solid #FFFFFF;
/*	width: 22%; Remove */
	width: 195px;  /* Add */
	float: right;
	display: inline;
}

Add to CSS

Code: Select all

#posttext {
	padding-right: 200px;
}

This Looks more frighting then it is all that was added was <div id="posttext"> at the beginning and </div> and the end.

Code: Select all

<div class="postbody"><div id="posttext">
			<!-- IF postrow.S_IGNORE_POST -->
				<div class="ignore">{postrow.L_IGNORE_POST}</div>
			<!-- ELSE -->

		<!-- IF not S_IS_BOT -->
			<!-- IF postrow.U_QUOTE or postrow.U_INFO or postrow.U_DELETE or postrow.U_EDIT -->
				<ul class="profile-icons">
					<!-- IF postrow.U_EDIT --><li class="edit-icon"><a href="{postrow.U_EDIT}" title="{L_EDIT_POST}"><span>{L_EDIT_POST}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_DELETE --><li class="delete-icon"><a href="{postrow.U_DELETE}" title="{L_DELETE_POST}"><span>{L_DELETE_POST}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_REPORT --><li class="report-icon"><a href="{postrow.U_REPORT}" title="{L_REPORT_POST}"><span>{L_REPORT_POST}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_WARN --><li class="warn-icon"><a href="{postrow.U_WARN}" title="{L_WARN_USER}"><span>{L_WARN_USER}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_INFO --><li class="info-icon"><a href="{postrow.U_INFO}" title="{L_INFORMATION}"><span>{L_INFORMATION}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_QUOTE --><li class="quote-icon"><a href="{postrow.U_QUOTE}" title="{L_REPLY_WITH_QUOTE}"><span>{L_REPLY_WITH_QUOTE}</span></a></li><!-- ENDIF -->
				</ul>
			<!-- ENDIF -->
		<!-- ENDIF -->

			<h3 <!-- IF postrow.S_FIRST_ROW -->class="first"<!-- ENDIF -->><!-- IF postrow.POST_ICON_IMG --><img src="{T_ICONS_PATH}{postrow.POST_ICON_IMG}" width="{postrow.POST_ICON_IMG_WIDTH}" height="{postrow.POST_ICON_IMG_HEIGHT}" alt="" /> <!-- ENDIF --><a href="#p{postrow.POST_ID}">{postrow.POST_SUBJECT}</a></h3>
			<p class="author"><!-- IF S_IS_BOT -->{postrow.MINI_POST_IMG}<!-- ELSE --><a href="{postrow.U_MINI_POST}">{postrow.MINI_POST_IMG}</a><!-- ENDIF -->{L_POST_BY_AUTHOR} <strong>{postrow.POST_AUTHOR_FULL}</strong> {L_POSTED_ON_DATE} {postrow.POST_DATE} </p>

			<!-- IF postrow.S_POST_UNAPPROVED or postrow.S_POST_REPORTED -->
				<p class="rules">
					<!-- IF postrow.S_POST_UNAPPROVED -->{UNAPPROVED_IMG} <a href="{postrow.U_MCP_APPROVE}"><strong>{L_POST_UNAPPROVED}</strong></a><!-- ENDIF -->
					<!-- IF postrow.S_POST_REPORTED -->{REPORTED_IMG} <a href="{postrow.U_MCP_REPORT}"><strong>{L_POST_REPORTED}</strong></a><!-- ENDIF -->
				</p>
			<!-- ENDIF -->

			<div class="content">{postrow.MESSAGE}</div>

			<!-- IF postrow.S_HAS_ATTACHMENTS -->
				<dl class="attachbox">
					<dt>{L_ATTACHMENTS}</dt>
					<!-- BEGIN attachment -->
						<dd>{postrow.attachment.DISPLAY_ATTACHMENT}</dd>
					<!-- END attachment -->
				</dl>
			<!-- ENDIF -->

			<!-- IF postrow.S_DISPLAY_NOTICE --><div class="rules">{L_DOWNLOAD_NOTICE}</div><!-- ENDIF -->
			<!-- IF postrow.EDITED_MESSAGE or postrow.EDIT_REASON -->
				<div class="notice">{postrow.EDITED_MESSAGE}
					<!-- IF postrow.EDIT_REASON --><br /><strong>{L_REASON}:</strong> <em>{postrow.EDIT_REASON}</em><!-- ENDIF -->
				</div>
			<!-- ENDIF -->

			<!-- IF postrow.BUMPED_MESSAGE --><div class="notice">{postrow.BUMPED_MESSAGE}</div><!-- ENDIF -->
			<!-- IF postrow.SIGNATURE --><div id="sig{postrow.POST_ID}" class="signature">{postrow.SIGNATURE}</div><!-- ENDIF -->
		<!-- ENDIF -->

		</div></div>