MyBB Community Forums

Full Version: Need help fixing layout issue
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
I have provided some images.

How would I go a long fixing this issue. So the right sided layout is within the middle part..


Some images;
http://img18.imageshack.us/img18/7306/sc...5at105.png

http://img717.imageshack.us/img717/9793/...5at111.png

thanks in advanced...


website url http://forum.clanwrt.com
Go to: ACP > Themes > Apart Flame > Edit in advanced mode > find ;
#container {
	width: 95%;
	background: #FFFFFF;
	border: 1px solid #e4e4e4;
	color: #000000;
	margin: auto auto;
	padding: 20px;
	text-align: left; /* IE 5 fix */
}


or something like that, and edit its width to approximately 800px
could we have a site url and maybe even pm me admin login
(2011-01-05, 04:16 PM)Yaldaram Wrote: [ -> ]Go to: ACP > Themes > Apart Flame > Edit in advanced mode > find ;
#container {
	width: 95%;
	background: #FFFFFF;
	border: 1px solid #e4e4e4;
	color: #000000;
	margin: auto auto;
	padding: 20px;
	text-align: left; /* IE 5 fix */
}


or something like that, and edit its width to approximately 800px

Thing this is probably a template issue rather than a css issue but would need to see the site.
that doesn't work hmm...
(2011-01-05, 04:17 PM)adbrad Wrote: [ -> ]could we have a site url and maybe even pm me admin login
(2011-01-05, 04:16 PM)Yaldaram Wrote: [ -> ]Go to: ACP > Themes > Apart Flame > Edit in advanced mode > find ;
#container {
	width: 95%;
	background: #FFFFFF;
	border: 1px solid #e4e4e4;
	color: #000000;
	margin: auto auto;
	padding: 20px;
	text-align: left; /* IE 5 fix */
}


or something like that, and edit its width to approximately 800px

Thing this is probably a template issue rather than a css issue but would need to see the site.
website url is http://forum.clanwrt.com it happens on usercp etc..
pm me a admin login and i'lltake a look
(2011-01-05, 04:22 PM)adbrad Wrote: [ -> ]pm me a admin login and i'lltake a look


you don't need admin i can paste in the CSS..

body {
	background: #222 url(images/flame2/bg.png);
	color: #fff;
	text-align: center;
	line-height: 1.4;
	margin: 0;
	
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

a:link {
	color: #555;
	text-decoration: none;
}

a:visited {
	color: #444;
	text-decoration: none;
}

a:hover, a:active {
	color: #000;
	text-decoration: underline;
}

#container {
	color: #fff;
	text-align: left;
	line-height: 1.4;
	margin: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

.wrapper {
color:#fff;
	min-width: 970px;
	max-width: 1500px;
	margin: auto auto;
}

#logo {
	background: #750000 url(images/flame/header.png) top left repeat-x;
	border-bottom: 1px solid #550000;
}

#content {
	background: #222;
color:#fff;
	width: auto !important;
	padding: 20px 10px;
	overflow: hidden;
	border-bottom: 1px solid #000;
}

#panel ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#panel ul.menu li {
	margin: 0 5px;
	display: inline;
}

#panel ul.menu li a {
	padding-left: 20px;
	background-repeat: no-repeat;
	background-position: left center;
}

#panel .upper ul.top_links {
	float: right;
	font-weight: bold;
}

#panel .upper ul.top_links a.search {
	background-image: url(images/flame/icons/search.gif);
}

#panel .upper ul.top_links a.memberlist {
	background-image: url(images/flame/icons/memberlist.gif);
}

#panel .upper ul.top_links a.calendar {
	background-image: url(images/flame/icons/calendar.gif);
}

#panel .upper ul.top_links a.help {
	background-image: url(images/flame/icons/help.gif);
}

#panel .upper a.logout {
	font-weight: bold;
	background: url(images/flame/icons/logout.gif) right no-repeat;
	padding-right: 20px;
	margin-left: 10px;
}

#panel .upper a.login,
#panel .upper a.lost_password {
	background: url(images/flame/icons/login.gif) no-repeat;
	padding-left: 20px;
	margin-left: 10px;
	font-weight: bold;
}

#panel .upper a.register {
	background: url(images/flame/icons/logout.gif) right no-repeat;
	padding-right: 20px;
	margin-left: 10px;
	font-weight: bold;
}

#panel .lower ul.panel_links {
	float: left;
}

#panel .lower ul.panel_links a.usercp {
	background-image: url(images/flame/icons/usercp.gif);
}

