Web design

Web design  edit   (Category  edit)

Web development  edit   (Category  edit)

Disambiguation/Description: Web design is concerned with the presentation concerns (the "stylish", "layouty", "graphic design" aspects) of Web development (as opposed to the programming). It's still pretty technical (CSS, HTML), but quite different from traditional programming. It is a branch of Web development.

Problem: How you can make a <pre> tag with really wide text so that it doesn't go wider than the container it's inside of? [Displaying code samples (category)] (<pre> tags)

See also: Syntax highlighting

[1] is an excellent example of how to do this... It stays at a fixed width until you hover over it, and then it grows in width to try to show the whole code snippet.

HTML/JavaScript:

<div class="typocode">
<pre class="unmoused" onmouseover="this.className='moused'" onmouseout="this.className='unmoused'">
<code class="typocode_default">
  class String
    def pluralize
      Inflector.pluralize(self)
    end
  end
</code>

CSS:

/* Code blocks */

div.typocode {
        margin-left: -1em;
}

div.typocode pre, div.typocode pre.unmoused {
        position: relative;
        background: white;
        width: 390px;
        font-size: 11px;
        padding: 5px 10px;
        border: solid 1px #02e25c; 
        border-right: dashed 1px #02e25c;
        overflow: hidden;                    /* !!! */
        z-index: 1;                          /* !!! */
}

code {
        font-size: 11px;
        color: #666;
}

a code {
        color: #00d455;
}

div.typocode code {
        color: black;
}

div.typocode pre.moused {
        width: 670px;
        z-index: 3;                    /* !!! */
        border: solid 1px #02e25c; 
        border-right: solid 1px #02e25c;
        }

Or if you'd rather use scrollbars than mouse-over effects (as I think I would), check out http://www.onrails.org/articles/2006/11/17/rake-command-completion-using-rake :

<div class="typocode"><pre><code class="typocode_default"><notextile>  #!/usr/bin/env ruby

  require 'rubygems'
  require 'rake'
  DOTCACHE = File.join(File.expand_path('~'), ".rake_task_cache" , Dir.pwd.hash.to_s)
  RAKE_FILES = FileList[ 'Rakefile', 'lib/tasks/**/*.rake', 'vendor/plugins/*/tasks/**/*.rake']
  file DOTCACHE => RAKE_FILES do
    tasks = `rake --silent --tasks`.split("\n")[1..-1].map { |line| line.split[1] }
    require 'fileutils'
    dirname = File.dirname(DOTCACHE)
    FileUtils.mkdir_p(dirname) unless File.exists?(dirname)
    File.open(DOTCACHE, 'w') { |f| f.puts tasks }
  end

  Rake::Task[DOTCACHE].invoke
  tasks = File.read(DOTCACHE)
  #...

  </notextile></code>

CSS:

#content code { 
        font: normal 12px "bitstream vera sans mono", monaco "lucida console", "courier new", courier, serif;
}

#content pre {
        color: #63FF00;
        background: #000;
        overflow: auto;
        font: normal 12px "bitstream vera sans mono", monaco "lucida console", "courier new", courier, serif;
        margin: 0.9em 0; padding: 8px;
}

Is that all it took??

Bulletproof Web Design (book)

Bulletproof Web Design (ISBN 0321346939)

• Find this book on Amazon.com
• Find this book on Barnes & Noble
• Find this book on BooksPrice

http://www.simplebits.com/publications/bulletproof/