Field widths via CSS

All style (template, theme and imageset) related questions for the new release; advice, feedback here please.
MKruer
Registered User
Posts: 156
Joined: Sun Jul 20, 2003 9:01 pm

Field widths via CSS

Post by MKruer »

I am running into a little problem with setting some the field widths via CSS.

In my opinion, the Topics, Posts, Last Post on the forum view should have static widths, and the user information on the thread view should also have a static width. I guess when the template was original designed they opted to use dynamic widths, which I am all for, however I noticed that using percentages, the widths of those column make the board lopsided in a full screen mode. This becomes very evident on high resolution screens or wide screens.

I am attaching two images to help elaborate what I am talking about.

I reported this as a bug back in April, but it was ruled as not a bug. http://www.phpbb.com/bugs/phpbb3/ticket ... et_id=9559
All I am trying to figure out is how to set those columns to a static width. I have not had much luck, percentages and pixels don’t seem to like each other in CSS. I am hoping that someone else has noticed this and found a solution.

Thanks for taking the time to read this.

-Matt-
Attachments
Thread_View.png
Thread View
(119.05 KiB) Downloaded 7619 times
Forum_View.png
Forum View
(144.6 KiB) Downloaded 7609 times

User avatar
SHS`
Registered User
Posts: 1628
Joined: Wed Jul 04, 2001 9:13 am
Location: The Boonies, Hong Kong
Contact:

Re: Field widths via CSS

Post by SHS` »

