CSS Anwendungen und Tipps

Elemente positionieren

Elemente positionieren

Druck-Layout (Print-Layout) mit CSS3

CSS3 Print-Layout

Wortumbruch

Damit lange Wörter auch zwischen drinnen umgebrochen werden können (z.B. lange E-Mail-Adresse):
	word-wrap:break-word;

Cross-Browser-Word-Wrap

	.word_wrap
	{
		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+ */
	}

Blurry (Schatten) Text

	.blur {
	   color: rgba(0,0,0,0);
	   text-shadow: 0 0 5px rgba(0,0,0,0.5);
	}

Stitched (gestickt) Rand

Quelle css-tricks.com
	.stitched {
	   padding: 5px 10px;
	   margin: 10px;
	   background: #ff0030;
	   color: #fff;
	   font-size: 21px;
	   font-weight: bold;
	   line-height: 1.3em;
	   border: 2px dashed #fff;
	   border-top-left-radius: 3px;
	   border-bottom-left-radius: 3px 3px;
	   -moz-border-radius-topleft: 3px;
	   -webkit-border-top-left-radius: 3px;
	   border-bottom-right-radius: 3px;
	   -moz-border-radius-bottomright: 3px;
	   -webkit-border-bottom-right-radius: 3px;
	   border-top-right-radius: 3px;
	   -moz-border-radius-topright: 3px;
	   -webkit-border-top-right-radius: 3px;
	   -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
	   -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
	   box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
	   text-shadow: -1px -1px #aa3030;
	   font-weight: normal;
	}

Clearing with .clearfix

HTML

	<ul id="wrapper" class="clearfix">
		<li class="floatleft">...</li>
		<li class="floatleft">...</li>
	</ul>

CSS

	.clearfix:after {
		content: '.';
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
	}
	<!--[if IE7]>
	.clearfix {
		min-height: 1px;
	}
	<![endif]-->
	<!--[if IE6]>
	.clearfix {
		height: 1%;
	}
	<![endif]-->

Clearing with overflow:auto

Ich bevorzuge immer noch die .clearfix-Variante, aber das ist auch eine bekannte Methode, die allerdings nicht in allen Fällen korrekt funktioniert und von der Eigenschaft her so natürlich nicht gedacht war...

HTML

	<ul id="wrapper" class="clear">
		<li class="floatleft">...</li>
		<li class="floatleft">...</li>
	</ul>

CSS

	.clear {
		overflow: auto;
	}

Komplett-HTML-Beispiel

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Clearing-Test</title>
	
	<style>
		.floatleft {
			width: 33%;
			float: left;
		}
		.red {
			background-color: red;
		}
		.green {
			background-color: green;
		}
		.blue {
			background-color: blue;
		}
		.yellow {
			background-color: yellow;
		}
		.gray {
			background-color: gray;
		}
		.clear {
			/* lets see, if this will do the trick */
			overflow: auto;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="clear gray">
			<div class="floatleft red">
				LINKS
			</div>
			<div class="floatleft green">
				MITTE
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
				<br />
			</div>
			<div class="floatleft blue">
				RECHTS
			</div>
		</div>
		<div class="footer yellow">
			FOOTER
		</div>
	</div>
</body>
</html>

Wiki-Datei des Artikels herunterladen