snipt

Ctrl+h for KB shortcuts

CSS

Hide text with text indent

1
2
3
4
5
6
h1 {  
   text-indent:-9999px;/*Hide Text, keep for SEO*/  
   margin:0 auto;  
   width:948px;  
   background:transparent url("images/header.jpg") no-repeat scroll;  
}  
https://snipt.net/embed/5a64e4bea58588cbd2e170100faaf060/
/raw/5a64e4bea58588cbd2e170100faaf060/
5a64e4bea58588cbd2e170100faaf060
css
CSS
6
2019-07-18T23:18:17
True
False
False
/api/public/snipt/2228/
hide-text-with-text-indent-1
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">h1</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="nb">text-indent</span><span class="o">:-</span><span class="m">9999px</span><span class="p">;</span><span class="c">/*Hide Text, keep for SEO*/</span> </span><span id="L-3"><a name="L-3"></a> <span class="nb">margin</span><span class="o">:</span><span class="m">0</span> <span class="nb">auto</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="nb">width</span><span class="o">:</span><span class="m">948px</span><span class="p">;</span> </span><span id="L-5"><a name="L-5"></a> <span class="nb">background</span><span class="o">:</span><span class="nb">transparent</span> <span class="sx">url(&quot;images/header.jpg&quot;)</span> <span class="nb">no-repeat</span> <span class="nb">scroll</span><span class="p">;</span> </span><span id="L-6"><a name="L-6"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
css, h1, hide, seo

CSS

Hide text with text indent

1
2
3
h1 {
text-indent:-9999px;/*Hide Text, keep for SEO*/
}
https://snipt.net/embed/27945ca59168feda58e3b58747a5a596/
/raw/27945ca59168feda58e3b58747a5a596/
27945ca59168feda58e3b58747a5a596
css
CSS
3
2019-07-15T02:01:59
True
False
False
/api/public/snipt/1963/
hide-text-with-text-indent
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">h1</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a><span class="nb">text-indent</span><span class="o">:-</span><span class="m">9999px</span><span class="p">;</span><span class="c">/*Hide Text, keep for SEO*/</span> </span><span id="L-3"><a name="L-3"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
css, hacks

CSS

Minimum Height in all browsers

1
2
3
4
5
#yourId {
min-height:300px;
height:auto !important;
height:300px;/*Needs to match the min height pixels above*/
}
https://snipt.net/embed/4580e9f717450db762faafec66101a22/
/raw/4580e9f717450db762faafec66101a22/
4580e9f717450db762faafec66101a22
css
CSS
5
2019-07-17T02:25:02
True
False
False
/api/public/snipt/1962/
minimum-height-in-all-browsers
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nn">#yourId</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a><span class="nb">min-height</span><span class="o">:</span><span class="m">300px</span><span class="p">;</span> </span><span id="L-3"><a name="L-3"></a><span class="nb">height</span><span class="o">:</span><span class="nb">auto</span> <span class="cp">!important</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a><span class="nb">height</span><span class="o">:</span><span class="m">300px</span><span class="p">;</span><span class="c">/*Needs to match the min height pixels above*/</span> </span><span id="L-5"><a name="L-5"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
css, hacks

CSS

Transparent css *all browsers

1
2
3
4
5
6
.transparent {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}
https://snipt.net/embed/1f5a35989ba54ffaeffb165ee25ea46c/
/raw/1f5a35989ba54ffaeffb165ee25ea46c/
1f5a35989ba54ffaeffb165ee25ea46c
css
CSS
6
2019-07-19T08:48:16
True
False
False
/api/public/snipt/1948/
transparent-css-all-browsers-1
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nc">.transparent</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="n">filter</span><span class="o">:</span><span class="n">alpha</span><span class="p">(</span><span class="nb">opacity</span><span class="o">=</span><span class="m">50</span><span class="p">);</span> </span><span id="L-3"><a name="L-3"></a> <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="nb">opacity</span><span class="o">:</span><span class="m">0</span><span class="o">.</span><span class="m">5</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="o">-</span><span class="n">khtml</span><span class="o">-</span><span class="nb">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">5</span><span class="p">;</span> </span><span id="L-5"><a name="L-5"></a> <span class="nb">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">5</span><span class="p">;</span> </span><span id="L-6"><a name="L-6"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
css, transparent

CSS

nav background image

url(images/nav/nav_bg.gif) repeat-x bottom left;
https://snipt.net/embed/09aba49d2ef26a01867e97fdea9cd242/
/raw/09aba49d2ef26a01867e97fdea9cd242/
09aba49d2ef26a01867e97fdea9cd242
css
CSS
1
2019-07-19T06:58:48
True
False
False
/api/public/snipt/1939/
nav-background-image
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">url</span><span class="o">(</span><span class="nt">images</span><span class="o">/</span><span class="nt">nav</span><span class="o">/</span><span class="nt">nav_bg</span><span class="nc">.gif</span><span class="o">)</span> <span class="nt">repeat-x</span> <span class="nt">bottom</span> <span class="nt">left</span><span class="o">;</span> </span></pre></div> </td></tr></table>
css, image, nav