#panel .lower ul.panel_links a.modcp {
	background-image: url(images/flame/icons/modcp.gif);
}

#panel .lower ul.panel_links a.admincp {
	background-image: url(images/flame/icons/admincp.gif);
}

#panel .lower ul.user_links {
	float: right;
}

#panel .lower ul.user_links li a {
	padding: 0;
}

#panel .upper {
	background: #0f0f0f url(images/flame/tcat.png) repeat-x;
	color: #fff;
	border-top: 1px solid #444;
	border-bottom: 1px solid #000;
	padding: 7px;
}

#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:hover,
#panel .upper a:active {
	color: #fff;
}

#panel .lower {
	background: #efefef;
	color: #999;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #ccc;
	overflow: hidden;
	padding: 5px;
}

#panel .lower a:link,
#panel .lower a:visited {
	color: #666;
}

#panel .lower a:hover,
#panel .lower a:active {
	color: #333;
	text-decoration: none;
}

#panel .remember_me input {
	vertical-align: middle;
	margin: -3px 0 0 5px;
}

#panel input {
	margin: -3px 0;
}

#panel input.button {
	padding: 0;
}

#footer ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer ul.menu li {
	margin: 0 5px;
	display: inline;
}

#footer .upper {
	background: #0f0f0f url(images/flame/tcat.png) repeat-x;
	padding: 6px;
	overflow: hidden;
	
	font-size: 12px;
}

#footer a:link,
#footer a:visited {
	color: #aaa;
}

#footer a:hover,
#footer a:active {
	color: #fff;
	text-decoration: none;
}

#footer .upper .language {
	float: right;
	margin: -2px;
}

#footer .upper .language select {
	border-color: #000;
}

#footer .upper ul.bottom_links {
	float: left;
	margin: 3px 0 0 -5px;
}

#footer .lower {
	background: #750000 url(images/flame/thead.png) top left repeat-x;
	color: #fff;
	border-top: 1px solid #000;
	border-bottom: 1px solid #550000;
	overflow: hidden;
	padding: 6px;
	
	font-size: 11px;
}

#footer .lower a:link,
#footer .lower a:visited {
	color: #fff;
	font-weight: bold;
}

#footer .lower a:hover,
#footer .lower a:active {
	color: #fff;
	text-decoration: underline;
	font-weight: bold;
}

#footer .lower #current_time {
	float: right;
}

fieldset {
	border: 1px solid #ddd;
}

table {
	color: #000;
	font-size: 13px;
}

.tborder {
	background: #fff;
	width: 100%;
	margin: auto auto;
	border: 1px solid #ccc;
	padding: 1px;
}

.thead {
	background: #750000 url(images/flame/thead.png) top left repeat-x;
	color: #ffffff;
	border-bottom: 1px solid #550000;
	padding: 8px;
}

.thead a:link {
	color: #ffffff;
	text-decoration: none;
}

.thead a:visited {
	color: #ffffff;
	text-decoration: none;
}

.thead a:hover, .thead a:active {
	color: #ffffff;
	text-decoration: underline;
}

.tcat {
	background: #0f0f0f url(images/flame/tcat.png) repeat-x;
	color: #fff;
	border-top: 1px solid #444;
	border-bottom: 1px solid #000;
	padding: 6px;
	
	font-size: 12px;
}

.tcat a:link {
	color: #fff;
}

.tcat a:visited {
	color: #fff;
}

.tcat a:hover, .tcat a:active {
	color: #fff;
}

.trow1 {
	background: #f5f5f5;
	border: 1px solid;
	border-color: #fff #ddd #ddd #fff;
}

.trow2 {
	background: #efefef;
	border: 1px solid;
	border-color: #fff #ddd #ddd #fff;
}

.trow_shaded {
	background: #ffdde0;
	border: 1px solid;
	border-color: #fff #ffb8be #ffb8be #fff;
}

.trow_selected td {
	background: #FFFBD9;
	color: #000;
	border-right-color: #F7E86A;
	border-bottom-color: #F7E86A;
}

.trow_selected td a:link,
.trow_selected td a:visited,
.trow_selected td a:hover,
.trow_selected td a:active {
	color: #000;
}

.trow_sep {
	background: #ddd;
	color: #000;
	border-bottom: 1px solid #c5c5c5;
	padding: 6px;
	font-size: 12px;
	font-weight: bold;
}

