4 replies [Last post]
MIGhunter
Offline
Regular
Indiana
Last seen: 11 years 34 weeks ago
Indiana
Timezone: GMT-4
Joined: 2007-12-22
Posts: 37
Points: 3

This isn't my css so I'm trying to figure out how to alter it. It's for a phpbb3 forum. The problem is when someone posts an image that is bigger than the columns allow, it messes everything up. Here is an example of what it looks like.

What I want to do is make it so that the center column is centered on the screen always. Right now it is like "left justified". The right side of the screen moves but the left doesn't. Then it's like the header and footer are fixed or something cause they aren't stretching with the body.

Any assistance is appreciated.

Here is the ccs.

/*  phpBB 3.0 Style Sheet
    --------------------------------------------------------------
	Style name:		GuildWarsAlliance
	Based on style:	subSilver
    --------------------------------------------------------------
*/
 
/* Layout
 ------------ */
* { margin: 0; padding: 0; border: 0; }
 
.fl { float: left; }
 
.fr { float: right; }
 
body {
	background: #445651 url('styles/GuildWarsAlliance/theme/images/bg.gif') top repeat-x;
	background-attachment: fixed;
	font-size: 10px;
	color:#B9C0BC;
	font-family: verdana, arial;
	margin: 0px;
}
 
.space { clear: both; }
 
#wrapper {
	width: 758px;
	margin: 0 auto;
	background: #556661 url('styles/GuildWarsAlliance/theme/images/bg2.jpg') top no-repeat;
	background-position: 0 100px;
	border: #000000 1px solid;
	border-width: 0 1px 1px 1px;
}
 
a#logo {
	display: block;
	height: 100px;
	width: 758px;
	background: url('../imageset/banner.jpg') top no-repeat;
	text-decoration: none;
	text-indent: -4000px;
}
 
#navleft {
	background: url('styles/GuildWarsAlliance/theme/images/navleft.jpg') top no-repeat;
	float: left;
	width: 165px;
	height: 79px;
}
 
a#login {
	display: block;
	width: 147px;
	height: 28px;
	text-indent: -4000px;
	float: left;
}
 
a:hover#login {
	background-position: 0px -28px;
}
 
a#logout {
	display: block;
	width: 147px;
	height: 28px;
	text-indent: -4000px;
	float: left;
}
 
a:hover#logout {
	background-position: 0px -28px;
}
 
#navright {
	background: url('styles/GuildWarsAlliance/theme/images/navright.jpg') top no-repeat;
	float: left;
	width: 553px;
	height: 59px;
	padding: 20px 40px 0 0;
	overflow: hidden;
	font-size : 11px;
	color : #E1E2E2;
	font-family: verdana, arial;
	text-align: center;
	line-height: 18px;
}
 
.bar { height: 6px; background: #645E55 url('styles/GuildWarsAlliance/theme/images/bar.gif') top repeat-x; }
 
#infocontain {
	background: url('styles/GuildWarsAlliance/theme/images/infobg.gif') top repeat-y;
	width: 754px;
}
 
#infowrap {
	background: url('styles/GuildWarsAlliance/theme/images/infobottom.gif') bottom no-repeat;
}
 
#info {
	background: url('styles/GuildWarsAlliance/theme/images/infotop.gif') top no-repeat;
	padding: 22px 20px 22px 20px;
}
 
#wrapcentre {
	margin: 15px 2px 0 2px;
}
 
#wrapfooter {
	text-align: center;
	clear: both;
}
 
#wrapnav {
	width: 100%;
	margin: 0;
	background-color: #ECECEC;
	border-width: 1px;
	border-style: solid;
	border-color: #0D1010;
}
 
#datebar {
	margin: 10px 2px 0 2px;
}
 
#findbar {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}
 
.forumrules {
	background-color: #F9CC79;
	border-width: 1px;
	border-style: solid;
	border-color: #BB9860;
	padding: 4px;
	font-weight: normal;
	font-size: 11px;
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
 
.forumrules h3 {
	color: red;
}
 
#pageheader { }
#pagecontent { }
#pagefooter { }
 
#poll { }
#postrow { }
#postdata { }
 
 
/*  Text
 --------------------- */
h1 {
	color: black;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	font-weight: bold;
	font-size: 1.8em;
	text-decoration: none;
}
 
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.5em;
	text-decoration: none;
	line-height: 120%;
}
 
