Field widths via CSS
Field widths via CSS
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-
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
- SHS`
- Registered User
- Posts: 1628
- Joined: Wed Jul 04, 2001 9:13 am
- Location: The Boonies, Hong Kong
- Contact:
Re: Field widths via CSS
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
phpBB™ 3.1.x, Bug/Security trackers
phpBB™ Bertie Bear 3.0 — prosilver Edition! • Asking Questions The Smart Way
Re: Field widths via CSS
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.
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
- DoubleJ
- Registered User
- Posts: 105
- Joined: Thu Jan 13, 2005 4:19 pm
- Location: The Netherlands
- Contact:
Re: Field widths via CSS
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
Re: Field widths via CSS
Thanks for the reply.
Do you have the section of the css that I would need to modify?
Do you have the section of the css that I would need to modify?
- DoubleJ
- Registered User
- Posts: 105
- Joined: Thu Jan 13, 2005 4:19 pm
- Location: The Netherlands
- Contact:
Re: Field widths via CSS
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
Re: Field widths via CSS
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?
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;
}
- DoubleJ
- Registered User
- Posts: 105
- Joined: Thu Jan 13, 2005 4:19 pm
- Location: The Netherlands
- Contact:
Re: Field widths via CSS
Having a look at the code I don't think there is an example for it.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; }
Again a small example:
Code: Select all
<element class="1">Content</element>
<element class="2">Content</element>
Code: Select all
<element class="1">Content</element>
<element class="2">Content</element>
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
Re: Field widths via CSS
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.
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.
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
}
I highly recommend this fix for anyone who likes using a full screen providing we can fix the wrapping bug.
Re: Field widths via CSS
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.
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
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.
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