Please login or register.

Login with username, password and session length
Advanced search  

News:

Latest sNews - sNews 1.7 - with its own forums - for discussion and user mods.

Author Topic: <code> different colored PHP code - problem  (Read 1934 times)

henrich

  • Sr. Member
  • ****
  • Karma: 23
  • Posts: 381
  • Passion for quality and excellence!
    • My personal blog and portofolio
<code> different colored PHP code - problem
« on: January 30, 2008, 05:00:49 am »

Hi folks,

I have a problem, well i have more problems but let's take them step by step :P

The current problem is about the MOD written by Rui Mendes - Adding different colored PHP code in article. The problem is not with Rui or his MOD, it's more with my CSS rules.

Let's see what is my problem:



OK. For the articles i have the following HTML structure:

Quote
<div id="content">
   <div id="leftcontent">
      <div id="articles">
<h2>title</h2><div class="date">date</div>
<p><code>
PHP CODE
</code></p><div class="infoline"> infoline stuff</div>
</div>
</div>
<div id="rightcontent"> ... and more

The css rules:

Quote
#content {
   background : #ffffff;
   margin : 0px auto 0px auto;
   width : 950px;
}

#leftcontent {
   float : left;
   width : 555px;
   text-align : center;
   margin : 0px auto 0px auto;
}

#articles {
   margin: 28px 10px 10px 10px;
   text-align : left;
   font : 12px Verdana;
   color : #414141;
}

#articles h2 {
   margin: 25px 0px 2px 0px;
   padding: 0px 0px 1px 15px;
   line-height: 25px;
   background : url("../img/arrow.jpg") no-repeat 0px 10px;
   border-bottom : 1px dotted #d0d0d0;
   font : normal 25px/25px Lucida Sans Unicode;
   color : #ff6500;
   letter-spacing : -1px;
}

#articles h2 a {
   color : #ff6500;
   text-decoration : none;
}

#articles h2 a:hover {
   color : #006699;
   text-decoration : none;
}

#articles p {
   text-align : left;
   font : 12px/18px Verdana;
   padding : 10px 0px;
}

#articles code {
   background : #f7f7f7;
   border-top : 2px solid #e7e7e7;
   border-bottom : 2px solid #e7e7e7;
   padding : 5px;
   display : block;
   margin : 1em auto;
}

#articles blockquote {
   border-left: 2px dotted #8f8f8f;
   background: #f7f7f7;
   padding: 10px;
   margin : 10px 0px 10px 20px;
   font : italic 12px Verdana;
}

#articles .date {
   font: normal 12px Verdana;
   color: #939393;
   padding: 0px;
   margin: 0px 0px 10px 0px;
   text-align : right;
}

#articles .infoline {
   font: normal 12px Verdana;
   color: #939393;
   padding: 2px 0px 0px 0px;
   margin: 10px 0px 20px 0px;
   text-align : right;
   border-top : 1px dotted #d0d0d0;
}

So as you can see i have line breaking problems at this MOD, because of the <code> tag.

Any good suggestions would be much appreciated :)
Logged
By(e) Henrich :)
------------------------------
IT related blog

Zucye

  • Sr. Member
  • ****
  • Karma: 5
  • Posts: 347
    • Simplemente una Mujer
Re: <code> different colored PHP code - problem
« Reply #1 on: January 30, 2008, 05:15:22 am »

If your issue is the line overrun, I have the same "problem"

I tried modifying the code tag dimensions in the style sheet and also tried using a table without favorable results.

Now, after a while it kind of made sense that the line break has to be entered manually. 

But if there is a way around it, I would love to know how is done.
« Last Edit: January 30, 2008, 05:24:34 am by Zucye »
Logged
We can always learn from our failures, not so much from obvious success - C. Robinson (W. Disney). :)

henrich

  • Sr. Member
  • ****
  • Karma: 23
  • Posts: 381
  • Passion for quality and excellence!
    • My personal blog and portofolio
Re: <code> different colored PHP code - problem
« Reply #2 on: January 30, 2008, 07:56:22 am »

Yes, sure it must to be!

Fred already demonstrated me that for him it works perfectly, unfortunately his suggestions had no results for me. So i decided to post here all the classes, maybe someone can help, and maybe it's easier to understand the structure of my html code if you see all of them.
Logged
By(e) Henrich :)
------------------------------
IT related blog

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • I'm a self-made man and worships my creator.
    • p-ahlqvist.com
Re: <code> different colored PHP code - problem
« Reply #3 on: January 30, 2008, 09:41:29 am »

Well, there isn't to my knowledge anything to do in code tags... but if we could include our code in <pre> tags instead. They do preserve line breaks, multiple blanks, tabs between words and other formatting commonly used in code. However, in some cases, if body of your site is narrow(er) or your line of code is really long, it will not wrap and will overflow over your sidebar.

But fear not... there is a way around that, and here's the CSS for it (however, it do not validate):
Code: [Select]


pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Logged
"It's only dead fish that goes with the flow... "
Updated

henrich

  • Sr. Member
  • ****
  • Karma: 23
  • Posts: 381
  • Passion for quality and excellence!
    • My personal blog and portofolio
Re: <code> different colored PHP code - problem
« Reply #4 on: January 30, 2008, 09:53:30 am »

Thank you Patric for your answer, i inserted the CODE block into the PRE tag and added the PRE rules into the .css file, the result is even worse than before :P

http://img149.imageshack.us/my.php?image=code2nb0.jpg
Logged
By(e) Henrich :)
------------------------------
IT related blog

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • I'm a self-made man and worships my creator.
    • p-ahlqvist.com
Re: <code> different colored PHP code - problem
« Reply #5 on: January 30, 2008, 10:09:03 am »

That's odd... I don't really remember how I did it, but I have done this before with no funny-business... I'll see if I can manage to play some later...

Ok... a very fast test, hehe... http://p-ahlqvist.com/home/testing-prewrap/ click the Show JS code link and you'll see that it works for moi... I just made this line looooooong to see if it breaks within the "box":
Code: [Select]
  if(document.getElementById(objname).style.display != "none") return; // cannot slide down something that is already visible - This line is very long without pre-wrap, so long it hurts my intestions so long it hurts my intestions so long it hurts my intestions so long it hurts my intestions so long it hurts my intestions
and it breaks just fine here.
« Last Edit: January 30, 2008, 11:09:38 am by Patric Ahlqvist »
Logged
"It's only dead fish that goes with the flow... "
Updated

henrich

  • Sr. Member
  • ****
  • Karma: 23
  • Posts: 381
  • Passion for quality and excellence!
    • My personal blog and portofolio
Re: <code> different colored PHP code - problem
« Reply #6 on: January 30, 2008, 10:12:17 pm »

Ah, that's right, it seems i am cursed, only for me does not work :)
Logged
By(e) Henrich :)
------------------------------
IT related blog

henrich

  • Sr. Member
  • ****
  • Karma: 23
  • Posts: 381
  • Passion for quality and excellence!
    • My personal blog and portofolio
Re: <code> different colored PHP code - problem
« Reply #7 on: January 31, 2008, 04:21:29 am »

I have found a temporary solution, i inserted into the #articles code rule the next line:

Quote
#articles code {
   background : #f7f7f7;
   border-top : 2px solid #e7e7e7;
   border-bottom : 2px solid #e7e7e7;
   padding : 5px;
   display : block;
   margin : 1em auto;
   overflow: auto;
}

Now the code section have horizontal scrolling but still better than the old look, at least until i find a better solution.

Logged
By(e) Henrich :)
------------------------------
IT related blog