h3 {
	font-size: 1.3em;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 120%;
}
 
h4 {
	margin: 0;
	font-size: 12px;
	font-weight: bold;
}
 
h5 {
	margin: 0;
	font-size: 11px;
	font-weight: bold;
}
 
p {
	font-size: 11px;
}
 
p.moderators {
	margin: 0;
	float: left;
	color: black;
	font-weight: bold;
}
 
.rtl p.moderators {
	float: right;
}
 
p.linkmcp {
	margin: 0;
	float: right;
	white-space: nowrap;
}
 
.rtl p.linkmcp {
	float: left;
}
 
p.breadcrumbs {
	margin: 0;
	float: left;
	color: black;
	font-weight: bold;
	white-space: normal;
	font-size: 10pt;
}
 
.rtl p.breadcrumbs {
	float: right;
}
 
p.datetime {
	margin: 0;
	float: right;
	white-space: nowrap;
	font-size: 1em;
}
 
.rtl p.datetime {
	float: left;
}
 
p.searchbar {
	padding: 2px 0;
	white-space: nowrap;
} 
 
p.searchbarreg {
	margin: 0;
	float: right;
	white-space: nowrap;
}
 
.rtl p.searchbarreg {
	float: left;
}
 
p.forumdesc {
	padding-bottom: 4px;
	font-size: 
}
 
p.topicauthor {
	margin: 1px 0;
}
 
p.topicdetails {
	margin: 1px 0;
}
 
.postreported, .postreported a:visited, .postreported a:hover, .postreported a:link, .postreported a:active {
	margin: 1px 0;
	color: red;
	font-weight:bold;
}
 
.postapprove, .postapprove a:visited, .postapprove a:hover, .postapprove a:link, .postapprove a:active {
	color: green;
	font-weight:bold;
}
 
.postapprove img, .postreported img {
	vertical-align: bottom;
}
 
.postauthor {
	color: #8DB8B7;
	font-size: 10px;
}
 
.postdetails {
	color: #8DB8B7;
	font-size: 10px;
}
 
.postbody {
	font-size: 10pt;
	line-height: 1.4em;
	font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
}
 
.postbody li, ol, ul {
	margin: 0 0 0 1.5em;
}
 
.rtl .postbody li, .rtl ol, .rtl ul {
	margin: 0 1.5em 0 0;
}
 
.posthilit {
	background-color: #3E5151;
}
 
.nav {
	margin: 0;
	color: #B9C0BC;
	font-weight: bold;
}
 
.pagination {
	padding: 4px;
	color: black;
	font-size: 10px;
	font-weight: bold;
}
 
