CODEWITHSUNDEEP
htmlcssflaskjinja2
user689383
user689383

Reputation:

CSS not extending?

I am working on a project I created myself (www.deepsecurity.org) which people will be able to paste stuff and much more in the future.

I have a problem with this project though, if you check the site and check the "Th Bible" paste someone posted, you can clearly see that the post goes out of the black screen and you cannot read the rest anymore.

How can I fix this? Been trying for hours.

I am using Flask + SQLAlchemy + WTForms and Pygments.

Take a look at the css (I write very back css, sorry about that)

style.css

@import url('topbar_style.css');
@import url('errors.css');
@import url('showcodes.css');
@import url('addcode.css');
@import url('highlight.css');
@import url('about.css');
@import url('login.css');

html {
    font-family: 'Lucida Console', Monaco, monospace;
    font-size: 13px;
    color: #FFFFFF;
    background: #F2F2F2 url('images/bg_body.png') repeat-x 0 0;
    display: inline-block
}

.page {
    overflow: hidden;
    margin: 3em auto;
    width: 950px;
    display: inline-block
    border: 5px solid #ccc;
    padding: 0.8em;
    border: 1px solid #383838;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #202020;
}

div.codes h1 {
    font-family: 'Lucida Console', Monaco, monospace;
    margin: 0px;
    color: #F2F2F2;
    border-bottom: 2px solid #eee;
}

h2 { 
    font-size: 15px;
}

div.about-text { 
    white-space: pre; 
}

div.codes {
    white-space: pre;
}

showcodes.css

.codes {
    display: inline;
    list-style: none; 
    margin: 0; 
    padding: 0;
}

.codes li { 
    margin: 0.2em 1em;
}

This is what happens after changing what you guys told me to

Upvotes: 1

Views: 209

Answers (4)

Don
Don

Reputation: 839

  1. You can't read the rest of the text outside the div because of

    .page {
 overflow: hidden;
}

  2. And it isn't wrapping because of those darn pre tags. Remove them.

  3. Also, change

    div.codes {
 white-space: pre;
}

to 

   div.codes {
    white-space: normal;
   }

Upvotes: 0

George Katsanos
George Katsanos

Reputation: 14175

Ok, so, you have two problems in this page:

  1. style.css , line 44, 

    div.codes {
    white-space: pre;
}

    delete that.

  2. In the "Bible" part of the page, the paste has a <code><pre> tag, which basically forces the text to be "unformatted" http://reference.sitepoint.com/html/pre you can either change all code/pre elements to div's or p's, or you can simple add this line to your css file:

    code {
    white-space: normal;
}

problem solved!

Upvotes: 2

Joel Kinzel
Joel Kinzel

Reputation: 970

It is because of the white-space CSS declaration. To fix it use the following: 

.codes code { 
    white-space:pre-wrap; 
}

This will keep the pre-formatted text as is, but force the it to wrap.

Upvotes: 1

dezman
dezman

Reputation: 19358

I believe it is because white-space: pre only follows line breaks that were preformatted, change it to white-space: normal;

Upvotes: 0

Related Questions