Textboxen 02
    
HOME		 HTML/CSS-Code ZURÜCK SITEMAP  

 Textboxen formatieren mit CSS - Bsp. 2

Hier sehen sie 2 nebeneinander angeordnete Textbereiche, ähnlich einer zweispaltigen Anzeige. Es handelt sich um formatierte Textboxen, nicht um eine Anzeige in einer zweispaltigen Tabelle!

 21.03.2008, CSS-Anweisungen nun mit <span>-Tags statt <div>-Tags

Vorteil gegenüber dem Beispiel 1: Obwohl es geringe Unterschiede in der Darstellung (FF/IE) gibt, wird hier das Seitenlayout nicht in Bezug auf die Breite gesprengt, wie es beim Bsp. durch Padding-Angaben geschehen kann 01 (siehe Browser-Bug im Beispiel 01).

  Umsetzung

Die Anordnung / Position der beiden Boxen, ist an einer (Gesamt-)Inhaltsbox orientiert. Der Rahmen dieser Box habe ich zur Demo hier angezeigt. Die Textboxen sind ebenso zur Demo farblich hinterlegt.

Es wurden CSS-Angaben für die eigene Klasse 'spalten' (Gesamtbox) festgelegt und 2 weitere Unterklassen 'erster' (linker Block) und 'zweiter' (rechter Block) notiert.
  • Die Breite der Gesamtbox ist hier mit 520 Pixel festgelegt.

  • Die Formatierung für den Rand der Gesamtbox können sie ja ändern (Type, Farbe, Breite) oder abschalten (Breite auf 0 setzen). Für den inneren Abstand können sie statt '10px' auf '0px' setzen (padding).

  • Den Abstand der Textboxen (Zwischenraum 4%) erreiche ich durch die Breitenangaben von 48%. So wird nicht der gesamte Anzeigebereich ausgefüllt.

  • Die Ausrichtung der Textboxen erreiche durch die Angabe 'float'. Für die linke habe ich 'left', für die rechte 'right' festgelegt.

  • Zusätzlich vorgesehen: Separate Textformatierung für die Darstellung innerhalb der Boxen. So kann der Spaltentext nicht nur unterschiedlich sondern auch unabhängig vom übrigen Seitentext formatiert werden.


Demo mit Rand und Hintergrundfarbe!

Vorteilhaft wenngleich gewöhnen ist, wie glauben dass wie wenn glauben vorhandene wiewohl gratulieren Stromleitungen wobei gratulieren genutzt wohingegen grenzen werden zumal haben können, halten also aber heiraten keine allein helfen neuen als helfen Kabel anstatt interessieren verlegt ausser kümmern werden beziehungsweise misslingen müssen. Die als ob teilnehmen Regulierungsbehörde anstatt dass träumen für ausser dass unterhalten Telekommunikation ausser wenn warten und bevor verlieben Post Vorteilhaft wenngleich gewöhnen ist, wie glauben dass wie wenn glauben vorhandene wiewohl gratulieren Stromleitungen wobei gratulieren genutzt wohingegen grenzen werden zumal haben können, halten also aber heiraten keine allein helfen neuen als helfen Kabel anstatt interessieren verlegt ausser kümmern werden beziehungsweise misslingen müssen.




  CSS-Notierung im HEAD-Bereich 

<style type="text/css">
<!--

#spalten {
width:520px;
margin-left:auto;
margin-right:auto;
border:1px solid #9F9F9F;
display:block;
overflow:auto;
font:12px Arial,serif;
padding:10px;}

#spalten .erster {
float:left;
width:48%;
background-color:#FFF0FF;
}

#spalten .zweiter {
float:right;
width:48%;
background-color:#ECFFF1;
}

-->
</style>





  Einbindung der Textblöcke + HTML-Tags

<span id="spalten">

<span class="erster">Vorteilhaft wenngleich gewöhnen ist, wie glauben dass wie wenn glauben vorhandene wiewohl gratulieren Stromleitungen wobei gratulieren genutzt wohingegen grenzen werden zumal haben können, halten also aber heiraten keine allein helfen neuen als helfen Kabel anstatt interessieren verlegt ausser kümmern werden beziehungsweise misslingen müssen. Die als ob teilnehmen Regulierungsbehörde anstatt dass träumen für ausser dass unterhalten Telekommunikation ausser wenn warten und bevor verlieben Post</span>

<span class="zweiter">Vorteilhaft wenngleich gewöhnen ist, wie glauben dass wie wenn glauben vorhandene wiewohl gratulieren Stromleitungen wobei gratulieren genutzt wohingegen grenzen werden zumal haben können, halten also aber heiraten keine allein helfen neuen als helfen Kabel anstatt interessieren verlegt ausser kümmern werden beziehungsweise misslingen müssen.</p>

</span>

NACH OBEN