.cat h4 a { font-weight: bold; font-size: 12px; letter-spacing: 1px; color : #5E8C8A }
 
.cat, .cat h4 a:visited, .cat h4 a:hover	{ text-decoration: none; color : #5E8C8A; }
 
.gen { font-size : 12px; }
 
.genmed { font-size : 11px; }
 
.gensmall { font-size : 10px; }
 
.gen,.genmed,.gensmall { color : #B9C0BC; }
 
.copyright {
	color: #8DB8AB;
	font-weight: normal;
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
}
 
.titles {
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 1.3em;
	text-decoration: none;
}
 
.error {
	color: #5E716A;
}
 
 
/* Tables
 ------------ */
th {
	color: #76A38E;
	font-size: 11px;
	font-weight: bold;
	background: #2E382D url('styles/GuildWarsAlliance/theme/images/cellpic3.gif') top repeat-x;
	white-space: nowrap;
	padding: 7px 5px;
}
 
.th2 {
	background: #2E382D url('styles/GuildWarsAlliance/theme/images/cellpic4.gif') top repeat-x;
}
 
td {
	padding: 2px;
}
td.profile {
	padding: 4px;
}
 
.tablebg {
	background-color: #0D1010;
}
 
.catdiv {
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background: url('styles/GuildWarsAlliance/theme/images/cellpic2.jpg') repeat-y scroll top left;
}
.rtl .catdiv {
	background: white url('styles/GuildWarsAlliance/theme/images/cellpic2_rtl.jpg') repeat-y scroll top right;
}
 
.cat {
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background: #161C1C url('styles/GuildWarsAlliance/theme/images/cellpic1.gif') top repeat-x;
	text-indent: 4px;
}
 
.row1, .row2, .row3, .row3Right { border-left: solid 1px #282D2D; border-top: solid 1px #282D2D; }
.row1	{ background: #181D1D url('styles/GuildWarsAlliance/theme/images/cellbg.gif') top repeat-x; }
.row2	{ background: #181D1D url('styles/GuildWarsAlliance/theme/images/cellbg.gif') top repeat-x; }
.row3,.row3Right	{ background: #181D1D url('styles/GuildWarsAlliance/theme/images/cellbg.gif') top repeat-x; }
 
.spacer {
	background: #1B2020 url('styles/GuildWarsAlliance/theme/images/spacerbg.gif') top repeat-x;
}
 
.legend {
	text-align:center;
	margin: 0 auto;
}
 
/* Links
 ------------ */
 
a:link,a:active,a:visited { 
	text-decoration: none;
	color : #7FAA9A;
}
 
a:hover { 
	text-decoration: underline; 
	color : #4CAC89;
}
 
#navright a,#navright a:visited {
	text-decoration: none;
	color : #E1E2E2;
}
#navright a:hover {
	text-decoration: underline;
	color : #719C8D;
}
 
.forumlink		{ font-weight: bold; font-size: 12px; color : #6EB1A2; }
a.forumlink,a.forumlink:visited	{ text-decoration: none; color : #6EB1A2; }
a.forumlink:hover{ text-decoration: none; color : #8CC3B7; }
 
a.topictitle {
	margin: 1px 0;
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 12px;
}
 
a.topictitle:visited {
	color: #698C7F;
	text-decoration: none;
}
 
th a,
th a:visited {
	color: #FFA34F !important;
	text-decoration: none;
}
 
th a:hover {
	text-decoration: underline;
}
 
 
/* Form Elements
 ------------ */
form {
	margin: 0;
	padding: 0;
	border: 0;
}
 
input {
	color: #111111;
	font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	padding: 1px;
	border: 1px solid #0D1010;
	vertical-align: middle;
}
 
input.post{
	background: #50695F url('styles/GuildWarsAlliance/theme/images/inputbg.gif') top repeat-x;
	border-top: 1px solid #0D1010;
	border-left: 1px solid #0D1010;
	border-bottom: 1px solid #878787;
	border-right: 1px solid #878787;
	text-align: left;
}
 
textarea {
	background: #638376 url('styles/GuildWarsAlliance/theme/images/textbg.gif') repeat;
	color: #111111;
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.4em;
	font-weight: normal;
	border: 1px solid #0D1010;
	padding: 2px;
}
 
select {
	color: #111111;
	background: #638376 url('styles/GuildWarsAlliance/theme/images/textbg.gif') repeat;
	font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	border-top: 1px solid #0D1010;
	border-left: 1px solid #0D1010;
	border-bottom: 1px solid #878787;
	border-right: 1px solid #878787;
	padding: 1px;
	vertical-align: middle;
}
 
option {
	padding: 0 1em 0 0;
}
 
option.disabled-option {
	color: graytext;
}
 
.rtl option {
	padding: 0 0 0 1em;
}
 
.radio {
	border: none;
	background-color: #transparent;
}
 
.radio2 {
	margin: 5px 0 5px 5px;
	border: none;
	background-color: #transparent;
}
 
.post {
	border-style: solid;
	border-width: 1px;
}
 
.btnbbcode {
	font-weight: normal;
	font-size: 1.1em;
	cursor: pointer;
	padding: 1px 5px;
	background-color : #638376;
	color : #111111;
	background-image : url(styles/GuildWarsAlliance/theme/images/bbcode.gif);
	background-repeat: repeat;
	border-top: 1px solid #878787;
	border-left: 1px solid #878787;
	border-bottom: 1px solid #0D1010;
	border-right: 1px solid #0D1010;
	margin-bottom: 3px;
}
 
.btnmain {
	font-weight: bold;
	cursor: pointer;
	padding: 1px 5px;
	background-color : #638376;
	color : #111111;
	font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
	background-image : url(styles/GuildWarsAlliance/theme/images/buttonbg.gif);
	background-repeat: repeat;
	border-top: 1px solid #878787;
	border-left: 1px solid #878787;
	border-bottom: 1px solid #0D1010;
	border-right: 1px solid #0D1010;
}
 
.btnlite  {
	font-weight: bold;
	cursor: pointer;
	padding: 1px 5px;
	background-color : #638376;
	color : #111111;
	font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
	background-image : url(styles/GuildWarsAlliance/theme/images/buttonbg.gif);
	background-repeat: repeat;
	border-top: 1px solid #878787;
	border-left: 1px solid #878787;
	border-bottom: 1px solid #0D1010;
	border-right: 1px solid #0D1010;
}
 
.btnfile {
	font-weight: normal;
	background-color: #ECECEC;
	border: 1px solid #0D1010;
	padding: 1px 5px;
	font-size: 1.1em;
}
 
.helpline {
	background-color: #181D1D;
	color: #DEE3E7;
	border-style: none;
}
 
 
/* BBCode
 ------------ */
.quotetitle, .attachtitle {
	margin: 10px 5px 0 5px;
	padding: 4px;
	border-width: 1px 1px 0 1px;
	border-style: solid;
	border-color: #0D1010;
	color: #333333;
	background-color: #A9B8C2;
	font-size: 0.85em;
	font-weight: bold;
}
 
.quotetitle .quotetitle {
	font-size: 1em;
}
 
.quotecontent, .attachcontent {
	margin: 0 5px 10px 5px;
	padding: 5px;
	border-color: #0D1010;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	font-weight: normal;
	font-size: 1em;
	line-height: 1.4em;
	font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
	background-color: #FAFAFA;
	color: #4B5C77;
}
 
.attachcontent {
	font-size: 0.85em;
}
 
.codetitle {
	margin: 10px 5px 0 5px;
	padding: 2px 4px;
	border-width: 1px 1px 0 1px;
	border-style: solid;
	border-color: #0D1010;
	color: #333333;
	background-color: #A9B8C2;
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	font-size: 0.8em;
}
 
.codecontent {
	direction: ltr;
	margin: 0 5px 10px 5px;
	padding: 5px;
	border-color: #0D1010;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	font-weight: normal;
	color: #006600;
	font-size: 0.85em;
	font-family: Monaco, 'Courier New', monospace;
	background-color: #FAFAFA;
}
 
.syntaxbg {
	color: #FFFFFF;
}
 
.syntaxcomment {
	color: #FF8000;
}
 
.syntaxdefault {
	color: #0000BB;
}
 
.syntaxhtml {
	color: #000000;
}
 
.syntaxkeyword {
	color: #007700;
}
 
.syntaxstring {
	color: #DD0000;
}
 
 
/* Private messages
 ------------------ */
.pm_marked_colour {
	background-color: #000000;
}
 
.pm_replied_colour {
	background-color: #A9B8C2;
}
 
.pm_friend_colour {
	background-color: #007700;
}
 
.pm_foe_colour {
	background-color: #DD0000;
}
 
 
/* Misc
 ------------ */
 
hr	{ height: 0px; border: solid #293535 0px; border-top-width: 1px;}
 
img {
	border: none;
}
 
.sep {
	color: black;
	background-color: #FFA34F;
}
 
table.colortable td {
	padding: 0;
}
 
pre {
	font-size: 1.1em;
	font-family: Monaco, 'Courier New', monospace;
}
 
.nowrap {
	white-space: nowrap;
}
 
.username-coloured {
	font-weight: bold;
}

L0LKTHXBYE
L0LKTHXBYE's picture
Offline
Enthusiast
Nederland
Last seen: 12 years 22 weeks ago
Nederland
Timezone: GMT+2
Joined: 2009-06-11
Posts: 98
Points: 0

Two things came to mind

Two things came to mind right away to start trying:

#wrapper seems to be your whole page, and who is the centered one. You could set overflow to hidden on that, however check scrolling and in-page skip or jump links in IE6 (and if IE6 has issues, and nobody else, just let IE6 have overflow: visible and be done with it).

Another is to see what happens when you directly style the image. It might look pretty squashed, but you could

img {
max-width: the width of the forum (758px)
}

Anyone larger than that, in browsers other than IE6, would not let that image be wider.

Which led me to this: something on the backend that, whenever it sees a width greater than the forum width, turns the image into a link. That's for the back-end guy to do, but honestly that would be nicest for forum-goers, that or something like ImageMagick running on the back end resizing stuff automatically and sending the new image to the forum. With overflow, the image gets cut off, and with max-width, it gets squashed. I'm sure people would at least want to be able to click somewhere to see the whole image.

*edit a third thing came to mind, but this might be more than what you want... changing the setup to one with set side columns, and letting the middle just be what it needs to be, filling up whatever the space. This would be, #wrapper getting a % width, so it can still be centered, and the middle part just having set side margins, while the sidebars are then that width. For when the forum get wider than someone's screen, they'll have to scroll, and the page will start at the left side. For anyone with a wider screen, the whole set will try to stay centered so long as there's room to have side margins.

*edit2, it's the table, and it's overflowing out of #wrapper. #wrapper is maintaining its width so the header and footer remain normal. The table is getting stretched out, and it's not pulling the #wrapper wider with it.

How about setting a max-width on the table, not #wrapper, and something like overflow: auto on only the td's who'll get content (so not the left side with poster info)? People will get a scrollbar on those large images. They'll be able to see it all, the table will stay in place, and so then everyone should also be able to stay centered.

MIGhunter
Offline
Regular
Indiana
Last seen: 11 years 34 weeks ago
Indiana
Timezone: GMT-4
Joined: 2007-12-22
Posts: 37
Points: 3

Will that make the text from

Will that make the text from a users post fly off the screen? Or will it still wrap like normal?

L0LKTHXBYE
L0LKTHXBYE's picture
Offline
Enthusiast
Nederland
Last seen: 12 years 22 weeks ago
Nederland
Timezone: GMT+2
Joined: 2009-06-11
Posts: 98
Points: 0

Setting a max-width on the

Setting a width (not max-width, I forgot, this isn't a flexipage) on the table and overflow: auto on the td's should make normal pages stay normal, and pages where someone posts a large image force scrollbars, ideally on just that post. Yes, in the particular post where a large image is placed, the text would go along for the ride, but if the rest of the forum isn't stretched, then other posts' text should remain normal, and wrap appropriately.

Text wraps, and when it encounters a set width on a container, it wraps. Images, however, have no whitespace where they can wrap, so they don't. A row of images would. So, warning, anyone posting a long url should also trigger scrollbars-- no whitespace, no wrapping.

Then if there's a class or something on the td's where the person's post content goes, you could do this:
td.theclass {
you could do the math and see how much space this normally is and set a width here too I would think;
overflow: auto; will make anything trying to overflow (again, images and things without whitespace, plain text will wrap) force a scrollbar instead... IE6 might need some help here though;
}

The point of overflow is to force the browser to respect your set dimensions, and then determine what they are supposed to do with content inside that doesn't fit those dimensions. By default, on blocks, it is simply a visible overflow (popping out, if there are set dimensions, and stretching the container if there aren't). Tables are a little different though, they are required to contain their content, and I'm not sure they can let overflow actually pop out. However I've seen the auto (for scrolling) work. You might just have to test it cross-browser.

If there isn't a class on the posting areas, then you might see what else you could use to target that. Adjacent and attribute selectors can work in everyone but IE6

Assuming there's

first td
next td
and the next one
and the last one and here people have their post

then you could conceivably do
td[scope]+td+td+td {
width: whatever;
overflow: auto;
}

Also note since there's no height being set, the table (or table cell) should still stretch vertically for expanding content just fine... scrollbars should only appear when content exceeds a dimension, and height is not a set dimension.

L0LKTHXBYE
L0LKTHXBYE's picture
Offline
Enthusiast
Nederland
Last seen: 12 years 22 weeks ago
Nederland
Timezone: GMT+2
Joined: 2009-06-11
Posts: 98
Points: 0

Hrm, just saw a related

Hrm, just saw a related question and apparently, overflow on tables might not work very well in IE. And you need explicit (not %) widths. You might end up needing to throw a non-table element inside the td (div) and put width and overflow on that.

*edit and you might also need to use table-layout: fixed on the table. Again this should be ok on a page with a set, static width.