The screenshots you attached have a horizontal resolution of 1920 pixels. Considering there's only so much text one can have on any one row (forum description comfortable fits in one line at around 800 pixel, the topic/post/views fit within 100 pixels each, the last post information another 200-ish pixel), yet you seem surprised that's ~800 pixels worth of "white space"? Short of bumping up the font size, that space isn't going to magically disappear... design CSS driven or tag-soup HTML.
Jonathan “SHS`” Stanley • 史德信
phpBB™ 3.1.x, Bug/Security trackers
phpBB™ Bertie Bear 3.0 — prosilver Edition!Asking Questions The Smart Way

MKruer
Registered User
Posts: 156
Joined: Sun Jul 20, 2003 9:01 pm

Re: Field widths via CSS

Post by MKruer »

It’s a matter or presentation, and depending on the density of the text, you will always have some white space, the question is where are you going to place it? I think that most people try to balance a web page, spreading the information as equally as possible across the entire page. So either people try to center the contents or they split the continents by left/right justification or full justification. If the width of the page was static then that’s fine, but doesn’t it seems a little odd having a dynamic page and then only using 70% of the space and justifying to the left?

I am using the 1920x1200 as an extreme example, but the effect still starts showing up after 1024x768 marks, albeit not as noticeable until the high resolutions. Ironically the front page of the forum actually can demonstrate better positioning. There are two forum topics that would benefit from the space. I am attaching a photoshopped image elaborating this. I am sure that I can find more examples of this. If one also switches to the original template (subsilver2) it does not have this issue, and in my opinion correctly distributes the information across the page.

I don’t care if it’s changed in the default style; I just want to know how to manipulate the CSS to achieve the affect I am looking for.
Attachments
Forum_ViewOld.png
Original Forum style, showing proper distribution IMO
(109.63 KiB) Downloaded 7609 times
Forum_View2.png
hotoshopped image of main page showing spacing give to the forum description.
(106.87 KiB) Downloaded 7608 times

User avatar
DoubleJ
Registered User
Posts: 105
Joined: Thu Jan 13, 2005 4:19 pm
Location: The Netherlands
Contact:

Re: Field widths via CSS

Post by DoubleJ »

MKruer wrote: It’s a matter or presentation, and depending on the density of the text, you will always have some white space, the question is where are you going to place it? I think that most people try to balance a web page, spreading the information as equally as possible across the entire page. So either people try to center the contents or they split the continents by left/right justification or full justification. If the width of the page was static then that’s fine, but doesn’t it seems a little odd having a dynamic page and then only using 70% of the space and justifying to the left?

I am using the 1920x1200 as an extreme example, but the effect still starts showing up after 1024x768 marks, albeit not as noticeable until the high resolutions. Ironically the front page of the forum actually can demonstrate better positioning. There are two forum topics that would benefit from the space. I am attaching a photoshopped image elaborating this. I am sure that I can find more examples of this. If one also switches to the original template (subsilver2) it does not have this issue, and in my opinion correctly distributes the information across the page.

I don’t care if it’s changed in the default style; I just want to know how to manipulate the CSS to achieve the affect I am looking for.

The problem is that float works with the widths.
If you have a fixed layout, you can apply fixed widths, if you are aiming for a fluid layout, you should use fluid widts.
Combining them will problems, either on small screens, or big screens.

for example:
you have 800 x 600 screen, so your forum is 780px. if you have last post on 150px and topics/replies on 100, that leaves 430px left for your index content is about 55%.
If you have your resolution of 1920 x ##, then you have 1570px for the index content, how ever if you set it to 55% so it also works on 800 screens, you would only use 55% of 1920px, which is about 1050 px. Because the elements are floated 'left', they will stick to this, and leave a 500px gab at the end of your forum.

What you could do to solve this, is float the topics/replies/last post to the right., the order of these fields would then also change, you would then get something like this:

FORUM | 500px gap | LastPost | Topics | Replies
Then you are still stuck with your 500px gap, but that you cannot solve with css.
But I think this solution comes close to what you are trying to achieve, but you still have a gap, due to combination of fluid and fixed size usage, and the order of you lastpost/topics/replies is changed, but you could solve this by changing the order within your html code.
DoubleJ - Blah

MKruer
Registered User
Posts: 156
Joined: Sun Jul 20, 2003 9:01 pm

Re: Field widths via CSS

Post by MKruer »

Thanks for the reply.

Do you have the section of the css that I would need to modify?

User avatar
DoubleJ
Registered User
Posts: 105
Joined: Thu Jan 13, 2005 4:19 pm
Location: The Netherlands
Contact:

Re: Field widths via CSS

Post by DoubleJ »

MKruer wrote: Thanks for the reply.

Do you have the section of the css that I would need to modify?

Positioning of content elements is done in content.css file.
there you should look for the topiclist classes.

After editing your css, you do need to refresh your CSS into the database via ACP -> Styles -> Themes -> Refreh(behind prosilver theme).
DoubleJ - Blah

MKruer
Registered User
Posts: 156
Joined: Sun Jul 20, 2003 9:01 pm

Re: Field widths via CSS

Post by MKruer »

DoubleJ,

I think I have a possible working solution, Below is the code for the modified elements in the CSS. I am running into one problem that you, or someone reading this might be able to help me out with. Right now when it comes to the wrapping of the text, the elements (dd.posts, dd.topics, dd.views, dd.lastpost) are bumped down a line. Is there a way to force them to keep to the top of the object and not move?

Code: Select all

ul.topiclist dt {
	display: block;
	float: left;
/*	width: 50%; */
	margin-right: 405px; /*	Allows Wrapping to occur before it runs up against the post, topic, views, lastview */
	font-size: 1.1em;
	padding-left: 5px;
	padding-right: 5px;
}

dd.posts, dd.topics, dd.views {
/*	width: 8%; */
/* 	min-width: 100px; */
/* 	position: absolute; */
	float: right !important; 
	width: 100px;
	text-align: center;
	line-height: 2.2em;
	font-size: 1.2em;
}

dd.lastpost {
/* 	width: 25%; */
/* 	min-width: 200px; */
/* 	position: absolute; */
	float: right !important; 
	width: 200px;
	font-size: 1.1em;
}

User avatar
DoubleJ
Registered User
Posts: 105
Joined: Thu Jan 13, 2005 4:19 pm
Location: The Netherlands
Contact:

Re: Field widths via CSS

Post by DoubleJ »

MKruer wrote:DoubleJ,

I think I have a possible working solution, Below is the code for the modified elements in the CSS. I am running into one problem that you, or someone reading this might be able to help me out with. Right now when it comes to the wrapping of the text, the elements (dd.posts, dd.topics, dd.views, dd.lastpost) are bumped down a line. Is there a way to force them to keep to the top of the object and not move?

Code: Select all

ul.topiclist dt {
	display: block;
	float: left;
/*	width: 50%; */
	margin-right: 405px; /*	Allows Wrapping to occur before it runs up against the post, topic, views, lastview */
	font-size: 1.1em;
	padding-left: 5px;
	padding-right: 5px;
}

dd.posts, dd.topics, dd.views {
/*	width: 8%; */
/* 	min-width: 100px; */
/* 	position: absolute; */
	float: right !important; 
	width: 100px;
	text-align: center;
	line-height: 2.2em;
	font-size: 1.2em;
}

dd.lastpost {
/* 	width: 25%; */
/* 	min-width: 200px; */
/* 	position: absolute; */
	float: right !important; 
	width: 200px;
	font-size: 1.1em;
}
Having a look at the code I don't think there is an example for it.
Again a small example:

Code: Select all

<element class="1">Content</element>
<element class="2">Content</element>
If I would apply a float: right or a float: left to the class="1" element, it will float nicely next to the second element. However if I float the second element to the right or left, it will not move up:

Code: Select all

<element class="1">Content</element>
                                                          <element class="2">Content</element>
WHere in this example element.1 is floated to the right.

I think this is the case here, and if so, there is not really a fix for it. You could do a margin-top: -##px; to fix it, but since the font is risizable, this will not really help, as you cannot really set a dynamic height.
DoubleJ - Blah

MKruer
Registered User
Posts: 156
Joined: Sun Jul 20, 2003 9:01 pm

Re: Field widths via CSS

Post by MKruer »

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.

Finches
Registered User
Posts: 1
Joined: Thu Feb 18, 2010 10:06 am

Re: Field widths via CSS

Post by Finches »

I would really appreciate some help with this.

I am able to make the columns fixed widths, but unable to right align them (or push them right). Ideally I would like to make the column with the forum topics and descriptions wider and push the Topics, Posts and Last Post columns to the right. I have been adjusting things with the contents.css file and any help with fixing this would be great.

Image

You can see how it is all unbalanced - I just want to shift those 3 small columns to the right. It looks worse still on wide screens.


Thanks,
Tim

Post Reply