MyBB Community Forums

Full Version: how can i do fix width
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Coding fine-tuning:

padding: 5px 5px; is insignificant.

padding: 5px; means:
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;

To further elaborate:
padding: 5px 10px; means:
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;

The problem of OP is no way related to padding. The problem is about overflow.
(2013-11-14, 09:24 AM)Flavius Popa Wrote: [ -> ]I see that you paste in global.css:
.wtext {
word-wrap: normal|break-word;
}
bur will not work.
You must to use or normal or break-word (not both!).
Anyway, try what I said above.


Let me to check your css... I really don't know how to solve this... maybe others know better. I will try to find a solution.
Basically you want those long words to be broken into 2 or more pieces, right?

Yes, exactly!
Thank you

effone
I do not understand what you mean.
Which part should be Changed?
@effone... indeed but I was not sure what he wanted

@admin13 - Well... it seems that you have a custom css.

.moyellow {
	background: #F8FACF;
	color: #000000;
	border-top: 1px solid #444444;
	border-bottom: 4px solid #444444;
	text-align: right;
	text-shadow: 0px 2px 1px white;
	border-radius: 8px;
	margin: 10px auto;
	padding: 5px 20px;
	box-shadow: 0px 2px 5px #EEEEEE;
	font-size: 8pt;
}

.moblack {
	background: #D6D6D6;
	color: #000000;
	border-top: 1px solid #444444;
	border-bottom: 4px solid #444444;
	text-align: right;
	text-shadow: 0px 2px 1px white;
	border-radius: 8px;
	margin: 10px auto;
	padding: 5px 20px;
	box-shadow: 0px 2px 5px #EEEEEE;
	font-size: 8pt;
}

.moyellow {
	background: #F8FACF;
	color: #000000;
	border-top: 1px solid #444444;
	border-bottom: 4px solid #444444;
	text-align: right;
	text-shadow: 0px 2px 1px white;
	border-radius: 8px;
	margin: 10px auto;
	padding: 5px 20px;
	box-shadow: 0px 2px 5px #EEEEEE;
	font-size: 8pt;
}

.moblue {
	background: #C9E7F5;
	color: #000000;
	border-top: 1px solid #444444;
	border-bottom: 4px solid #444444;
	text-align: right;
	text-shadow: 0px 2px 1px white;
	border-radius: 8px;
	margin: 10px auto;
	padding: 5px 20px;
	box-shadow: 0px 2px 5px #EEEEEE;
	font-size: 8pt;
}

.mogreen {
	background: #C9F5D7;
	color: #000000;
	border-top: 1px solid #444444;
	border-bottom: 4px solid #444444;
	text-align: right;
	text-shadow: 0px 2px 1px white;
	border-radius: 8px;
	margin: 10px auto;
	padding: 5px 20px;
	box-shadow: 0px 2px 5px #EEEEEE;
	font-size: 8pt;
}

.mored {
	background: #FACDDD;
	color: #000000;
	border-top: 1px solid #444444;
	border-bottom: 4px solid #444444;
	text-align: right;
	text-shadow: 0px 2px 1px white;
	border-radius: 8px;
	margin: 10px auto;
	padding: 5px 20px;
	box-shadow: 0px 2px 5px #EEEEEE;
	font-size: 8pt;
}

First of all, in your global.css keep only ONE ".moyellow" - is repeated
.moyellow {
	background: #F8FACF;
	color: #000000;
	border-top: 1px solid #444444;
	border-bottom: 4px solid #444444;
	text-align: right;
	text-shadow: 0px 2px 1px white;
	border-radius: 8px;
	margin: 10px auto;
	padding: 5px 20px;
	box-shadow: 0px 2px 5px #EEEEEE;
	font-size: 8pt;
}

And you can now try to put the line word-wrap: break-word; inside .moyellow

.moyellow {
    word-wrap: break-word;
    background: #F8FACF;
    color: #000000;
    border-top: 1px solid #444444;
    border-bottom: 4px solid #444444;
    text-align: right;
    text-shadow: 0px 2px 1px white;
    border-radius: 8px;
    margin: 10px auto;
    padding: 5px 20px;
    box-shadow: 0px 2px 5px #EEEEEE;
    font-size: 8pt;
}

Still no effect ?
Not all these are required. I'm in a little hurry to take a trial with your css, but this much I can say; if you are using a fixed width (not in % value) layout you can declare your post-body maximum width. This way (example, change the value as needed):

.post_body {
max-width: 600px;
}

This will correct your table from being expanded; but the text will still be overflown and to fix that the code is what I've suggested at the first post.

On another note; the default theme is not being overflown.
Thank
I remove custom code
I put your code
Still does not work

(2013-11-14, 09:45 AM)effone Wrote: [ -> ]Not all these are required. I'm in a little hurry to take a trial with your css, but this much I can say; if you are using a fixed width (not in % value) layout you can declare your post-body maximum width. This way (example, change the value as needed):

.post_body {
max-width: 600px;
}

This will correct your table from being expanded; but the text will still be overflown and to fix that the code is what I've suggested at the first post.

On another note; the default theme is not being overflown.

If I put the following code
max-width: 600px;
Format is correct
But the text continues

[attachment=30518]
admin13, you don't use the default stylesheet, this is clear... As effone said:
(2013-11-14, 09:45 AM)effone Wrote: [ -> ]the default theme is not being overflown.
All these .moyellow, red, black etc. are not from MyBB default theme.
I really don't know how can help you. Sorry, but I give up. Revert all changes (remove word-wrap: break-word;) and... perhaps you should ask for help from the Audentio, (but... you've removed their credit line...).

Maybe effone or other members of the MyBB community can offer you a better help.

(2013-11-14, 09:45 AM)admin13 Wrote: [ -> ]If I put the following code
max-width: 600px;
Format is correct
But the text continues

Try also (to split your text) - but this is for posts not for div with class ".moyellow":
.post_content {
word-wrap: break-word;
max-width: 600px;
}
My English is not good
The use of words is difficult for me
But I'm very much appreciative of your

Heart Heart

[attachment=30519]
my problem is solved
(2013-11-14, 10:05 AM)admin13 Wrote: [ -> ]my problem is solved
Yes but... probably you must to put these lines also in .moyellow class (black, red etc)...
word-wrap: break-word;
max-width: 600px;

where word-wrap: break-word; - is to split long words
and max-width: 600px; - is width of your div's

Anyway, I hope you will properly manage classes for your div's. Good luck!
Unfortunately I am not allowed to donate more
But thank you to all my friends
and especially you Heart effone & Flavius Popa
The idea to solving this problem belongs to effone (not mine). He is more experienced but was in hurry right now.
Pages: 1 2