Tagged: CSS Toggle Comment Threads | Keyboard Shortcuts

  • Peter Mahoney 11:31 pm on December 11, 2017
    Tags: CSS, fonts,   

    Total top tip for CSS font code and event font files.
    https://www.fontsquirrel.com/

    Font Squirrel let’s you update a font and it’ll create the relevant CSS code for you, or choose from their pretty large font library.

    Permalink | Reply
     
  • Peter Mahoney 2:34 pm on February 21, 2013
    Tags: , CSS, snippets   

    Displaying code snippets easily 

    With the new site and all I’ve some CSS to get through.

    I wanted to make the “pre” element work as a code snippet display for me, and needed a fix to get it to wrap text (since the “width” attribute has been defunct for some time).

    Here’s the solution!

    pre {
     background-color: #F2F2F2;
     padding: 5px 5px 5px 5px;
     white-space: pre-wrap;       /* css-3 */
     white-space: -moz-pre-wrap;  /* 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+ */
    }
    Permalink | Reply
     
    • Peter Mahoney 12:33 pm on March 1, 2013

      Sadly with WordPress in particular this isn’t much help, because php code still gets executed rather than displayed.

      I do recommend “SyntaxHighlighter Evolved”, a plugin that makes displaying code pretty damn simple.

      Permalink | Reply
  • Peter Mahoney 3:00 pm on February 13, 2013
    Tags: #fridayfreebie, CSS, files, , header, html5, , , template, top.php, website template   

    Website code template 

    This is for my fellow developers out there.

    I have a small series of files I copy and paste whenever I’m about to start a new project, they have default templates for various files I use a lot. Like a header, footer, index page, blank stylesheet, and something called “top.php” that I use to open sessions and connect to databases.

    There are also some of my standard folders pre-made too (with the correct server permissions) like “img” (images) and “upl” (uploads).

    This was going to be last week’s #fridayfreebie, but here it is on a Wednesday instead.

    This particular version is the one I use most commonly, and it’s set up for:

    • PHP
    • MySQL
    • HTML5
    • CSS (any version!)
    • and ideally a unix/linux based server, because it references the top level of the site as being “/”.

    I’ve zipped it up to share! Feel free to do whatever you want with it—although there is a lot of Peter Mahoney specific stuff in there, so you might want to take that out. Unless of course you like giving me credit for your work. 🙂

    HTML5 website template (.zip)

    Permalink | Reply
     
  • Peter Mahoney 5:04 pm on June 11, 2012
    Tags: CSS,   

    New Twitter logo in pure CSS 

    This is why I love CSS. Now, it will only work in newer browsers, but does look awesome.

    Roll over it and you’ll see how they made this, with a variety of CSS circles.

    You can of course also view the code by right hand clicking and viewing source. This is what I love about the web, something that makes us really say WOW, in just a hundred odd lines of code.

    Permalink | Reply
     
  • Peter Mahoney 5:44 pm on May 22, 2012
    Tags: align, CSS, vertical   

    Double-tagging, or CSS vertical align 

    I’ve tried several ways of doing this, and wanted to post what I’ve found to be the best. And based on testing, it’s also the most cross-browser compliant solution.

    The issue is (seemingly) simple. How do you use the equivalent of valign=”middle” in CSS? With tables this was pretty simple. But we’ve all moved on from tables for layout. I hope.

    While CSS (including CSS3) does have a vertical-align, you can’t use it in the same way for you text-align for example. You can’t simply tell it that all text within a container should sit halfway down the div.

    The way I’ve found most useful is to double-tag. That is, to use a parent div, and then a child within it.

    Here’s the code to show what I mean:

    #content1 {
    display:table;
    height:400px;
    }
    
    #content2 {
    display:table-cell;
    vertical-align:middle;
    }
    
    And then when writing the HTML:
    <div id="content1">
    <div id="content2">
    This text will sit halfway down the div, regardless of whether I have one line of text, or three.
    </div>
    </div>

    In essence the first div says “Go on, act like I’m a table”.  And then second continues, “And let’s just say I’m a table cell. Because cells *can* have vertical-align assigned to them!”

    Double-tagging.

    Permalink | Reply
     
c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel