Glotzfisch.de » CSS

Content Wrapper to avoid wrong clearing

Gabi — Tue, 10 Mar 2009 16:46:51 +0000

to avoid long empty spaces when clearing a float environment, wrap the content into a div with the following properties:

.wrapper {
   position:relative;
   overflow: hidden;
 }

CSS > Transparent Background

Gabi — Sat, 20 Sep 2008 06:43:30 +0000

filter: alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;

Toggle Visibility und co

Gabi — Sun, 18 Nov 2007 22:13:59 +0000

in fact, it’s toggle display here. The difference is that visibility reserves the space on the page but just does not display the text there and display really collapses the text to the remaining parts.

JavaScript Function:

HTML Source Code

(in a loop with $i)

 ".Toggle!."
 ".Some hidden Text."

CSS Definition

 .hiddenbox {
       position:absolute;
       display:inline;
       display:none;
       width:200px;
 }

Move a block to another position

how to move a div box with JavaScript (das kann man natuerlich noch beliebig verfeinern, see also: http://www.html-world.de/program/dhtml_3.php.):

  onClick = "document.getElementById(element).style.top=600+'px';"

BrowserTipps

Gabi — Tue, 25 Sep 2007 21:19:53 +0000

Verschiedene Browser, verschiedene Sorgen… das Leben als Pixelschubse ist schon manchmal nicht so einfach. Dank des genialen Buchs “CSS Layouts” von Dirk Jesse, das ich an dieser Stelle nochmal erwähnen möchte, bin ich nun um einige Hacks schlauer ;-)

Das Sorgenkind: IE

Auch hierfür gibt es Hilfsmittel. z.B. die Web Developer Toolbar von MS

Naja… Safari

macht alles anders, koennte man sagen. Und macht mir vor allem Probleme beim mod-rewrite, das ich bei der Copyright Message benutze…

Der Standard: FF

sollte ja allgemein bekannt sein, aber der Vollständigkeit halber: Web Developer Toolbar für FF

Marking External Links

Gabi — Wed, 24 Jan 2007 22:20:28 +0000

External Links können – falls gewünscht – mit einem kleinen Bildchen versehen werden, damit der User sieht, dass es sich hierbei um einen externen link handelt

das hat sicher wieder was mit regexp zu tun, gell Stefan?

  #main a[href^="http:"], #main a[href^="https:"]
  {
	padding-left: 12px;
	background-image: url('/images/ext_link.gif');
	background-repeat: no-repeat;
	background-position: left;
  }