Suggestion to Change Code Markup CSS Styling

cocos2d for iPhone » Programming » Programming - Everything else

Suggestion to Change Code Markup CSS Styling

(12 posts) (2 voices)

Started 2 years ago by sunsu
Latest reply from sunsu

Tags:

No tags yet.

sunsu
Member

Might I suggest altering the current way that Code is displayed when using the backticks?

It seems that it would work a lot better with this Fixed Width layout if the code was in a fixed width div that could scroll left or right if it went out of the bounds of the post area. Too often I see long lines of code that go out of the site design bounds. I guess it isn't I huge problem, but I just thought I would suggest a simple fix.

.codeclass {
background-color: #C0C0C0;
width: 500px; /* whatever the width of the main content area */
overflow: auto;
}

Posted 2 years ago #
riq
Key Master

Your code doesn't seem to work.

DISCLAIMER:
I'm know little about CSS

I changed .codeclass to code and it sort-of worked.
. The background color worked (but looked ugly)
. The width was not affected

Posted 2 years ago #
sunsu
Member
Let me test some more and see. It depends on what type of element the .codeclass is applied to. If its not a block element, then i wouldn't have functioned correctly.

testing:
```
[self test:test test:test test:test test:test test:test test:test test:test test:test test:test test:test test:test test:test test:test test:test test:test test:test test:test ]
```
Posted 2 years ago #
sunsu
Member
When I look at the HTML generated from those backticks its just a:
<pre><code></code></pre>

The "code" tag is not a block element by default, so thats why it didn't work. Add "display: block" and it should work.

When I test this it works fine:
```
<code style="display: block; width: 500px; overflow: auto;">
```
Posted 2 years ago #

sunsu
Member

To be more clear:

code {
display: block;
background-color: #C0C0C0;
width: 500px; /* whatever the width of the main content area */
overflow: auto;
}

Posted 2 years ago #

riq
Key Master

done. thanks.

Posted 2 years ago #
riq
Key Master

ouch. I had the revert the change.
The problem is that the backtick can also be used within a paragraph. For example: Sprite, Label are "backticked".

Posted 2 years ago #
sunsu
Member
Hmm yes, that would pose a problem.

You could alternatively try adding the same code I listed above to the ".post pre {}" style instead of the "code" tag (because it looks like if the code is in it's own paragraph then bbpress wraps it in a "pre" tag).

I'm not sure if you will like the way it will force
```
 tags to scroll though.
```
Posted 2 years ago #
riq
Key Master

thanks. it looks much better now.

Posted 2 years ago #
sunsu
Member

Hmm..well the "overflow: auto" doesnt seem to be causing it to scroll in some cases. Might wanna change it to "overflow: scroll" and see if you like that better.

Posted 2 years ago #
riq
Key Master

I've added some css styles from the wiki code style.

Which post is not scrolling OK ?

Posted 2 years ago #
sunsu
Member

They actually seem to be working perfectly now. I must have looked while you were working on it. Thanks for taking the time to make the changes! Code is much easier to read now.

Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.