Text* Snippets: css code

Never been to TextSnippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world (or not, you can keep them private!)

« Newer Snippets

Older Snippets »

Showing 21-40 of 44 total

Center something vert. and horz. in a web page using CSS

Here's how to center anything vertically and horizontally in a web page using CSS. Works with most all browsers that support CSS.

I adapted this from Jak psåt web, thanks!

<html>
        <head>
                <title>Center w/ CSStitle>
                
        
        
                "outer">
                        "middle">
                                "inner">
                                        your stuff here in center of page

to css html by danb on Aug 30, 2006

Ticked-off visited links

#sidebar ul {
list-style-type: none;
padding: 3px;
}

#sidebar li a {
display: block;
line-height: 150%;
width: 239px;
background: URL(ticks_grey.gif);
text-decoration: none;
}

#sidebar li a:link, a:active {
color: #666;
}

#sidebar li a:hover {
color: #F33;
background-position: 0 -20px;
}

#sidebar li a:visited {
background-position: 0 -40px;
}

to css by Brutal on Aug 16, 2006

Reset Browser Styles

// Put this these rules at the top of your CSS file and it will reset the default settings across all browsers to render the same. It's a great starting point for any new design.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0; padding:0;}
table {border-collapse:collapse; border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
q:before,q:after {content:'';}

to css by Brutal on Aug 16, 2006 2 Comments

Undo HTML

:link,:visited {
text-decoration: none; 
}
 
ul,ol {
list-style: none;
}
 
h1,h2,h3,h4,h5,h6,pre,code {
font-size: 1em;
}

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {
margin: 0;
padding: 0;
}

a img,:link img,:visited img {
border: none;
}
 
address {
font-style: normal;
}

to css by Brutal on Aug 16, 2006

Get CSS Rule w/ Selector

// gets the rule for a specific CSS selector

getRule: function(selector) {
  var mysheet = document.styleSheets[0];
  var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
  for (i = 0; i < myrules.length; i++)
    if (myrules[i].selectorText.toLowerCase() == selector)
      return myrules[i];
  return;
}

to css javascript utility by winton on Jul 22, 2006

Clear Floats Without Structural Markup

This should allow you to clear floats in css, without adding extra elements. Add class="clearfix" to elements that need to be cleared. This should work in IE7 as well.

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */

to css browser-hacks by rschroed on Jul 18, 2006

appendInputTypeClasses() - IE attribute selectors for form inputs

(Stolen from Jeremy Keith and Dustin Diaz: http://domscripting.com/blog/display/38).

Unobtrusive script takes a form inputs type attribute and copies it to that input's class. So, you go from...

<input type="text" />

...to...

<input type="text" class="text" />

Basically allows attribute selectors for form until IE catches up.

/*
        form.js
        AUTH: Austin Govella ([email protected])
        DATE: 2006-07-01
        DESC: Includes form specific javascripts.
        NOTE: Stolen from Jeremy Keith and Dustin Diaz: http://domscripting.com/blog/display/38
        REVS:  
*/



function appendInputTypeClasses()
{       /* adds input type as the inputs class */
        if ( !document.getElementsByTagName ) return;

        var inputs = document.getElementsByTagName('input');
        var inputLen = inputs.length;
        for ( i=0; i < inputLen; i++ )
        {
                if ( inputs[i].getAttribute('type') )
                {
                        inputs[i].className += ' '+inputs[i].getAttribute('type');
                }
        }
}

to css javascript forms attribute selectors inputs by agovella on Jul 01, 2006

Baseline CSS FINAL - 2006-07-01

Resets CSS so all browsers are the same, and sets a cross-browser base font size (verdana 13px)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
cite,code,em,strong,th{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
th{text-align:left;}
h1,h2,h3,h4{font-size:100%;}
q:before,q:after{content:'';}
body{font:13px verdana,sans-serif;*font-size:small;*font:x-small;}
table{font-size:inherit;font:100%;}
select,input,textarea{font:99% verdana,sans-serif;}
pre,code{font:115% monospace;*font-size:100%;}
body*{line-height:1.22em;}

to css reset final base by agovella on Jul 01, 2006

Baseline CSS - 2006-07-01

Base font-sizing added to base.css

/*
        Reset default styles // base.css
        AUTH: Austin Govella (austin.govella@gmail.com)
        DATE: 2006-05-11
        DESC: Resets default styles for all browsers (merges Tantek Celik's undohtml.css and Yahoo's reset.css), and
              sets base font size to 13px verdana (based on Y!'s fonts.css).
        NOTE: Included in main.css w/ @import
        REVS: 2006-05-12 - Removed elements not commonly used - ACG
              2006-07-01 - Added base font sizing - ACG 
*/



/* Reset default styles across browsers
---------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
cite,code,em,strong,th{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
th{text-align:left;}
h1,h2,h3,h4{font-size:100%;}
q:before,q:after{content:'';}



/* Set uniform base font size
---------------------------------------- */
body{font:13px verdana,sans-serif;*font-size:small;*font:x-small;}
table{font-size:inherit;font:100%;}
select,input,textarea{font:99% verdana,sans-serif;}
pre,code{font:115% monospace;*font-size:100%;}
body * {line-height:1.22em;}

to css reset base by agovella on Jul 01, 2006

css hack to enable dashed borders + scrolling in win IE

// win IE renders dashed borders as you scroll the page, thus corrupting the dashed style,
// adding a null background forces IE to render the dashes correctly.

body { background : url(null) fixed no-repeat; }

to css border hack by jprado on Jun 28, 2006

Смена класса элемента

function change(id, newClass) {
     identity=document.getElementById(id);
     identity.className=newClass;
}

to css dom by xtrim on Jun 14, 2006

Disable Shift+Click selection in browsers

I wanted the table to allow the user to select a range of rows with a Shift+Click… The problem is that, by default, the browser will select the page’s text content. This isn’t something you’ll want to do very often but it is possible to get around this:


Firefox can do this from your CSS:

table {

    -moz-user-select: none;
}
On the table element IE needs:

the_table_node.onselectstart = function () {

    return false;
};

to css firefox ie by metafeather on May 23, 2006

CSS for printing Instiki pages with @media rule

Insert in your Stylesheet tweaks to get black---instead of gray--text when pages are printed.

@media print {
    body {
        color: black;
        background-color: white;
        font-size: 10pt;
    }

    h1, h2, h3, h4, h5, h6 {
        color: black;
    }

    a, a:link, a:active, a:visited {
        color: black;
        border-bottom: thin dotted;
        text-decoration: none;
    }

 h1#pageName, .newWikiWord a, a.existingWikiWord, .newWikiWord a:hover, #TextileHelp h3 { 
      color: black; 
    }
}

to css instiki by madams on May 13, 2006

Baseline CSS FINAL - 2006-05-12

CSS to remove default spacing and presentation formatting. Provides a consistent blank slate across all browsers.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
cite,code,em,strong,th{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
th{text-align:left;}
h1,h2,h3,h4{font-size:100%;}
q:before,q:after{content:'';}

349 bytes

to css reset final by agovella on May 12, 2006

Baseline CSS - 2006-05-12

Slightly reduced version of baseline css. Removies elements that don't usually occur in web development.

/*
        Reset default styles // base.css
        AUTH: Austin Govella (austin.govella@gmail.com)
        DATE: 2006-05-11
        DESC: Resets default styles for all browsers. Merges Tantek Celik's undohtml.css and Yahoo's reset.css
        NOTE: Included in main.css w/ @import
        REVS: Removed elements not commonly used - ACG - 2006-05-12
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
cite,code,em,strong,th{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
th{text-align:left;}
h1,h2,h3,h4{font-size:100%;}
q:before,q:after{content:'';}

668 bytes

to css reset by agovella on May 12, 2006

Baseline css - remove default browser styles

/*
        Reset default styles // base.css
        AUTH: Austin Govella (austin.govella@gmail.com)
        DATE: 2006-05-11
        DESC: Resets default styles for all browsers. Merges Tantek Celik's undohtml.css and Yahoo's reset.css
        NOTE: Included in main.css w/ @import
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}

650 bytes

to css reset by agovella on May 11, 2006

p a {
     background-color:blue
}

p > a{
     background-color:red
}

In IE we will see a blue red link.

to css by soul on Aug 20, 2005