 Textboxen formatieren mit CSS - Bsp. 01
 26.10.2006 Darstellung des Browser-Bugs
Hier sehen sie 3 mit CSS formatierte und positionierte Textboxen, keine Tabellen!
Die Anordnung / Position jeder einzelnen Box, ist am Dokumentanfang orientiert: oberer Rand (top) und linker Rand (left).
Formatierungen für den Rand wurden definiert (Type, Farbe, Breite) und der Innenabstand (padding) festgelegt. Zusätzlich: Textformatierung
Unterschiedliche Darstellung, Browser-Bug
Grund: FF addiert die Padding-Angaben von 2 X 8 Pixel (je Box), IE betrachtet die Padding-Angaben als inklusive der Breite. Screenshot:
CSS-Notierung im HEAD-Bereich
Für Box 1 wurde festgelegt:
<style type="text/css">
<!--
.box01 {
position:absolute; top:300px; left:20px;
color:#000000;
text-decoration:none ;
font-family:Verdana,Arial,Helvetica;
font-size: 10px;
background: #FFFFFF;
line-height : 100.01%;
text-align: justify;
border: 1px solid #CCCCDD;
width:160px;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom:0px;
}
/* hier folgen die Definitionen für .box2 + .box3 */
-->
</style>
Positionierung
Für Box 2 + 3 wurden lediglich die Werte geändert.
position:absolute; top:xxxpx; left:xxpx;
Kurzschreibform
Für identischen Ramen wurde zusammengefasst notiert:
border: 1px solid #CCCCDD;"
Stattdessen kann man auch differenzieren (unterschiedliche Angaben für die Ränder):
1. Schreibweise
border: #CCCCDD;
border-style: solid;
border-top-width: 1px;
border-right-width: 3px;
border-bottom-width: 3px;
border-left-width: 1px;
Stattdessen kann man auch differenzieren (unterschiedliche Angaben für die Ränder):
2. Schreibweise
border-top:1px solid #FFFFFF;
border-right: 3px solid #CFCFCF;
border-bottom: 3px solid #CFCFCF;
border-left: 1px solid #FFFFFF;
Einbindung der Klassen für die Textblöcke
<span class="box01">Box 1<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>
<span class="box02">Box 2<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>
<span class="box03">Box 3<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>
Möglich wäre auch:
<div class="box04">Box 4<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
Unterschied: <div> generiert einen Zeilenumbruch wie bei <p>
Box 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Box 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Box 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
HOME
HTML/CSS-Code 
ZURÜCK