.tfoot {
	background: #750000 url(images/flame/thead.png) top left repeat-x;
	color: #ffffff;
	border-top: 1px solid #fff;
	padding: 6px;
}

.tfoot a:link {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:visited {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:hover, .tfoot a:active {
	color: #ffffff;
	text-decoration: underline;
}

.thead input.textbox,
.thead select,
.tfoot input.textbox,
.tfoot select {
	border: 1px solid #550000;
}

.bottommenu {
	background: #efefef;
	color: #000000;
	border: 1px solid #4874a3;
	padding: 10px;
}

.navigation {
	color: #fff;
	font-size: 12px;
}

.navigation a:link {
color:#fff;
	text-decoration: none;
}

.navigation a:visited {
color:#fff;
	text-decoration: none;
}

.navigation a:hover, .navigation a:active {
	text-decoration: none;
}

.navigation .active {
	color: #fff;
	font-size: small;
	font-weight: bold;
}

.smalltext {
	font-size: 11px;
}

.largetext {
	font-size: 16px;
	font-weight: bold;
}

input.textbox {
	background: #ffffff;
	color: #000000;
	border: 1px solid #ccc;
	padding: 3px;
	
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
}

textarea {
	background: #ffffff;
	color: #000000;
	border: 1px solid #ccc;
	padding: 2px;
	line-height: 1.4;
	
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

select {
	background: #ffffff;
	padding: 3px;
	border: 1px solid #ccc;
	
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
}

input.button {
	padding: 2px;
	cursor: pointer;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
}

.editor {
	background: #f1f1f1;
	border: 1px solid #ccc;
}

.editor_control_bar {
	background: #fff;
	border: 1px solid #ccc;
}

.autocomplete {
	background: #fff;
	color: black;
	border: 1px solid #ccc;
	padding: 1px;
}

.autocomplete_selected {
	background: #a20000;
	color: #fff;
}

.popup_menu {
	background: #fff;
	border: 1px solid #ccc;
}

.popup_menu .popup_item {
	background: #efefef;
	color: #000;
}

.popup_menu .popup_item:hover {
	background: #a20000;
	color: #fff;
}

.trow_reputation_positive {
	background: #ccffcc;
}

.trow_reputation_negative {
	background: #ffcccc;
}

.reputation_positive {
	color: green;
}

.reputation_neutral {
	color: #444;
}

.reputation_negative {
	color: red;
}

.invalid_field {
	border: 1px solid #f30;
	color: #f30;
}

.valid_field {
	border: 1px solid #0c0;
}

.validation_error {
	background: url(images/invalid.gif) no-repeat center left;
	color: #f30;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_success {
	background: url(images/valid.gif) no-repeat center left;
	color: #00b200;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_loading {
	background: url(images/spinner.gif) no-repeat center left;
	color: #555;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

/* Additional CSS (Master) */
img {
	border: none;
}

.clear {
	clear: both;
}

.hidden {
	display: none;
	float: none;
	width: 1%;
}

.hiddenrow {
	display: none;
}

.selectall {
	background: #FFFBD9;
	border-bottom: 1px solid #F7E86A;
	color: #000;
	text-align: center;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.expcolimage {
	float: right;
	width: auto;
	vertical-align: middle;
	margin-top: 3px;
}

img.attachment {
	border: 1px solid #E9E5D7;
	padding: 2px;
}

hr {
	background-color: #000000;
	color: #000000;
	height: 1px;
	border: 0px;
}

#debug {
	float: right;
	text-align: right;
	margin-top: 20px;
	
	font-size: 11px;
}

blockquote {
	border: 1px solid #ccc;
	margin: 0;
	background: #fff;
	padding: 4px;
}

blockquote cite {
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	font-style: normal;
	display: block;
	margin: 4px 0;
}

blockquote cite span {
	float: right;
	font-weight: normal;
}

blockquote cite span.highlight {
	float: none;
	font-weight: bold;
	padding-bottom: 0;
}

.codeblock {
	background: #fff;
	border: 1px solid #ccc;
	padding: 4px;
}

.codeblock .title {
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	margin: 4px 0;
}

.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px;
}

.subforumicon {
	border: 0;
	vertical-align: middle;
}

.separator {
	margin: 5px;
	padding: 0;
	height: 0px;
	font-size: 1px;
	list-style-type: none;
}

form {
	margin: 0;
	padding: 0;
}

.popup_menu .popup_item_container {
	margin: 1px;
	text-align: left;
}

.popup_menu .popup_item {
	display: block;
	padding: 4px;
	white-space: nowrap;
	
	text-decoration: none;
}

.popup_menu a.popup_item:hover {
	text-decoration: none;
}

.autocomplete {
	text-align: left;
}

.subject_new {
	font-weight: bold;
}

.highlight {
	background: #FFFFCC;
	padding-top: 3px;
	padding-bottom: 3px;
}

.pm_alert {
	background: #FFF6BF;
	border: 1px solid #FFD324;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
}

.red_alert {
	background: #FBE3E4;
	border: 1px solid #A5161A;
	color: #A5161A;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
}

.high_warning {
	color: #CC0000;
}

.moderate_warning {
	color: #F3611B;
}

.low_warning {
	color: #AE5700;
}

div.error {
	padding: 5px 10px;
	border-top: 2px solid #FFD324;
	border-bottom: 2px solid #FFD324;
	background: #FFF6BF;
	font-size: 12px;
}

div.error p {
	margin: 0;
	color: #000;
	font-weight: normal;
}

div.error p em {
	font-style: normal;
	font-weight: bold;
	padding-left: 24px;
	display: block;
	color: #C00;
	background: url(images/error.gif) no-repeat 0;
}

div.error.ul {
	margin-left: 24px;
}

.online {
	color: #15A018;
}

.offline {
	color: #C7C7C7;
}

.pagination {
	font-size: 11px;
	padding-top: 10px;
	margin-bottom: 5px;
}

.tfoot .pagination, .tcat .pagination {
	padding-top: 0;
}

.pagination .pages {
	font-weight: bold;
}

.pagination .pagination_current, .pagination a {
	padding: 3px 6px;
	margin-bottom: 3px;
}

.pagination a {
	background: #f5f5f5;
	border: 1px solid #ccc;
}

.pagination .pagination_current {
	background: none;
	color: #000;
	border: none;
	
	font-weight: bold;
}

.pagination a:hover {
	background: #a20000;
	color: #fff;
	border-color: #750000;
	
	text-decoration: none;
}

.thread_legend, .thread_legend dd {
	margin: 0;
	padding: 0;
}

.thread_legend dd {
	padding-bottom: 4px;
	margin-right: 15px;
}

.thread_legend img {
	margin-right: 4px;
	vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
	margin: 0;
	padding: 0;
}

.forum_legend dd {
	float: left;
	margin-right: 10px;
	margin-top: 7px;
}

.forum_legend dt {
	margin-right: 10px;
	float: left;
}

.success_message {
	color: #00b200;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.error_message {
	color: #C00;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.post_body {
	padding: 5px;
}

.post_buttons {
	background: #f5f5f5;
	padding: 3px 3px 0 3px;
	border-bottom: 1px solid #ddd;
}

.post_content {
	padding: 5px 10px;
}

.quick_jump {
	background: url(images/jump.gif) no-repeat 0;
	width: 13px;
	height: 13px;
	padding-left: 13px; /* amount of padding needed for image to fully show */
	vertical-align: middle;
	border: none;
}

.repbox {
	font-size:16px;
	font-weight: bold;
	padding:5px 7px 5px 7px;
}

._neutral {
	background-color:#FAFAFA;
	color: #999999;
	border:1px solid #CCCCCC;
}

._minus {
	background-color: #FDD2D1;
	color: #CB0200;
	border:1px solid #980201;
}

._plus {
	background-color:#E8FCDC;
	color: #008800;
	border:1px solid #008800;
}

.pagination_breadcrumb {
	background-color: #efefef;
	border: 1px solid #fff;
	outline: 1px solid #ccc;
	padding: 5px;
	margin-top: 5px;
	
	font-weight: normal;
}

.pagination_breadcrumb_link {
	vertical-align: middle;
	cursor: pointer;
}

form #message {
    width: 500px;
}

no i need to take a look at the usercp and member profile templates
it's not just the member profiles as I showed, That's the CSS you don't need to have admin to help.. I'll just keeping looking myself it's only when there is too much information on the area in the middle. So yeah if you cannot help, than please don't ask for admin you don't need it.
I belive it is a template issue not a css issue.
we need to see the templates of the affected areas to see if anything is amiss
I'm sorry adbrad, but he is not giving you admin details because he don't trust any one. Rolleyes

@OP: Replace #container CSS with the following;
#container {
	width: 95%;
	color: #fff;
	border: 1px solid #E6E6FA;
	margin: auto auto;
	padding: 20px;
	text-align: left;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
}
Pages: 1 2