Articles tagged with “markup”
- Multiple Loops and Multiple Columns with WordPress, (X)HTML and CSS
- Recently, I have been getting a lot of requests for multiple-loop configurations in WordPress. It seems that multiple-column, multiple-loop configurations are in high demand these days, especially ones that display posts like this: First column, first loop: display posts #1-5 Second column, second loop: display posts #6-10 Third column, third loop: display posts #11-15 Using WordPress and a little CSS, this configuration is relatively easy to accomplish. Let’s cut right to ...
- Does Google Hate Web Standards?
- Consider the Google home page — arguably the most popular, highly visited web page in the entire world. Such a simple page, right? You would think that such a simple design would fully embrace Web Standards. I mean, think about it for a moment.. How would you or I throw down a few lists, a search field, and a logo image? Something like this, maybe:...
- Perishable Press Gets Naked
- In celebration of CSS Naked Day, Perishable Press has disabled it’s CSS stylesheet for today, April 9th, 2008 (which also happens to be my 36th birthday)! What are you waiting for? Go get naked!! ;)
- Content Negotiation for XHTML Documents via PHP and htaccess
- In this article, I discuss the different MIME types available for XHTML and explain a method for serving your documents with the optimal MIME type, depending on the capacity of the user agent. Using either htaccess or PHP for content negotiation, we can serve complete, standards-compliant markup for our document’s header information. This ...
- CSS/(X)HTML Tutorial: Hovering Accessibility Jump Menu
- Recently, a reader named Don asked about this theme’s accessibility (accesskey) jump menu located at the top of each page. Several people ...
- XHMTL/CSS Remix: Creative Commons License
- Not too long ago, I played with the idea of releasing article content under a Creative Commons (Attribution-NonCommercial-ShareAlike 2.0) License. At the time, I wanted to host my own copies of the two associated CC license pages. During the process of uploading the pages to my own server, several minor adjustments (regarding image paths, etc.) needed to be made to the source code. After tweaking a few things in the ...
- Pimping the Details, Part 1: Post Content
- In today’s highly competitive blogosphere, every edge counts. There are many aspects of a site or blog that can be easily acquired. Fancy themes may be purchased, nifty plugins are freely downloaded, and even snazzy content is immediately available. Indeed, setting up a decent-looking blog is so easy that virtually anyone can do it. Even so, just spend a little time ...
- What is the Difference Between XHTML 1.0 Strict and XHTML 1.1?
- As some of you (e.g., Louis) may have noticed during the recent site redesign, I decided to switch the default doctype from XHTML 1.0 Strict to XHTML 1.1. Just in case you were wondering, XHTML 1.1 is different than XHTML 1.0 in three important ways 1: On every element, the ...
- Absolute Horizontal and Vertical Centering via CSS
- Recently, a reader named Max encountered some scrolling issues while implementing our absolutely centered layout technique. Of course, by “absolutely centered” we are referring to content that remains positioned dead-center regardless of how the browser is resized. After noticing the scrollbar deficiency, Max kindly dropped a comment to explain the issue: [...] the div solution works well, only one problem maybe somebody can help:...
- Bare-Bones HTML/XHTML Document Templates
- In this post I have assembled a concise collection of conforming, bare-bones document templates for the following doctypes: Document Templates XHTML 1.0 XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset XHTML Basic 1.0 XHTML 1.1 XHTML 1.1 XHTML Basic 1.1 HTML 4.01 ...
- Rethinking Structural Design with New Elements in HTML 5
- [ Keywords: html, design, markup, structure, elements, header, footer, article, section, header, nav ] HTML 5, also known as Web Applications 1.0, provides new markup elements that will change the way you design your web pages. The new elements replace commonly used divisions in web documents, facilitating an even greater degree of separation between structure (HTML) and presentation (...
- The Friendliest Link Targets in the Neighborhood
- [ Keywords: link, target, blank, replace, self, parent, top ] The target attribute for anchor elements () specifies the location in which the referenced document should load. For example, to open a link in a new window, we would use a target value of _blank. Although this is a commonly employed technique, the target attribute has ...
- Embed Flash or Die Trying
- [ Keywords: Flash, embed, object, nested, cooked, satay, SWFObject, UFO, methods, standards ] Embed Flash or Die Tryin’ Web designers and developers looking to embed Flash content into a web page currently enjoy a wide variety of methods from which to choose. The most common methods vary along several key dimensions, including standards-compliance, user-friendliness, and universal support. Some methods make it easy to provide alternative content, others enable ...
- Embed QuickTime Notes Plus
- This post contains random notes for embedding QuickTime within web pages. QuickTime Embed Attributes via CSS (X)HTML Code for Embedding/Including QuickTime...
- Embed Flash and Video via the object Tag
- Embed Windows Media Player via the object tag Here is the general format for including .wmv files in web pages: Embed Windows Media Player via object and classid Here is the general format for including .wmv files in web pages using classid: ...
- Embed External Content via iframe and div
- By using an within a , it is possible to include external web content in most any web document. This method serves as an excellent alternative to actual frames, which are not as flexible and definitely not as popular. Indeed, with CSS, the placement, sizing, and styling of div’s provides endless possibilities for embedding external or even internal web content into pages that would otherwise require the use of frames, Flash, or JavaScript. This method works ...
- Theme Edits for IE7
- This post is a working repository of code edits and other changes made to Perishable Press themes in order for them to function properly in Internet Explorer 7 (IE7).. Jupiter Theme *:first-child+html div.comwrap { overflow: visible; } Lithium Theme *:first-child+html div.comwrap { overflow: visible; } Casket Theme Removed html selector from first ruleset.
- Exploring the (X)HTML Link Element
- Most Web authors are familiar with the <link> element included within the <head> element of many (X)HTML documents. The <link> element enables authors to associate external resources to the (X)HTML document. <link> element references include various types of metadata, navigation, and styling information. This brief post provides examples of these and other important uses of the (X)HTML <link> element....
- One Link to Open Them All
- Welcome to Perishable Press! This article explains several methods for opening multiple frames with a single link. For more excellent (X)HTML information, check out the (X)HTML tag archive. If you like what you see, I encourage you to subscribe to Perishable Press for a periodic dose of online ...
- Absolutely Centered Layout
- Absolute Centering with CSS & (X)HTML Designing an absolutely centered layout involves centering a division both horizontally and vertically. When this is done, the centered division (or other element) is centered according to the browser window. To accomplish this, use this (X)HTML: And employ this CSS (commented with explanations): body { background-color: #333; /* cosmetic */ margin: 0px; /* required */ } div#wrapper { background-color: red; /* cosmetic */ height: 0px; /* set to taste */ /* required */ position: absolute; overflow: visible; display: block; width: 100%; left: ...
- Fun with Downlevel Conditional Comments
- Ever since Internet Explorer 5 (IE5), Microsoft has included browser support for "downlevel conditional comments," a non-scripted method of browser detection. Downlevel conditional comments (DCC) are a useful tool for targeting directives to specific versions of Internet Explorer. Downlevel conditional comments consist of an opening statement and a closing statement. Taken together, the statements enclose markup, CSS, JavaScript, or any other element typically included within an (X)HTML document. The DCC may be placed anywhere within the document ...
- XHTML Document Header Resource
- This XHTML header tags resource is a work in progress, perpetually expanding and evolving as new information is obtained, explored, and integrated. Hopefully, you will find it useful in some way. Even better, perhaps you will share any complimentary or critical information concerning the contents of this article. Table of Contents Important Information XML Declaration The !DOCTYPE The html tag ...
- HTML Frames Notes Plus
- If you think that nobody uses frames anymore, think again. I personally know of one person who threw down some tuf HTML frame action for a personal site. So, in the interest of prosperity, we are hereby establishing this post as our official dumping ground for all HTML frame-related garbage. Break your pages out of someone else’s frames We begin our journey with a totally sick JavaScript method for breaking pages out of the illegitimate frames of some ineffectually ...
- Accessibility Notes Plus
- Just a few useful accessibility notes.. Add accesskey attributes to important list items, content areas, and any other key areas of the document. Use alphanumeric characters as accesskey values, as in this example: hhome mmenu ssearch When an accesskey attribute is present within a link tag, pressing alt+letter on the keyboard is equivalent to double-clicking that link. Generally speaking, the presence of ...
- Stylish Deleted Text
- Fashion stylish deleted text in XHTML via the über obscure del tag. Code example: Terminate me. Live example: Terminate me.
- Obscure XHTML Tags
- Well, maybe not that obscure.. -- Preformatted character data -- Renders as emphasized text -- Renders as strong emphasized text -- Renders font as teletype or monospace -- Defines a definition term -- Defines computer code text -- Defines sample computer code -- Defines keyboard text -- Defines a variable -- Defines a citation -- XHTML Transitional only -- Indicates deleted text -- Indicates inserted text -- Defines a definition list -- Defines a definition term -- ...