CSS Anwendungen und Tipps
Elemente positionieren
Elemente positionierenDruck-Layout (Print-Layout) mit CSS3
CSS3 Print-LayoutWortumbruch
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
